Fog Rise

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

Installation

$ pnpm dlx 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}
  />
);

Props20

Prop	Type	Default
textrequired	string— The display text
fontSize	number304 Font size in pixels; blur, rise and streaks scale with it
stagger	number5 Frames between each center-out ring of characters starting to resolve
blur	number0.17 Starting blur of each character in em, dissolving linearly to sharp over resolveFrames
tilt	number55 Starting rotateX in degrees — the word lies face-down at this angle and stands up to face the camera
depth	number5 CSS perspective distance in multiples of fontSize; smaller is more dramatic foreshortening
lift	number0.85 How far below its resting spot the word starts, in em — it travels up while standing up
drift	number0.005 Slow upward crawl in em per frame between the enter settling and the exit — the word never freezes, matching the reference choreography
exitAt	number60 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	number0.04 Upward exit acceleration in em per frame squared
mass	number1.3 Spring mass of the stand-up motion — more mass, more inertia
stiffness	number60 Spring force of the stand-up motion
damping	number13 Spring damping — lower values overshoot with a visible bounce
spreadGap	number0.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	number22 Frames the blur dissolve takes; the stand-up motion itself is spring-driven
fadeFrames	number18 Frames each character takes to fade in
color	string"#004CFF" Text color (any valid CSS color)
fontWeight	number400 CSS font-weight
className	string— Optional className passed to the underlying span

textrequiredstring
The display text
fontSizenumber
Font size in pixels; blur, rise and streaks scale with it
Default304
staggernumber
Frames between each center-out ring of characters starting to resolve
Default5
blurnumber
Starting blur of each character in em, dissolving linearly to sharp over resolveFrames
Default0.17
tiltnumber
Starting rotateX in degrees — the word lies face-down at this angle and stands up to face the camera
Default55
depthnumber
CSS perspective distance in multiples of fontSize; smaller is more dramatic foreshortening
Default5
liftnumber
How far below its resting spot the word starts, in em — it travels up while standing up
Default0.85
driftnumber
Slow upward crawl in em per frame between the enter settling and the exit — the word never freezes, matching the reference choreography
Default0.005
exitAtnumber
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.
Default60
exitAccelnumber
Upward exit acceleration in em per frame squared
Default0.04
massnumber
Spring mass of the stand-up motion — more mass, more inertia
Default1.3
stiffnessnumber
Spring force of the stand-up motion
Default60
dampingnumber
Spring damping — lower values overshoot with a visible bounce
Default13
spreadGapnumber
Extra starting gap between characters in em, collapsing to zero as the word converges
Default0.07
trackingnumber
Resting letter-spacing in em
Default-0.07
resolveFramesnumber
Frames the blur dissolve takes; the stand-up motion itself is spring-driven
Default22
fadeFramesnumber
Frames each character takes to fade in
Default18
colorstring
Text color (any valid CSS color)
Default"#004CFF"
fontWeightnumber
CSS font-weight
Default400
classNamestring
Optional className passed to the underlying span