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 @compronents/curved-letter-path-scroll

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files
Checking access…
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