plasma 2

This tailwind example is contributed by Omer fils ELENGA, on 04-Dec-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Omer fils ELENGA

447

Fork Fullscreen

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plasma Effect Control</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: #000;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }
        #container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        /* Menu Styles */
        #controlMenu {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(15, 15, 25, 0.85);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 20px;
            width: 320px;
            color: #fff;
            z-index: 1000;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        #controlMenu.collapsed {
            width: 60px;
            height: 60px;
            padding: 0;
            overflow: hidden;
        }
        
        #controlMenu.collapsed .menu-content {
            display: none;
        }
        
        #controlMenu.collapsed .menu-toggle {
            transform: rotate(180deg);
        }
        
        .menu-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .menu-header h2 {
            font-size: 18px;
            font-weight: 600;
            color: #fff;
            letter-spacing: 0.5px;
        }
        
        .menu-toggle {
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 8px;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        
        .menu-toggle:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }
        
        .menu-toggle i {
            font-size: 18px;
        }
        
        .control-group {
            margin-bottom: 20px;
            position: relative;
        }
        
        .control-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .control-value {
            font-weight: 600;
            color: #00ffff;
            font-family: 'Consolas', monospace;
            background: rgba(0, 255, 255, 0.1);
            padding: 2px 8px;
            border-radius: 4px;
        }
        
        /* Slider Styles */
        .slider-container {
            position: relative;
            height: 40px;
        }
        
        .slider {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            outline: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #00ffff;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.8);
            transition: all 0.2s ease;
        }
        
        .slider::-webkit-slider-thumb:hover {
            background: #00ffff;
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
            transform: scale(1.2);
        }
        
        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #00ffff;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.8);
        }
        
        /* Color Picker */
        .color-picker-container {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        #colorPicker {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            background: transparent;
        }
        
        .color-preview {
            width: 100%;
            height: 40px;
            border-radius: 8px;
            background: linear-gradient(90deg, 
                rgba(5, 76, 245, 1) 0%, 
                rgba(0, 255, 255, 1) 50%, 
                rgba(255, 0, 255, 1) 100%);
            border: 2px solid rgba(255, 255, 255, 0.2);
        }
        
        /* Direction Select */
        .direction-select {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 8px;
        }
        
        .direction-btn {
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            text-align: center;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .direction-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }
        
        .direction-btn.active {
            background: rgba(0, 255, 255, 0.2);
            color: #00ffff;
            border-color: rgba(0, 255, 255, 0.5);
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
        }
        
        /* Toggle Switch */
        .toggle-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .toggle-switch {
            position: relative;
            width: 50px;
            height: 26px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 34px;
            transition: .4s;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 4px;
            bottom: 4px;
            background-color: #fff;
            border-radius: 50%;
            transition: .4s;
        }
        
        input:checked + .toggle-slider {
            background-color: rgba(0, 255, 255, 0.5);
        }
        
        input:checked + .toggle-slider:before {
            transform: translateX(24px);
            background-color: #00ffff;
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
        }
        
        /* Presets */
        .presets-container {
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .presets-title {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 12px;
        }
        
        .preset-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
        
        .preset-btn {
            padding: 8px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            font-size: 11px;
            transition: all 0.2s ease;
            text-align: center;
        }
        
        .preset-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }
        
        /* Status Bar */
        #statusBar {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(15, 15, 25, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 8px;
            padding: 10px 20px;
            color: #fff;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 15px;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .status-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .status-value {
            color: #00ffff;
            font-weight: 600;
        }
        
        /* Help Text */
        #helpText {
            position: fixed;
            bottom: 70px;
            left: 20px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
            max-width: 200px;
            line-height: 1.4;
        }
        
        /* Animation for menu toggle */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .menu-content {
            animation: slideIn 0.3s ease;
        }
        
        /* Mobile responsive */
        @media (max-width: 768px) {
            #controlMenu {
                width: 300px;
                right: 10px;
                top: 10px;
            }
            
            #controlMenu.collapsed {
                width: 50px;
                height: 50px;
            }
            
            #statusBar {
                bottom: 10px;
                left: 10px;
                right: 10px;
                transform: none;
                justify-content: space-around;
                padding: 8px 15px;
            }
        }
    </style>
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>

