Phone Scroll

A phone rises and flicks a tall app screen to each scroll stop while a headline slides in beside it.

Installation

$ pnpm dlx shadcn@latest add @remocn/phone-scroll

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PhoneScroll } from "@/components/remocn/phone-scroll";
 
const PhoneScrollScene = () => (
  <PhoneScroll
    stops={[930]}
    label="Find your next stay in two taps."
    labelAccent="two taps."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PhoneScroll"
    component={PhoneScrollScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A phone springs up beside a headline, then flicks its tall screen to each scroll stop with motion blur and momentum while a touch dot marks the press. Pass src with a tall screenshot, or children with your own 393pt-wide screen (omit both for a built-in sample feed), stops for the scroll offsets, and label plus labelAccent for the headline. 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.

Props11

Prop	Type	Default
src	string— Tall screenshot rendered 393pt wide and scrolled
stops	number[][930] Scroll offsets in screen points; one flick per stop
label	string"Find your next stay in two taps." Headline beside the phone; empty string hides it
labelAccent	string"two taps." Trailing part of the label set in italic serif
eyebrow	string"remocn for iOS" Small line above the headline
children	React.ReactNode— Custom screen content, 393pt wide, scrolled like the screenshot
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
theme	"light" \| "dark""light" Light or dark palette
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

srcstring
Tall screenshot rendered 393pt wide and scrolled
stopsnumber[]
Scroll offsets in screen points; one flick per stop
Default[930]
labelstring
Headline beside the phone; empty string hides it
Default"Find your next stay in two taps."
labelAccentstring
Trailing part of the label set in italic serif
Default"two taps."
eyebrowstring
Small line above the headline
Default"remocn for iOS"
childrenReact.ReactNode
Custom screen content, 393pt wide, scrolled like the screenshot
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
theme"light" | "dark"
Light or dark palette
Default"light"
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters