Hot Slab Morph

A glowing blue slab morphs from a template panel into a prompt input card

Installation

$ pnpm dlx shadcn@latest add @remocn/hot-slab-morph

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { HotSlabMorphDemo } from "@/components/remocn/hot-slab-morph";
 
const HotSlabMorphDemoScene = () => (
  <HotSlabMorphDemo
    lineA="Start from a template"
    lineB="or just describe it"
    prompt="A 30-second launch film for our new editor"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="HotSlabMorphDemo"
    component={HotSlabMorphDemoScene}
    durationInFrames={126}
    fps={30}
    width={1280}
    height={720}
  />
);

Scene A is a headline above a panel of template rows. The panel lights up as a hot slab, morphs with a haze into the position of the input card, and settles into scene B, a prompt box that types your request with a second headline above it. Pass lineA, lineB and prompt for the copy; it 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.

Props10

Prop	Type	Default
theme	"dark" \| "light""dark" Light or dark palette for both scenes
accent	string— Accent color; defaults to the theme accent
lineA	string"Start from a template" Headline above the template panel in scene A
lineB	string"or just describe it" Headline above the prompt card in scene B
prompt	string"A 30-second launch film for our new editor" Text typed into the prompt card
ground	GshPresetId— Preset id for the scene A gradients.sh shader ground
groundParams	Partial<GradientParams>— Overrides for the scene A shader parameters
groundB	GshPresetId— Preset id for the scene B gradients.sh shader ground
groundParamsB	Partial<GradientParams>— Overrides for the scene B shader parameters
transition	HotSlabMorphProps— Overrides for the transition presentation props

theme"dark" | "light"
Light or dark palette for both scenes
Default"dark"
accentstring
Accent color; defaults to the theme accent
lineAstring
Headline above the template panel in scene A
Default"Start from a template"
lineBstring
Headline above the prompt card in scene B
Default"or just describe it"
promptstring
Text typed into the prompt card
Default"A 30-second launch film for our new editor"
groundGshPresetId
Preset id for the scene A gradients.sh shader ground
groundParamsPartial<GradientParams>
Overrides for the scene A shader parameters
groundBGshPresetId
Preset id for the scene B gradients.sh shader ground
groundParamsBPartial<GradientParams>
Overrides for the scene B shader parameters
transitionHotSlabMorphProps
Overrides for the transition presentation props