# Gem Smoke
URL: https://remocn.dev/docs/shaders/components/shader-gem-smoke

Animated color fields flowing behind and inside a glassy logo silhouette

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

## Installation

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

## Usage

Feed it a brand mark via `image` — a URL, e.g. `staticFile("symbol.svg")`. The
shape is processed once and cached, so smoke lives behind and inside the glassy
silhouette and every frame renders the same smoke at the same time.

```tsx
// src/Root.tsx
import { Composition, staticFile } from "remotion";
import { ShaderGemSmoke } from "@/components/remocn/shader-gem-smoke";

const ShaderGemSmokeScene = () => (
  <ShaderGemSmoke
    image={staticFile("symbol.svg")}
    speed={1}
    colorBack="#0a0a10"
    size={0.8}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ShaderGemSmoke"
    component={ShaderGemSmokeScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Driven deterministically by the current frame (`frame` from
`useCurrentFrame()`), so renders stay identical. Any other `GemSmoke` prop is
forwarded through.

## Credits

Shader by [paper-design/shaders](https://github.com/paper-design/shaders).

## Use when
- Brand or logo reveals that want smoke living inside and around a mark.
- You have a static brand asset (SVG/PNG) to feed as `image` and want it treated as a glassy silhouette.
- A premium product intro wants color fields flowing through a recognizable shape.

## Don't use when
- You have no logo or mark to feed as `image` — use `shader-smoke-ring` or `shader-neuro-noise` for a shapeless field instead.
- The brand mark should stay static and legible — the smoke will distort its read.