Plasma

plasma

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 04-Oct-2025. Component is made with Tailwind v3.4. similar terms for this example is Transitions

Header Animation

Author Raul antonio de la cruz hernandez

Tailwind v3.4 1.3k 3

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</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: #000;
        }
        #container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body>

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 || '#00ffff',
                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
            const useCustomColor = this.options.color ? 1.0 : 0.0;
            const customColorRgb = this.options.color ? hexToRgb(this.options.color) : [1, 1, 1];
            const directionMultiplier = this.options.direction === 'reverse' ? -1.0 : 1.0;

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')
            };

gl.uniform3f(this.uniforms.uCustomColor, ...customColorRgb);
            gl.uniform1f(this.uniforms.uUseCustomColor, useCustomColor);
            gl.uniform1f(this.uniforms.uSpeed, this.options.speed * 0.4);
            gl.uniform1f(this.uniforms.uDirection, directionMultiplier);
            gl.uniform1f(this.uniforms.uScale, this.options.scale);
            gl.uniform1f(this.uniforms.uOpacity, this.options.opacity);
            gl.uniform2f(this.uniforms.uMouse, 0, 0);
            gl.uniform1f(this.uniforms.uMouseInteractive, this.options.mouseInteractive ? 1.0 : 0.0);

this.directionMultiplier = directionMultiplier;

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);
        }

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.options.mouseInteractive && 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');
            }
        }
    }

// Inicializar
    window.addEventListener('DOMContentLoaded', () => {
        const container = document.getElementById('container');
        new Plasma(container, {
            color: '#054cf5',        // Color del plasma
            speed: 1,                // Velocidad
            direction: 'forward',    // 'forward', 'reverse', 'pingpong'
            scale: 1,                // Escala
            opacity: 1,              // Opacidad
            mouseInteractive: false  // Interacción con mouse desactivada
        });
    });
</script>

</body>
</html>

Related Examples

Creative Hero Section

Ijila Itunu

1 year ago

2.1k
Pixel Blast
Pixel Blast

Raul antonio de la cruz hernandez

1 year ago

1.3k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Walid Ahmad

2 years ago

4.3k
SaaS Dashboard Navbar with Search, Notifications & Slide-In Mobile Menu
SaaS dashboard navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

278
Animated Gradient Background
animates a gradient background with vibrant colors. Slowly changes colors.

Anonymous

2 years ago

28.5k
App Hero Section With header

Abdul Baset Bappy

1 year ago

1.5k
Real Estate Website • Hero Section
polished, professional Hero section

UI-Templates

1 year ago

1.4k
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Homayoun

9 months ago

1.2k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Responsive Gradient Navbar

JUGENDRA GANGWAR

1 day ago

7
Hero Components

Sherry Lynne

1 month ago

101
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k