Cinematic Hover Smoke Interaction

A subtle smoke trail follows the cursor, turning movement into a fluid, atmospheric interaction—smooth, lightweight, and immersive.

View Animation Live

Setup Guide

Get the

Cinematic Hover Smoke Interaction

live on your website in just a few clicks

Copy code

Add custom Javascript to before </body>

Javascript

Copy

<script>
'use strict';

const container = document.querySelector('[smoke-container]');
const canvas = container ? container.querySelector('canvas') : null;
if (!canvas) throw new Error('No <canvas> found inside [smoke-container]');

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

let config = {
  TEXTURE_DOWNSAMPLE: 1,
  DENSITY_DISSIPATION: 0.98,
  VELOCITY_DISSIPATION: 0.99,
  PRESSURE_DISSIPATION: 0.8,
  PRESSURE_ITERATIONS: 25,
  CURL: 28,
  SPLAT_RADIUS: 0.004 };


let pointers = [];
let splatStack = [];

const { gl, ext } = getWebGLContext(canvas);

function getWebGLContext(canvas) {
  const params = { alpha: true, depth: false, stencil: false, antialias: false };

  let gl = canvas.getContext('webgl2', params);
  const isWebGL2 = !!gl;
  if (!isWebGL2)
  gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params);

  let halfFloat;
  let supportLinearFiltering;
  if (isWebGL2) {
    gl.getExtension('EXT_color_buffer_float');
    supportLinearFiltering = gl.getExtension('OES_texture_float_linear');
  } else {
    halfFloat = gl.getExtension('OES_texture_half_float');
    supportLinearFiltering = gl.getExtension('OES_texture_half_float_linear');
  }

  gl.clearColor(0.0, 0.0, 0.0, .2);

  const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;
  let formatRGBA;
  let formatRG;
  let formatR;

  if (isWebGL2)
  {
    formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType);
    formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType);
    formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType);
  } else

  {
    formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
    formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
    formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
  }

  return {
    gl,
    ext: {
      formatRGBA,
      formatRG,
      formatR,
      halfFloatTexType,
      supportLinearFiltering } };


}

function getSupportedFormat(gl, internalFormat, format, type)
{
  if (!supportRenderTextureFormat(gl, internalFormat, format, type))
  {
    switch (internalFormat) {

      case gl.R16F:
        return getSupportedFormat(gl, gl.RG16F, gl.RG, type);
      case gl.RG16F:
        return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type);
      default:
        return null;}

  }

  return {
    internalFormat,
    format };

}

function supportRenderTextureFormat(gl, internalFormat, format, type) {
  let texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null);

  let fbo = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  if (status != gl.FRAMEBUFFER_COMPLETE)
  return false;
  return true;
}

function pointerPrototype() {
  this.id = -1;
  this.x = 0;
  this.y = 0;
  this.dx = 0;
  this.dy = 0;
  this.down = false;
  this.moved = false;
  this.color = [30, 0, 300];
}

pointers.push(new pointerPrototype());

class GLProgram {
  constructor(vertexShader, fragmentShader) {
    this.uniforms = {};
    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))
    throw gl.getProgramInfoLog(this.program);

    const uniformCount = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);
    for (let i = 0; i < uniformCount; i++) {
      const uniformName = gl.getActiveUniform(this.program, i).name;
      this.uniforms[uniformName] = gl.getUniformLocation(this.program, uniformName);
    }
  }

  bind() {
    gl.useProgram(this.program);
  }}


function compileShader(type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
  throw gl.getShaderInfoLog(shader);

  return shader;
};

const baseVertexShader = compileShader(gl.VERTEX_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    attribute vec2 aPosition;
    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform vec2 texelSize;

    void main () {
        vUv = aPosition * 0.5 + 0.5;
        vL = vUv - vec2(texelSize.x, 0.0);
        vR = vUv + vec2(texelSize.x, 0.0);
        vT = vUv + vec2(0.0, texelSize.y);
        vB = vUv - vec2(0.0, texelSize.y);
        gl_Position = vec4(aPosition, 0.0, 1.0);
    }
`);

const clearShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uTexture;
    uniform float value;

    void main () {
        gl_FragColor = value * texture2D(uTexture, vUv);
    }
`);

const displayShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uTexture;

    void main () {
        gl_FragColor = texture2D(uTexture, vUv);
    }
`);

const splatShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uTarget;
    uniform float aspectRatio;
    uniform vec3 color;
    uniform vec2 point;
    uniform float radius;

    void main () {
        vec2 p = vUv - point.xy;
        p.x *= aspectRatio;
        vec3 splat = exp(-dot(p, p) / radius) * color;
        vec3 base = texture2D(uTarget, vUv).xyz;
        gl_FragColor = vec4(base + splat, 1.0);
    }
`);

const advectionManualFilteringShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uVelocity;
    uniform sampler2D uSource;
    uniform vec2 texelSize;
    uniform float dt;
    uniform float dissipation;

    vec4 bilerp (in sampler2D sam, in vec2 p) {
        vec4 st;
        st.xy = floor(p - 0.5) + 0.5;
        st.zw = st.xy + 1.0;
        vec4 uv = st * texelSize.xyxy;
        vec4 a = texture2D(sam, uv.xy);
        vec4 b = texture2D(sam, uv.zy);
        vec4 c = texture2D(sam, uv.xw);
        vec4 d = texture2D(sam, uv.zw);
        vec2 f = p - st.xy;
        return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
    }

    void main () {
        vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy;
        gl_FragColor = dissipation * bilerp(uSource, coord);
        gl_FragColor.a = 1.0;
    }
`);

const advectionShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uVelocity;
    uniform sampler2D uSource;
    uniform vec2 texelSize;
    uniform float dt;
    uniform float dissipation;

    void main () {
        vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
        gl_FragColor = dissipation * texture2D(uSource, coord);
        gl_FragColor.a = 1.0;
    }
`);

const divergenceShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uVelocity;

    vec2 sampleVelocity (in vec2 uv) {
        vec2 multiplier = vec2(1.0, 1.0);
        if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; }
        if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; }
        if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; }
        if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; }
        return multiplier * texture2D(uVelocity, uv).xy;
    }

    void main () {
        float L = sampleVelocity(vL).x;
        float R = sampleVelocity(vR).x;
        float T = sampleVelocity(vT).y;
        float B = sampleVelocity(vB).y;
        float div = 0.5 * (R - L + T - B);
        gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
    }
`);

const curlShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uVelocity;

    void main () {
        float L = texture2D(uVelocity, vL).y;
        float R = texture2D(uVelocity, vR).y;
        float T = texture2D(uVelocity, vT).x;
        float B = texture2D(uVelocity, vB).x;
        float vorticity = R - L - T + B;
        gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0);
    }
`);

const vorticityShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uVelocity;
    uniform sampler2D uCurl;
    uniform float curl;
    uniform float dt;

    void main () {
        float T = texture2D(uCurl, vT).x;
        float B = texture2D(uCurl, vB).x;
        float C = texture2D(uCurl, vUv).x;
        vec2 force = vec2(abs(T) - abs(B), 0.0);
        force *= 1.0 / length(force + 0.00001) * curl * C;
        vec2 vel = texture2D(uVelocity, vUv).xy;
        gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);
    }
