Cursor Frame

A selection frame with handles and a size badge is dragged and resized around a headline, rewrapping it.

Installation

$ pnpm dlx shadcn@latest add @remocn/cursor-frame

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CursorFrame } from "@/components/remocn/cursor-frame";
 
const CursorFrameScene = () => (
  <CursorFrame title="Launch videos, in code." theme="light" accent="#3B5BFD" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CursorFrame"
    component={CursorFrameScene}
    durationInFrames={230}
    fps={30}
    width={1280}
    height={720}
  />
);

Words fade in, a cursor presses and drags a selection frame over them, then resizes it so the headline rewraps onto two lines before the frame clears. Pass title for the headline; it ships light and dark through theme and defaults to light.

Props4

Prop	Type	Default
title	string"Launch videos, in code." Headline that gets selected and rewrapped
accent	string"#3B5BFD" Accent color (any valid CSS color)
theme	"dark" \| "light""light" Ships light and dark palettes
speed	number1 Playback speed multiplier

titlestring
Headline that gets selected and rewrapped
Default"Launch videos, in code."
accentstring
Accent color (any valid CSS color)
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark palettes
Default"light"
speednumber
Playback speed multiplier
Default1