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

468

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

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

4 months ago

741
Brutalist Hero

Author:
threehymns

10 months ago

2.1k
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

4 months ago

370
vanessa
nice

Author:
Umutoniwase Yvette

4 months ago

385
Transparent Navbar

Author:
Rajesh Maheshwari

7 months ago

1.6k
tradition music
by salvator

Author:
Baraka Salvator

4 months ago

573
Book
nice kbx

Author:
Umutoniwase Yvette

4 months ago

293
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

1 year ago

4.5k
Responsive Header

Author:
Rajesh Maheshwari

7 months ago

1.2k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

10 months ago

3.6k
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)

4 months ago

289
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

5 months ago

637

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components