What's New Modal

A product dashboard dims behind a modal that pages through feature slides and ends on a CTA click.

Installation

$ pnpm dlx shadcn@latest add @remocn/whats-new-modal

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WhatsNewModal } from "@/components/remocn/whats-new-modal";
 
const WhatsNewModalScene = () => (
  <WhatsNewModal
    brand="Acme"
    userName="Maya Chen"
    slides={[{ eyebrow: "New in 2.0", title: "Launch videos, built from components", body: "Drop in a scene and ship.", cta: "Try it now" }]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WhatsNewModal"
    component={WhatsNewModalScene}
    durationInFrames={250}
    fps={30}
    width={1280}
    height={720}
  />
);

The app dashboard dims and a modal pops in with header art, an eyebrow, a title and a body; the slides swipe one by one, then a cursor clicks the final call to action. Pass slides (eyebrow, title, body, optional cta and src), brand and userName, and put your own app behind it with children or src. The default images are files that only exist in the Remocn repo, so pass your own. 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.

Props11

Prop	Type	Default
slides	WhatsNewSlide[]DEFAULT_SLIDES Slides: eyebrow, title, body, optional cta, illustration or src
brand	string"remocn" Brand name in the dashboard mock
userName	string"Maya Chen" User name shown in the dashboard mock
children	React.ReactNode— Your own app screen behind the modal
src	string— Screenshot behind the modal when no children are passed
images	string[]DEFAULT_IMAGES Pictures for the built-in art; defaults exist only in the Remocn repo
theme	"light" \| "dark""light" Light or dark palette
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

slidesWhatsNewSlide[]
Slides: eyebrow, title, body, optional cta, illustration or src
DefaultDEFAULT_SLIDES
brandstring
Brand name in the dashboard mock
Default"remocn"
userNamestring
User name shown in the dashboard mock
Default"Maya Chen"
childrenReact.ReactNode
Your own app screen behind the modal
srcstring
Screenshot behind the modal when no children are passed
imagesstring[]
Pictures for the built-in art; defaults exist only in the Remocn repo
DefaultDEFAULT_IMAGES
theme"light" | "dark"
Light or dark palette
Default"light"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters