Pixel Blast

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 Other Gradient Animation

Author Raul antonio de la cruz hernandez

Tailwind v3.4 1.3k 5

Fork Fullscreen

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PixelBlast 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;
}
</style>
</head>
<body>

const createLiquidEffect = (texture, opts) => {
  const fragment = `
    uniform sampler2D uTexture;
    uniform float uStrength;
    uniform float uTime;
    uniform float uFreq;

void mainUv(inout vec2 uv) {
      vec4 tex = texture2D(uTexture, uv);
      float vx = tex.r * 2.0 - 1.0;
      float vy = tex.g * 2.0 - 1.0;
      float intensity = tex.b;

float wave = 0.5 + 0.5 * sin(uTime * uFreq + intensity * 6.2831853);

float amt = uStrength * intensity * wave;

uv += vec2(vx, vy) * amt;
    }
    `;
  return new Effect('LiquidEffect', fragment, {
    uniforms: new Map([
      ['uTexture', new THREE.Uniform(texture)],
      ['uStrength', new THREE.Uniform(opts?.strength ?? 0.025)],
      ['uTime', new THREE.Uniform(0)],
      ['uFreq', new THREE.Uniform(opts?.freq ?? 4.5)]
    ])
  });
};

const SHAPE_MAP = {
  square: 0,
  circle: 1,
  triangle: 2,
  diamond: 3
};

const VERTEX_SRC = `
void main() {
  gl_Position = vec4(position, 1.0);
}
`;

