# Hot Slab Morph
URL: https://remocn.dev/docs/transitions/hot-slab-morph

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

- Install: `npx shadcn@latest add @remocn/hot-slab-morph`
- Vibe: tech
- Natural length: 24f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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 |

## Use when
- A beat that moves from choosing a template to describing a video in your own words.
- A launch demo where one UI panel should visibly become the next control, with a hot light bloom in between.
- You want a heated, glowing morph between two layouts instead of a cut.

## Don't use when
- The two scenes share no panel to morph between — use `zoom-blur` for a general-purpose cut.
- You want a clean geometric reveal with no glow — use `ring-cut`.
- The cut should read as light, not a solid slab — use `bloom-ring`.