Docs
→Blocks
→Screensaver
Screensaver
A component that animates its child with the infamous screensaver effect.
Loading...
Installation
1pnpm dlx shadcn add @fancy/screensaver
Usage
Just wrap your content with the component, and the animation will take care of the rest. You also need to pass a container ref to the component — which will be used to constrain the screensaver component.
Credits
Ported to Framer by Achille Ernoult
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | React.ReactNode | - | The content to be displayed |
| containerRef* | React.RefObject<HTMLElement> | - | Reference to the container for the screensaver |
| speed | number | 3 | Speed of the animation in pixels per second |
| startPosition | { x: number; y: number } | { x: 0, y: 0 } | Starting position of the element |
| startAngle | number | 45 | Starting angle of the element in degrees |
| className | string | - | Additional CSS classes for styling |
