Visual Docs Snippet

Calm tutorial flow, virtual cursor arcs to a button, clicks, and a bounding box plus tooltip explain what just happened

Installation

$ pnpm dlx shadcn@latest add @remocn/visual-docs-snippet

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { VisualDocsSnippet } from "@/components/remocn/visual-docs-snippet";

const Snippet = () => (
  <VisualDocsSnippet
    tooltipTitle="Generate runs"
    tooltipBody="Click to start a new generation. The job will appear in the sidebar."
    buttonLabel="Generate"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="VisualDocsSnippet"
    component={Snippet}
    durationInFrames={210}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`cursorStart`	`{ x: number; y: number }`	`{ x: 980, y: 560 }`	Where the cursor begins, in absolute frame coordinates
`cursorTarget`	`{ x: number; y: number }`	`{ x: 640, y: 360 }`	Where the cursor lands and clicks
`clickFrame`	`number`	`110`	Frame at which the click fires. All later anchors (bounding box, tooltip, settle) derive from this.
`tooltipTitle`	`string`	`"Generate runs"`	Tooltip heading shown to the right of the bounding box
`tooltipBody`	`string`	`"Click to start a new generation…"`	Tooltip body copy
`buttonLabel`	`string`	`"Generate"`	Label inside the CTA button
`accent`	`string`	`"#FFB38E"`	Peach accent color used for the bounding box, tooltip border, and ripple
`background`	`string`	`"#141318"`	Stage background color
`speed`	`number`	`1`	Playback speed multiplier
`className`	`string`	—	Optional className for the outer container