# Glow Born Card
URL: https://remocn.dev/docs/ui-blocks/glow-born-card

A glow condenses into an import dialog next to a split headline, then a field types and a button confirms.

- Install: `npx shadcn@latest add @remocn/glow-born-card`
- Vibe: tech
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/glow-born-card
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GlowBornCard } from "@/components/remocn/glow-born-card";

const GlowBornCardScene = () => (
  <GlowBornCard
    before="Or import a scene from"
    after="your repo"
    title="Import from repository"
    value="lumen-labs/launch"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="GlowBornCard"
    component={GlowBornCardScene}
    durationInFrames={136}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A headline reads `before` and `after` while a glow ignites in the gap and condenses into a card. A field types the `value`, the button presses, and a done state pops in. Pass your own `before`, `after`, `title`, `label` and `value`; 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `accent` | `string` | `"#45f0d6"` | Color of the glow that forms the card. |
| `primary` | `string` | `"#3B5BFD"` | Color of the primary action button. |
| `before` | `string` | `"Or import a scene from"` | Headline text to the left of the card. |
| `after` | `string` | `"your repo"` | Headline text to the right of the card. |
| `title` | `string` | `"Import from repository"` | Card title. |
| `label` | `string` | `"Repository"` | Label above the input field. |
| `value` | `string` | `"lumen-labs/launch"` | Text that types into the field. |
| `hint` | `string` | `"Public or private, any branch"` | Helper text under the field. |
| `branch` | `string` | `"main · 214 commits · 3h ago"` | Meta line shown in the card footer. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- A feature beat introducing an import or connect flow, where the headline splits open to make room for the dialog.
- A dialog should feel born from light rather than slid in, with a typed field and a confirm press.
- A product launch video needs one polished form moment with a clear before and after headline.

## Don't use when
- The dialog should simply appear inside a live UI flow — use `dialog`.
- You want a multi-step sign-up with several screens — use `signup-flow`.
- A file is the thing being added, not a text field — use `drop-upload`.