Curved Letter Path Scroll
Four rows of letters travelling along invisible 3D curves, over a card strip bent into a cylinder. The letters are real DOM elements: each frame their position is sampled from a CatmullRom curve, projected through the Three camera, and eased toward that screen coordinate, so they get true perspective while staying crisp text. Each row runs at its own speed, and a letter that wraps past the edge snaps rather than easing. The cards are painted into one offscreen canvas used as a texture on a plane whose vertices are displaced on a parabola.
npx shadcn@latest add @compronents/curved-letter-path-scrollInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| Prop | Type | Default | Description |
|---|---|---|---|
| letters | string[] | W, O, R, K | One character per curve. Each row repeats its character fifteen times along the path. |
| images | string[] | Seven Blob-hosted cards | Cards painted into the curved strip's texture atlas. |
| accent | string | #f40c3f | Letter, dot grid, and surrounding page color. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
letterstextOne character per travelling row.
accentcolorLetter color, dot grid color, and page color.
gsaplenisthree