Hero made by @ybouane.

@crazygl/hero-orrery

Tilted-projection brass orrery — concentric orbit rings, planets at parametric positions, slow shadows. The cursor tilts the assembly.

Demo

Mechanical Orrery

Install

npm install @crazygl/hero-orrery

Usage

import MechanicalOrrery from '@crazygl/hero-orrery';

export default function Hero() {
	return (
		<MechanicalOrrery
			heading="Clockwork."
			orbitCount={5}
			tilt={0.5}
		/>
	);
}

Customise

• Content — heading + subheading, two columns, or a custom node.
• Brass — ringColor, planetColor, accentColor (sun + glints), orbitCount, tilt, ringThickness, speed, glow.
• Background — bgTop/bgBottom gradient or transparent.

Best for

• Astronomy and science museums; watchmakers and luxury timepieces.
• Fintech and analytics dashboards wanting a precise, mechanical signature.
• Editorial homepages needing an elegant cosmic centrepiece.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.