Orbital

Orbital Hero turns your photos into a 3D sphere that floats around your headline. It drifts on its own, leans toward the cursor and can be dragged and thrown. As visitors scroll, the sphere spins and zooms, then every photo flies into a tidy masonry board before the next section.

Made for moodboard, portfolio, photography, interior and creative-tool sites.

What's inside

• Up to 200 rounded photo tiles from up to 80 of your own images

• Pinned scroll story: spin and zoom, then a board-wall finale with a title card (can be turned off)

• Drag to spin with inertia, hover lift and a soft sheen as tiles turn

• Headline with rotating phrases and a small image chip, body text and a button with a link

• Your own colors and fonts, H1 or H2 heading tag

• Controls for tile count, tile size, spread, drift, scroll spin, scroll zoom and tilt

• Works on phones, pauses off screen and respects reduced motion

• Plain React, no extra libraries

How to use

1. Add Orbital Hero to your page and set its width to Fill.

2. Set the height to about 260vh for the full scroll story, or 100vh for the sphere only.

3. Keep the page breakpoint's overflow set to Visible so the pinned scroll works.

4. Add your images, copy and colors in the right panel.

Motion plays in Preview and on the published site, not on the canvas.