Dynamic Animated Error Pages

A professional, fully animated error page system built with HTML, CSS, JavaScript, and PHP. Features cartoonistic vector illustrations with smooth animations that respond dynamically to HTTP error codes detected from URLs, query parameters, server configurations, or API payloads.

Features

• Automatic Error Detection – Detects error codes from multiple sources:

  • URL paths (/404, /500, /error/403)
  • Query parameters (?error=404, ?code=500)
  • Server REDIRECT_STATUS (Apache/Nginx error handling)
  • JSON payloads (POST/PUT/DELETE requests)
  • HTTP referrer and document metadata

• Premium Animated Vector Graphics – Each error type has a unique, multi-layered SVG illustration:

  • 404 – UFO searching through a space portal with tractor beam
  • 403/401 – Secure vault with animated padlock and laser scanners
  • 500 – Exploding server room with smoke, sparks, and electrical arcs
  • 400 – Tangled network web with floating syntax errors
  • 502 – Severed gateway bridge with plasma discharge
  • 503 – Robotic maintenance arm with welding sparks

• Responsive Design – Works flawlessly on desktop, tablet, and mobile devices

• Production-Ready Diagnostics – Displays realistic server information without confusing jargon

• Cross-Domain Compatible – Deploy on any hosting provider or domain without modification

• Pure Tech Stack – Built exclusively with HTML, CSS, JavaScript, and PHP (no frameworks or dependencies)

File Structure

├── index.php           # Main error processor (handles errors + direct visits)
├── index.html          # Fallback static page
├── error.php           # Dedicated error processor (alternative entry point)
├── demo.php            # Interactive showcase dashboard
├── error_handler.php   # Legacy router for backward compatibility
└── .htaccess           # Apache error routing configuration

Installation

1. Upload Files

Copy all files to your web server's root directory or desired subdirectory.

2. Apache Configuration

Add the following to your .htaccess file (or use the included one):

ErrorDocument 400 /index.php?error=400
ErrorDocument 401 /index.php?error=401
ErrorDocument 403 /index.php?error=403
ErrorDocument 404 /index.php?error=404
ErrorDocument 500 /index.php?error=500
ErrorDocument 502 /index.php?error=502
ErrorDocument 503 /index.php?error=503

RewriteEngine On
RewriteRule ^(400|401|403|404|500|502|503)(/|\?|$)? /index.php?error=$1 [L,QSA]

3. Nginx Configuration

Add to your server block:

error_page 400 /index.php?error=400;
error_page 401 /index.php?error=401;
error_page 403 /index.php?error=403;
error_page 404 /index.php?error=404;
error_page 500 /index.php?error=500;
error_page 502 /index.php?error=502;
error_page 503 /index.php?error=503;

location ~ \.php$ {
    include fastcgi_params;
    fastcgi_pass unix:/var/run/php/php-fpm.sock;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}

Usage

Direct URL Access

Visiting the page without error parameters shows a clean operational state with a "go back" button.

Error Triggering Methods

URL Path:

yourdomain.com/404
yourdomain.com/500
yourdomain.com/error/403

Query Parameters:

yourdomain.com/index.php?error=404
yourdomain.com/index.php?code=500
yourdomain.com/index.php?status=403

Server-Triggered: When Apache/Nginx encounters an error, it automatically redirects to the error page with the appropriate status code.

API/JSON Payload:

POST /api/endpoint
{
  "error_code": 500,
  "message": "Custom error message"
}

Supported Error Codes

Code	Title	Description
400	Bad Request	Malformed syntax or invalid parameters
401	Unauthorized	Authentication required
403	Forbidden	Access denied
404	Not Found	Resource does not exist
500	Internal Server Error	Unexpected server condition
502	Bad Gateway	Invalid upstream response
503	Service Unavailable	Temporarily unavailable

Customization

Changing Colors

Edit the CSS variables in index.php:

:root {
    --bg-base: #0F1016;
    --panel-bg: rgba(22, 24, 34, 0.75);
    --accent: <?php echo $accentColor; ?>;
}

Modifying Error Messages

Update the $explanations array in index.php:

$explanations = [
    404 => [
        'title' => 'Your Custom Title',
        'subtitle' => 'Your Custom Subtitle',
        'desc' => 'Your custom description text.',
        'color' => '#70A1FF'
    ]
];

Replacing SVG Illustrations

Locate the SVG blocks inside the <?php if ($errorCode == 404): ?> sections and replace with your own inline SVG code. Ensure you maintain the viewBox="0 0 500 400" attribute for consistent sizing.

Adding New Error Codes

Add a new entry to the $explanations array and create a corresponding SVG block in the HTML section:

429 => [
    'title' => 'Too Many Requests',
    'subtitle' => 'Rate Limit Exceeded',
    'desc' => 'You have sent too many requests. Please slow down.',
    'color' => '#FF9F43'
]

Demo Dashboard

Access demo.php to preview all error page animations interactively. This showcase allows you to:

• Switch between error types instantly
• View animations without triggering actual errors
• Test responsiveness across viewport sizes

Technical Requirements

• PHP 7.4 or higher
• Web Server with mod_rewrite (Apache) or URL rewriting (Nginx)
• Modern Browser with ES6 JavaScript support

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

License

This project is provided as-is for use in personal and commercial projects. Modify and distribute as needed.

Support

For issues or questions:

1. Check that PHP is enabled on your server
2. Verify .htaccess rules are being processed (Apache)
3. Ensure file permissions allow PHP execution
4. Check server error logs for PHP warnings or notices

---

Built with ❤️ using pure HTML, CSS, JavaScript, and PHP.