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 https://ui.aryank.space/r/curved-letter-path-scroll.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| 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