Yvette

nice

This tailwind example is contributed by Umutoniwase Yvette, on 25-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Umutoniwase Yvette

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Big Zero Matrix Rain</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: #000;
            overflow: hidden;
            font-family: 'Courier New', monospace;
            font-weight: bold;
        }

canvas {
            display: block;
            background: radial-gradient(circle at center, #001100 0%, #000000 100%);
        }

.controls {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.9);
            padding: 20px;
            border-radius: 15px;
            color: #00ff00;
            font-family: 'Courier New', monospace;
            border: 2px solid #00ff00;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
        }

.control-group {
            margin-bottom: 15px;
        }

.control-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: bold;
        }

.control-group input[type="range"] {
            background: rgba(0, 255, 0, 0.1);
            border: 1px solid #00ff00;
            height: 25px;
            width: 150px;
            border-radius: 5px;
        }

.size-display {
            color: #00ffff;
            font-size: 12px;
            margin-top: 5px;
        }

.toggle-btn {
            background: linear-gradient(45deg, rgba(0, 255, 0, 0.2), rgba(0, 255, 255, 0.2));
            border: 2px solid #00ff00;
            color: #00ff00;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            font-weight: bold;
            margin: 5px;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }

.toggle-btn:hover {
            background: linear-gradient(45deg, rgba(0, 255, 0, 0.4), rgba(0, 255, 255, 0.4));
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
            transform: scale(1.05);
        }

.info {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.9);
            padding: 15px;
            border-radius: 10px;
            color: #00ff00;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            border: 2px solid #00ff00;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
        }

