Up Close

An image starts zoomed in on one detail, then pulls back into a framed shot with a second caption.

Installation

$ pnpm dlx shadcn@latest add @remocn/up-close

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { UpClose } from "@/components/remocn/up-close";
 
const UpCloseScene = () => (
  <UpClose
    src="/shots/product.png"
    close="Up close, it’s code."
    wide="From here, it’s your launch."
    focus={{ x: 0.58, y: 0.52 }}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="UpClose"
    component={UpCloseScene}
    durationInFrames={125}
    fps={30}
    width={1280}
    height={720}
  />
);

The image fills the frame zoomed in on the focus point under the close caption. It then pulls back into a framed shot and the wide caption writes in while the first caption lifts. Pass your own image through src and tune zoom and focus; 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
close	string"Up close, it’s code." Caption shown while zoomed in.
wide	string"From here, it’s your launch." Caption shown after pulling back.
src	string— Image URL. Defaults to a repo-only file.
aspect	number1200 / 630 Aspect ratio of the image.
focus	{ x: number; y: number }{ x: 0.58, y: 0.52 } Point of interest as fractions of width and height, 0 to 1.
zoom	number3 Initial zoom factor on the focus point.
accent	string— Accent color for the zoom readout. 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.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.

closestring
Caption shown while zoomed in.
Default"Up close, it’s code."
widestring
Caption shown after pulling back.
Default"From here, it’s your launch."
srcstring
Image URL. Defaults to a repo-only file.
aspectnumber
Aspect ratio of the image.
Default1200 / 630
focus{ x: number; y: number }
Point of interest as fractions of width and height, 0 to 1.
Default{ x: 0.58, y: 0.52 }
zoomnumber
Initial zoom factor on the focus point.
Default3
accentstring
Accent color for the zoom readout. 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.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"