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

Source code

Hook for querying the dimensions of an element:

import { useState, useEffect, RefObject } from 'react';

interface Dimensions {
  width: number;
  height: number;
}

export function useDimensions(ref: RefObject<HTMLElement | SVGElement>): Dimensions {
  const [dimensions, setDimensions] = useState<Dimensions>({ width: 0, height: 0 });

  useEffect(() => {
    const updateDimensions = () => {
      if (ref.current) {
        const { width, height } = ref.current.getBoundingClientRect();
        setDimensions({ width, height });
      }
    };

    updateDimensions();
    window.addEventListener('resize', updateDimensions);

    return () => window.removeEventListener('resize', updateDimensions);
  }, [ref]);

  return dimensions;
}

Then copy and paste the following code into your project:

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