Prompt Swell

A prompt card swells into a builder window that generates a pricing page and ships it

Installation

$ pnpm dlx shadcn@latest add @remocn/prompt-swell

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PromptSwell } from "@/components/remocn/prompt-swell";
 
const PromptSwellScene = () => (
  <PromptSwell
    prompt="Build a pricing page for our scheduling app"
    src="/shots/app-hero.png"
    tiers={[
      { name: "Solo", price: "$9" },
      { name: "Team", price: "$29" },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PromptSwell"
    component={PromptSwellScene}
    durationInFrames={156}
    fps={30}
    width={1280}
    height={720}
  />
);

A prompt card types your request and is sent, then it swells into a builder window with a checklist of steps on one side and a page preview on the other. The preview builds a hero, scrolls to pricing tiers and a waitlist, publishes, and a live toast appears. Pass prompt, steps, tiers, url, and src (your own hero image, since the default file only exists in the Remocn repo). 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.

Props9

Prop	Type	Default
theme	"dark" \| "light""dark" Light or dark interface.
accent	string"#ff7a3d" Accent color for the send button and highlights.
prompt	string"Build a launch page for our video kit with a hero, pricing and a waitlist" The request typed into the prompt card.
src	stringstaticFile("studio.png") Hero image shown in the generated page.
url	string"preview.remocn.dev" Address shown in the preview browser bar.
steps	string[]— Up to three checklist steps shown while building.
tiers	PromptSwellTier[]— Pricing tiers: name, price and optional features.
ground	GshPresetId— Gradient shader preset for the background.
groundParams	Partial<GradientParams>— Overrides for the shader preset parameters.

theme"dark" | "light"
Light or dark interface.
Default"dark"
accentstring
Accent color for the send button and highlights.
Default"#ff7a3d"
promptstring
The request typed into the prompt card.
Default"Build a launch page for our video kit with a hero, pricing and a waitlist"
srcstring
Hero image shown in the generated page.
DefaultstaticFile("studio.png")
urlstring
Address shown in the preview browser bar.
Default"preview.remocn.dev"
stepsstring[]
Up to three checklist steps shown while building.
tiersPromptSwellTier[]
Pricing tiers: name, price and optional features.
groundGshPresetId
Gradient shader preset for the background.
groundParamsPartial<GradientParams>
Overrides for the shader preset parameters.