Bracket Focus

Viewfinder brackets fly in and snap tight around a big value over a dotted grid, with a tag chip.

Installation

$ pnpm dlx shadcn@latest add @remocn/bracket-focus

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BracketFocus } from "@/components/remocn/bracket-focus";
 
const BracketFocusScene = () => <BracketFocus subject="1.8s" tag="Render time" />;
 
export const RemotionRoot = () => (
  <Composition
    id="BracketFocus"
    component={BracketFocusScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A dotted grid ripples in around a big value, and four viewfinder corner brackets fly in from the edges of the frame and snap tight around it with a springy settle. A tag chip and a size readout appear and the background dims around the focus. Pass subject and tag; accent colors the highlights. It ships light and dark through theme.

Props5

Prop	Type	Default
subject	string"1.8s" The value framed by the brackets.
tag	string"Render time" Small chip text that names the value.
accent	string"#3B5BFD" Accent color for the highlights.
theme	"dark" \| "light""dark" Light or dark palette.
speed	number1 Playback speed multiplier.

subjectstring
The value framed by the brackets.
Default"1.8s"
tagstring
Small chip text that names the value.
Default"Render time"
accentstring
Accent color for the highlights.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark palette.
Default"dark"
speednumber
Playback speed multiplier.
Default1