Bounding Box Selector
Figma-style selection rectangle appears around any element
Installation
$ pnpm dlx shadcn@latest add @remocn/bounding-box-selectorUsage
// 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
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The 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 | number | 2 | Border width in pixels |
appearAt | number | 15 | Frame at which the selection box appears |
background | string | "#fafafa" | Outer background color |
className | string | — | Optional className for the outer container |