Poster Intro
A film-style poster that builds itself: layered art flies back from the camera by depth, the frame dollies out and the title wipes in with a spring.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/poster-introProps
| Prop | Type | Default | Description |
|---|---|---|---|
layers* | PosterLayer[] | - | The artwork as transparent images, back to front. Each fills the poster. |
title | string | - | Set as real text over the art; wipes in and sharpens last. |
kicker | string | - | Small line above the title. |
tagline | string | - | Line under the title, such as a date. |
credits | string | - | Billing-block small print along the bottom of the poster. |
duration | number | 3.6 | Length of the intro, in seconds. |
camera | number | 1.14 | How far the camera starts pushed in; 1 means no push. |
depth | number | 1 | Depth of the dolly: 0 flattens the layers, 1 is the full effect. |
aspectRatio | "1 / 1" | "4 / 5" | "3 / 4" | "16 / 9" | "4 / 5" | Shape of the poster. |
parallax | boolean | true | Layers drift with the pointer once the intro has played. |
loader | boolean | true | Show a loading bar while the layers download. |
grain | boolean | true | Film grain over the art. |
glowColor | string | "#c026d3" | Glow behind the poster and the colour of its shadow. |
titleColors | [string, string, string] | ["#ffe8a3", "#ff6fa5", "#8b5cf6"] | Three colours for the title's gradient, top to bottom. |
className | string | - | Extra classes for the section. |
