Giant Mark Backdrop

A small wordmark balloons into a giant backdrop while a prompt card pops in and types.

Installation

$ pnpm dlx shadcn@latest add @remocn/giant-mark-backdrop

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GiantMarkBackdrop } from "@/components/remocn/giant-mark-backdrop";
 
const GiantMarkBackdropScene = () => (
  <GiantMarkBackdrop
    prompt="Make a launch film for our v2 release"
    placeholder="Describe your launch film"
    theme="dark"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GiantMarkBackdrop"
    component={GiantMarkBackdropScene}
    durationInFrames={126}
    fps={30}
    width={1280}
    height={720}
  />
);

The wordmark appears small on a shader ground, then a flood of colour rises as the mark balloons into a giant backdrop. A prompt card pops in, types the prompt and lights its send button. Pass prompt and placeholder to match your product and accent for your colour; the wordmark is the baked-in Remocn logo. Ships light and dark.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props6

Prop	Type	Default
theme	"dark" \| "light""dark" Dark or light palette and ground.
accent	string— Colour of the wordmark, caret and send button.
prompt	string"Make a launch film for our v2 release" Text typed into the card.
placeholder	string"Describe your launch film" Greyed hint shown in the card before typing starts.
ground	GshPresetId— Shader preset id for the gradients.sh background ground.
groundParams	Partial<GradientParams>— Custom shader parameters for the ground, used instead of the theme default.

theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
accentstring
Colour of the wordmark, caret and send button.
promptstring
Text typed into the card.
Default"Make a launch film for our v2 release"
placeholderstring
Greyed hint shown in the card before typing starts.
Default"Describe your launch film"
groundGshPresetId
Shader preset id for the gradients.sh background ground.
groundParamsPartial<GradientParams>
Custom shader parameters for the ground, used instead of the theme default.