Panel Split

One portfolio panel splits into four, filling with a bio, a case study, a question and a reel card.

Installation

$ pnpm dlx shadcn@latest add @remocn/panel-split

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PanelSplit } from "@/components/remocn/panel-split";
 
const PanelSplitScene = () => (
  <PanelSplit
    name="Mara Okafor"
    role="Motion designer"
    headline={["Driven by motion,", "obsessed with", "the seamless."]}
    images={["/work/a.jpg", "/work/b.jpg", "/work/c.jpg"]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PanelSplit"
    component={PanelSplitScene}
    durationInFrames={144}
    fps={30}
    width={1280}
    height={720}
  />
);

A single hero panel with the name, role and headline lines splits into four panels. They fill with a case-study image and caption, a question with body text, and a reel panel that floods with color and fans out preview cards. Pass your own images; the defaults are staticFile images from the Remocn repo. 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.

Props13

Prop	Type	Default
images	string[]— Image URLs for the panels. Defaults to repo-only files.
name	string"Mara Okafor" Person or studio name on the hero panel.
role	string"Motion designer" Role line under the name.
headline	string[]— Headline lines on the hero panel.
question	string"What if every launch felt this good?" Question text on the third panel.
body	string"A studio practice built on timing, rhythm and the frames in between." Body text under the question.
caption	string"Horizon, brand film" Caption under the case-study image.
labels	string[]— Short header labels for the four panels.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.
accent	string"#3B5BFD" Accent color of the final flood.
panel	string— Panel background color. Defaults depend on theme.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.

imagesstring[]
Image URLs for the panels. Defaults to repo-only files.
namestring
Person or studio name on the hero panel.
Default"Mara Okafor"
rolestring
Role line under the name.
Default"Motion designer"
headlinestring[]
Headline lines on the hero panel.
questionstring
Question text on the third panel.
Default"What if every launch felt this good?"
bodystring
Body text under the question.
Default"A studio practice built on timing, rhythm and the frames in between."
captionstring
Caption under the case-study image.
Default"Horizon, brand film"
labelsstring[]
Short header labels for the four panels.
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
accentstring
Accent color of the final flood.
Default"#3B5BFD"
panelstring
Panel background color. Defaults depend on theme.
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.