<div id="controlMenu">
    <div class="menu-header">
        <h2>Plasma Controls</h2>
        <button class="menu-toggle" id="menuToggle">
            <i class="fas fa-chevron-right"></i>
        </button>
    </div>
    
    <div class="menu-content">
        
        <div class="control-group">
            <div class="control-label">
                <span>Color</span>
                <span id="colorValue" class="control-value">#054CF5</span>
            </div>
            <div class="color-picker-container">
                <input type="color" id="colorPicker" value="#054CF5">
                <div class="color-preview" id="colorPreview"></div>
            </div>
        </div>
        
        
        <div class="control-group">
            <div class="control-label">
                <span>Speed</span>
                <span id="speedValue" class="control-value">1.0x</span>
            </div>
            <div class="slider-container">
                <input type="range" min="0.1" max="3" step="0.1" value="1" class="slider" id="speedSlider">
            </div>
        </div>
        
        
        <div class="control-group">
            <div class="control-label">
                <span>Direction</span>
                <span id="directionValue" class="control-value">Forward</span>
            </div>
            <div class="direction-select">
                <button class="direction-btn active" data-direction="forward">Forward</button>
                <button class="direction-btn" data-direction="reverse">Reverse</button>
                <button class="direction-btn" data-direction="pingpong">Ping Pong</button>
            </div>
        </div>
        
        
        <div class="control-group">
            <div class="control-label">
                <span>Scale</span>
                <span id="scaleValue" class="control-value">1.0</span>
            </div>
            <div class="slider-container">
                <input type="range" min="0.5" max="3" step="0.1" value="1" class="slider" id="scaleSlider">
            </div>
        </div>
        
        
        <div class="control-group">
            <div class="control-label">
                <span>Opacity</span>
                <span id="opacityValue" class="control-value">100%</span>
            </div>
            <div class="slider-container">
                <input type="range" min="0" max="100" step="1" value="100" class="slider" id="opacitySlider">
            </div>
        </div>
        
        
        <div class="control-group">
            <div class="control-label toggle-container">
                <span>Mouse Interaction</span>
                <label class="toggle-switch">
                    <input type="checkbox" id="mouseToggle" checked>
                    <span class="toggle-slider"></span>
                </label>
            </div>
        </div>
        
        
        <div class="presets-container">
            <div class="presets-title">Presets</div>
            <div class="preset-buttons">
                <button class="preset-btn" data-preset="ocean">Ocean</button>
                <button class="preset-btn" data-preset="fire">Fire</button>
                <button class="preset-btn" data-preset="neon">Neon</button>
                <button class="preset-btn" data-preset="aurora">Aurora</button>
            </div>
        </div>
    </div>
</div>

<div id="statusBar">
    <div class="status-item">
        <i class="fas fa-tachometer-alt"></i>
        <span>Speed: <span id="statusSpeed" class="status-value">1.0x</span></span>
    </div>
    <div class="status-item">
        <i class="fas fa-compress-arrows-alt"></i>
        <span>Scale: <span id="statusScale" class="status-value">1.0</span></span>
    </div>
    <div class="status-item">
        <i class="fas fa-eye"></i>
        <span>Opacity: <span id="statusOpacity" class="status-value">100%</span></span>
    </div>
    <div class="status-item">
        <i class="fas fa-mouse-pointer"></i>
        <span>Mouse: <span id="statusMouse" class="status-value">ON</span></span>
    </div>
</div>

<div id="helpText">
    Press <kbd>M</kbd> to toggle menu | <kbd>R</kbd> to reset | <kbd>H</kbd> to hide
</div>

const vertexShaderSource = `#version 300 es
precision highp float;
in vec2 position;
in vec2 uv;
out vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = vec4(position, 0.0, 1.0);
}
`;

const fragmentShaderSource = `#version 300 es
precision highp float;
uniform vec2 iResolution;
uniform float iTime;
uniform vec3 uCustomColor;
uniform float uUseCustomColor;
uniform float uSpeed;
uniform float uDirection;
uniform float uScale;
uniform float uOpacity;
uniform vec2 uMouse;
uniform float uMouseInteractive;
out vec4 fragColor;

void mainImage(out vec4 o, vec2 C) {
  vec2 center = iResolution.xy * 0.5;
  C = (C - center) / uScale + center;

vec2 mouseOffset = (uMouse - center) * 0.0002;
  C += mouseOffset * length(C - center) * step(0.5, uMouseInteractive);

float i, d, z, T = iTime * uSpeed * uDirection;
  vec3 O, p, S;

for (vec2 r = iResolution.xy, Q; ++i < 60.; O += o.w/d*o.xyz) {
    p = z*normalize(vec3(C-.5*r,r.y));
    p.z -= 4.;
    S = p;
    d = p.y-T;

p.x += .4*(1.+p.y)*sin(d + p.x*0.1)*cos(.34*d + p.x*0.05);
    Q = p.xz *= mat2(cos(p.y+vec4(0,11,33,0)-T));
    z+= d = abs(sqrt(length(Q*Q)) - .25*(5.+S.y))/3.+8e-4;
    o = 1.+sin(S.y+p.z*.5+S.z-length(S-p)+vec4(2,1,0,8));
  }

o.xyz = tanh(O/1e4);
}

bool finite1(float x){ return !(isnan(x) || isinf(x)); }
vec3 sanitize(vec3 c){
  return vec3(
    finite1(c.r) ? c.r : 0.0,
    finite1(c.g) ? c.g : 0.0,
    finite1(c.b) ? c.b : 0.0
  );
}

void main() {
  vec4 o = vec4(0.0);
  mainImage(o, gl_FragCoord.xy);
  vec3 rgb = sanitize(o.rgb);

float intensity = (rgb.r + rgb.g + rgb.b) / 3.0;
  vec3 customColor = intensity * uCustomColor;
  vec3 finalColor = mix(rgb, customColor, step(0.5, uUseCustomColor));

float alpha = length(rgb) * uOpacity;
  fragColor = vec4(finalColor, alpha);
}`;

class Plasma {
        constructor(container, options = {}) {
            this.container = container;
            this.options = {
                color: options.color || '#054cf5',
                speed: options.speed || 1,
                direction: options.direction || 'forward',
                scale: options.scale || 1,
                opacity: options.opacity || 1,
                mouseInteractive: options.mouseInteractive !== false
            };

this.mousePos = { x: 0, y: 0 };
            this.init();
        }

createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                console.error('Error compilando shader:', gl.getShaderInfoLog(shader));
                gl.deleteShader(shader);
                return null;
            }

return shader;
        }

init() {
            const canvas = document.createElement('canvas');
            const gl = canvas.getContext('webgl2', { alpha: true, antialias: false });

if (!gl) {
                console.error('WebGL2 no disponible');
                return;
            }

this.gl = gl;
            this.canvas = canvas;
            canvas.style.display = 'block';
            canvas.style.width = '100%';
            canvas.style.height = '100%';
            this.container.appendChild(canvas);

const vertexShader = this.createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
            const fragmentShader = this.createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

this.program = gl.createProgram();
            gl.attachShader(this.program, vertexShader);
            gl.attachShader(this.program, fragmentShader);
            gl.linkProgram(this.program);

if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
                console.error('Error enlazando programa:', gl.getProgramInfoLog(this.program));
                return;
            }

gl.useProgram(this.program);

