Docs
Screensaver

Screensaver

A component that animates its child with the infamous screensaver effect.

page not found

Example 1
Example 2
Example 3
Example 4
Example 5
Example 6
Example 7
Example 8
Example 9
Example 10
Example 11
Example 12
Example 13
Example 14
Example 15
Example 16

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


PropTypeDefaultDescription
children*React.ReactNode-The content to be displayed
containerRef*React.RefObject<HTMLElement>-Reference to the container for the screensaver
speednumber3Speed of the animation in pixels per second
startPosition{ x: number; y: number }{ x: 0, y: 0 }Starting position of the element
startAnglenumber45Starting angle of the element in degrees
classNamestring-Additional CSS classes for styling