A creative and visually engaging 404 error page component featuring a postal/postcard theme with animated circular text. **Key Features:** - **Postal Theme Design**: Displays a postcard-style image with perforated stamp edges and postal cancellation marks (wavy lines) - **Animated Circular Text**: Rotating text that forms a complete circle above the postcard, continuously spinning with customizable content - **Customizable Content**: Accepts props for heading, subtext, back button text, and navigation link - **Typography**: Uses the Doto font for the main heading and Crimson Text serif for elegant styling - **Interactive Elements**: Postcard has a subtle rotation that straightens on hover, and includes a call-to-action button - **Responsive Design**: Adapts to different screen sizes with responsive text sizing and spacing **Props:** - `heading`: Main error message (default: "(404) Looks like the page you're looking for got lost somewhere.") - `subtext`: Supporting message (default: "But hey — in New York, even the unexpected detours lead somewhere.") - `circularText`: Text that rotates in a circle (default: "The General Intelligence Company of New York") - `imageSrc`: Postcard image URL - `backButtonText`: Button label (default: "Back to Home") - `backButtonHref`: Navigation destination (default: "/") **Use Case**: Perfect for adding personality to 404 error pages while maintaining a professional and polished appearance.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pixeleted 404 NOT FOUND to your project and fits it to your theme.
Code
How Pixeleted 404 NOT FOUND is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Error404 } from "@/components/ui/pixeleted-404-not-found"
export default function Error404Demo() {
return (
<Error404
postcardImage="https://cdn.21st.dev/assets/mirror/9e/9e64a2d8260f18efc82decc3e835f9ee656f14e736085507071a73f0841b38dd.jpg"
postcardAlt="New York City Postcard with Statue of Liberty"
curvedTextTop="The General Intelligence"
curvedTextBottom="of New York"
heading="(404) Looks like the page you're looking for got lost somewhere."
subtext="But hey — in New York, even the unexpected detours lead somewhere."
backButtonLabel="Back to Home"
backButtonHref="/"
/>
)
}















