# Smoke Ring
URL: https://remocn.dev/docs/shaders/components/shader-smoke-ring

Soft smoke ring curling and dissipating in place

- Install: `npx shadcn@latest add @remocn/shader-smoke-ring`
- Vibe: premium
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shader-smoke-ring
```

## Usage

```tsx
// 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](https://github.com/paper-design/shaders).

## Use when
- You want a single soft, centered smoke ring as a focal atmospheric element.
- A minimal, premium scene benefits from one curling shape on a dark field.
- You want a neutral, near-monochrome look (override `colors` to tint).

## Don't use when
- You need a full-bleed edge-to-edge texture — this is a centered object; use a noise or gradient shader.
- The center sits behind key text — the ring draws the eye inward.
- You want multiple elements or busy motion — smoke-ring is deliberately singular.