Send Fountain

A launch board dashboard fills with a video, signup bars, a metric and asset tiles

Installation

$ pnpm dlx shadcn@latest add @remocn/send-fountain

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SendFountain } from "@/components/remocn/send-fountain";
 
const SendFountainScene = () => (
  <SendFountain prompt="Build a launch dashboard for the v2 release" stat={47200} statDelta="+18%" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SendFountain"
    component={SendFountainScene}
    durationInFrames={144}
    fps={30}
    width={1280}
    height={720}
  />
);

A prompt bar types a request and presses send, the answer ejects as six cards that fly up and snap into a launch-board window, then a metric ticks up and signup avatars and a live badge arrive. Pass prompt, appTitle, heroTitle, stat with statLabel and statDelta to make it yours, and images with your own pictures for the hero and cover cards (the default image files only exist 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.

Props11

Prop	Type	Default
theme	"dark" \| "light""dark" Visual theme; ships dark and light.
accent	string"#ff5a1f" Accent color for the send button and highlights.
prompt	string"Build a launch dashboard for the v2 release" Request typed into the prompt bar.
appTitle	string"Launch board" Title shown in the app window chrome.
heroTitle	string"Launch film" Title of the large video card.
stat	number47200 Final value of the headline metric.
statLabel	string"Weekly active" Label under the headline metric.
statDelta	string"+18%" Change badge shown next to the metric.
images	string[]— Image URLs for the hero and cover cards; defaults ship with Remocn only.
ground	GshPresetId— Preset id for the gradients.sh background shader.
groundParams	Partial<GradientParams>— Overrides for the shader parameters of the chosen ground.

theme"dark" | "light"
Visual theme; ships dark and light.
Default"dark"
accentstring
Accent color for the send button and highlights.
Default"#ff5a1f"
promptstring
Request typed into the prompt bar.
Default"Build a launch dashboard for the v2 release"
appTitlestring
Title shown in the app window chrome.
Default"Launch board"
heroTitlestring
Title of the large video card.
Default"Launch film"
statnumber
Final value of the headline metric.
Default47200
statLabelstring
Label under the headline metric.
Default"Weekly active"
statDeltastring
Change badge shown next to the metric.
Default"+18%"
imagesstring[]
Image URLs for the hero and cover cards; defaults ship with Remocn only.
groundGshPresetId
Preset id for the gradients.sh background shader.
groundParamsPartial<GradientParams>
Overrides for the shader parameters of the chosen ground.