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

629

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

3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

7 months ago

1.3k
Markert shop
wellcome tothe my online shoping

Author:
Umutoniwase Yvette

7 months ago

452
my website

Author:
Creative Solution

1 year ago

3.1k
Hero

Author:
Hasan AlDoy (McDoy)

11 months ago

1.5k
Yvette
it's very good

Author:
Umutoniwase Yvette

7 months ago

683
Movies are a popular form
Movies are a popular form of entertainment that combine storytelling, visuals, and sound to create immersive experiences. They can be fictional or based on real events, spanning genres like action, comedy, drama, horror, sci-fi, romance, and more. Here’s a quick overview:

Author:
nii fanny

6 months ago

642
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

2.1k
App Hero Section With header

Author:
Abdul Baset Bappy

6 months ago

809
Software Developer
A software developer designs, builds, tests, and maintains software applications and systems. They use programming languages to create code that meets user needs and client specifications. Software developers may work on various projects, including applications, systems software, or web development

Author:
nii fanny

6 months ago

960
section header

Author:
Raul antonio de la cruz hernandez

4 weeks ago

273
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

2 years ago

7k
Responsive Header

Author:
Rajesh Maheshwari

9 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components