Rim Draw Card

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

Installation

$ pnpm dlx 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.

Props16

Prop	Type	Default
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	number600 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.

theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
accentstring
Color of the drawn rim light. Defaults depend on theme.
primarystring
Color of the save button. Defaults depend on theme.
linestring
Headline shown beside the card.
Default"Just tell it once."
commandstring
Slash command shown in the chip.
Default"/brand-voice"
titlestring
Card title.
Default"Brand voice"
subtitlestring
Line of text under the card title.
Default"Used every time you write launch copy."
labelstring
Label above the instructions field.
Default"Instructions"
instructionsstring
Text that types into the field.
Default"Short, calm sentences. Name the feature first, then what it saves you."
actionstring
Label of the save button.
Default"Save skill"
limitnumber
Character limit shown beside the field.
Default600
donestring
Label the button shows after the press.
Default"Saved"
usesstring[]
Chips listing where the saved item is used.
previewstring
Sample output text shown in the preview box.
Default"Scenes now render three times faster. Ship the reel tonight."
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.