Helix Strip

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/helix-strip.tsx.

Install the pastetaste component "Helix Strip" (helix-strip) into this Next.js project and use it.

What it is: A ribbon of numbered cards winding up a cylinder: numerals on the near side, your images seen through the coil on the far side, scrolling endlessly. CSS 3D, no WebGL.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/helix-strip.json
   (it writes components/pastetaste/helix-strip.tsx; install any npm packages it reports: motion@^12.23.0).
2. Import it: import { HelixStrip } from "@/components/pastetaste/helix-strip" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- items: HelixItem[] = 8 plain plates — The things on the ribbon: label, plus an image or a custom back, and optionally a custom front. Numbers 1..n are printed on the numeral fronts.
- cards: number = 16 — Cards on the ribbon; rounded up to a multiple of items.length so the numbering loops without a seam.
- perTurn: number = 8 — Cards per full turn of the coil.
- reach: number = 6 — How many cards either side of the front card stay visible before they fade out; this sets how much of the coil you see.
- stack: number = 0.52 — Vertical step between neighbouring cards as a fraction of the card height; larger values stretch the coil.
- radius: number = 250 — Radius of the cylinder in px; card size follows from it and perTurn.
- aspect: number = 1.7 — Card width over height.
- autoplay: number = 0.35 — Drift speed in cards per second; 0 turns it off and hides the pause button.
- roll: number = -12 — Lean of the cylinder axis in degrees.
- pitch: number = 10 — Camera pitch in degrees.
- depth: number = 1500 — Perspective distance in px; smaller is more dramatic.
- wheel: boolean = false — Also turn the ribbon with the mouse wheel while the pointer is over it; the page still scrolls.
- onActiveChange: (index: number) => void — Called when the card in front changes, with its index into items.
- accent: string = var(--pt-accent, #ff4b2b) — Colour of the focus ring and the pause button focus.
- label: string = 'Numbered cards on a coil' — Accessible name of the carousel.
- className: string — Extra classes on the root.
- style: CSSProperties — Inline style overrides on the root; it needs a height from its parent or from this prop.

Live preview: https://pastetaste.com/c/helix-strip
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 17