Fog Rise

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.

// 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.

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