PRO

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.

Component

( Intro )

( Outro )

Install
npx shadcn@latest add https://ui.aryank.space/r/curved-letter-path-scroll.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
lettersstring[]W, O, R, KOne character per curve. Each row repeats its character fifteen times along the path.
imagesstring[]Seven Blob-hosted cardsCards painted into the curved strip's texture atlas.
accentstring#f40c3fLetter, dot grid, and surrounding page color.
embeddedbooleantrueOwn the scroll container so it fits a bounded box. Set false to drive it from the window scroll.
Customize
letterstext

One character per travelling row.

accentcolor

Letter color, dot grid color, and page color.

Dependencies
gsaplenisthree