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

775

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

Collapsible Sidebar Menu

Author:
Rajesh Maheshwari

1 year ago

2.6k
sticky headings
sticky headings

Author:
Anonymous

2 years ago

6.3k
Promotional sticky top section

Author:
Leon Bachmann

3 years ago

12.8k
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

2 years ago

7.1k
Coffee
custom

Author:
Rebecca IRANKUNDA

9 months ago

652
Hero

Author:
Hasan AlDoy (McDoy)

1 year ago

1.6k
Header and footer with Doodle design with Tailwind CSS
Creative responsive header and footer with doodle patterns built with Tailwind CSS. Features animated SVG doodles, interactive CTA buttons, and Fully customizable components for web projects

Author:
Homayoun

3 months ago

136
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.9k
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

1 year ago

2k
home
html , css

Author:
Hacker Development

10 months ago

1.9k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

9 months ago

1.2k
Creative Hero Section

Author:
Ijila Itunu

10 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components