Plasma

plasma

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

Header Animation

Author Raul antonio de la cruz hernandez

562

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

Author:
Ijila Itunu

9 months ago

1.4k
Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

4 months ago

778
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

1 year ago

5.1k
home
html , css

Author:
Hacker Development

9 months ago

1.9k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

5 months ago

469
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

2 years ago

21.2k
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Author:
Homayoun

2 months ago

199
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

4 months ago

397
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

8 months ago

981
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

11 months ago

1.3k
sticky headings
sticky headings

Author:
Anonymous

2 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components