An image or a video on a gently curved 3D screen, built from thin strips, that leans toward the pointer.
pnpm dlx shadcn@latest add @latheui/curved-screenPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Curved Screen is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native div attributes. The screen takes 86% of the container's width.
| Prop | Type | Default | Description |
|---|---|---|---|
| src* (required) | string | — | An image or a video. Same-origin or CORS-enabled, so it can be drawn. |
| alt* (required) | string | — | Describes what is on the screen. |
| video | boolean | from the extension | Treat src as a video. |
| poster | string | — | Shown before a video plays. |
| curvature | number | 64 | Degrees of arc the screen bends through. 0 is flat. |
| aspect | number | 16 / 9 | Width divided by height. The source is cropped to fill it. |
| strips | number | 32 | Vertical strips the curve is built from. |
| tilt | number | 5 | Degrees the screen leans toward the pointer. |
| reflection | boolean | true | A faint reflection under the screen. |
| autoPlay | boolean | true | Video: start playing, muted and looping. |
| perspective | number | 900 | Camera distance in px. Closer exaggerates the curve. |
| viewAngle | number | 7 | Degrees the camera looks down on the screen, so the top and bottom edges show the arc. 0 is head on. |
| edgeShade | number | 0.32 | How much darker the edges are than the middle, from 0 to 1. |
<CurvedScreen src="/landscape.jpg" alt="The valley" aspect={21 / 9} curvature={80} strips={48} />