Bounding Box Selector

Figma-style selection rectangle appears around any element

Installation

$ pnpm dlx shadcn@latest add @remocn/bounding-box-selector

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { BoundingBoxSelector } from "@/components/remocn/bounding-box-selector";

const BoundingBoxSelectorScene = () => (
  <YourElement />
);

export const RemotionRoot = () => (
  <Composition
    id="BoundingBoxSelector"
    component={BoundingBoxSelectorScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

PropTypeDefaultDescription
children
ReactNodeThe element to wrap. Falls back to a placeholder rectangle.
borderColor
string"#0ea5e9"Color of the selection border
handleColor
string"#0ea5e9"Stroke color of the corner/edge handles
borderWidth
number2Border width in pixels
appearAt
number15Frame at which the selection box appears
background
string"#fafafa"Outer background color
className
stringOptional className for the outer container