`);

const pressureShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uPressure;
    uniform sampler2D uDivergence;

    vec2 boundary (in vec2 uv) {
        uv = min(max(uv, 0.0), 1.0);
        return uv;
    }

    void main () {
        float L = texture2D(uPressure, boundary(vL)).x;
        float R = texture2D(uPressure, boundary(vR)).x;
        float T = texture2D(uPressure, boundary(vT)).x;
        float B = texture2D(uPressure, boundary(vB)).x;
        float C = texture2D(uPressure, vUv).x;
        float divergence = texture2D(uDivergence, vUv).x;
        float pressure = (L + R + B + T - divergence) * 0.25;
        gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
    }
`);

const gradientSubtractShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uPressure;
    uniform sampler2D uVelocity;

    vec2 boundary (in vec2 uv) {
        uv = min(max(uv, 0.0), 1.0);
        return uv;
    }

    void main () {
        float L = texture2D(uPressure, boundary(vL)).x;
        float R = texture2D(uPressure, boundary(vR)).x;
        float T = texture2D(uPressure, boundary(vT)).x;
        float B = texture2D(uPressure, boundary(vB)).x;
        vec2 velocity = texture2D(uVelocity, vUv).xy;
        velocity.xy -= vec2(R - L, T - B);
        gl_FragColor = vec4(velocity, 0.0, 1.0);
    }
