3D. Éléments. HTML 404.

This tailwind example is contributed by Omer fils ELENGA, on 08-Jan-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are 404 pages,Not found

404 Page

Author Omer fils ELENGA

Tailwind v3.4 748 2

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Page Not Found 3D</title>
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

/* Assure que le contenu est bien au-dessus du canvas */
        .content-overlay {
            position: relative;
            z-index: 10;
            pointer-events: none; /* Laisse passer les clics vers le canvas sauf sur les boutons/liens */
        }

.content-overlay a, .content-overlay button {
            pointer-events: auto; /* Réactive les clics sur le bouton */
        }

/* Petit curseur personnalisé pour indiquer l'interactivité */
        .interactive {
            cursor: pointer;
        }
    </style>
</head>
<body class="bg-gray-900 text-white antialiased font-sans selection:bg-purple-500 selection:text-white">

<div id="canvas-container" class="interactive"></div>

<section class="flex items-center h-screen p-16 w-full content-overlay">
        <div class="container flex flex-col items-center mx-auto">
            <div class="flex flex-col gap-6 max-w-md text-center bg-gray-900/30 backdrop-blur-sm p-8 rounded-2xl border border-gray-700/50 shadow-2xl">
                <h2 class="font-extrabold text-9xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 dark:from-purple-300 dark:to-pink-500 animate-pulse">
                    <span class="sr-only">Error</span>404
                </h2>
                <p class="text-2xl md:text-3xl font-light text-gray-200 drop-shadow-lg">
                    Désolé, nous n'avons pas trouvé cette page.
                </p>
                <p class="text-sm text-purple-300 mb-4 opacity-80">
                    (Cliquez n'importe où pour voir le cerveau réagir)
                </p>
                <a href="#" class="group relative px-8 py-4 text-xl font-semibold rounded-full bg-purple-600 text-white overflow-hidden transition-all hover:scale-105 hover:shadow-[0_0_20px_rgba(147,51,234,0.5)]">
                    <span class="relative z-10">Retour à l'accueil</span>
                    <div class="absolute inset-0 h-full w-full bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                </a>
            </div>
        </div>
    </section>

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 18;

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Optimisation performance
        container.appendChild(renderer.domElement);

// --- LUMIÈRES ---
        
        // Lumière ambiante douce
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
        scene.add(ambientLight);

// Lumière principale violette
        const pointLight1 = new THREE.PointLight(0xa855f7, 1.5, 50); // Purple
        pointLight1.position.set(10, 10, 10);
        scene.add(pointLight1);

// Lumière secondaire bleue/rose pour le contraste
        const pointLight2 = new THREE.PointLight(0xec4899, 1, 50); // Pink
        pointLight2.position.set(-10, -5, 5);
        scene.add(pointLight2);

// --- GÉNÉRATION DU CERVEAU (VOXELS) ---

// Géométrie d'un cube unique
        const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
        // Matériau brillant
        const material = new THREE.MeshStandardMaterial({ 
            color: 0xffffff,
            roughness: 0.3,
            metalness: 0.7
        });

// Nombre de cubes
        const count = 3000;
        const mesh = new THREE.InstancedMesh(geometry, material, count);
        mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); // Important pour l'animation
        
        scene.add(mesh);

// Données pour l'animation
        const dummy = new THREE.Object3D();
        const particles = [];
        
        // Formule mathématique simplifiée pour créer deux hémisphères
        // On itère pour trouver des positions qui ressemblent à un cerveau
        let i = 0;
        while(i < count) {
            // Position aléatoire dans une zone sphérique
            const theta = Math.random() * Math.PI * 2;
            const phi = Math.acos((Math.random() * 2) - 1);
            
            // Rayon aléatoire
            const r = 4 + Math.random() * 3; 
            
            // Coordonnées cartésiennes
            let x = r * Math.sin(phi) * Math.cos(theta);
            let y = r * Math.sin(phi) * Math.sin(theta);
            let z = r * Math.cos(phi);

// Déformation pour faire la forme du cerveau (écrasé et arrondi)
            // On décale les points pour former deux lobes
            // Si x > 0, on pousse un peu plus vers la droite, etc.
            
            // Logique simple de forme de cerveau :
            // On prend la forme d'un ovale et on ajoute du bruit
            const scale = 1.2;
            const brainShape = (Math.pow(x/4, 2) + Math.pow(y/3, 2) + Math.pow(z/4.5, 2));
            
            if (brainShape < 1.5) { // Si on est à l'intérieur de l'ovale
                // Ajustement pour la scission au centre (fissure médiane)
                if (Math.abs(x) < 0.8 && y > 0) {
                    x += (x > 0 ? 0.8 : -0.8); // Écarte les cubes du centre
                }

dummy.position.set(x, y, z);
                dummy.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, 0);
                dummy.updateMatrix();
                mesh.setMatrixAt(i, dummy.matrix);

// On stocke les données pour l'animation
                particles.push({
                    originalPos: new THREE.Vector3(x, y, z),
                    randomPos: new THREE.Vector3(
                        (Math.random() - 0.5) * 30, // Explosion large
                        (Math.random() - 0.5) * 30,
                        (Math.random() - 0.5) * 30
                    ),
                    rotation: new THREE.Vector3(Math.random()*Math.PI, Math.random()*Math.PI, 0),
                    speed: 0.02 + Math.random() * 0.03
                });
                
                // Couleur aléatoire subtile pour chaque voxel (gris/blanc/violet)
                const color = new THREE.Color();
                if (Math.random() > 0.8) color.setHex(0xa855f7); // Purple accent
                else color.setHex(0xe5e7eb); // Gray-200
                mesh.setColorAt(i, color);

i++;
            }
        }

