Loading hero…

@crazygl/orrery

Mechanical Orrery

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

React

WebGL

Interactive

Font

#orbit

#orrery

#mechanical

#brass

#premium

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.

01 · Install the package

One command, zero config.

npm install @crazygl/hero-orrery

02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx

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

export default function Landing() {
  return (
    <MechanicalOrrery />
  );
}

03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx

// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <MechanicalOrrery
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}

Similar heroes

Live customizer