Hero made by @ybouane.

@crazygl/hero-animated-404

Oversized 404 hero with the middle 0 swapped for an idle-orbiting glowing eye — the kind of error page people actually screenshot.

Demo

Animated 404

Install

npm install @crazygl/hero-animated-404

Usage

import Animated404 from '@crazygl/hero-animated-404';

export default function NotFound() {
  return (
    <Animated404
      errorCode="404"
      heading="Page not found"
      subheading="The thing you were looking for has been moved, deleted, or it never existed."
      ctaLabel="Take me home"
      ctaHref="/"
    />
  );
}

Customise

• Content — errorCode, heading, subheading, ctaLabel, ctaHref.
• Eye — irisColor, pupilColor, scleraColor, and eyeSensitivity (how far the eye follows the pointer).
• Typography — codeColor, textColor, headingFontFamily (Google font), headingFontWeight.
• Backdrop — transparentBackground, bgColor, accentColor (glow + CTA tint).

Best for

• 404 / error pages that need personality without being noisy.
• Empty states and "nothing here yet" screens.
• Maintenance or coming-soon pages with a playful, watchful mascot.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.