Bounding Box Selector

A composition that wraps its children in a relatively positioned container and overlays an absolutely positioned selection border with eight corner and edge handles. The border fades in and slightly scales up via spring() at the configured frame.

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

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.

Notes

Sizing

This component reads its size from the wrapped child via display: inline-block. If you need pixel-perfect placement around dynamic content, pass children with explicit width/height instead of relying on intrinsic sizing.