Docs
→Screensaver
Screensaver
A component that animates its child with the infamous screensaver effect.
page not found
Installation
npx shadcn@latest add "https://fancycomponents.dev/r/screensaver.json"
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.
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 |