404-Creator 🚀

A zero-dependency package to generate beautiful, animated 404 pages with one line of JavaScript! Perfect for React, Vue, Next.js, and plain HTML projects.

Features ✨

• 🎨 4 built-in color themes (purple, blue, red, green)
• 🕹️ 3 animation types (floating, glitch, pulse)
• 📱 Fully responsive
• 🚫 No dependencies
• ⚡ Under 2KB gzipped

Installation 📦

npm install 404-creator
# or
yarn add 404-creator
# or
pnpm add 404-creator

Basic Usage 🛠️

import { create404 } from "404-creator";

// Minimal usage (default styling)
create404();

// With custom options
create404({
  title: "Oops! Lost in Space",
  message: "This page doesn't exist in our universe",
  animation: "glitch",
  color: "blue",
});

Advanced Options ⚙️

| Option | Type | Default | Description | | ----------- | ---------------------------------------------- | ---------------------------------------------- | ----------------- | | title | string | "404 - Page Not Found" | Main heading text | | message | string | "The page you're looking for doesn't exist." | Subtitle text | | animation | "floating" | "glitch" | "pulse" | "floating" | Animation style | | color | "purple" | "blue" | "red" | "green" | "purple" | Color theme |

Framework Examples 🖇️

React Example

import { useEffect } from "react";
import { create404 } from "404-creator";

function NotFoundPage() {
  useEffect(() => {
    create404({
      title: "React 404",
      animation: "pulse",
    });
  }, []);

  return null; // This will replace the entire page
}

Next.js API Route

import { create404 } from "404-creator";

export default function Custom404() {
  if (typeof window !== "undefined") {
    create404();
  }
  return null;
}

Custom Styling 🎨

You can override the default styles by adding your own CSS:

.container {
  font-family: "Comic Sans MS", cursive;
}

.home-link {
  background: #ff5722 !important;
}

📝 License

This project is licensed under the MIT License.

📣 Author

Made with ❤️ by Manindra Bollam([email protected])