Curved Plane Slider
A WebGL slider that wraps its images around a curved plane. Stills and titles are painted into a tall repeating canvas texture mapped onto a parabolic plane tilted in 3D; scrolling shifts the texture so the slides glide up the curve and loop seamlessly, framed by a fixed nav, footer, and vignette. Three.js with Lenis.
npx shadcn@latest add https://ui.aryank.space/r/curved-plane-slider.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 |
|---|---|---|---|
| images / titles | string[] / string[] | Seven BLANK stills and captions | Slide stills and the caption drawn over each. |
| brand / tagline / navLinks / experiment / copyright | string / string / [string, string] / string / string | BLANK chrome copy | Fixed nav and footer text around the slider. |
| embedded | boolean | true | Own the scroll container; set false to ride the window scroll. |
images / titlesasset-urlThe seven slide stills and their captions.
brand / tagline / navLinkstextFixed nav wordmark, tagline, and links.
experiment / copyrighttextFooter experiment label and copyright line.
threelenis