Inline Video
A muted, looping clip that fetches nothing until it nears the screen and plays only while it is in view. With reduced motion it does not autoplay and shows its controls instead.
Loading preview…
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| src | string | — | The clip. |
| poster | string | — | A still shown until it plays. |
| label | string | — | What the clip shows, for screen readers. |
| load | boolean | — | When it may start fetching. Unset, it decides as it nears the screen; set it for a clip inside its own scrolling area. |
| className | string | — | Classes for the root element. |