UI Callout

Callout cards appear one by one beside a product screenshot, each with a pulsing marker on its target.

Installation

$ pnpm dlx shadcn@latest add @remocn/ui-callout

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { UiCallout } from "@/components/remocn/ui-callout";
 
const UiCalloutScene = () => (
  <UiCallout
    src="/screens/dashboard.png"
    screenshotWidth={1440}
    screenshotHeight={900}
    callouts={[{ x: 358, y: 113, title: "Status at a glance", body: "Every issue shows its state." }]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="UiCallout"
    component={UiCalloutScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A screenshot window rises in and callouts arrive in turn, each pinned to a target point with a pulsing marker and a card or pill that holds its title and body. Earlier callouts fold away as the next lands. Pass your own screenshot through src or children, with screenshotWidth and screenshotHeight, and list callouts whose x and y are in screenshot pixels. With neither src nor children it shows a built-in issue-tracker mock. 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.

Props12

Prop	Type	Default
callouts	{ x: number; y: number; title: string; body?: string; side?: 'top' \| 'bottom' \| 'left' \| 'right'; delay?: number }[]DEFAULT_CALLOUTS Callouts to show. x and y are target points in screenshot pixels.
variant	"tooltip" \| "pill""tooltip" Callout look, tooltip cards or compact pills.
src	string— Screenshot URL. Replaces the built-in mock.
children	React.ReactNode— Custom screen content. Used when src is not set.
screenshotWidth	numberMOCK_W Natural width of the screenshot in pixels.
screenshotHeight	numberMOCK_H Natural height of the screenshot in pixels.
stagger	number30 Frames between callouts when none sets its own delay.
theme	"light" \| "dark""light" Color scheme. Ships light and dark.
accent	string"#3B5BFD" Accent color of markers and highlights.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.
speed	number1 Playback speed multiplier for the whole timeline.

callouts{ x: number; y: number; title: string; body?: string; side?: 'top' | 'bottom' | 'left' | 'right'; delay?: number }[]
Callouts to show. x and y are target points in screenshot pixels.
DefaultDEFAULT_CALLOUTS
variant"tooltip" | "pill"
Callout look, tooltip cards or compact pills.
Default"tooltip"
srcstring
Screenshot URL. Replaces the built-in mock.
childrenReact.ReactNode
Custom screen content. Used when src is not set.
screenshotWidthnumber
Natural width of the screenshot in pixels.
DefaultMOCK_W
screenshotHeightnumber
Natural height of the screenshot in pixels.
DefaultMOCK_H
staggernumber
Frames between callouts when none sets its own delay.
Default30
theme"light" | "dark"
Color scheme. Ships light and dark.
Default"light"
accentstring
Accent color of markers and highlights.
Default"#3B5BFD"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.
speednumber
Playback speed multiplier for the whole timeline.
Default1