Phone Trio

Three phones rise side by side: a profile, a scrolling photo feed and a banner announcing the portfolio is live.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PhoneTrio } from "@/components/remocn/phone-trio";
 
const PhoneTrioScene = () => (
  <PhoneTrio
    name="Ines Marlow"
    role="Motion designer"
    headline="Driven by motion, obsessed with the"
    accentWord="seamless."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PhoneTrio"
    component={PhoneTrioScene}
    durationInFrames={132}
    fps={30}
    width={1280}
    height={720}
  />
);

Three phones rise one after another: a profile card with name, handle, role and skills, a photo feed that scrolls, and a third that receives a liveLabel banner as the trio fans forward. The headline joins headline with an accent-colored accentWord. Ships dark by default and light. The default images are files that only exist in the Remocn repo, so pass your own photo URLs.

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
theme	"dark" \| "light""dark" Light or dark palette
accent	string"#ff5a36" Accent color for highlights, buttons and progress
name	string"Ines Marlow" Profile name on the first phone
handle	string"ines.marlow" Profile handle under the name
role	string"Motion designer" Role line under the name
headline	string"Driven by motion, obsessed with the" Headline text before the accent word
accentWord	string"seamless." Last word of the headline, set in the accent color
images	string[]— Photo URLs for the feed; defaults exist only in the Remocn repo
skills	string[]["Motion", "Sound", "Web"] Skill chips shown on the profile
liveLabel	string"Portfolio is live" Text of the banner that drops in near the end
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

theme"dark" | "light"
Light or dark palette
Default"dark"
accentstring
Accent color for highlights, buttons and progress
Default"#ff5a36"
namestring
Profile name on the first phone
Default"Ines Marlow"
handlestring
Profile handle under the name
Default"ines.marlow"
rolestring
Role line under the name
Default"Motion designer"
headlinestring
Headline text before the accent word
Default"Driven by motion, obsessed with the"
accentWordstring
Last word of the headline, set in the accent color
Default"seamless."
imagesstring[]
Photo URLs for the feed; defaults exist only in the Remocn repo
skillsstring[]
Skill chips shown on the profile
Default["Motion", "Sound", "Web"]
liveLabelstring
Text of the banner that drops in near the end
Default"Portfolio is live"
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters