Page Not Found

A beautiful, interactive bouncing screensaver component that mimics the classic DVD logo bouncing behavior, ideal for 404 pages.

The PageNotFound component creates a collision-bouncing container block. It takes any custom react element as children and floats/bounces it dynamically inside the container ref boundaries.

Preview

page not found

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

Usage

Installation

$ pnpm dlx shadcn add https://klarden.vercel.app/r/page-not-found.json

Basic Example

import React, { useRef } from "react";
import { PageNotFound } from "@/components/klarden-ui/page-not-found";

export default function App() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={containerRef}
      className="relative w-full h-[400px] border border-border rounded-xl bg-zinc-950 overflow-hidden"
    >
      <PageNotFound
        containerRef={containerRef}
        speed={3}
        startPosition={{ x: 10, y: 20 }}
        startAngle={45}
      >
        <div className="px-4 py-2 bg-rose-500 text-white rounded-lg font-bold">
          404 Not Found
        </div>
      </PageNotFound>
    </div>
  );
}

Properties

PropTypeDefaultDescription
containerRefReact.RefObject<HTMLElement | null>undefinedRef object pointing to the parent container bounding box that restricts the element's motion.
speednumber3The speed velocity of the bouncing element motion.
startPosition{ x: number; y: number }{ x: 0, y: 0 }Initial start coordinate offset positions inside the container boundary container in percentage values (0-100).
startAnglenumber45The initial motion trajectory angle in degrees.