// Crear geometría de triángulo que cubre toda la pantalla
            const positions = new Float32Array([
                -1, -1,
                -1, 4,
                4, -1
            ]);

const uvs = new Float32Array([
                0, 0,
                0, 2,
                2, 0
            ]);

const positionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

const positionLoc = gl.getAttribLocation(this.program, 'position');
            gl.enableVertexAttribArray(positionLoc);
            gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);

const uvBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW);

const uvLoc = gl.getAttribLocation(this.program, 'uv');
            gl.enableVertexAttribArray(uvLoc);
            gl.vertexAttribPointer(uvLoc, 2, gl.FLOAT, false, 0, 0);

// Uniforms
            this.uniforms = {
                iTime: gl.getUniformLocation(this.program, 'iTime'),
                iResolution: gl.getUniformLocation(this.program, 'iResolution'),
                uCustomColor: gl.getUniformLocation(this.program, 'uCustomColor'),
                uUseCustomColor: gl.getUniformLocation(this.program, 'uUseCustomColor'),
                uSpeed: gl.getUniformLocation(this.program, 'uSpeed'),
                uDirection: gl.getUniformLocation(this.program, 'uDirection'),
                uScale: gl.getUniformLocation(this.program, 'uScale'),
                uOpacity: gl.getUniformLocation(this.program, 'uOpacity'),
                uMouse: gl.getUniformLocation(this.program, 'uMouse'),
                uMouseInteractive: gl.getUniformLocation(this.program, 'uMouseInteractive')
            };

this.setOptions(this.options);

if (this.options.mouseInteractive) {
                this.handleMouseMove = (e) => {
                    const rect = this.container.getBoundingClientRect();
                    this.mousePos.x = e.clientX - rect.left;
                    this.mousePos.y = e.clientY - rect.top;
                    gl.uniform2f(this.uniforms.uMouse, this.mousePos.x, this.mousePos.y);
                };
                this.container.addEventListener('mousemove', this.handleMouseMove);
            }

this.setSize();

this.resizeObserver = new ResizeObserver(() => this.setSize());
            this.resizeObserver.observe(this.container);

gl.enable(gl.BLEND);
            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

this.t0 = performance.now();
            this.animate();
        }

setSize() {
            const rect = this.container.getBoundingClientRect();
            const dpr = Math.min(window.devicePixelRatio || 1, 2);
            const width = Math.max(1, Math.floor(rect.width * dpr));
            const height = Math.max(1, Math.floor(rect.height * dpr));

this.canvas.width = width;
            this.canvas.height = height;

this.gl.viewport(0, 0, width, height);
            this.gl.uniform2f(this.uniforms.iResolution, width, height);
        }

setOptions(options) {
            const gl = this.gl;
            
            if (options.color !== undefined) {
                const rgb = hexToRgb(options.color);
                gl.uniform3f(this.uniforms.uCustomColor, ...rgb);
                gl.uniform1f(this.uniforms.uUseCustomColor, 1.0);
            }
            
            if (options.speed !== undefined) {
                this.options.speed = options.speed;
                gl.uniform1f(this.uniforms.uSpeed, options.speed * 0.4);
            }
            
            if (options.direction !== undefined) {
                this.options.direction = options.direction;
                let directionMultiplier = 1.0;
                if (options.direction === 'reverse') directionMultiplier = -1.0;
                if (options.direction === 'pingpong') directionMultiplier = 1.0;
                
                gl.uniform1f(this.uniforms.uDirection, directionMultiplier);
                this.directionMultiplier = directionMultiplier;
            }
            
            if (options.scale !== undefined) {
                this.options.scale = options.scale;
                gl.uniform1f(this.uniforms.uScale, options.scale);
            }
            
            if (options.opacity !== undefined) {
                this.options.opacity = options.opacity;
                gl.uniform1f(this.uniforms.uOpacity, options.opacity);
            }
            
            if (options.mouseInteractive !== undefined) {
                this.options.mouseInteractive = options.mouseInteractive;
                gl.uniform1f(this.uniforms.uMouseInteractive, options.mouseInteractive ? 1.0 : 0.0);
                
                if (options.mouseInteractive && !this.handleMouseMove) {
                    this.handleMouseMove = (e) => {
                        const rect = this.container.getBoundingClientRect();
                        this.mousePos.x = e.clientX - rect.left;
                        this.mousePos.y = e.clientY - rect.top;
                        gl.uniform2f(this.uniforms.uMouse, this.mousePos.x, this.mousePos.y);
                    };
                    this.container.addEventListener('mousemove', this.handleMouseMove);
                } else if (!options.mouseInteractive && this.handleMouseMove) {
                    this.container.removeEventListener('mousemove', this.handleMouseMove);
                    this.handleMouseMove = null;
                    gl.uniform2f(this.uniforms.uMouse, 0, 0);
                }
            }
        }

