Visual Docs Snippet

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

A medium-paced explainer for "docs that move." A virtual cursor traces a soft bezier arc to a CTA button inside a faux browser, clicks with a micro-bounce, then a peach bounding box draws itself around the changed element while a side tooltip stagger-fades in to explain the action. The cursor exits to the bottom-right after the click so it never blocks the new content.

The background is a flat #141318 — no particles, no gradients — to keep the focus on the action being taught.

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.

Notes

Retiming

All five timing anchors (cursorEndFrame, clickFrame, boundingBoxFrame, tooltipFrame, settleFrame) are derived from the single clickFrame prop. Bumping clickFrame shifts the whole flow without breaking sync.

Cursor coordinates are absolute

cursorStart and cursorTarget are in the 1280×720 frame's coordinate space, not relative to the browser window. If you re-aim the cursor, also re-aim cursorTarget so it lands on the centered CTA — or fork the file and edit the BUTTON constants directly.