Glow Born Card

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

Installation

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

Props12

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

theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
accentstring
Color of the glow that forms the card.
Default"#45f0d6"
primarystring
Color of the primary action button.
Default"#3B5BFD"
beforestring
Headline text to the left of the card.
Default"Or import a scene from"
afterstring
Headline text to the right of the card.
Default"your repo"
titlestring
Card title.
Default"Import from repository"
labelstring
Label above the input field.
Default"Repository"
valuestring
Text that types into the field.
Default"lumen-labs/launch"
hintstring
Helper text under the field.
Default"Public or private, any branch"
branchstring
Meta line shown in the card footer.
Default"main · 214 commits · 3h ago"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.