animate() {
            const t = performance.now();
            let timeValue = (t - this.t0) * 0.001;

if (this.options.direction === 'pingpong') {
                const cycle = Math.sin(timeValue * 0.5) * this.directionMultiplier;
                this.gl.uniform1f(this.uniforms.uDirection, cycle);
            }

this.gl.uniform1f(this.uniforms.iTime, timeValue);

this.gl.clearColor(0, 0, 0, 0);
            this.gl.clear(this.gl.COLOR_BUFFER_BIT);
            this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);

this.raf = requestAnimationFrame(() => this.animate());
        }

dispose() {
            cancelAnimationFrame(this.raf);
            this.resizeObserver?.disconnect();
            if (this.handleMouseMove) {
                this.container.removeEventListener('mousemove', this.handleMouseMove);
            }
            try {
                if (this.canvas && this.canvas.parentElement === this.container) {
                    this.container.removeChild(this.canvas);
                }
            } catch (e) {
                console.warn('Canvas ya fue removido');
            }
        }
    }

// UI Controls Management
    class PlasmaControls {
        constructor() {
            this.plasma = null;
            this.isMenuCollapsed = false;
            this.init();
        }

init() {
            // Initialize plasma
            const container = document.getElementById('container');
            this.plasma = new Plasma(container, {
                color: '#054cf5',
                speed: 1,
                direction: 'forward',
                scale: 1,
                opacity: 1,
                mouseInteractive: true
            });

// Setup UI controls
            this.setupControls();
            
            // Setup keyboard shortcuts
            this.setupKeyboardShortcuts();
            
            // Update status bar
            this.updateStatusBar();
        }

setupControls() {
            // Menu toggle
            document.getElementById('menuToggle').addEventListener('click', () => {
                this.toggleMenu();
            });

// Color picker
            const colorPicker = document.getElementById('colorPicker');
            const colorPreview = document.getElementById('colorPreview');
            
            colorPicker.addEventListener('input', (e) => {
                const color = e.target.value;
                this.updateColor(color);
                colorPreview.style.background = color;
            });

// Speed slider
            const speedSlider = document.getElementById('speedSlider');
            speedSlider.addEventListener('input', (e) => {
                const speed = parseFloat(e.target.value);
                this.updateSpeed(speed);
            });

// Scale slider
            const scaleSlider = document.getElementById('scaleSlider');
            scaleSlider.addEventListener('input', (e) => {
                const scale = parseFloat(e.target.value);
                this.updateScale(scale);
            });

// Opacity slider
            const opacitySlider = document.getElementById('opacitySlider');
            opacitySlider.addEventListener('input', (e) => {
                const opacity = parseInt(e.target.value) / 100;
                this.updateOpacity(opacity);
            });

// Direction buttons
            document.querySelectorAll('.direction-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const direction = e.target.dataset.direction;
                    this.updateDirection(direction);
                    
                    // Update active button
                    document.querySelectorAll('.direction-btn').forEach(b => b.classList.remove('active'));
                    e.target.classList.add('active');
                });
            });

