Bounding Box Selector

A Figma-style selection rectangle with corner and edge handles that animates in around any wrapped element or video frame, used to highlight UI elements in product demo videos.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bounding Box Selector to your project and fits it to your theme.

import { BoundingBoxSelector } from "@/components/ui/bounding-box-selector";

export default function BoundingBoxSelectorDemo() {
  return (
    <div className="flex w-full h-screen items-center justify-center">
      <BoundingBoxSelector />
    </div>
  );
}