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.2k 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

2k
Pixel Blast
Pixel Blast

Raul antonio de la cruz hernandez

11 months ago

1.3k
Responsive Navbar
Tailwind Navbar

Md. Tofayel islam

2 years ago

8.5k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

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

2 years ago

6.4k
Modern Retail Analytics Dashboard UI with Interactive Charts
Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

JUGENDRA GANGWAR

2 months ago

277
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Amit Pachange

2 years ago

5.7k
car delivary
car delivary

bonheur dev

1 year ago

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

Anonymous

2 years ago

28.4k
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

SAI BENDE

1 year ago

1.5k
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
Onhover underline effect

Dika Rahman

2 years ago

4.4k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

230