// Mouse toggle
            const mouseToggle = document.getElementById('mouseToggle');
            mouseToggle.addEventListener('change', (e) => {
                this.updateMouseInteractive(e.target.checked);
            });

// Preset buttons
            document.querySelectorAll('.preset-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const preset = e.target.dataset.preset;
                    this.applyPreset(preset);
                });
            });

// Update color preview
            colorPreview.style.background = colorPicker.value;
        }

setupKeyboardShortcuts() {
            document.addEventListener('keydown', (e) => {
                // Toggle menu with M
                if (e.key === 'm' || e.key === 'M') {
                    e.preventDefault();
                    this.toggleMenu();
                }
                
                // Reset with R
                if (e.key === 'r' || e.key === 'R') {
                    e.preventDefault();
                    this.resetToDefaults();
                }
                
                // Hide/show status bar with H
                if (e.key === 'h' || e.key === 'H') {
                    e.preventDefault();
                    this.toggleStatusBar();
                }
            });
        }

toggleMenu() {
            const menu = document.getElementById('controlMenu');
            this.isMenuCollapsed = !this.isMenuCollapsed;
            menu.classList.toggle('collapsed', this.isMenuCollapsed);
            
            // Update toggle button icon
            const toggleIcon = document.querySelector('#menuToggle i');
            toggleIcon.className = this.isMenuCollapsed ? 'fas fa-chevron-left' : 'fas fa-chevron-right';
        }

updateColor(color) {
            this.plasma.setOptions({ color });
            document.getElementById('colorValue').textContent = color.toUpperCase();
            this.updateStatusBar();
        }

updateSpeed(speed) {
            this.plasma.setOptions({ speed });
            document.getElementById('speedValue').textContent = speed.toFixed(1) + 'x';
            this.updateStatusBar();
        }

updateDirection(direction) {
            this.plasma.setOptions({ direction });
            const directionText = direction === 'forward' ? 'Forward' : 
                                 direction === 'reverse' ? 'Reverse' : 'Ping Pong';
            document.getElementById('directionValue').textContent = directionText;
            this.updateStatusBar();
        }

updateScale(scale) {
            this.plasma.setOptions({ scale });
            document.getElementById('scaleValue').textContent = scale.toFixed(1);
            this.updateStatusBar();
        }

updateOpacity(opacity) {
            this.plasma.setOptions({ opacity });
            const opacityPercent = Math.round(opacity * 100);
            document.getElementById('opacityValue').textContent = opacityPercent + '%';
            this.updateStatusBar();
        }

updateMouseInteractive(active) {
            this.plasma.setOptions({ mouseInteractive: active });
            document.getElementById('statusMouse').textContent = active ? 'ON' : 'OFF';
            this.updateStatusBar();
        }

applyPreset(preset) {
            let options = {};
            
            switch(preset) {
                case 'ocean':
                    options = { color: '#054cf5', speed: 0.8, direction: 'forward', scale: 1.2, opacity: 0.9 };
                    break;
                case 'fire':
                    options = { color: '#ff4500', speed: 2.0, direction: 'pingpong', scale: 0.8, opacity: 1.0 };
                    break;
                case 'neon':
                    options = { color: '#00ff00', speed: 1.5, direction: 'reverse', scale: 1.5, opacity: 0.8 };
                    break;
                case 'aurora':
                    options = { color: '#8a2be2', speed: 0.5, direction: 'forward', scale: 1.0, opacity: 0.7 };
                    break;
            }
            
            // Update plasma
            this.plasma.setOptions(options);
            
            // Update UI controls
            if (options.color) {
                document.getElementById('colorPicker').value = options.color;
                document.getElementById('colorPreview').style.background = options.color;
                document.getElementById('colorValue').textContent = options.color.toUpperCase();
            }
            
            if (options.speed !== undefined) {
                document.getElementById('speedSlider').value = options.speed;
                document.getElementById('speedValue').textContent = options.speed.toFixed(1) + 'x';
            }
            
            if (options.direction) {
                const directionText = options.direction === 'forward' ? 'Forward' : 
                                     options.direction === 'reverse' ? 'Reverse' : 'Ping Pong';
                document.getElementById('directionValue').textContent = directionText;
                
                // Update active direction button
                document.querySelectorAll('.direction-btn').forEach(btn => {
                    btn.classList.toggle('active', btn.dataset.direction === options.direction);
                });
            }
            
            if (options.scale !== undefined) {
                document.getElementById('scaleSlider').value = options.scale;
                document.getElementById('scaleValue').textContent = options.scale.toFixed(1);
            }
            
            if (options.opacity !== undefined) {
                const opacityPercent = Math.round(options.opacity * 100);
                document.getElementById('opacitySlider').value = opacityPercent;
                document.getElementById('opacityValue').textContent = opacityPercent + '%';
            }
            
            this.updateStatusBar();
            
            // Show notification
            this.showNotification(`Applied ${preset} preset`);
        }

resetToDefaults() {
            this.applyPreset('ocean');
            this.showNotification('Reset to default settings');
        }

toggleStatusBar() {
            const statusBar = document.getElementById('statusBar');
            const isHidden = statusBar.style.display === 'none';
            statusBar.style.display = isHidden ? 'flex' : 'none';
            this.showNotification(isHidden ? 'Status bar shown' : 'Status bar hidden');
        }

updateStatusBar() {
            document.getElementById('statusSpeed').textContent = 
                document.getElementById('speedValue').textContent;
            document.getElementById('statusScale').textContent = 
                document.getElementById('scaleValue').textContent;
            document.getElementById('statusOpacity').textContent = 
                document.getElementById('opacityValue').textContent;
        }

showNotification(message) {
            // Create notification element
            const notification = document.createElement('div');
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(15, 15, 25, 0.9);
                color: #00ffff;
                padding: 10px 20px;
                border-radius: 8px;
                font-size: 14px;
                z-index: 2000;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                border: 1px solid rgba(0, 255, 255, 0.3);
                animation: fadeInOut 2s ease;
            `;
            
            // Add CSS animation
            const style = document.createElement('style');
            style.textContent = `
                @keyframes fadeInOut {
                    0% { opacity: 0; transform: translate(-50%, -20px); }
                    15% { opacity: 1; transform: translate(-50%, 0); }
                    85% { opacity: 1; transform: translate(-50%, 0); }
                    100% { opacity: 0; transform: translate(-50%, -20px); }
                }
            `;
            document.head.appendChild(style);
            
            notification.textContent = message;
            document.body.appendChild(notification);
            
            // Remove after animation
            setTimeout(() => {
                notification.remove();
                style.remove();
            }, 2000);
        }
    }

// Initialize when DOM is loaded
    window.addEventListener('DOMContentLoaded', () => {
        new PlasmaControls();
    });
</script>

</body>
</html>

Related Examples

card section neon
card section neon

Author:
Omer fils ELENGA

1 month ago

245
Hero Beer

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

1 year ago

5k
Hero with SVG background
It has a nice 'Sign Up with Google' CTA button

Author:
Santiago Hernandez

1 year ago

2.4k
Nature Hero

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

1 year ago

2k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

1 year ago

1.9k
App Hero Section

Author:
Abdul Baset Bappy

8 months ago

966
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
The future ai
The is technology

Author:
ORGIN_DREAMS

9 months ago

890
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

10 months ago

1.9k
Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

Author:
Coastal UI

1 year ago

2.4k
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

Author:
SHARIFUL ISLAM

1 year ago

1.8k
Food App Web design

Author:
Aitrik Saha

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components