react-dvd-screensaver

react-dvd-screensaver

DVD-era nostalgia in React. Zero dependencies, fully typed, works on desktop and mobile, supports React 16 through 19.

Demo · Try on StackBlitz

pnpm add react-dvd-screensaver
# or
npm i react-dvd-screensaver

Usage

import { useDvdScreensaver } from 'react-dvd-screensaver';

function MyComponent() {
  const { containerRef, elementRef, impactCount } = useDvdScreensaver({ speed: 3 });

  return (
    <div ref={containerRef} style={{ position: 'relative', width: '100%', height: '400px' }}>
      <div ref={elementRef} style={{ position: 'absolute', top: 0, left: 0 }}>
        <MyLogo />
      </div>
    </div>
  );
}

The container element needs position: relative (or absolute / fixed) to establish a positioning context. The animated element needs position: absolute; top: 0; left: 0 as its starting point.

Options

Option	Type	Default	Description
speed	number	2	Speed of the animation in pixels per frame
freezeOnHover	boolean	false	Pause animation on mouse hover or touch
paused	boolean	false	Programmatically pause and resume the animation
impactCallback	(count: number) => void	—	Called on each boundary impact with total count
onCornerHit	() => void	—	Called when the element hits a corner (both axes at once)
hoverCallback	() => void	—	Called when hover or touch begins

Return values

Property	Type	Description
containerRef	RefObject	Attach to the container element
elementRef	RefObject	Attach to the element that should animate
hovered	boolean	Whether the element is currently hovered or touched
impactCount	number	Total number of boundary impacts

Examples

Change color on impact

const COLORS = ['#ff4081', '#7c4dff', '#00bcd4', '#69f0ae'];

function MyComponent() {
  const [color, setColor] = useState(COLORS[0]);

  const { containerRef, elementRef } = useDvdScreensaver({
    impactCallback: (count) => setColor(COLORS[count % COLORS.length]),
  });

  return (
    <div ref={containerRef} style={{ position: 'relative', width: '100%', height: '400px' }}>
      <div ref={elementRef} style={{ position: 'absolute', top: 0, left: 0 }}>
        <MyLogo fill={color} />
      </div>
    </div>
  );
}

Pause and resume

function MyComponent() {
  const [paused, setPaused] = useState(false);

  const { containerRef, elementRef } = useDvdScreensaver({ paused });

  return (
    <>
      <div ref={containerRef} style={{ position: 'relative', width: '100%', height: '400px' }}>
        <div ref={elementRef} style={{ position: 'absolute', top: 0, left: 0 }}>
          <MyLogo />
        </div>
      </div>
      <button onClick={() => setPaused((p) => !p)}>{paused ? 'Resume' : 'Pause'}</button>
    </>
  );
}

Corner hit detection

function MyComponent() {
  const { containerRef, elementRef } = useDvdScreensaver({
    onCornerHit: () => console.log('Corner!'),
  });

  // ...
}

Next.js App Router

Add the 'use client' directive. The hook is SSR-safe and will not cause hydration mismatches.

'use client';

import { useDvdScreensaver } from 'react-dvd-screensaver';

export default function ScreensaverPage() {
  const { containerRef, elementRef } = useDvdScreensaver({ speed: 3 });

  return (
    <div ref={containerRef} style={{ position: 'relative', width: '100%', height: '100vh' }}>
      <div ref={elementRef} style={{ position: 'absolute', top: 0, left: 0 }}>
        <MyLogo />
      </div>
    </div>
  );
}

License

MIT