Orbit Hero

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.

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

Images that turn as you scroll