Smoke Ring

Soft smoke ring curling and dissipating in place

Installation

$ pnpm dlx shadcn@latest add @remocn/shader-smoke-ring

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ShaderSmokeRing } from "@/components/remocn/shader-smoke-ring";
 
const ShaderSmokeRingScene = () => (
  <ShaderSmokeRing speed={1} radius={0.25} thickness={0.65} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShaderSmokeRing"
    component={ShaderSmokeRingScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Credits

Shader by paper-design/shaders.