# Fog Rise
URL: https://remocn.dev/docs/typography/fog-rise

Display text resolves out of fog center-out, sharpening from heavy blur with vertical streaks

- Install: `npx shadcn@latest add @remocn/fog-rise`
- Vibe: premium
- Natural length: 27f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/fog-rise
```

## Usage

The word starts lying face-down — rotated back around its baseline inside a real CSS perspective — and is thrown upright by a configurable spring (mass, stiffness, damping), travelling up as it stands while each character dissolves in from translucent blur. Characters start slightly spread apart and pull together on the same spring. The choreography has three phases, matching the reference: the enter — spring stand-up, lift and blur dissolve; a slow perpetual `drift` upward so the word never freezes; and at `exitAt` the exit, accelerating the word upward with no fade, meant to be hard-cut by the next scene. The reveal order runs center-out via `stagger`. Motion profile measured frame-by-frame from the reference footage.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FogRise } from "@/components/remocn/fog-rise";

const FogRiseScene = () => <FogRise text="Remocn" />;

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. The reference look pairs a light text color with a dark-to-blue vertical gradient so the word reads as embedded in fog.

```tsx
import { Composition } from "remotion";
import { FogRise } from "@/components/remocn/fog-rise";
import { Backdrop } from "@/components/remocn/backdrop";

const FogRiseScene = () => (
  <Backdrop
    fill={{
      type: "gradient",
      value: "linear-gradient(180deg, #04070f 30%, #1e4f8f 100%)",
    }}
  >
    <FogRise text="Remocn" color="#eaf2ff" />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The display text |
| `fontSize` | `number` | `304` | Font size in pixels; blur, rise and streaks scale with it |
| `stagger` | `number` | `5` | Frames between each center-out ring of characters starting to resolve |
| `blur` | `number` | `0.17` | Starting blur of each character in em, dissolving linearly to sharp over resolveFrames |
| `tilt` | `number` | `55` | Starting rotateX in degrees — the word lies face-down at this angle and stands up to face the camera |
| `depth` | `number` | `5` | CSS perspective distance in multiples of fontSize; smaller is more dramatic foreshortening |
| `lift` | `number` | `0.85` | How far below its resting spot the word starts, in em — it travels up while standing up |
| `drift` | `number` | `0.005` | Slow upward crawl in em per frame between the enter settling and the exit — the word never freezes, matching the reference choreography |
| `exitAt` | `number` | `60` | Frame at which the exit starts: the word accelerates upward with no fade, meant to be hard-cut by the next scene. 0 disables the exit. |
| `exitAccel` | `number` | `0.04` | Upward exit acceleration in em per frame squared |
| `mass` | `number` | `1.3` | Spring mass of the stand-up motion — more mass, more inertia |
| `stiffness` | `number` | `60` | Spring force of the stand-up motion |
| `damping` | `number` | `13` | Spring damping — lower values overshoot with a visible bounce |
| `spreadGap` | `number` | `0.07` | Extra starting gap between characters in em, collapsing to zero as the word converges |
| `tracking` | `number` | `-0.07` | Resting letter-spacing in em |
| `resolveFrames` | `number` | `22` | Frames the blur dissolve takes; the stand-up motion itself is spring-driven |
| `fadeFrames` | `number` | `18` | Frames each character takes to fade in |
| `color` | `string` | `"#004CFF"` | Text color (any valid CSS color) |
| `fontWeight` | `number` | `400` | CSS font-weight |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A big display word should materialize out of atmosphere — already at its size and position, resolving from heavy blur as if rising along the z-axis.
- You want the center characters to resolve first and the edges to follow, each scaling up around its own centroid.
- The scene has a foggy or gradient backdrop the text should feel physically embedded in.

## Don't use when
- The whole line should sharpen at once without per-character order — use `focus-blur-resolve`.
- Characters should travel up from below the baseline — use `per-character-rise` or `bottom-up-letters`.
- You need a soft, small-scale heading entrance — use `soft-blur-in`; fog-rise is tuned for large display sizes.