Crosshair Lock

A crosshair locks onto the peak of a dot plot and calls out 2.4k per minute

Installation

$ pnpm dlx shadcn@latest add @remocn/crosshair-lock

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CrosshairLock } from "@/components/remocn/crosshair-lock";
 
const CrosshairLockScene = () => (
  <CrosshairLock x={0.7} y={0.94} label="Peak" value="2.4k/min" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CrosshairLock"
    component={CrosshairLockScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Two crosshair lines slide across a dot plot and lock onto a point with a ring, then a leader line pops out a label and value. Set the target with x and y (0 to 1 across the plot) and the callout with label and value. Ships dark and light via theme.

Props7

Prop	Type	Default
x	number0.7 Horizontal position of the locked point, from 0 to 1.
y	number0.94 Vertical position of the locked point, from 0 to 1.
label	string"Peak" Small name above the callout value.
value	string"2.4k/min" The callout text, such as 2.4k/min.
accent	string"#3B5BFD" Accent color for the hero element.
theme	"dark" \| "light""dark" Dark or light palette.
speed	number1 Playback multiplier.

xnumber
Horizontal position of the locked point, from 0 to 1.
Default0.7
ynumber
Vertical position of the locked point, from 0 to 1.
Default0.94
labelstring
Small name above the callout value.
Default"Peak"
valuestring
The callout text, such as 2.4k/min.
Default"2.4k/min"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1