.title {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 4rem;
            color: rgba(0, 255, 0, 0.1);
            font-family: 'Courier New', monospace;
            font-weight: bold;
            text-align: center;
            pointer-events: none;
            z-index: 1;
            text-shadow: 0 0 50px rgba(0, 255, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="title">BIG ZERO MATRIX</div>
    <canvas id="matrixCanvas"></canvas>
    
    <div class="controls">
        <div class="control-group">
            <label>Zero Size:</label>
            <input type="range" id="sizeControl" min="20" max="120" value="60">
            <div class="size-display" id="sizeDisplay">60px</div>
        </div>
        <div class="control-group">
            <label>Fall Speed:</label>
            <input type="range" id="speedControl" min="1" max="15" value="8">
        </div>
        <div class="control-group">
            <label>Zero Density:</label>
            <input type="range" id="densityControl" min="5" max="50" value="25">
        </div>
        <div class="control-group">
            <label>Color Change Speed:</label>
            <input type="range" id="colorSpeedControl" min="1" max="30" value="15">
        </div>
        <button class="toggle-btn" onclick="togglePause()">Pause</button>
        <button class="toggle-btn" onclick="resetMatrix()">Reset</button>
        <button class="toggle-btn" onclick="randomBurst()">Burst!</button>
    </div>

<div class="info">
        🎮 CONTROLS:<br>
        • Click = Color Explosion<br>
        • SPACE = Pause/Resume<br>
        • F = Fullscreen<br>
        • R = Reset Matrix<br>
        • B = Random Burst
    </div>

function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            initMatrix();
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

// Big Zero Matrix variables
        let columns;
        let bigZeros = [];
        let isPaused = false;
        let animationId;
        let colorChangeCounter = 0;

// Vibrant color palettes for big zeros
        const colorPalettes = [
            // Classic Matrix Green
            ['#00ff00', '#00ff41', '#41ff00', '#00ff82', '#82ff00', '#00ffaa', '#aaff00'],
            // Electric Blue
            ['#0080ff', '#00aaff', '#40bfff', '#0066ff', '#66aaff', '#0099ff', '#99ccff'],
            // Hot Pink/Magenta
            ['#ff0080', '#ff4080', '#ff0040', '#ff8080', '#ff40aa', '#ff80aa', '#ffaacc'],
            // Cyber Orange
            ['#ff8000', '#ff9900', '#ffaa00', '#ff6600', '#ffbb33', '#ff7733', '#ffcc66'],
            // Purple Neon
            ['#8000ff', '#9933ff', '#aa00ff', '#6600cc', '#bb66ff', '#7733cc', '#cc99ff'],
            // Acid Green
            ['#ccff00', '#aaff33', '#88ff00', '#99ff33', '#77ff00', '#bbff66', '#ddff99'],
            // Electric Red
            ['#ff3300', '#ff6600', '#ff4400', '#ff5500', '#ff7733', '#ff8844', '#ffaa66']
        ];

let currentPalette = 0;

class BigZero {
            constructor(x) {
                this.x = x;
                this.y = -100;
                this.size = 60;
                this.speed = Math.random() * 3 + 2;
                this.color = this.getRandomColor();
                this.glowIntensity = Math.random() * 20 + 10;
                this.rotation = 0;
                this.rotationSpeed = (Math.random() - 0.5) * 0.02;
                this.pulsePhase = Math.random() * Math.PI * 2;
                this.trail = [];
                this.maxTrailLength = 8;
                this.opacity = 1;
            }

getRandomColor() {
                const palette = colorPalettes[currentPalette];
                return palette[Math.floor(Math.random() * palette.length)];
            }

update() {
                const speed = document.getElementById('speedControl').value / 3;
                const size = parseInt(document.getElementById('sizeControl').value);
                const colorSpeed = parseInt(document.getElementById('colorSpeedControl').value);
                
                this.size = size;
                this.y += this.speed * speed;
                this.rotation += this.rotationSpeed;
                this.pulsePhase += 0.1;

// Add current position to trail
                this.trail.unshift({
                    x: this.x,
                    y: this.y,
                    size: this.size,
                    color: this.color,
                    opacity: 1
                });

// Limit trail length
                if (this.trail.length > this.maxTrailLength) {
                    this.trail.pop();
                }

// Update trail opacity
                this.trail.forEach((point, index) => {
                    point.opacity = 1 - (index / this.maxTrailLength);
                });

// Change color periodically
                if (colorChangeCounter % (40 - colorSpeed) === 0) {
                    this.color = this.getRandomColor();
                }

// Reset when off screen
                if (this.y > canvas.height + 100) {
                    this.y = -100 - Math.random() * 500;
                    this.color = this.getRandomColor();
                    this.speed = Math.random() * 3 + 2;
                    this.trail = [];
                }
            }

draw() {
                // Draw trail
                this.trail.forEach((point, index) => {
                    if (index > 0) {
                        ctx.save();
                        ctx.globalAlpha = point.opacity * 0.6;
                        ctx.fillStyle = point.color;
                        ctx.shadowColor = point.color;
                        ctx.shadowBlur = this.glowIntensity * point.opacity;
                        
                        ctx.font = `bold ${point.size * 0.8}px Courier New`;
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        
                        ctx.fillText('0', point.x, point.y);
                        ctx.restore();
                    }
                });

// Draw main zero
                ctx.save();
                
                // Translate to zero position
                ctx.translate(this.x, this.y);
                ctx.rotate(this.rotation);
                
                // Pulsing effect
                const pulse = Math.sin(this.pulsePhase) * 0.1 + 1;
                const currentSize = this.size * pulse;
                
                // Glow effect
                ctx.shadowColor = this.color;
                ctx.shadowBlur = this.glowIntensity + Math.sin(this.pulsePhase) * 5;
                
                // Main zero
                ctx.fillStyle = this.color;
                ctx.font = `bold ${currentSize}px Courier New`;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                
                // Draw multiple layers for extra glow
                for (let i = 0; i < 3; i++) {
                    ctx.globalAlpha = 0.3 + (i * 0.2);
                    ctx.fillText('0', 0, 0);
                }
                
                ctx.globalAlpha = 1;
                ctx.restore();
            }
        }

function initMatrix() {
            const density = parseInt(document.getElementById('densityControl').value);
            const spacing = canvas.width / density;
            
            bigZeros = [];
            columns = density;
            
            for (let i = 0; i < columns; i++) {
                const x = (i * spacing) + (spacing / 2);
                const zero = new BigZero(x);
                zero.y = -Math.random() * canvas.height;
                bigZeros.push(zero);
            }
        }

function draw() {
            if (isPaused) return;

// Clear with fade effect
            ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

colorChangeCounter++;

// Update and draw all big zeros
            bigZeros.forEach(zero => {
                zero.update();
                zero.draw();
            });

// Change color palette occasionally
            if (colorChangeCounter % 800 === 0) {
                currentPalette = (currentPalette + 1) % colorPalettes.length;
            }

animationId = requestAnimationFrame(draw);
        }

function togglePause() {
            isPaused = !isPaused;
            const btn = document.querySelector('.toggle-btn');
            btn.textContent = isPaused ? 'Resume' : 'Pause';
            if (!isPaused) {
                draw();
            }
        }

function resetMatrix() {
            cancelAnimationFrame(animationId);
            colorChangeCounter = 0;
            currentPalette = 0;
            initMatrix();
            draw();
        }

// Click effect
        canvas.addEventListener('click', function(e) {
            const rect = canvas.getBoundingClientRect();
            const clickX = e.clientX - rect.left;
            const clickY = e.clientY - rect.top;

// Create explosion of big zeros
            for (let i = 0; i < 10; i++) {
                setTimeout(() => {
                    ctx.save();
                    ctx.translate(clickX, clickY);
                    
                    const angle = (i / 10) * Math.PI * 2;
                    const distance = Math.random() * 150 + 50;
                    const x = Math.cos(angle) * distance;
                    const y = Math.sin(angle) * distance;
                    
                    ctx.fillStyle = colorPalettes[Math.floor(Math.random() * colorPalettes.length)][0];
                    ctx.shadowColor = ctx.fillStyle;
                    ctx.shadowBlur = 25;
                    ctx.font = `bold ${Math.random() * 60 + 40}px Courier New`;
                    ctx.textAlign = 'center';
                    ctx.fillText('0', x, y);
                    
                    ctx.restore();
                }, i * 80);
            }
        });

// Keyboard controls
        document.addEventListener('keydown', function(e) {
            switch(e.key.toLowerCase()) {
                case 'f':
                    if (document.fullscreenElement) {
                        document.exitFullscreen();
                    } else {
                        document.documentElement.requestFullscreen();
                    }
                    break;
                case ' ':
                    e.preventDefault();
                    togglePause();
                    break;
                case 'r':
                    resetMatrix();
                    break;
                case 'b':
                    randomBurst();
                    break;
                case 'c':
                    currentPalette = (currentPalette + 1) % colorPalettes.length;
                    break;
            }
        });

// Control updates
        document.getElementById('sizeControl').addEventListener('input', function() {
            document.getElementById('sizeDisplay').textContent = this.value + 'px';
        });

document.getElementById('densityControl').addEventListener('input', function() {
            initMatrix();
        });

// Automatic color palette cycling
        setInterval(() => {
            if (!isPaused && Math.random() < 0.3) {
                // Random color burst effect
                const randomZero = bigZeros[Math.floor(Math.random() * bigZeros.length)];
                if (randomZero) {
                    randomZero.color = randomZero.getRandomColor();
                    randomZero.glowIntensity = 35;
                }
            }
        }, 3000);

// Initialize and start
        initMatrix();
        draw();
    </script>
</body>
</html>

Related Examples

canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

5 months ago

2.5k
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

5 months ago

2.5k
Dark mode sidenav with collapsible menu

Author:
Rajesh Maheshwari

3 months ago

412
vanessa
nice

Author:
Umutoniwase Yvette

1 week ago

51
Yoga Coach Hero Section

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.5k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

3.6k
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Author:
Mike Varen

1 year ago

3.5k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

11 months ago

4.2k
Basic sidebar

Author:
Rajesh Maheshwari

3 months ago

610
yvette
vibes kbx

Author:
Umutoniwase Yvette

1 week ago

8
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

2 days ago

28
Brutalist Hero

Author:
threehymns

6 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components