AnimationsNew
Screensaver
An element flies around a box and bounces off the walls, like the old DVD logo.
Customize
color
accentColor
highlightColor
Based on Screensaver (MIT license) · Terms of use
More in Pro
View allProps
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| speed | number | 3 | Speed, in pixels per frame. |
| startAngle | number | 45 | Starting direction, in degrees. |
| startPosition | { x: number; y: number } | "{ x: 0, y: 0 }" | Start point as a percent of the container. |
| containerRef | RefObject<HTMLElement | null> | — | Ref to the box whose walls the element bounces off. |
| children | ReactNode | — | What flies around: a logo, an image, a badge. |
| color | string | "#ffffff" | Main colour. Children read it as var(--screensaver-c1). |
| accentColor | string | "#a3a3a3" | Second colour. Children read it as var(--screensaver-c2). |
| highlightColor | string | "#ffffff" | Light highlight colour. Children read it as var(--screensaver-c3). |
| className | string | — | Classes for the flying element. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge