# Rim Draw Card
URL: https://remocn.dev/docs/ui-blocks/rim-draw-card

A line of light draws a card's rim, which then fills with a command chip, typed field and save press.

- Install: `npx shadcn@latest add @remocn/rim-draw-card`
- Vibe: tech
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rim-draw-card
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RimDrawCard } from "@/components/remocn/rim-draw-card";

const RimDrawCardScene = () => (
  <RimDrawCard
    line="Just tell it once."
    command="/brand-voice"
    title="Brand voice"
    uses={["Launch posts", "Changelog", "Release emails"]}
  />
);

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

A headline `line` and a slash `command` chip lead in, then a beam of light draws around a card's rim. The card fills with a title, a field that types the `instructions`, usage chips and a preview, and the save button presses to show `done`. Pass your own `line`, `command`, `title`, `instructions` and `uses`; 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` | — | Color of the drawn rim light. Defaults depend on theme. |
| `primary` | `string` | — | Color of the save button. Defaults depend on theme. |
| `line` | `string` | `"Just tell it once."` | Headline shown beside the card. |
| `command` | `string` | `"/brand-voice"` | Slash command shown in the chip. |
| `title` | `string` | `"Brand voice"` | Card title. |
| `subtitle` | `string` | `"Used every time you write launch copy."` | Line of text under the card title. |
| `label` | `string` | `"Instructions"` | Label above the instructions field. |
| `instructions` | `string` | `"Short, calm sentences. Name the feature first, then what it saves you."` | Text that types into the field. |
| `action` | `string` | `"Save skill"` | Label of the save button. |
| `limit` | `number` | `600` | Character limit shown beside the field. |
| `done` | `string` | `"Saved"` | Label the button shows after the press. |
| `uses` | `string[]` | — | Chips listing where the saved item is used. |
| `preview` | `string` | `"Scenes now render three times faster. Ship the reel tonight."` | Sample output text shown in the preview box. |
| `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 about saving reusable instructions or a custom skill, shown as a card that builds itself.
- A settings or configuration card should be introduced with a dramatic edge-light draw before its fields appear.
- A short headline plus a slash command needs to hand off to the form it opens.

## Don't use when
- The card is already on screen and you only want a light orbiting its edge — use `border-beam`.
- You need a full multi-screen settings flow with toggles — use `settings-toggle-flow`.
- A plain modal opening is enough — use `dialog`.