Glitch Effect Homepage: HTML, CSS, Tailwind

Open In Editor Video Publish Your Code

<!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>

Glitch Effect Homepage: HTML, CSS, Tailwind

Recommended

HTML Light Effects Container with CSS

Slide Text Effect

HTML Button Hover Effects Example

HTML

CSS

JS

Recommended

HTML Light Effects Container with CSS

Slide Text Effect

HTML Button Hover Effects Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS