Helix Ribbon
A scroll-driven cylindrical helix of images that curve, climb and rotate through the viewport — pure CSS 3D, no WebGL.
1.2k
copies
Image preview
About this component
Helix Ribbon lays your images along a cylindrical helix and drives the whole
strip with scroll. The ribbon rises into frame from below, coils past the
camera with each card turning to follow the curve, and climbs out through the
top — then plays exactly backwards when you scroll up.
Every card genuinely bends with the cylinder rather than sitting on it as a
flat rectangle, so the strip reads as one continuous curved surface instead of
a row of tiles. It is built entirely from CSS 3D transforms: no WebGL, no
canvas, and nothing to install — Framer already ships everything it needs.
The camera is matched to a real perspective camera rather than eyeballed, so
the scene scales with the viewport the way a 3D scene should, and depth fog
fades the far end of the coil into your background colour.
The strip is finite. It is exactly as long as your image list, with a real
first and last card, and the travel is solved from the geometry so the ribbon
sits fully below the frame at the start of the scroll and fully above it at
the end. Nothing is generated to pad it out and nothing repeats unless you ask.
Key features
True cylindrical helix — cards ride a parametric curve and are oriented
by a moving frame, so their edges stay welded together through the twist.
Images that bend — each card is cut into slices along the arc, so the
artwork curves with the cylinder instead of sitting flat across it.Fully scroll-scrubbed — nothing is a one-shot animation, so scrolling up
plays the exact inverse of scrolling down.Finite ribbon with real ends — as long as your image list, entering from
below the frame and exiting through the top. No filler, no repeats.Auto-solved entry and exit — travel and start position are derived from
the geometry, so the ends always clear the frame.Readable from behind — the far wall of the coil shows your artwork the
right way round, not mirrored.Hover zoom — cards scale and lift off the coil under the cursor, on a
time-based ease that leaves rest gently and settles back in.Per-card captions — optional, always on or on hover, scaling with the
scene rather than fixed in pixels.Per-card links — real anchors, so keyboard focus, right-click and
Framer's own page routing all work.Matched perspective camera — FOV and camera distance behave like a real
3D camera and recompute on resize.Depth fog — distant cards fade into your background colour.
Solid or gradient background, with a separate fog colour.
Respects
prefers-reduced-motion— falls back to a plain responsive grid.Designable on canvas — freeze the scroll at any moment to lay out around it.
API reference
API reference
Setup
Place the component on a page inside a normal (non-absolute) stack.
Layer setting | Value |
|---|---|
Width | Fill |
Height | Fixed, 8000 to start |
The layer's height is the scroll budget — taller means slower. position: sticky
needs a scrolling ancestor, so it must not sit in an absolutely-positioned frame.
Images
An array. Each entry has:
Field | Type | Description |
|---|---|---|
| ResponsiveImage | The artwork. |
| String | Optional label drawn on the card. |
| Link | Optional destination. Clicking the card navigates. |
Property | Type | Default | Range | Description |
|---|---|---|---|---|
| Number |
| 1–10 | How many times the list runs along the ribbon. |
Entry / exit
Property | Type | Default | Range | Description |
|---|---|---|---|---|
| Boolean |
| — | Auto solves Travel and Start so the strip begins fully below the frame and ends fully above it. Switch to Manual to set them by hand. |
| Number |
| 0.5–20 | Turns the ribbon slides along the curve across the scroll. Manual only. |
| Number |
| −10–10 | Turns to shift the strip back at scroll 0. Manual only. |
The coil
Property | Type | Default | Range | Description |
|---|---|---|---|---|
| Number |
| 0.5–12 | Cylinder radius, in world units. |
| Number |
| −12–12 | Vertical climb per full turn. Pitch minus Panel H is the visible gap between coils — raise it to stretch the spring open. |
| Number |
| 0.1–6 | Card width. |
| Number |
| 0.1–8 | Card height. For a given width, 16:9 is |
| Number |
| 0–3 | Space between cards along the arc. |
| Number |
| 1–24 | Slices each image is cut into along the arc. |
Camera
Property | Type | Default | Range | Description |
|---|---|---|---|---|
| Number |
| 2–40 | Camera distance. |
| Number |
| 10–110 | Vertical field of view, in degrees. |
| Number |
| −12–12 | Shifts the coil vertically in world space. |
| Number |
| −12–12 | Shifts the coil toward or away from the camera. |
Surface
Property | Type | Default | Description |
|---|---|---|---|
| Enum |
| What the far side of the coil shows. Readable repeats the artwork the right way round, Mirror reverses it, Hidden drops it. |
| Number |
| Hairline on each card edge, marking the joints. |
| Color |
| Seam colour. |
Hover
Property | Type | Default | Range | Description |
|---|---|---|---|---|
| Number |
| 1–1.6 | Scale a card grows to under the cursor. |
| Number |
| 0–2 | How far the hovered card rises off the cylinder, so it clears its neighbours. |
| Number |
| 0.05–2 | Seconds the zoom takes to reach full size, and to settle back. |
Captions
Property | Type | Default | Range | Description |
|---|---|---|---|---|
| Enum |
| — | Off, Always, or On hover. |
| Number |
| 0.03–0.3 | Text size as a share of card height, so it scales with the scene. |
| Color |
| — | Text colour. |
| Number |
| 0–1 | Dark fade behind the text for legibility over busy artwork. |
Links
Property | Type | Default | Description |
|---|---|---|---|
| Enum |
| Where a card's Link opens — Same tab or New tab. Set each destination in the Images list. |
Background and fog
Property | Type | Default | Range | Description |
|---|---|---|---|---|
| Enum |
| — | Solid or Gradient. |
| Color |
| — | Background colour, or the gradient's start. |
| Color |
| — | Gradient end. Gradient only. |
| Number |
| 0–360 | Gradient angle, in degrees. Gradient only. |
| Boolean |
| — | Fades distant cards into the fog colour. |
| Number |
| 0–0.3 | How quickly distance fades a card out. |
| Color |
| — | The colour distant cards fade into. Match it to whatever sits behind the coil, or the far end fades to the wrong shade. |
Scroll
Property | Type | Default | Range | Description |
|---|---|---|---|---|
| Number |
| 0–2 | Scroll lag. |
| Number |
| 0–1 | Which moment of the scroll to freeze on the Framer canvas. Has no effect on the published site. |
Performance — the biggest cost is curveSegments. Flat cards run at full
frame rate; 8 slices with readable back faces is roughly three times the work.
If it feels heavy, lower Curve first, then set Back face to Hidden.
Sizing the ribbon — the strip must span Travel plus the couple of turns
on screen, or it runs out before the scroll ends. Leave Entry/exit on Auto
and it is handled for you; raise Repeat if a short image list feels sparse.Accessibility — one link per card, not per slice, and
prefers-reduced-motionfalls back to a plain grid.
Details
Category
Gallery
Media
Image
Views
1.2k
Copies
Paste directly onto your Framer canvas.
