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 @compronents/curved-plane-sliderInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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