Strobe Montage

A fast strobe of photo frames flickers between two scenes and lands on a prompt box

Installation

$ pnpm dlx shadcn@latest add @remocn/strobe-montage

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { StrobeMontage } from "@/components/remocn/strobe-montage";
 
const StrobeMontageScene = () => (
  <StrobeMontage
    lead="Six weekends"
    accentWord="of making."
    prompt="A 30-second film for our 2.0 release"
    images={["/shots/a.jpg", "/shots/b.jpg", "/shots/c.jpg"]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="StrobeMontage"
    component={StrobeMontageScene}
    durationInFrames={128}
    fps={30}
    width={1280}
    height={720}
  />
);

Scene A is an opener with a lead phrase and an accent word. A strobe of images flashes frame by frame, growing in size and punching in, then lands on scene B, a prompt box with a heading, a file chip and a typed request. Pass lead, accentWord, heading and prompt for the copy, and your own images through the montage options (the defaults exist only in the Remocn repo); it ships light and dark.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props14

Prop	Type	Default
theme	"dark" \| "light""dark" Light or dark palette for both scenes
accent	string— Accent color; defaults to the theme accent
lead	string"Six weekends" Lead phrase of the scene A opener
accentWord	string"of making." Accent phrase that follows the lead
heading	[string, string]["What will you", "launch next"] Two-part heading above the scene B prompt
accentMark	string"?" Punctuation mark set in the accent color after the heading
prompt	string"A 30-second film for our 2.0 release" Request typed into the scene B prompt box
file	string"launch-notes.md" File name shown on the attachment chip
ground	GshPresetId— Preset id for the scene A gradients.sh shader ground
groundParams	Partial<GradientParams>— Overrides for the scene A shader parameters
groundB	GshPresetId— Preset id for the scene B gradients.sh shader ground
groundBParams	Partial<GradientParams>— Overrides for the scene B shader parameters
transitionFrames	numberSTROBE_MONTAGE_TIMING.transition Transition length in frames
montage	StrobeMontageProps— Strobe options: images, framesPerHit, growFrom, growHits, punch, focus

theme"dark" | "light"
Light or dark palette for both scenes
Default"dark"
accentstring
Accent color; defaults to the theme accent
leadstring
Lead phrase of the scene A opener
Default"Six weekends"
accentWordstring
Accent phrase that follows the lead
Default"of making."
heading[string, string]
Two-part heading above the scene B prompt
Default["What will you", "launch next"]
accentMarkstring
Punctuation mark set in the accent color after the heading
Default"?"
promptstring
Request typed into the scene B prompt box
Default"A 30-second film for our 2.0 release"
filestring
File name shown on the attachment chip
Default"launch-notes.md"
groundGshPresetId
Preset id for the scene A gradients.sh shader ground
groundParamsPartial<GradientParams>
Overrides for the scene A shader parameters
groundBGshPresetId
Preset id for the scene B gradients.sh shader ground
groundBParamsPartial<GradientParams>
Overrides for the scene B shader parameters
transitionFramesnumber
Transition length in frames
DefaultSTROBE_MONTAGE_TIMING.transition
montageStrobeMontageProps
Strobe options: images, framesPerHit, growFrom, growHits, punch, focus