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

344

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

Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

3 months ago

383
Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

6 months ago

1.5k
Title

Author:
Morris Muriuki Muthigani

1 month ago

264
Job Platfoam
If you need a Job You will Have to Apply for it

Author:
soft mind

3 months ago

569
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

7.5k
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

277
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

9 months ago

3k
Full width header with gradient
Header component for showing Info.

Author:
TailwindFlex

3 years ago

13.2k
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

7 months ago

802
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9k
Responsive NavBar Using CSS Only
A complete responsive navbar only using tailwind css

Author:
Shivam Vishwakarma

3 months ago

192
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components