Glitch Effect Homepage: HTML, CSS, Tailwind

1,348 alejandrokundrah

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voidscape - Mind-Bending Homepage</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { 
            margin: 0; 
            overflow-x: hidden; 
            background: #000; 
            font-family: 'Courier New', monospace;
            display: flex;
            flex-direction: column;
        }
        canvas { 
            position: fixed; 
            top: 0; 
            left: 0; 
            z-index: -1; 
        }
        .glitch {
            position: relative;
            color: #fff;
            text-shadow: 0 0 5px #666, 0 0 10px #333;
            animation: glitch 0.8s linear infinite;
        }
        .glitch::before, .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            color: #ccc;
        }
        .glitch::before { 
            left: 2px; 
            text-shadow: -2px 0 #666; 
            animation: glitch-top 0.9s linear infinite;
        }
        .glitch::after { 
            left: -2px; 
            text-shadow: 2px 0 #666; 
            animation: glitch-bottom 0.7s linear infinite;
        }
        @keyframes glitch {
            2%, 64% { transform: translate(2px, 0); }
            4%, 60% { transform: translate(-2px, 0); }
            62% { transform: translate(0, 2px); }
            0%, 66%, 100% { transform: translate(0, 0); }
        }
        @keyframes glitch-top {
            2%, 64% { transform: translate(2px, -2px); }
            4%, 60% { transform: translate(-2px, 2px); }
            62% { transform: translate(0, -2px); }
            0%, 66%, 100% { transform: translate(0, 0); }
        }
        @keyframes glitch-bottom {
            2%, 64% { transform: translate(-2px, 2px); }
            4%, 60% { transform: translate(2px, -2px); }
            62% { transform: translate(0, 2px); }
            0%, 66%, 100% { transform: translate(0, 0); }
        }
    </style>
</head>
<body>
    <canvas id="bg"></canvas>
    <nav class="bg-black bg-opacity-70 p-4 sticky top-0 z-10 flex justify-between items-center">
        <div class="container mx-auto flex justify-between items-center">
            <div class="text-2xl font-bold text-white glitch" data-text="VOIDSCAPE">VOIDSCAPE</div>
            <div class="space-x-4">
                <a href="#home" class="text-white hover:text-gray-400 transition">Home</a>
                <a href="#about" class="text-white hover:text-gray-400 transition">About</a>
                <a href="#contact" class="text-white hover:text-gray-400 transition">Contact</a>
            </div>
        </div>
    </nav>
    <section id="home" class="min-h-screen flex items-center justify-center">
        <div class="text-center">
            <h1 class="text-6xl md:text-8xl text-white glitch" data-text="STEP INTO THE VOID">STEP INTO THE VOID</h1>
            <p class="text-xl md:text-2xl text-gray-400 mt-4 opacity-75">A Monochromatic Descent into Chaos</p>
            <a href="#about" class="mt-6 inline-block px-6 py-3 bg-gray-800 text-white font-bold rounded hover:bg-gray-600 transition">Discover More</a>
        </div>
    </section>
    <section id="about" class="min-h-screen flex items-center justify-center bg-black bg-opacity-70">
        <div class="container mx-auto text-center text-white">
            <h2 class="text-4xl md:text-5xl glitch" data-text="THE VOID AWAITS">THE VOID AWAITS</h2>
            <p class="mt-4 text-lg max-w-2xl mx-auto text-gray-400">Enter a distorted digital realm where glitches twist reality. This homepage is your portal to a surreal, monochromatic experience driven by chaotic motion.</p>
        </div>
    </section>
    <section id="contact" class="min-h-screen flex items-center justify-center bg-black bg-opacity-70">
        <div class="container mx-auto text-center text-white">
            <h2 class="text-4xl md:text-5xl glitch" data-text="JOIN THE DISTORTION">JOIN THE DISTORTION</h2>
            <p class="mt-4 text-lg max-w-2xl mx-auto text-gray-400">Have a vision to warp the void? Connect with us to create something truly unsettling.</p>
            <a href="mailto:contact@voidscape.com" class="mt-6 inline-block px-6 py-3 bg-gray-800 text-white font-bold rounded hover:bg-gray-600 transition">Reach Out</a>
        </div>
    </section>
    <script>
        // Particle system
        const canvas = document.getElementById('bg');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Initialize particles
        for (let i = 0; i < 100; i++) particles.push(new Particle());

// Animation loop
        function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            particles.forEach(p => {
                p.update();
                p.draw();
            });
            requestAnimationFrame(animate);
        }
        animate();

// Mouse interaction
        canvas.addEventListener('mousemove', (e) => {
            for (let i = 0; i < 3; i++) {
                const p = new Particle();
                p.x = e.clientX;
                p.y = e.clientY;
                p.size = Math.random() * 8 + 4;
                particles.push(p);
            }
        });

// Handle resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
</body>
</html>

CSS

Glitch Effect Homepage: HTML, CSS, Tailwind

Recommended