Flank Roll Swap

Two flanking words roll into new words around a photo placed in the middle of the line.

Installation

$ pnpm dlx shadcn@latest add @remocn/flank-roll-swap

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FlankRollSwap } from "@/components/remocn/flank-roll-swap";
 
const FlankRollSwapScene = () => (
  <FlankRollSwap from={["Remocn", "Studio"]} to={["Out now", "on remocn.dev"]} accentWord="remocn.dev" images={["/photos/hero.jpg"]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FlankRollSwap"
    component={FlankRollSwapScene}
    durationInFrames={126}
    fps={30}
    width={1280}
    height={720}
  />
);

A two-part line sits on either side of an image, then each side rolls letter by letter into the to pair while the pictures cycle. The default photos use staticFile(...) paths that only exist in the Remocn repo, so pass your own URLs in images.

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
from	[string, string]["Remocn", "Studio"] Left and right words shown first.
to	[string, string]["Out now", "on remocn.dev"] Left and right words they roll into.
accentWord	string"remocn.dev" Word in `to` tinted with the accent color.
images	string[]— Image URLs cycled in the middle; defaults to repo-only files.
accent	string— Accent color override; falls back to the theme accent.
ink	string— Text color override; falls back to the theme ink.
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.

from[string, string]
Left and right words shown first.
Default["Remocn", "Studio"]
to[string, string]
Left and right words they roll into.
Default["Out now", "on remocn.dev"]
accentWordstring
Word in `to` tinted with the accent color.
Default"remocn.dev"
imagesstring[]
Image URLs cycled in the middle; defaults to repo-only files.
accentstring
Accent color override; falls back to the theme accent.
inkstring
Text color override; falls back to the theme ink.
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.