Pill Morph

A small logo pill grows into a product card, splits into three feature pills, then merges into an app tile.

Installation

$ pnpm dlx shadcn@latest add @remocn/pill-morph

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PillMorph } from "@/components/remocn/pill-morph";
 
const PillMorphScene = () => (
  <PillMorph
    name="Lumen"
    features={["Transitions", "Captions", "Backgrounds"]}
    src="/product-shot.jpg"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PillMorph"
    component={PillMorphScene}
    durationInFrames={240}
    fps={30}
    width={1280}
    height={720}
  />
);

A logo pill pops in and grows into a card showing a product clip, then collapses to a bar and splits into three feature pills before merging into an app tile with the name written below. Pass your own logo and name, the three features, and either a src image or children for the card. With no src or children it shows a built-in editor mock that uses a staticFile image 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.

Props10

Prop	Type	Default
name	string"" Product name shown in the pill and under the tile.
features	[string, string, string]— Exactly three feature names for the split pills.
logo	React.ReactNode— Brand mark node shown in the pill and the tile.
src	string— Image shown inside the card. Replaces the built-in editor mock.
children	React.ReactNode— Custom content shown inside the card. Takes priority over src.
accent	string"#3B5BFD" Accent color used inside the built-in editor.
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.

namestring
Product name shown in the pill and under the tile.
Default""
features[string, string, string]
Exactly three feature names for the split pills.
logoReact.ReactNode
Brand mark node shown in the pill and the tile.
srcstring
Image shown inside the card. Replaces the built-in editor mock.
childrenReact.ReactNode
Custom content shown inside the card. Takes priority over src.
accentstring
Accent color used inside the built-in editor.
Default"#3B5BFD"
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.