`);

let textureWidth;
let textureHeight;
let density;
let velocity;
let divergence;
let curl;
let pressure;
initFramebuffers();

const clearProgram = new GLProgram(baseVertexShader, clearShader);
const displayProgram = new GLProgram(baseVertexShader, displayShader);
const splatProgram = new GLProgram(baseVertexShader, splatShader);
const advectionProgram = new GLProgram(baseVertexShader, ext.supportLinearFiltering ? advectionShader : advectionManualFilteringShader);
const divergenceProgram = new GLProgram(baseVertexShader, divergenceShader);
const curlProgram = new GLProgram(baseVertexShader, curlShader);
const vorticityProgram = new GLProgram(baseVertexShader, vorticityShader);
const pressureProgram = new GLProgram(baseVertexShader, pressureShader);
const gradienSubtractProgram = new GLProgram(baseVertexShader, gradientSubtractShader);

function initFramebuffers() {
  textureWidth = gl.drawingBufferWidth >> config.TEXTURE_DOWNSAMPLE;
  textureHeight = gl.drawingBufferHeight >> config.TEXTURE_DOWNSAMPLE;

  const texType = ext.halfFloatTexType;
  const rgba = ext.formatRGBA;
  const rg = ext.formatRG;
  const r = ext.formatR;

  density = createDoubleFBO(2, textureWidth, textureHeight, rgba.internalFormat, rgba.format, texType, ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST);
  velocity = createDoubleFBO(0, textureWidth, textureHeight, rg.internalFormat, rg.format, texType, ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST);
  divergence = createFBO(4, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
  curl = createFBO(5, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
  pressure = createDoubleFBO(6, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
}

function createFBO(texId, w, h, internalFormat, format, type, param) {
  gl.activeTexture(gl.TEXTURE0 + texId);
  let texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);

  let fbo = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
  gl.viewport(0, 0, w, h);
  gl.clear(gl.COLOR_BUFFER_BIT);

  return [texture, fbo, texId];
}

function createDoubleFBO(texId, w, h, internalFormat, format, type, param) {
  let fbo1 = createFBO(texId, w, h, internalFormat, format, type, param);
  let fbo2 = createFBO(texId + 1, w, h, internalFormat, format, type, param);

  return {
    get read() {
      return fbo1;
    },
    get write() {
      return fbo2;
    },
    swap() {
      let temp = fbo1;
      fbo1 = fbo2;
      fbo2 = temp;
    } };

}

const blit = (() => {
  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW);
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(0);

  return destination => {
    gl.bindFramebuffer(gl.FRAMEBUFFER, destination);
    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
  };
})();

let lastTime = Date.now();
update();

function update() {
  resizeCanvas();

  const dt = Math.min((Date.now() - lastTime) / 1000, 0.016);
  lastTime = Date.now();

  gl.viewport(0, 0, textureWidth, textureHeight);

  if (splatStack.length > 0)
  multipleSplats(splatStack.pop());

  advectionProgram.bind();
  gl.uniform2f(advectionProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read[2]);
  gl.uniform1i(advectionProgram.uniforms.uSource, velocity.read[2]);
  gl.uniform1f(advectionProgram.uniforms.dt, dt);
  gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION);
  blit(velocity.write[1]);
  velocity.swap();

  gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read[2]);
  gl.uniform1i(advectionProgram.uniforms.uSource, density.read[2]);
  gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION);
  blit(density.write[1]);
  density.swap();

  for (let i = 0; i < pointers.length; i++) {
    const pointer = pointers[i];
    if (pointer.moved) {
      splat(pointer.x, pointer.y, pointer.dx, pointer.dy, pointer.color);
      pointer.moved = false;
    }
  }

  curlProgram.bind();
  gl.uniform2f(curlProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read[2]);
  blit(curl[1]);

  vorticityProgram.bind();
  gl.uniform2f(vorticityProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read[2]);
  gl.uniform1i(vorticityProgram.uniforms.uCurl, curl[2]);
  gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
  gl.uniform1f(vorticityProgram.uniforms.dt, dt);
  blit(velocity.write[1]);
  velocity.swap();

  divergenceProgram.bind();
  gl.uniform2f(divergenceProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read[2]);
  blit(divergence[1]);

  clearProgram.bind();
  let pressureTexId = pressure.read[2];
  gl.activeTexture(gl.TEXTURE0 + pressureTexId);
  gl.bindTexture(gl.TEXTURE_2D, pressure.read[0]);
  gl.uniform1i(clearProgram.uniforms.uTexture, pressureTexId);
  gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE_DISSIPATION);
  blit(pressure.write[1]);
  pressure.swap();

  pressureProgram.bind();
  gl.uniform2f(pressureProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence[2]);
  pressureTexId = pressure.read[2];
  gl.uniform1i(pressureProgram.uniforms.uPressure, pressureTexId);
  gl.activeTexture(gl.TEXTURE0 + pressureTexId);
  for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
    gl.bindTexture(gl.TEXTURE_2D, pressure.read[0]);
    blit(pressure.write[1]);
    pressure.swap();
  }

  gradienSubtractProgram.bind();
  gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read[2]);
  gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read[2]);
  blit(velocity.write[1]);
  velocity.swap();

  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  displayProgram.bind();
  gl.uniform1i(displayProgram.uniforms.uTexture, density.read[2]);
  blit(null);

  requestAnimationFrame(update);
}

function splat(x, y, dx, dy, color) {
  splatProgram.bind();
  gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read[2]);
  gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height);
  gl.uniform2f(splatProgram.uniforms.point, x / canvas.width, 1.0 - y / canvas.height);
  gl.uniform3f(splatProgram.uniforms.color, dx, -dy, 1.0);
  gl.uniform1f(splatProgram.uniforms.radius, config.SPLAT_RADIUS);
  blit(velocity.write[1]);
  velocity.swap();

  gl.uniform1i(splatProgram.uniforms.uTarget, density.read[2]);
  gl.uniform3f(splatProgram.uniforms.color, color[0] * 0.3, color[1] * 0.3, color[2] * 0.3);
  blit(density.write[1]);
  density.swap();
}

function multipleSplats(amount) {
  for (let i = 0; i < amount; i++) {
    const color = [Math.random() * 10, Math.random() * 10, Math.random() * 10];
    const x = canvas.width * Math.random();
    const y = canvas.height * Math.random();
    const dx = 1000 * (Math.random() - 0.5);
    const dy = 1000 * (Math.random() - 0.5);
    splat(x, y, dx, dy, color);
  }
}

function resizeCanvas() {
  if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
    initFramebuffers();
  }
}

canvas.addEventListener('mousemove', e => {
  pointers[0].moved = pointers[0].down;
  pointers[0].dx = (e.offsetX - pointers[0].x) * 10.0;
  pointers[0].dy = (e.offsetY - pointers[0].y) * 10.0;
  pointers[0].x = e.offsetX;
  pointers[0].y = e.offsetY;
});

canvas.addEventListener('touchmove', e => {
  e.preventDefault();
  const touches = e.targetTouches;
  for (let i = 0; i < touches.length; i++) {
    let pointer = pointers[i];
    pointer.moved = pointer.down;
    pointer.dx = (touches[i].pageX - pointer.x) * 10.0;
    pointer.dy = (touches[i].pageY - pointer.y) * 10.0;
    pointer.x = touches[i].pageX;
    pointer.y = touches[i].pageY;
  }
}, false);

canvas.addEventListener('mousemove', () => {
  pointers[0].down = true;
  pointers[0].color = [Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2];
});

canvas.addEventListener('touchstart', e => {
  e.preventDefault();
  const touches = e.targetTouches;
  for (let i = 0; i < touches.length; i++) {
    if (i >= pointers.length)
    pointers.push(new pointerPrototype());

    pointers[i].id = touches[i].identifier;
    pointers[i].down = true;
    pointers[i].x = touches[i].pageX;
    pointers[i].y = touches[i].pageY;
    pointers[i].color = [Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2];
  }
});

window.addEventListener('mouseleave', () => {
  pointers[0].down = false;
});

window.addEventListener('touchend', e => {
  const touches = e.changedTouches;
  for (let i = 0; i < touches.length; i++)
  for (let j = 0; j < pointers.length; j++)
  if (touches[i].identifier == pointers[j].id)
  pointers[j].down = false;
});

</script>

Add custom CSS to inside </head> tag

CSS

Copy

All Done! Your Interaction is now ready to go live

View Animation Live

Smoke Component: How It Works + Easy Tuning

This guide is intentionally lightweight: enough to help users confidently tweak the effect, without overwhelming them with implementation details.

WebGL fluid simulation

Canvas-based effect

Tunable behavior

Mobile-aware

What this component is doing

The smoke effect runs inside a canvas that fills your [smoke-container]. The script simulates fluid motion (swirls, fade, and touch/mouse interaction) in real time, so most changes you’ll make are simply tuning the feel of the effect.

Container = visual boundary

The [smoke-container] element defines where the effect appears. Think of it as the stage the smoke lives in.

Canvas = rendering surface

The embed’s canvas is automatically sized to fill the container, so the effect scales to the area you’ve designed.

Height matters

The container needs a defined height. If height is missing, the canvas has no visible space to render into.

Start here (recommended tweaks)

If users are trying the component for the first time, these are the most useful settings to adjust in the config object:

Variable	What it changes	Try this first	Direction
DENSITY_DISSIPATION	How quickly the smoke fades away	0.98	Lower = fades faster / Higher = lingers longer
CURL	How swirly / turbulent the motion feels	28	Lower = calmer / Higher = more chaotic
SPLAT_RADIUS	Thickness/size of mouse or touch interaction trails	0.004	Lower = finer trails / Higher = chunkier shapes
TEXTURE_DOWNSAMPLE	Simulation resolution (quality vs performance)	1 desktop, 2 mobile	Higher = better performance, softer detail

For most users, changing only these 4 values is enough to get a noticeably different look.

Common customization behaviors

Background transparency: If you want the smoke to sit cleanly over your design, change the alpha in gl.clearColor(0.0, 0.0, 0.0, .2) to 0.0.
Layering content above smoke: Place text/UI above the canvas using a higher z-index than the smoke layer (for example, smoke layer at 1 and content at 2+).
Touch interaction on mobile: The smoke can capture touch movement. If the smoke area covers a large portion of the screen, it may compete with normal page scrolling.

Quick performance tip For mobile-first layouts, TEXTURE_DOWNSAMPLE = 2 is a strong default. It usually keeps the effect smooth while still looking good.

Copy Figma (Optional)

Copy the Component Code

Create component file SmokeOnMovement.tsx in your components directory and paste the following code:

Component Code (Next JS 15.2.9)

Copy

"use client";

import React, { useRef, useEffect } from "react";
import styles from "./SmokeOnMovement.module.css";

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface SmokeConfig {
  /** Texture resolution divisor. Higher = lower resolution, better perf. Range: 1–4 */
  textureDownsample?: number;
  /** How quickly density fades per frame. Range: 0.90–0.999 */
  densityDissipation?: number;
  /** How quickly velocity fades per frame. Range: 0.90–0.999 */
  velocityDissipation?: number;
  /** Pressure decay per solve iteration. Range: 0.5–0.99 */
  pressureDissipation?: number;
  /** Number of pressure solver iterations. Range: 10–50 */
  pressureIterations?: number;
  /** Vorticity confinement strength. Range: 5–80 */
  curl?: number;
  /** Radius of each fluid splat. Range: 0.001–0.02 */
  splatRadius?: number;
}

export interface SmokeOnMovementProps {
  backgroundImage?: string;
  heroTitle?: React.ReactNode;
  paragraphText?: React.ReactNode;
  smokeConfig?: SmokeConfig;
}

// ---------------------------------------------------------------------------
// Interfaces
// ---------------------------------------------------------------------------

interface FBO {
  texture: WebGLTexture;
  fbo: WebGLFramebuffer;
  texId: number;
}

interface DoubleFBO {
  read: FBO;
  write: FBO;
  swap: () => void;
}

interface PointerData {
  id: number;
  x: number;
  y: number;
  dx: number;
  dy: number;
  down: boolean;
  moved: boolean;
  color: [number, number, number];
}

interface GLProgramInstance {
  uniforms: Record<string, WebGLUniformLocation | null>;
  program: WebGLProgram;
  bind: () => void;
}

// ---------------------------------------------------------------------------
// Shader sources — defined outside the component so they're not recreated
// on every render.
// ---------------------------------------------------------------------------

const BASE_VERT_SRC = `
  precision highp float;
  precision mediump sampler2D;
  attribute vec2 aPosition;
  varying vec2 vUv;
  varying vec2 vL;
  varying vec2 vR;
  varying vec2 vT;
  varying vec2 vB;
  uniform vec2 texelSize;
  void main () {
    vUv = aPosition * 0.5 + 0.5;
    vL = vUv - vec2(texelSize.x, 0.0);
    vR = vUv + vec2(texelSize.x, 0.0);
    vT = vUv + vec2(0.0, texelSize.y);
    vB = vUv - vec2(0.0, texelSize.y);
    gl_Position = vec4(aPosition, 0.0, 1.0);
  }`;

const CLEAR_FRAG_SRC = `
  precision highp float; precision mediump sampler2D;
  varying vec2 vUv; uniform sampler2D uTexture; uniform float value;
  void main () { gl_FragColor = value * texture2D(uTexture, vUv); }`;

const DISPLAY_FRAG_SRC = `
  precision highp float; precision mediump sampler2D;
  varying vec2 vUv; uniform sampler2D uTexture;
  void main () { gl_FragColor = texture2D(uTexture, vUv); }`;

const SPLAT_FRAG_SRC = `
  precision highp float; precision mediump sampler2D;
  varying vec2 vUv; uniform sampler2D uTarget; uniform float aspectRatio;
  uniform vec3 color; uniform vec2 point; uniform float radius;
  void main () {
    vec2 p = vUv - point.xy; p.x *= aspectRatio;
    vec3 splat = exp(-dot(p, p) / radius) * color;
    vec3 base = texture2D(uTarget, vUv).xyz;
    gl_FragColor = vec4(base + splat, 1.0);
  }`;

const ADVECTION_MANUAL_FRAG_SRC = `
  precision highp float; precision mediump sampler2D;
  varying vec2 vUv; uniform sampler2D uVelocity; uniform sampler2D uSource;
  uniform vec2 texelSize; uniform float dt; uniform float dissipation;
  vec4 bilerp (in sampler2D sam, in vec2 p) {
    vec4 st; st.xy = floor(p - 0.5) + 0.5; st.zw = st.xy + 1.0;
    vec4 uv = st * texelSize.xyxy;
    vec4 a = texture2D(sam, uv.xy); vec4 b = texture2D(sam, uv.zy);
    vec4 c = texture2D(sam, uv.xw); vec4 d = texture2D(sam, uv.zw);
    vec2 f = p - st.xy;
    return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
  }
  void main () {
    vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy;
    gl_FragColor = dissipation * bilerp(uSource, coord);
    gl_FragColor.a = 1.0;
  }`;

const ADVECTION_FRAG_SRC = `
  precision highp float; precision mediump sampler2D;
  varying vec2 vUv; uniform sampler2D uVelocity; uniform sampler2D uSource;
  uniform vec2 texelSize; uniform float dt; uniform float dissipation;
  void main () {
    vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
    gl_FragColor = dissipation * texture2D(uSource, coord);
    gl_FragColor.a = 1.0;
  }`;

const DIVERGENCE_FRAG_SRC = `
  precision highp float; precision mediump sampler2D;
  varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB;
  uniform sampler2D uVelocity;
  vec2 sampleVelocity (in vec2 uv) {
    vec2 m = vec2(1.0);
    if (uv.x < 0.0) { uv.x = 0.0; m.x = -1.0; }
    if (uv.x > 1.0) { uv.x = 1.0; m.x = -1.0; }
    if (uv.y < 0.0) { uv.y = 0.0; m.y = -1.0; }
    if (uv.y > 1.0) { uv.y = 1.0; m.y = -1.0; }
    return m * texture2D(uVelocity, uv).xy;
  }
  void main () {
    float L = sampleVelocity(vL).x; float R = sampleVelocity(vR).x;
    float T = sampleVelocity(vT).y; float B = sampleVelocity(vB).y;
    gl_FragColor = vec4(0.5 * (R - L + T - B), 0.0, 0.0, 1.0);
  }`;

const CURL_FRAG_SRC = `
  precision highp float; precision mediump sampler2D;
  varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB;
  uniform sampler2D uVelocity;
  void main () {
    float L = texture2D(uVelocity, vL).y; float R = texture2D(uVelocity, vR).y;
    float T = texture2D(uVelocity, vT).x; float B = texture2D(uVelocity, vB).x;
    gl_FragColor = vec4(R - L - T + B, 0.0, 0.0, 1.0);
  }`;

const VORTICITY_FRAG_SRC = `
  precision highp float; precision mediump sampler2D;
  varying vec2 vUv; varying vec2 vT; varying vec2 vB;
  uniform sampler2D uVelocity; uniform sampler2D uCurl;
  uniform float curl; uniform float dt;
  void main () {
    float T = texture2D(uCurl, vT).x; float B = texture2D(uCurl, vB).x;
    float C = texture2D(uCurl, vUv).x;
    vec2 force = vec2(abs(T) - abs(B), 0.0);
    force *= 1.0 / length(force + 0.00001) * curl * C;
    vec2 vel = texture2D(uVelocity, vUv).xy;
    gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);
  }`;

const PRESSURE_FRAG_SRC = `
  precision highp float; precision mediump sampler2D;
  varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB;
  uniform sampler2D uPressure; uniform sampler2D uDivergence;
  vec2 boundary (in vec2 uv) { return min(max(uv, 0.0), 1.0); }
  void main () {
    float L = texture2D(uPressure, boundary(vL)).x;
    float R = texture2D(uPressure, boundary(vR)).x;
    float T = texture2D(uPressure, boundary(vT)).x;
    float B = texture2D(uPressure, boundary(vB)).x;
    float divergence = texture2D(uDivergence, vUv).x;
    gl_FragColor = vec4((L + R + B + T - divergence) * 0.25, 0.0, 0.0, 1.0);
  }`;

const GRADIENT_SUBTRACT_FRAG_SRC = `
  precision highp float; precision mediump sampler2D;
  varying vec2 vUv; varying vec2 vL; varying vec2 vR; varying vec2 vT; varying vec2 vB;
  uniform sampler2D uPressure; uniform sampler2D uVelocity;
  vec2 boundary (in vec2 uv) { return min(max(uv, 0.0), 1.0); }
  void main () {
    float L = texture2D(uPressure, boundary(vL)).x;
    float R = texture2D(uPressure, boundary(vR)).x;
    float T = texture2D(uPressure, boundary(vT)).x;
    float B = texture2D(uPressure, boundary(vB)).x;
    vec2 velocity = texture2D(uVelocity, vUv).xy;
    velocity.xy -= vec2(R - L, T - B);
    gl_FragColor = vec4(velocity, 0.0, 1.0);
  }`;

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export function SmokeOnMovement({
  backgroundImage = "https://cdn.prod.website-files.com/691d2590c172edc79442cd7e/6997a7aea7ac14a06cf144f2_f5cdee688855724e98a686b9224ce504_Smokeless.avif",
  heroTitle = "WHERE MOVEMENT TURNS TO SMOKE",
  paragraphText = "A subtle smoke trail follows the cursor, turning movement into a fluid, atmospheric interaction—smooth, lightweight, and immersive.",
  smokeConfig = {},
}: SmokeOnMovementProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    // -----------------------------------------------------------------------
    // Config
    // -----------------------------------------------------------------------
    const TEXTURE_DOWNSAMPLE = smokeConfig.textureDownsample ?? 1;
    const DENSITY_DISSIPATION = smokeConfig.densityDissipation ?? 0.98;
    const VELOCITY_DISSIPATION = smokeConfig.velocityDissipation ?? 0.99;
    const PRESSURE_DISSIPATION = smokeConfig.pressureDissipation ?? 0.8;
    const PRESSURE_ITERATIONS = smokeConfig.pressureIterations ?? 25;
    const CURL = smokeConfig.curl ?? 28;
    const SPLAT_RADIUS = smokeConfig.splatRadius ?? 0.004;

    // -----------------------------------------------------------------------
    // WebGL context
    // -----------------------------------------------------------------------
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;

    const ctxParams: WebGLContextAttributes = {
      alpha: true,
      depth: false,
      stencil: false,
      antialias: false,
    };

    const gl2Candidate = canvas.getContext(
      "webgl2",
      ctxParams,
    ) as WebGL2RenderingContext | null;
    const isWebGL2 = !!gl2Candidate;
    const g: WebGLRenderingContext | WebGL2RenderingContext =
      gl2Candidate ??
      ((canvas.getContext("webgl", ctxParams) ||
        canvas.getContext(
          "experimental-webgl",
          ctxParams,
        )) as WebGLRenderingContext);

    if (!g) return;

    // -----------------------------------------------------------------------
    // Extensions & half-float support
    // -----------------------------------------------------------------------
    let halfFloatTexType: number;
    let supportLinearFiltering = false;

    if (isWebGL2) {
      const g2 = g as WebGL2RenderingContext;
      g2.getExtension("EXT_color_buffer_float");
      supportLinearFiltering = !!g2.getExtension("OES_texture_float_linear");
      halfFloatTexType = g2.HALF_FLOAT;
    } else {
      const g1 = g as WebGLRenderingContext;
      const hf = g1.getExtension("OES_texture_half_float");
      if (!hf) return;
      halfFloatTexType = hf.HALF_FLOAT_OES;
      supportLinearFiltering = !!g1.getExtension(
        "OES_texture_half_float_linear",
      );
    }

    // -----------------------------------------------------------------------
    // Format helpers
    // -----------------------------------------------------------------------
    function supportRenderTextureFormat(
      internalFormat: number,
      format: number,
      type: number,
    ): boolean {
      const tex = g.createTexture()!;
      g.bindTexture(g.TEXTURE_2D, tex);
      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_MIN_FILTER, g.NEAREST);
      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_MAG_FILTER, g.NEAREST);
      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.CLAMP_TO_EDGE);
      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_T, g.CLAMP_TO_EDGE);
      g.texImage2D(
        g.TEXTURE_2D,
        0,
        internalFormat,
        4,
        4,
        0,
        format,
        type,
        null,
      );
      const fbo = g.createFramebuffer()!;
      g.bindFramebuffer(g.FRAMEBUFFER, fbo);
      g.framebufferTexture2D(
        g.FRAMEBUFFER,
        g.COLOR_ATTACHMENT0,
        g.TEXTURE_2D,
        tex,
        0,
      );
      const ok =
        g.checkFramebufferStatus(g.FRAMEBUFFER) === g.FRAMEBUFFER_COMPLETE;
      // Clean up probe resources immediately
      g.deleteTexture(tex);
      g.deleteFramebuffer(fbo);
      return ok;
    }

    function getSupportedFormat(
      internalFormat: number,
      format: number,
      type: number,
    ): { internalFormat: number; format: number } | null {
      if (!supportRenderTextureFormat(internalFormat, format, type)) {
        const g2 = g as WebGL2RenderingContext;
        if (internalFormat === g2.R16F)
          return getSupportedFormat(
            g2.RG16F,
            (g2 as unknown as { RG: number }).RG ?? g.RGBA,
            type,
          );
        if (internalFormat === g2.RG16F)
          return getSupportedFormat(g2.RGBA16F, g.RGBA, type);
        return null;
      }
      return { internalFormat, format };
    }

    let formatRGBA: { internalFormat: number; format: number } | null;
    let formatRG: { internalFormat: number; format: number } | null;
    let formatR: { internalFormat: number; format: number } | null;

    if (isWebGL2) {
      const g2 = g as WebGL2RenderingContext;
      formatRGBA = getSupportedFormat(g2.RGBA16F, g.RGBA, halfFloatTexType);
      formatRG = getSupportedFormat(g2.RG16F, g2.RG, halfFloatTexType);
      formatR = getSupportedFormat(g2.R16F, g2.RED, halfFloatTexType);
    } else {
      formatRGBA = getSupportedFormat(g.RGBA, g.RGBA, halfFloatTexType);
      formatRG = getSupportedFormat(g.RGBA, g.RGBA, halfFloatTexType);
      formatR = getSupportedFormat(g.RGBA, g.RGBA, halfFloatTexType);
    }

    if (!formatRGBA || !formatRG || !formatR) return;

    g.clearColor(0.0, 0.0, 0.0, 0.2);

    // -----------------------------------------------------------------------
    // Shader / program helpers
    // -----------------------------------------------------------------------
    function compileShader(type: number, source: string): WebGLShader {
      const shader = g.createShader(type)!;
      g.shaderSource(shader, source);
      g.compileShader(shader);
      if (!g.getShaderParameter(shader, g.COMPILE_STATUS))
        throw new Error(g.getShaderInfoLog(shader) ?? "Shader compile error");
      return shader;
    }

    function createProgram(
      vertSrc: string,
      fragSrc: string,
    ): GLProgramInstance {
      const vert = compileShader(g.VERTEX_SHADER, vertSrc);
      const frag = compileShader(g.FRAGMENT_SHADER, fragSrc);
      const program = g.createProgram()!;
      g.attachShader(program, vert);
      g.attachShader(program, frag);
      g.linkProgram(program);
      // Shaders can be deleted after linking
      g.deleteShader(vert);
      g.deleteShader(frag);
      if (!g.getProgramParameter(program, g.LINK_STATUS))
        throw new Error(g.getProgramInfoLog(program) ?? "Program link error");

      const uniforms: Record<string, WebGLUniformLocation | null> = {};
      const count = g.getProgramParameter(program, g.ACTIVE_UNIFORMS) as number;
      for (let i = 0; i < count; i++) {
        const name = g.getActiveUniform(program, i)!.name;
        uniforms[name] = g.getUniformLocation(program, name);
      }
      return { uniforms, program, bind: () => g.useProgram(program) };
    }

    // -----------------------------------------------------------------------
    // FBO helpers
    // -----------------------------------------------------------------------
    function createFBO(
      texId: number,
      w: number,
      h: number,
      internalFormat: number,
      format: number,
      type: number,
      param: number,
    ): FBO {
      g.activeTexture(g.TEXTURE0 + texId);
      const texture = g.createTexture()!;
      g.bindTexture(g.TEXTURE_2D, texture);
      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_MIN_FILTER, param);
      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_MAG_FILTER, param);
      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_S, g.CLAMP_TO_EDGE);
      g.texParameteri(g.TEXTURE_2D, g.TEXTURE_WRAP_T, g.CLAMP_TO_EDGE);
      g.texImage2D(
        g.TEXTURE_2D,
        0,
        internalFormat,
        w,
        h,
        0,
        format,
        type,
        null,
      );
      const fbo = g.createFramebuffer()!;
      g.bindFramebuffer(g.FRAMEBUFFER, fbo);
      g.framebufferTexture2D(
        g.FRAMEBUFFER,
        g.COLOR_ATTACHMENT0,
        g.TEXTURE_2D,
        texture,
        0,
      );
      g.viewport(0, 0, w, h);
      g.clear(g.COLOR_BUFFER_BIT);
      return { texture, fbo, texId };
    }

    /** Delete GPU resources held by an FBO. */
    function destroyFBO(fbo: FBO): void {
      g.deleteTexture(fbo.texture);
      g.deleteFramebuffer(fbo.fbo);
    }

    /** Delete GPU resources held by a DoubleFBO. */
    function destroyDoubleFBO(dfbo: DoubleFBO): void {
      destroyFBO(dfbo.read);
      destroyFBO(dfbo.write);
    }

    function createDoubleFBO(
      texId: number,
      w: number,
      h: number,
      internalFormat: number,
      format: number,
      type: number,
      param: number,
    ): DoubleFBO {
      let fbo1 = createFBO(texId, w, h, internalFormat, format, type, param);
      let fbo2 = createFBO(
        texId + 1,
        w,
        h,
        internalFormat,
        format,
        type,
        param,
      );
      return {
        get read() {
          return fbo1;
        },
        get write() {
          return fbo2;
        },
        swap() {
          const t = fbo1;
          fbo1 = fbo2;
          fbo2 = t;
        },
      };
    }

    // -----------------------------------------------------------------------
    // Blit quad (store buffer refs for cleanup)
    // -----------------------------------------------------------------------
    const quadVBO = g.createBuffer()!;
    g.bindBuffer(g.ARRAY_BUFFER, quadVBO);
    g.bufferData(
      g.ARRAY_BUFFER,
      new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]),
      g.STATIC_DRAW,
    );

    const quadIBO = g.createBuffer()!;
    g.bindBuffer(g.ELEMENT_ARRAY_BUFFER, quadIBO);
    g.bufferData(
      g.ELEMENT_ARRAY_BUFFER,
      new Uint16Array([0, 1, 2, 0, 2, 3]),
      g.STATIC_DRAW,
    );

    g.vertexAttribPointer(0, 2, g.FLOAT, false, 0, 0);
    g.enableVertexAttribArray(0);

    function blit(destination: WebGLFramebuffer | null): void {
      g.bindFramebuffer(g.FRAMEBUFFER, destination);
      g.drawElements(g.TRIANGLES, 6, g.UNSIGNED_SHORT, 0);
    }

    // -----------------------------------------------------------------------
    // Programs
    // -----------------------------------------------------------------------
    const clearProgram = createProgram(BASE_VERT_SRC, CLEAR_FRAG_SRC);
    const displayProgram = createProgram(BASE_VERT_SRC, DISPLAY_FRAG_SRC);
    const splatProgram = createProgram(BASE_VERT_SRC, SPLAT_FRAG_SRC);
    const advectionProgram = createProgram(
      BASE_VERT_SRC,
      supportLinearFiltering ? ADVECTION_FRAG_SRC : ADVECTION_MANUAL_FRAG_SRC,
    );
    const divergenceProgram = createProgram(BASE_VERT_SRC, DIVERGENCE_FRAG_SRC);
    const curlProgram = createProgram(BASE_VERT_SRC, CURL_FRAG_SRC);
    const vorticityProgram = createProgram(BASE_VERT_SRC, VORTICITY_FRAG_SRC);
    const pressureProgram = createProgram(BASE_VERT_SRC, PRESSURE_FRAG_SRC);
    const gradientSubtractProgram = createProgram(
      BASE_VERT_SRC,
      GRADIENT_SUBTRACT_FRAG_SRC,
    );

    const allPrograms = [
      clearProgram,
      displayProgram,
      splatProgram,
      advectionProgram,
      divergenceProgram,
      curlProgram,
      vorticityProgram,
      pressureProgram,
      gradientSubtractProgram,
    ];

    // -----------------------------------------------------------------------
    // FBO state
    // -----------------------------------------------------------------------
    let textureWidth: number;
    let textureHeight: number;
    let density: DoubleFBO;
    let velocity: DoubleFBO;
    let divergence: FBO;
    let curlFBO: FBO;
    let pressure: DoubleFBO;
    let fboInitialized = false;

    function initFramebuffers(): void {
      textureWidth = g.drawingBufferWidth >> TEXTURE_DOWNSAMPLE;
      textureHeight = g.drawingBufferHeight >> TEXTURE_DOWNSAMPLE;
      const texType = halfFloatTexType;
      const filter = supportLinearFiltering ? g.LINEAR : g.NEAREST;

      // Destroy previous GPU resources before reallocating on resize
      if (fboInitialized) {
        destroyDoubleFBO(density);
        destroyDoubleFBO(velocity);
        destroyDoubleFBO(pressure);
        destroyFBO(divergence);
        destroyFBO(curlFBO);
      }

      density = createDoubleFBO(
        2,
        textureWidth,
        textureHeight,
        formatRGBA!.internalFormat,
        formatRGBA!.format,
        texType,
        filter,
      );
      velocity = createDoubleFBO(
        0,
        textureWidth,
        textureHeight,
        formatRG!.internalFormat,
        formatRG!.format,
        texType,
        filter,
      );
      divergence = createFBO(
        4,
        textureWidth,
        textureHeight,
        formatR!.internalFormat,
        formatR!.format,
        texType,
        g.NEAREST,
      );
      curlFBO = createFBO(
        5,
        textureWidth,
        textureHeight,
        formatR!.internalFormat,
        formatR!.format,
        texType,
        g.NEAREST,
      );
      pressure = createDoubleFBO(
        6,
        textureWidth,
        textureHeight,
        formatR!.internalFormat,
        formatR!.format,
        texType,
        g.NEAREST,
      );
      fboInitialized = true;
    }

    initFramebuffers();

    // -----------------------------------------------------------------------
    // Splat helpers
    // -----------------------------------------------------------------------
    const splatStack: number[] = [];

    function splat(
      x: number,
      y: number,
      dx: number,
      dy: number,
      color: [number, number, number],
    ): void {
      splatProgram.bind();
      g.uniform1i(splatProgram.uniforms.uTarget, velocity.read.texId);
      g.uniform1f(
        splatProgram.uniforms.aspectRatio,
        canvas.width / canvas.height,
      );
      g.uniform2f(
        splatProgram.uniforms.point,
        x / canvas.width,
        1.0 - y / canvas.height,
      );
      g.uniform3f(splatProgram.uniforms.color, dx, -dy, 1.0);
      g.uniform1f(splatProgram.uniforms.radius, SPLAT_RADIUS);
      blit(velocity.write.fbo);
      velocity.swap();

      g.uniform1i(splatProgram.uniforms.uTarget, density.read.texId);
      g.uniform3f(
        splatProgram.uniforms.color,
        color[0] * 0.3,
        color[1] * 0.3,
        color[2] * 0.3,
      );
      blit(density.write.fbo);
      density.swap();
    }

    function multipleSplats(amount: number): void {
      for (let i = 0; i < amount; i++) {
        const color: [number, number, number] = [
          Math.random() * 10,
          Math.random() * 10,
          Math.random() * 10,
        ];
        splat(
          canvas.width * Math.random(),
          canvas.height * Math.random(),
          1000 * (Math.random() - 0.5),
          1000 * (Math.random() - 0.5),
          color,
        );
      }
    }

    // -----------------------------------------------------------------------
    // Pointer state
    // -----------------------------------------------------------------------
    const pointers: PointerData[] = [
      {
        id: -1,
        x: 0,
        y: 0,
        dx: 0,
        dy: 0,
        down: false,
        moved: false,
        color: [30, 0, 300],
      },
    ];

    // -----------------------------------------------------------------------
    // Resize
    // -----------------------------------------------------------------------
    function resizeCanvas(): void {
      if (
        canvas.width !== canvas.clientWidth ||
        canvas.height !== canvas.clientHeight
      ) {
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
        initFramebuffers();
      }
    }

    // -----------------------------------------------------------------------
    // Render loop
    // -----------------------------------------------------------------------
    let lastTime = Date.now();
    let rafId: number;

    function update(): void {
      resizeCanvas();

      const now = Date.now();
      const dt = Math.min((now - lastTime) / 1000, 0.016);
      lastTime = now;

      g.viewport(0, 0, textureWidth, textureHeight);

      if (splatStack.length > 0) multipleSplats(splatStack.pop()!);

      // Advection
      advectionProgram.bind();
      g.uniform2f(
        advectionProgram.uniforms.texelSize,
        1.0 / textureWidth,
        1.0 / textureHeight,
      );
      g.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.texId);
      g.uniform1i(advectionProgram.uniforms.uSource, velocity.read.texId);
      g.uniform1f(advectionProgram.uniforms.dt, dt);
      g.uniform1f(advectionProgram.uniforms.dissipation, VELOCITY_DISSIPATION);
      blit(velocity.write.fbo);
      velocity.swap();

      g.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.texId);
      g.uniform1i(advectionProgram.uniforms.uSource, density.read.texId);
      g.uniform1f(advectionProgram.uniforms.dissipation, DENSITY_DISSIPATION);
      blit(density.write.fbo);
      density.swap();

      // Pointer splats
      for (const pointer of pointers) {
        if (pointer.moved) {
          splat(pointer.x, pointer.y, pointer.dx, pointer.dy, pointer.color);
          pointer.moved = false;
        }
      }

      // Curl
      curlProgram.bind();
      g.uniform2f(
        curlProgram.uniforms.texelSize,
        1.0 / textureWidth,
        1.0 / textureHeight,
      );
      g.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.texId);
      blit(curlFBO.fbo);

      // Vorticity
      vorticityProgram.bind();
      g.uniform2f(
        vorticityProgram.uniforms.texelSize,
        1.0 / textureWidth,
        1.0 / textureHeight,
      );
      g.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read.texId);
      g.uniform1i(vorticityProgram.uniforms.uCurl, curlFBO.texId);
      g.uniform1f(vorticityProgram.uniforms.curl, CURL);
      g.uniform1f(vorticityProgram.uniforms.dt, dt);
      blit(velocity.write.fbo);
      velocity.swap();

      // Divergence
      divergenceProgram.bind();
      g.uniform2f(
        divergenceProgram.uniforms.texelSize,
        1.0 / textureWidth,
        1.0 / textureHeight,
      );
      g.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read.texId);
      blit(divergence.fbo);

      // Pressure clear
      clearProgram.bind();
      g.activeTexture(g.TEXTURE0 + pressure.read.texId);
      g.bindTexture(g.TEXTURE_2D, pressure.read.texture);
      g.uniform1i(clearProgram.uniforms.uTexture, pressure.read.texId);
      g.uniform1f(clearProgram.uniforms.value, PRESSURE_DISSIPATION);
      blit(pressure.write.fbo);
      pressure.swap();

      // Pressure solve
      pressureProgram.bind();
      g.uniform2f(
        pressureProgram.uniforms.texelSize,
        1.0 / textureWidth,
        1.0 / textureHeight,
      );
      g.uniform1i(pressureProgram.uniforms.uDivergence, divergence.texId);
      for (let i = 0; i < PRESSURE_ITERATIONS; i++) {
        g.uniform1i(pressureProgram.uniforms.uPressure, pressure.read.texId);
        g.activeTexture(g.TEXTURE0 + pressure.read.texId);
        g.bindTexture(g.TEXTURE_2D, pressure.read.texture);
        blit(pressure.write.fbo);
        pressure.swap();
      }

      // Gradient subtract
      gradientSubtractProgram.bind();
      g.uniform2f(
        gradientSubtractProgram.uniforms.texelSize,
        1.0 / textureWidth,
        1.0 / textureHeight,
      );
      g.uniform1i(
        gradientSubtractProgram.uniforms.uPressure,
        pressure.read.texId,
      );
      g.uniform1i(
        gradientSubtractProgram.uniforms.uVelocity,
        velocity.read.texId,
      );
      blit(velocity.write.fbo);
      velocity.swap();

      // Display
      g.viewport(0, 0, g.drawingBufferWidth, g.drawingBufferHeight);
      displayProgram.bind();
      g.uniform1i(displayProgram.uniforms.uTexture, density.read.texId);
      blit(null);

      rafId = requestAnimationFrame(update);
    }

    rafId = requestAnimationFrame(update);

    // -----------------------------------------------------------------------
    // Event listeners
    // -----------------------------------------------------------------------
    function onMouseMove(e: MouseEvent): void {
      // If the cursor was already over the canvas when the page loaded,
      // mouseenter will never have fired — activate on the first move instead.
      if (!pointers[0].down) {
        pointers[0].down = true;
        pointers[0].color = [
          Math.random() + 0.2,
          Math.random() + 0.2,
          Math.random() + 0.2,
        ];
      }
      pointers[0].moved = true;
      pointers[0].dx = (e.offsetX - pointers[0].x) * 10.0;
      pointers[0].dy = (e.offsetY - pointers[0].y) * 10.0;
      pointers[0].x = e.offsetX;
      pointers[0].y = e.offsetY;
    }

    // Refreshes color on each fresh entry; mousemove handles the already-hovering case
    function onMouseEnter(): void {
      pointers[0].down = true;
      pointers[0].color = [
        Math.random() + 0.2,
        Math.random() + 0.2,
        Math.random() + 0.2,
      ];
    }

    function onMouseLeave(): void {
      pointers[0].down = false;
    }

    function onTouchMove(e: TouchEvent): void {
      e.preventDefault();
      const touches = e.targetTouches;
      for (let i = 0; i < touches.length; i++) {
        const pointer = pointers[i];
        pointer.moved = pointer.down;
        pointer.dx = (touches[i].pageX - pointer.x) * 10.0;
        pointer.dy = (touches[i].pageY - pointer.y) * 10.0;
        pointer.x = touches[i].pageX;
        pointer.y = touches[i].pageY;
      }
    }

    function onTouchStart(e: TouchEvent): void {
      e.preventDefault();
      const touches = e.targetTouches;
      for (let i = 0; i < touches.length; i++) {
        if (i >= pointers.length) {
          pointers.push({
            id: -1,
            x: 0,
            y: 0,
            dx: 0,
            dy: 0,
            down: false,
            moved: false,
            color: [30, 0, 300],
          });
        }
        pointers[i].id = touches[i].identifier;
        pointers[i].down = true;
        pointers[i].x = touches[i].pageX;
        pointers[i].y = touches[i].pageY;
        pointers[i].color = [
          Math.random() + 0.2,
          Math.random() + 0.2,
          Math.random() + 0.2,
        ];
      }
    }

    function onTouchEnd(e: TouchEvent): void {
      const touches = e.changedTouches;
      for (let i = 0; i < touches.length; i++) {
        for (let j = 0; j < pointers.length; j++) {
          if (touches[i].identifier === pointers[j].id) {
            pointers[j].down = false;
          }
        }
      }
    }

    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mouseenter", onMouseEnter); // FIX: was "mousemove"
    canvas.addEventListener("touchmove", onTouchMove, { passive: false });
    canvas.addEventListener("touchstart", onTouchStart, { passive: false });
    window.addEventListener("mouseleave", onMouseLeave);
    window.addEventListener("touchend", onTouchEnd);

    // -----------------------------------------------------------------------
    // Cleanup — release all GPU resources explicitly
    // -----------------------------------------------------------------------
    return () => {
      cancelAnimationFrame(rafId);

      canvas.removeEventListener("mousemove", onMouseMove);
      canvas.removeEventListener("mouseenter", onMouseEnter);
      canvas.removeEventListener("touchmove", onTouchMove);
      canvas.removeEventListener("touchstart", onTouchStart);
      window.removeEventListener("mouseleave", onMouseLeave);
      window.removeEventListener("touchend", onTouchEnd);

      // Delete FBOs
      if (fboInitialized) {
        destroyDoubleFBO(density);
        destroyDoubleFBO(velocity);
        destroyDoubleFBO(pressure);
        destroyFBO(divergence);
        destroyFBO(curlFBO);
      }

      // Delete programs
      for (const p of allPrograms) g.deleteProgram(p.program);

      // Delete quad buffers
      g.deleteBuffer(quadVBO);
      g.deleteBuffer(quadIBO);

      // Release context
      g.getExtension("WEBGL_lose_context")?.loseContext();
    };
  }, [
    smokeConfig?.textureDownsample,
    smokeConfig?.densityDissipation,
    smokeConfig?.velocityDissipation,
    smokeConfig?.pressureDissipation,
    smokeConfig?.pressureIterations,
    smokeConfig?.curl,
    smokeConfig?.splatRadius,
  ]);

  return (
    <div className={styles["section-smoke"]}>
      <div className={styles["smoke-effect-container"]}>
        {/* Background image layer */}
        <div className={styles["smoke-bg"]}>
          <img
            className={styles["image-cover"]}
            width="auto"
            height="auto"
            loading="lazy"
            alt=""
            src={backgroundImage}
          />
        </div>

        {/* WebGL canvas layer */}
        <div className={styles["smoke-container"]}>
          <canvas ref={canvasRef} className={styles["smoke-canvas"]} />
        </div>

        {/* Text content layer */}
        <div className={styles["smoke-content"]}>
          <div className={styles["subtitle-wrapper"]}>
            <div className={styles["subtitle-dot"]} />
            <div>ANIMATION COMPONENTS</div>
          </div>
          <h1 className={styles["text-90"]}>{heroTitle}</h1>
          <div className={styles["hero-par-rotate"]}>
            <p className={styles["text-size-medium"]}>{paragraphText}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

Copy the Styles

Create CSS File SmokeOnMovement.module.css in your components directory and paste the following code:

CSS Code

Copy

.section-smoke {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 100vh;
  padding: 2.5rem;
  justify-content: center;
  align-items: stretch;
}
@media screen and (max-width: 991px) {
  .section-smoke {
    padding: 1.5rem;
  }
}
@media screen and (max-width: 479px) {
  .section-smoke {
    padding: 1.25rem 1rem;
  }
}
.smoke-effect-container {
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  border-radius: 1.88rem;
}
.smoke-bg {
  position: absolute;
  inset: 0;
  z-index: 4;
  background-color: #27272a;
  pointer-events: none;
}
.image-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.smoke-container {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  background-color: black;
  opacity: 0.3;
}
.smoke-canvas {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}
.smoke-content {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 2.5rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
  color: hsla(0, 0%, 100%, 1);
  text-align: center;
  text-wrap: balance;
}
.subtitle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.subtitle-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 100%;
  background-color: #6c4cf1;
}
.text-90 {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(2.5rem, 10cqw, 5.63rem);
}
.hero-par-rotate {
  width: 100%;
  max-width: 36.63rem;
}
.text-size-medium {
  font-size: 1.25rem;
}

Using the Motion Component

Component Code

Copy

import { SmokeOnMovement } from "@/components/SmokeOnMovement";

export default function Page() {
  return (
    <SmokeOnMovement
      backgroundImage="https://cdn.prod.website-files.com/691d2590c172edc79442cd7e/6997a7aea7ac14a06cf144f2_f5cdee688855724e98a686b9224ce504_Smokeless.avif"
      heroTitle="WHERE MOVEMENT TURNS TO SMOKE"
      paragraphText="A subtle smoke trail follows the cursor, turning movement into a fluid, atmospheric interaction—smooth, lightweight, and immersive."
      smokeConfig={{
        textureDownsample: 1,
        densityDissipation: 0.98,
        velocityDissipation: 0.99,
        pressureDissipation: 0.8,
        pressureIterations: 25,
        curl: 28,
        splatRadius: 0.004,
      }}
    />
  );
}

All Done! Your Interaction is now ready to go live

View Animation Live

Smoke On Movement Quick Start + Mastering

A Next.js guide for a WebGL cursor/touch smoke interaction component—covering the real tuning controls, client-only requirements, and the implementation rules that keep it stable and performant.

Next.js-ready

Client Component

WebGL Canvas

Interactive Hover

Touch Support

What this component is doing

This component renders a layered hero section with three parts: a background image, a transparent WebGL canvas, and foreground text content. Pointer movement creates fluid “splat” forces in a GPU simulation, which are advected and solved every frame, then composited back to the canvas as animated smoke.

The React/TSX component handles structure, event listeners, animation lifecycle, and GPU resource cleanup. The visual layout (stacking, sizing, clipping, and typography) is controlled by your CSS module classes such as section-smoke, smoke-effect-container, and smoke-canvas.

Motion engine = WebGL fluid sim

The effect uses framebuffers, shaders, and a requestAnimationFrame loop—not CSS animation. Most of the “look” comes from smokeConfig values, especially dissipation, curl, radius, and solver iterations.

Interaction model = mouse + touch splats

Mouse and touch input feed velocity + density into the simulation. The code includes a first-move fallback so the effect still activates if the cursor is already over the canvas on page load.

Lifecycle safety = explicit cleanup

On unmount, the component cancels RAF, removes listeners, deletes framebuffers/programs/buffers, and requests WEBGL_lose_context when available to prevent GPU leaks across route transitions.

Props & Tuning

Start with the smoke simulation controls in smokeConfig. These are the highest-impact settings for performance and visual character without changing the shader code.

Variable / Prop	What it changes	Try this value
smokeConfig.textureDownsample	Simulation buffer resolution (performance vs detail). Higher values reduce GPU load but soften the effect.	1 (sharper, heavier) / 3 (softer, faster)
smokeConfig.densityDissipation	How quickly visible smoke fades over time.	0.95 (fades faster) / 0.995 (longer trails)
smokeConfig.velocityDissipation	How long motion energy remains in the simulation (how “alive” the smoke feels).	0.96 (calmer) / 0.995 (more lingering flow)
smokeConfig.pressureDissipation	Pressure decay between solves; affects overall stability/softness of the fluid response.	0.7 (more damped) / 0.9 (more retained pressure)
smokeConfig.pressureIterations	Pressure solver quality per frame. Higher values improve flow quality but cost more GPU time.	16 (lighter) / 40 (cleaner solve)
smokeConfig.curl	Swirl / turbulence strength (vorticity confinement).	12 (subtle) / 50 (dramatic swirl)
smokeConfig.splatRadius	Size of each pointer injection into the fluid field.	0.002 (tighter trails) / 0.01 (larger blooms)
backgroundImage	Hero background image under the smoke canvas.	Use a darker image for stronger smoke contrast / a lighter image for subtler atmosphere
heroTitle / paragraphText	Foreground content layer (text over the effect).	Short bold title + one-line copy / longer editorial copy for a more premium hero

Next.js Setup Requirements

These are the implementation requirements directly implied by the component code. If any of these are missing, the smoke effect may render incorrectly or become unstable during navigation/resizing.

Requirement	Setting / Example	Why it matters
"use client"	Add at the top of SmokeOnMovement.tsx (already present)	The component uses useEffect, canvas refs, DOM events, requestAnimationFrame, and WebGL APIs, which require the browser.
Canvas wrapper sizing	Ensure .smoke-container / .smoke-canvas have real dimensions (width + height)	The simulation initializes with canvas.clientWidth and canvas.clientHeight. Zero-sized canvases produce invisible output.
Layering / positioning	Use positioned layers for background, canvas, and content (typically relative parent + absolute children)	This component relies on a stacked visual structure: image below, smoke in the middle, text above.
Effect dependency stability	Changing smokeConfig values re-runs the effect and rebuilds WebGL resources	The useEffect dependency list watches each config field, so tuning values can be changed intentionally without stale GPU state.
Touch listener options	{ passive: false } on touchmove / touchstart	Needed because the code calls e.preventDefault() to keep touch interactions consistent with the canvas effect.
Route-change cleanup	Keep the existing cleanup return in useEffect	Prevents duplicate listeners, stacked RAF loops, and leaked GPU resources when the component unmounts/remounts in the App Router.

Cinematic Hover Smoke Interaction

Setup Guide

All Done! Your Interaction is now ready to go live

Smoke Component: How It Works + Easy Tuning

What this component is doing

Start here (recommended tweaks)

Common customization behaviors

All Done! Your Interaction is now ready to go live

Smoke On Movement Quick Start + Mastering

What this component is doing

Props & Tuning

Next.js Setup Requirements

Complex Animations made easy

Related Animation Components

Hero Gallery Transition

Encrypted Text Reveal

Rotating Dynamic Text with Layout Adjustment

Falling 2D Draggable Pills