---
title: "Orbit Hero — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Nirav Jivani · Sections. 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."
canonical: "https://framer.elliotli.dev/component/orbit-hero"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Orbit Hero

# Orbit Hero

Images that turn as you scroll

[View on Framer](https://framer.com/marketplace/components/orbit-hero/?via=elliot-li)

![Orbit Hero preview image 1](https://framer.elliotli.dev/og/component/orbit-hero/ab482ebbed98d20a/1600x1003.jpg)

## Summary

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.

## Description

## **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

## Rank history [How rankings work →](/terms#rankings)

-   All · #7100

## Details

- **Author**: Nirav Jivani
- **Price**: $10.00
- **Published**: 2026-09-10
- **Updated**: 2026-09-11
- **Added**: 2026-09-10
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes