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.4k
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Coastal UI

2 years ago

2.6k
OMERLINK MENU PAGE
OMERLINK MENU PAGE

Omer fils ELENGA

9 months ago

925
Brutalist Hero

threehymns

1 year ago

3k
Marquee animation with tailwind css

Anonymous

2 years ago

9.9k
Responsive Navbar
Tailwind Navbar

Md. Tofayel islam

2 years ago

8.6k
Animated button
on hover underline will go from left to right

Anonymous

2 years ago

6.1k
Modern SaaS Agency Landing Page with Dark Mode & Mobile MenuE-Com With nav and filter
A premium SaaS agency landing page built with HTML, Tailwind CSS, and JavaScript. It features a sticky glassmorphism navbar, responsive mobile navigation drawer, light/dark mode toggle, animated hero section, case studies, services, process timeline, testimonial, FAQ accordion, booking CTA, and a clean modern footer. Perfect for startups, AI products, software agencies, creative studios, and digital businesses.

JUGENDRA GANGWAR

3 months ago

518
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.8k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Ele Eriksen

1 year ago

1.3k
Tailwind Header
responsive mobile menu with a smooth transition

Anonymous

1 year ago

4.4k