404 Page
Interactive 404 error page featuring a cinematic canyon layout with multi-layered parallax cacti. Built with SVG and custom mouse-tracking logic for a deep 3D immersive feel.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| errorCode | string | 404 | The error code to display. |
When to Use
Ideal for desert-themed projects, edgy brand sites, and Next.js applications that want a high-fidelity 'Empty State' experience. Now fully customizable via props to support 400, 404, or 500 error variations.
Best Practices
Use high-contrast text for the error code to ensure readability against the dark canyon background. Pair with dramatic fonts to match the cinematic aesthetic. Optimize for performance by using efficient SVG transforms.
Why This Component Matters
A cinematic 404 page turns a negative user experience into a moment of brand delight. This production-ready UI template helps you build an interface that feels polished and thoughtful, improving user retention during navigation errors.
FAQ
QHow does the parallax work?
The component uses a custom 'useMouseParallax' hook that calculates normalized cursor coordinates to offset multiple SVG layers at varied depths.
QCan I change the error code?
Absolutely. Use the `errorCode` prop to display any numeric error (e.g., '404', '500', '403') within the parallax canyon.
QIs it mobile responsive?
Yes, the SVG uses 'preserveAspectRatio' to ensure the canyon and cacti layers stay centered and impactful across all screen widths.
Related Components
Dig Hole
Interactive video-based website with scroll-triggered reveals and smooth transitions. Features a cinematic video background with menu items that reveal content on scroll.
Image Slider
Advanced WebGL-powered image slider with shader-based transitions. Features smooth displacement effects, Three.js rendering, and GSAP animations for seamless image transitions.
Flower Animation
Beautiful CSS-based flower animation with multiple blooming flowers, glowing lights, and smooth animations. Features intricate CSS animations creating a mesmerizing night garden effect.