const FRAGMENT_SRC = `
precision highp float;

uniform vec3  uColor;
uniform vec2  uResolution;
uniform float uTime;
uniform float uPixelSize;
uniform float uScale;
uniform float uDensity;
uniform float uPixelJitter;
uniform int   uEnableRipples;
uniform float uRippleSpeed;
uniform float uRippleThickness;
uniform float uRippleIntensity;
uniform float uEdgeFade;

uniform int   uShapeType;
const int SHAPE_SQUARE   = 0;
const int SHAPE_CIRCLE   = 1;
const int SHAPE_TRIANGLE = 2;
const int SHAPE_DIAMOND  = 3;

const int   MAX_CLICKS = 10;

uniform vec2  uClickPos  [MAX_CLICKS];
uniform float uClickTimes[MAX_CLICKS];

out vec4 fragColor;

float Bayer2(vec2 a) {
  a = floor(a);
  return fract(a.x / 2. + a.y * a.y * .75);
}
#define Bayer4(a) (Bayer2(.5*(a))*0.25 + Bayer2(a))
#define Bayer8(a) (Bayer4(.5*(a))*0.25 + Bayer2(a))

#define FBM_OCTAVES     5
#define FBM_LACUNARITY  1.25
#define FBM_GAIN        1.0

float hash11(float n){ return fract(sin(n)*43758.5453); }

float vnoise(vec3 p){
  vec3 ip = floor(p);
  vec3 fp = fract(p);
  float n000 = hash11(dot(ip + vec3(0.0,0.0,0.0), vec3(1.0,57.0,113.0)));
  float n100 = hash11(dot(ip + vec3(1.0,0.0,0.0), vec3(1.0,57.0,113.0)));
  float n010 = hash11(dot(ip + vec3(0.0,1.0,0.0), vec3(1.0,57.0,113.0)));
  float n110 = hash11(dot(ip + vec3(1.0,1.0,0.0), vec3(1.0,57.0,113.0)));
  float n001 = hash11(dot(ip + vec3(0.0,0.0,1.0), vec3(1.0,57.0,113.0)));
  float n101 = hash11(dot(ip + vec3(1.0,0.0,1.0), vec3(1.0,57.0,113.0)));
  float n011 = hash11(dot(ip + vec3(0.0,1.0,1.0), vec3(1.0,57.0,113.0)));
  float n111 = hash11(dot(ip + vec3(1.0,1.0,1.0), vec3(1.0,57.0,113.0)));
  vec3 w = fp*fp*fp*(fp*(fp*6.0-15.0)+10.0);
  float x00 = mix(n000, n100, w.x);
  float x10 = mix(n010, n110, w.x);
  float x01 = mix(n001, n101, w.x);
  float x11 = mix(n011, n111, w.x);
  float y0  = mix(x00, x10, w.y);
  float y1  = mix(x01, x11, w.y);
  return mix(y0, y1, w.z) * 2.0 - 1.0;
}

float fbm2(vec2 uv, float t){
  vec3 p = vec3(uv * uScale, t);
  float amp = 1.0;
  float freq = 1.0;
  float sum = 1.0;
  for (int i = 0; i < FBM_OCTAVES; ++i){
    sum  += amp * vnoise(p * freq);
    freq *= FBM_LACUNARITY;
    amp  *= FBM_GAIN;
  }
  return sum * 0.5 + 0.5;
}

float maskCircle(vec2 p, float cov){
  float r = sqrt(cov) * .25;
  float d = length(p - 0.5) - r;
  float aa = 0.5 * fwidth(d);
  return cov * (1.0 - smoothstep(-aa, aa, d * 2.0));
}

float maskTriangle(vec2 p, vec2 id, float cov){
  bool flip = mod(id.x + id.y, 2.0) > 0.5;
  if (flip) p.x = 1.0 - p.x;
  float r = sqrt(cov);
  float d  = p.y - r*(1.0 - p.x);
  float aa = fwidth(d);
  return cov * clamp(0.5 - d/aa, 0.0, 1.0);
}

float maskDiamond(vec2 p, float cov){
  float r = sqrt(cov) * 0.564;
  return step(abs(p.x - 0.49) + abs(p.y - 0.49), r);
}

void main(){
  float pixelSize = uPixelSize;
  vec2 fragCoord = gl_FragCoord.xy - uResolution * .5;
  float aspectRatio = uResolution.x / uResolution.y;

vec2 pixelId = floor(fragCoord / pixelSize);
  vec2 pixelUV = fract(fragCoord / pixelSize);

float cellPixelSize = 8.0 * pixelSize;
  vec2 cellId = floor(fragCoord / cellPixelSize);
  vec2 cellCoord = cellId * cellPixelSize;
  vec2 uv = cellCoord / uResolution * vec2(aspectRatio, 1.0);

float base = fbm2(uv, uTime * 0.05);
  base = base * 0.5 - 0.65;

float feed = base + (uDensity - 0.5) * 0.3;

float speed     = uRippleSpeed;
  float thickness = uRippleThickness;
  const float dampT     = 1.0;
  const float dampR     = 10.0;

if (uEnableRipples == 1) {
    for (int i = 0; i < MAX_CLICKS; ++i){
      vec2 pos = uClickPos[i];
      if (pos.x < 0.0) continue;
      float cellPixelSize = 8.0 * pixelSize;
      vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution))) * vec2(aspectRatio, 1.0);
      float t = max(uTime - uClickTimes[i], 0.0);
      float r = distance(uv, cuv);
      float waveR = speed * t;
      float ring  = exp(-pow((r - waveR) / thickness, 2.0));
      float atten = exp(-dampT * t) * exp(-dampR * r);
      feed = max(feed, ring * atten * uRippleIntensity);
    }
  }

float bayer = Bayer8(fragCoord / uPixelSize) - 0.5;
  float bw = step(0.5, feed + bayer);

float h = fract(sin(dot(floor(fragCoord / uPixelSize), vec2(127.1, 311.7))) * 43758.5453);
  float jitterScale = 1.0 + (h - 0.5) * uPixelJitter;
  float coverage = bw * jitterScale;
  float M;
  if      (uShapeType == SHAPE_CIRCLE)   M = maskCircle (pixelUV, coverage);
  else if (uShapeType == SHAPE_TRIANGLE) M = maskTriangle(pixelUV, pixelId, coverage);
  else if (uShapeType == SHAPE_DIAMOND)  M = maskDiamond(pixelUV, coverage);
  else                                   M = coverage;

if (uEdgeFade > 0.0) {
    vec2 norm = gl_FragCoord.xy / uResolution;
    float edge = min(min(norm.x, norm.y), min(1.0 - norm.x, 1.0 - norm.y));
    float fade = smoothstep(0.0, uEdgeFade, edge);
    M *= fade;
  }

vec3 color = uColor;
  fragColor = vec4(color, M);
}
`;

const MAX_CLICKS = 10;

class PixelBlast {
  constructor(container, options = {}) {
    this.container = container;
    this.options = {
      variant: options.variant || 'square',
      pixelSize: options.pixelSize || 3,
      color: options.color || '#B19EEF',
      antialias: options.antialias !== false,
      patternScale: options.patternScale || 2,
      patternDensity: options.patternDensity || 1,
      liquid: options.liquid || false,
      liquidStrength: options.liquidStrength || 0.1,
      liquidRadius: options.liquidRadius || 1,
      pixelSizeJitter: options.pixelSizeJitter || 0,
      enableRipples: options.enableRipples !== false,
      rippleIntensityScale: options.rippleIntensityScale || 1,
      rippleThickness: options.rippleThickness || 0.1,
      rippleSpeed: options.rippleSpeed || 0.3,
      liquidWobbleSpeed: options.liquidWobbleSpeed || 4.5,
      speed: options.speed || 0.5,
      transparent: options.transparent !== false,
      edgeFade: options.edgeFade || 0.5,
      noiseAmount: options.noiseAmount || 0
    };
    
    this.init();
  }

init() {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl2', { 
      antialias: this.options.antialias, 
      alpha: true 
    });
    
    if (!gl) {
      console.error('WebGL2 not available');
      return;
    }

this.renderer = new THREE.WebGLRenderer({
      canvas,
      context: gl,
      antialias: this.options.antialias,
      alpha: true
    });
    
    this.renderer.domElement.style.width = '100%';
    this.renderer.domElement.style.height = '100%';
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
    this.container.appendChild(this.renderer.domElement);

this.uniforms = {
      uResolution: { value: new THREE.Vector2(0, 0) },
      uTime: { value: 0 },
      uColor: { value: new THREE.Color(this.options.color) },
      uClickPos: {
        value: Array.from({ length: MAX_CLICKS }, () => new THREE.Vector2(-1, -1))
      },
      uClickTimes: { value: new Float32Array(MAX_CLICKS) },
      uShapeType: { value: SHAPE_MAP[this.options.variant] ?? 0 },
      uPixelSize: { value: this.options.pixelSize * this.renderer.getPixelRatio() },
      uScale: { value: this.options.patternScale },
      uDensity: { value: this.options.patternDensity },
      uPixelJitter: { value: this.options.pixelSizeJitter },
      uEnableRipples: { value: this.options.enableRipples ? 1 : 0 },
      uRippleSpeed: { value: this.options.rippleSpeed },
      uRippleThickness: { value: this.options.rippleThickness },
      uRippleIntensity: { value: this.options.rippleIntensityScale },
      uEdgeFade: { value: this.options.edgeFade }
    };

this.scene = new THREE.Scene();
    this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
    
    this.material = new THREE.ShaderMaterial({
      vertexShader: VERTEX_SRC,
      fragmentShader: FRAGMENT_SRC,
      uniforms: this.uniforms,
      transparent: true,
      glslVersion: THREE.GLSL3,
      depthTest: false,
      depthWrite: false
    });

const quadGeom = new THREE.PlaneGeometry(2, 2);
    this.quad = new THREE.Mesh(quadGeom, this.material);
    this.scene.add(this.quad);

this.clock = new THREE.Clock();
    this.clickIx = 0;
    
    const randomFloat = () => {
      if (typeof window !== 'undefined' && window.crypto?.getRandomValues) {
        const u32 = new Uint32Array(1);
        window.crypto.getRandomValues(u32);
        return u32[0] / 0xffffffff;
      }
      return Math.random();
    };
    
    this.timeOffset = randomFloat() * 1000;

if (this.options.liquid) {
      this.touch = createTouchTexture();
      this.touch.radiusScale = this.options.liquidRadius;
      this.composer = new EffectComposer(this.renderer);
      const renderPass = new RenderPass(this.scene, this.camera);
      this.liquidEffect = createLiquidEffect(this.touch.texture, {
        strength: this.options.liquidStrength,
        freq: this.options.liquidWobbleSpeed
      });
      const effectPass = new EffectPass(this.camera, this.liquidEffect);
      effectPass.renderToScreen = true;
      this.composer.addPass(renderPass);
      this.composer.addPass(effectPass);
    }

if (this.options.noiseAmount > 0) {
      if (!this.composer) {
        this.composer = new EffectComposer(this.renderer);
        this.composer.addPass(new RenderPass(this.scene, this.camera));
      }
      const noiseEffect = new Effect(
        'NoiseEffect',
        `uniform float uTime; uniform float uAmount; float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453);} void mainUv(inout vec2 uv){} void mainImage(const in vec4 inputColor,const in vec2 uv,out vec4 outputColor){ float n=hash(floor(uv*vec2(1920.0,1080.0))+floor(uTime*60.0)); float g=(n-0.5)*uAmount; outputColor=inputColor+vec4(vec3(g),0.0);} `,
        {
          uniforms: new Map([
            ['uTime', new THREE.Uniform(0)],
            ['uAmount', new THREE.Uniform(this.options.noiseAmount)]
          ])
        }
      );
      const noisePass = new EffectPass(this.camera, noiseEffect);
      noisePass.renderToScreen = true;
      if (this.composer && this.composer.passes.length > 0) {
        this.composer.passes.forEach(p => (p.renderToScreen = false));
      }
      this.composer.addPass(noisePass);
    }

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

this.renderer.domElement.addEventListener('pointerdown', (e) => this.onPointerDown(e), { passive: true });
    this.renderer.domElement.addEventListener('pointermove', (e) => this.onPointerMove(e), { passive: true });

this.animate();
  }

setSize() {
    const w = this.container.clientWidth || 1;
    const h = this.container.clientHeight || 1;
    this.renderer.setSize(w, h, false);
    this.uniforms.uResolution.value.set(
      this.renderer.domElement.width, 
      this.renderer.domElement.height
    );
    if (this.composer) {
      this.composer.setSize(
        this.renderer.domElement.width, 
        this.renderer.domElement.height
      );
    }
    this.uniforms.uPixelSize.value = this.options.pixelSize * this.renderer.getPixelRatio();
  }

mapToPixels(e) {
    const rect = this.renderer.domElement.getBoundingClientRect();
    const scaleX = this.renderer.domElement.width / rect.width;
    const scaleY = this.renderer.domElement.height / rect.height;
    const fx = (e.clientX - rect.left) * scaleX;
    const fy = (rect.height - (e.clientY - rect.top)) * scaleY;
    return {
      fx,
      fy,
      w: this.renderer.domElement.width,
      h: this.renderer.domElement.height
    };
  }

onPointerDown(e) {
    const { fx, fy } = this.mapToPixels(e);
    this.uniforms.uClickPos.value[this.clickIx].set(fx, fy);
    this.uniforms.uClickTimes.value[this.clickIx] = this.uniforms.uTime.value;
    this.clickIx = (this.clickIx + 1) % MAX_CLICKS;
  }

onPointerMove(e) {
    if (!this.touch) return;
    const { fx, fy, w, h } = this.mapToPixels(e);
    this.touch.addTouch({ x: fx / w, y: fy / h });
  }

animate() {
    this.uniforms.uTime.value = this.timeOffset + this.clock.getElapsedTime() * this.options.speed;
    
    if (this.liquidEffect) {
      this.liquidEffect.uniforms.get('uTime').value = this.uniforms.uTime.value;
    }
    
    if (this.composer) {
      if (this.touch) this.touch.update();
      this.composer.passes.forEach(p => {
        const effs = p.effects;
        if (effs) {
          effs.forEach(eff => {
            const u = eff.uniforms?.get('uTime');
            if (u) u.value = this.uniforms.uTime.value;
          });
        }
      });
      this.composer.render();
    } else {
      this.renderer.render(this.scene, this.camera);
    }
    
    requestAnimationFrame(() => this.animate());
  }

dispose() {
    this.resizeObserver?.disconnect();
    this.quad?.geometry.dispose();
    this.material.dispose();
    this.composer?.dispose();
    this.renderer.dispose();
    if (this.renderer.domElement.parentElement === this.container) {
      this.container.removeChild(this.renderer.domElement);
    }
  }
}

// Inicializar
window.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('container');
  new PixelBlast(container, {
    variant: 'circle',
    pixelSize: 3,
    color: '#B19EEF',
    liquid: true,
    liquidStrength: 0.1,
    enableRipples: true,
    rippleIntensityScale: 1,
    speed: 0.5
  });
});
</script>

</body>
</html>

Related Examples

Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.6k
background animation
background animation

Anonymous

3 years ago

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

Samuel Dawson

3 years ago

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

Anonymous

2 years ago

28.4k
background animation
background animation

Jayendra Madara

2 years ago

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

Walid Ahmad

2 years ago

4.3k
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Abhiraj

1 year ago

2.4k
Moving Background Animation

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

1 year ago

4.2k
ForK blocks animations
ForK blocks animations

Yor Rodriguez

1 year ago

2.4k
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

SHARIFUL ISLAM

1 year ago

2.3k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.6k