Looks Like This

A sentence ends with a small inline thumbnail that grows into a large player frame, replaced by an italic word.

Installation

$ pnpm dlx shadcn@latest add @remocn/looks-like-this

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LooksLikeThis } from "@/components/remocn/looks-like-this";
 
const LooksLikeThisScene = () => (
  <LooksLikeThis
    lead="Your next launch looks like"
    word="this"
    src="/shots/product.png"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LooksLikeThis"
    component={LooksLikeThisScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

The lead sentence writes in with a small thumbnail chip inline before the end punctuation. The chip then grows into a large framed image with player chrome while the italic word takes its place in the sentence. Pass your own 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.

Props12

Prop	Type	Default
lead	string"Your next launch looks like" Sentence that leads into the image.
word	string"this" Italic word that ends up beside the image.
end	string"." Closing punctuation after the word.
src	string— Image URL for the hero frame. Defaults to a repo-only file.
aspect	number16 / 9 Aspect ratio of the hero frame.
duration	string"0:30" Clip length shown on the player chrome.
accent	string— Accent color for the italic word. Defaults depend on theme.
background	string— Solid background. Use 'transparent' to drop the ground.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.

leadstring
Sentence that leads into the image.
Default"Your next launch looks like"
wordstring
Italic word that ends up beside the image.
Default"this"
endstring
Closing punctuation after the word.
Default"."
srcstring
Image URL for the hero frame. Defaults to a repo-only file.
aspectnumber
Aspect ratio of the hero frame.
Default16 / 9
durationstring
Clip length shown on the player chrome.
Default"0:30"
accentstring
Accent color for the italic word. Defaults depend on theme.
backgroundstring
Solid background. Use 'transparent' to drop the ground.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.