Browse components
Flying Posters
Posters fly through 3D space in a curving vertical stream you steer by scrolling or dragging inside the container.
Installation
npx shadcn@latest add @glint-ui/flying-postersFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/flying-posters.json
Usage
import { FlyingPosters } from "@/components/ui/flying-posters";
<div className="h-[32rem]">
<FlyingPosters images={posters} speed={0.35} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images | ReactNode | — | Array of image URLs. |
| speed | number | 0.35 | Idle drift in posters per second. |
| posterWidth | number | 200 | Poster width in px. |
| curve | number | 0.7 | How far the stream bends away. |
| sway | number | 160 | Horizontal scatter in px. |
| className | string | — | Extra classes for the root element. |