CTA Collapse Mark

A call to action collapses into pixels that rebuild the Remocn wordmark, with a URL beneath.

Installation

$ pnpm dlx shadcn@latest add @remocn/cta-collapse-mark

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CtaCollapseMark } from "@/components/remocn/cta-collapse-mark";
 
const CtaCollapseMarkScene = () => (
  <CtaCollapseMark
    cta="Ship your first launch film"
    url="remocn.dev"
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CtaCollapseMark"
    component={CtaCollapseMarkScene}
    durationInFrames={138}
    fps={30}
    width={1280}
    height={720}
  />
);

The call to action fades in word by word with the URL beneath it, then its glyphs shed and fly into the cells of the R mark, which snaps together before the rest of the wordmark springs in. Pass cta, url and accent to make it yours; 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"#3B5BFD" Accent colour for the mark and URL.
cta	string"Ship your first launch film" Call-to-action line that collapses into the logo.
url	string"remocn.dev" URL set beneath the call to action.
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
Accent colour for the mark and URL.
Default"#3B5BFD"
ctastring
Call-to-action line that collapses into the logo.
Default"Ship your first launch film"
urlstring
URL set beneath the call to action.
Default"remocn.dev"
groundGshPresetId
Shader preset id for the gradients.sh background ground.
groundParamsPartial<GradientParams>
Custom shader parameters for the ground, used instead of the theme default.