Smoke Ring

import { SmokeRing } from '@paper-design/shaders-react';

function App() {
  return (
    <SmokeRing
      colorBack="#000000"
      colors={['#ffffff']}
      radius={0.25}
      thickness={0.65}
      innerShape={0.7}
      noiseScale={3}
      noiseIterations={8}
      scale={0.8}
      speed={0.5}
    />
  );
}

import { ShaderMount, smokeRingFragmentShader } from '@paper-design/shaders';

const container = document.getElementById('container');
const shader = new ShaderMount(
  container,
  smokeRingFragmentShader,
  {
    u_colorBack: [0, 0, 0, 1],
    u_colors: [[1, 1, 1, 1]],
    u_colorsCount: 1,
    u_radius: 0.25,
    u_thickness: 0.65,
    u_innerShape: 0.7,
    u_noiseScale: 3,
    u_noiseIterations: 8,
    u_noiseTexture: noiseTextureImage,
    // Sizing uniforms
    u_fit: 2,
    u_scale: 0.8,
    u_rotation: 0,
    u_offsetX: 0,
    u_offsetY: 0,
    u_originX: 0.5,
    u_originY: 0.5,
    u_worldWidth: 0,
    u_worldHeight: 0,
  },
  {}, // WebGL context attributes
  0.5 // speed
);