Focus Front Swap

A headline pulls focus from line to line, blurring one out as the next comes forward, then ends on a logo.

Installation

$ pnpm dlx shadcn@latest add @remocn/focus-front-swap

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FocusFrontSwap } from "@/components/remocn/focus-front-swap";
 
const FocusFrontSwapScene = () => (
  <FocusFrontSwap lines={["Remocn knows the beat", "You describe it once", "Ship it {tonight}."]} logo={false} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FocusFrontSwap"
    component={FocusFrontSwapScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Each line in lines sharpens into focus while the previous one blurs back, and a mark appears under the final line. Wrap a word in {} such as {tonight} to accent it, and set logo={false} to drop the mark.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop. It ships in light and dark through the theme prop.

Props9

Prop	Type	Default
lines	string[]— Headlines in order; wrap a word in curly braces to accent it.
accent	string— Accent color override; falls back to the theme accent.
ink	string— Text color override; falls back to the theme ink.
logo	booleantrue Show the logo mark after the last line.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.
ground	GshPresetId— Gradient ground preset id for the backdrop.
groundParams	Partial<GradientParams>— Partial gradient parameters that tweak the chosen ground preset.
swap	numberBEAT.swap Frames between focus pulls.
blur	number18 Maximum blur radius in pixels for out-of-focus lines.

linesstring[]
Headlines in order; wrap a word in curly braces to accent it.
accentstring
Accent color override; falls back to the theme accent.
inkstring
Text color override; falls back to the theme ink.
logoboolean
Show the logo mark after the last line.
Defaulttrue
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"
groundGshPresetId
Gradient ground preset id for the backdrop.
groundParamsPartial<GradientParams>
Partial gradient parameters that tweak the chosen ground preset.
swapnumber
Frames between focus pulls.
DefaultBEAT.swap
blurnumber
Maximum blur radius in pixels for out-of-focus lines.
Default18