Shot Answers

A question rewrites itself word by word into its answer while a framed screenshot slides in beside it.

Installation

$ pnpm dlx shadcn@latest add @remocn/shot-answers

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ShotAnswers } from "@/components/remocn/shot-answers";
 
const ShotAnswersScene = () => (
  <ShotAnswers
    question="What if your launch video were just another pull request?"
    answer="Your launch video is just another pull request."
    src="/shots/studio.png"
    url="example.dev/studio"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShotAnswers"
    component={ShotAnswersScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

The question writes in word by word and a framed screenshot slides in beside it. The shared words then glide into place while the rest swap, forming the answer, with new words appearing in the accent color. Pass your own question, answer and image through src; the default is a staticFile image from the Remocn repo. The timeline scales with the composition length, and it ships light and dark through theme.

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

Props11

Prop	Type	Default
question	string"What if your launch video were just another pull request?" Question that writes in first.
answer	string"Your launch video is just another pull request." Answer the question rewrites into. Reuse words for the glide.
src	string— Screenshot URL for the frame. Defaults to a repo-only file.
aspect	number16 / 9 Aspect ratio of the screenshot.
accent	string— Color of new words in the answer. Defaults depend on theme.
background	string— Solid background. Use 'transparent' to drop the ground.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.
url	string"remocn.dev/studio" Address shown in the frame's title bar.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.

questionstring
Question that writes in first.
Default"What if your launch video were just another pull request?"
answerstring
Answer the question rewrites into. Reuse words for the glide.
Default"Your launch video is just another pull request."
srcstring
Screenshot URL for the frame. Defaults to a repo-only file.
aspectnumber
Aspect ratio of the screenshot.
Default16 / 9
accentstring
Color of new words in the answer. Defaults depend on theme.
backgroundstring
Solid background. Use 'transparent' to drop the ground.
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.
urlstring
Address shown in the frame's title bar.
Default"remocn.dev/studio"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"