Orbit Hero

Orbit Hero - A wheel of images that turns and grows as you scroll

Images that turn as you scroll

Orbit Hero pins your hero section while a ring of images turns and expands behind the headline, then releases it into the rest of the page. When the page sits still the wheel keeps drifting on its own; scrolling adds to the speed.

Everything is a property control — nothing is baked in.

IMAGES

Up to 30, spaced evenly however many you add. Each takes its own link, scale, ratio, tilt and offset. JPG, PNG, WebP, AVIF, SVG and GIF all work, and numbered placeholders stand in until yours are ready.

MOTION

Set how long the hero pins, how far the wheel spins across it, how fast it drifts, and how much the images grow with the ring. Smooth it with a spring, or turn the pin off and let it animate as the section passes.

LAYOUT

Ring Size scales the whole wheel with one number. Radius, spread, start angle, spacing and tilt are all adjustable — a true circle or a wide ellipse, cards upright or bolted to the rim. A bottom shadow sinks the ring into the section floor.

CONTENT

Eyebrow, headline with a second-colour accent, description and button, each with its own font, colour and on/off switch. Two placeholder sections above and below let you preview the scroll before your own content is ready.

RESPONSIVE

Desktop, tablet and phone each get their own radius, spread and card size, resolved from the component's own width rather than a media query, so it adapts wherever you place it.

BUILT WITH CARE

The pin is a transform, not position:sticky, so it holds inside clipped and transformed layouts. Eighteen cards turning still hold 60fps. Reduced-motion is respected, and the canvas freezes on a preview frame so you can design against any point of it.

Tags: hero, scroll animation, sticky hero, pinned section, parallax, image ring, circular gallery, carousel, showcase, portfolio, agency, ecommerce, landing page, interactive, animated hero, scroll effect