// --- INTERACTION & ANIMATION ---

let isExploded = false;
        let mouseX = 0;
        let mouseY = 0;
        let targetRotationX = 0;
        let targetRotationY = 0;

// Gestion du clic pour décomposer
        window.addEventListener('mousedown', () => {
            isExploded = !isExploded;
        });

// Gestion du mouvement de la souris pour "le boge" (bouger)
        document.addEventListener('mousemove', (event) => {
            mouseX = (event.clientX - window.innerWidth / 2) * 0.001;
            mouseY = (event.clientY - window.innerHeight / 2) * 0.001;
        });

// Animation Loop
        const clock = new THREE.Clock();

function animate() {
            requestAnimationFrame(animate);

const time = clock.getElapsedTime();

// Rotation fluide du groupe entier basée sur la souris
            targetRotationY = mouseX * 2;
            targetRotationX = mouseY * 2;
            
            mesh.rotation.y += 0.05 * (targetRotationY - mesh.rotation.y);
            mesh.rotation.x += 0.05 * (targetRotationX - mesh.rotation.x);
            
            // Rotation automatique lente constante
            mesh.rotation.y += 0.002;

// Animation de chaque voxel (Explosion / Implosion)
            for (let i = 0; i < count; i++) {
                const p = particles[i];
                
                // Déterminer la position cible
                const target = isExploded ? p.randomPos : p.originalPos;
                
                // Interpolation (Lerp) pour le mouvement fluide
                // Si explosé, on va vers randomPos, sinon on retourne à originalPos
                const current = dummy.position.clone(); // On récupère la position actuelle approximative (nécessiterait plus de stockage pour être parfait, mais ici on repart de l'originale pour l'exemple simplifié)
                
                // Pour faire une transition propre, on calcule une position intermédiaire basée sur le temps ou un état.
                // Ici, une approche simple : on interpole directement depuis la position originale vers la cible
                // Mais pour que ça soit animé à chaque frame, on a besoin de la position actuelle.
                // Simplification: On interpole l'origine vers la cible avec un facteur "mix".
                
                // Mieux: On stocke la position courante dans l'objet particle si on veut une physique parfaite.
                // Mais avec InstancedMesh, on doit recalculer.
                // Truc: On utilise un lerp progressif.
                
                // Position actuelle (on la récupère en la mettant à jour dans dummy)
                mesh.getMatrixAt(i, dummy.matrix);
                dummy.matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);
                
                // Cible
                const targetPos = isExploded ? p.randomPos : p.originalPos;
                
                // Mouvement
                dummy.position.lerp(targetPos, 0.05);
                
                // Rotation des cubes individuels
                if (isExploded) {
                    dummy.rotation.x += 0.1;
                    dummy.rotation.y += 0.1;
                } else {
                    // Retour à une rotation aléatoire statique ou douce
                    // Pour garder simple, on laisse l'orientation actuelle
                }

// Respiration subtile quand non explosé
                if (!isExploded) {
                    const scale = 1 + Math.sin(time * 2 + p.originalPos.x) * 0.1;
                    dummy.scale.set(scale, scale, scale);
                } else {
                    dummy.scale.set(1, 1, 1);
                }

dummy.updateMatrix();
                mesh.setMatrixAt(i, dummy.matrix);
            }
            
            mesh.instanceMatrix.needsUpdate = true; // Indispensable pour mettre à jour l'affichage
            
            // Animation des lumières
            pointLight1.position.x = Math.sin(time * 0.7) * 15;
            pointLight1.position.y = Math.cos(time * 0.5) * 15;
            pointLight2.position.x = Math.cos(time * 0.3) * 15;
            pointLight2.position.y = Math.sin(time * 0.5) * 15;

renderer.render(scene, camera);
        }

// Gestion du redimensionnement
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

animate();
    </script>
</body>
</html>

Related Examples

Minimal server error page template

Santos78

3 years ago

14.3k
Minimal 404 Page Template

Lautaro Gómez

2 years ago

3k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

629
404 Error Page Example

Anonymous

1 year ago

2.6k
404 Page

Omer fils ELENGA

2 weeks ago

84
404 Page

ariaw

1 year ago

1.3k
Minimal 404 page

Santos78

3 years ago

12.6k
Animated 404 Error Page Section
A modern and minimal 404 error page section built with Tailwind CSS and Alpine.js. This component features a smooth fade-in animation triggered on page load, a bold 404 error code, a short message, and a primary call-to-action button guiding users back to the homepage. ✨ Key Features: Smooth fade & slide-in animation using Alpine.js Fully responsive and optimized for mobile and dark mode Clean Tailwind CSS styling for easy customization Includes a call-to-action button for better UX Perfect for: landing pages, web apps, and portfolios that need a polished “Page Not Found” experience.

wavy kits

1 year ago

899
404 Error Page
Minimal 404 for your project

TailwindFlex

4 years ago

22.8k
404 page template
Minimal 404-page template for tailwind css

TailwindFlex

3 years ago

13.3k
404 page with a purple background
Here's an updated version of the 404 page with a purple background

zobaidul kaziex

2 years ago

2.2k
404 Error
This HTML page displays a 404 error with a 'Back to home' button, styled using Tailwind CSS.

Zayyan Mustafa

1 year ago

1.9k