callout-spotlight

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { Img, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
3import { CODE_THEMES } from "@/remotion/lib/code-syntax";
4import { clampRectToSafeArea, getSafeAreaPadding } from "@/remotion/lib/layout";
5import { EASING } from "@/remotion/lib/motion-tokens";
6 
7const { fontFamily } = loadFont("normal", {
8  weights: ["400", "500", "600", "700"],
9  subsets: ["latin"],
10});
11 
12export type SpotlightTarget = {
13  x: number;
14  y: number;
15  width: number;
16  height: number;
17};
18 
19export type CalloutSpotlightProps = {
20  title: string;
21  subtitle?: string;
22  /** Small label above the title. */
23  kicker?: string;
24  /** Region to spotlight, in source pixels. */
25  target: SpotlightTarget;
26  /** Screenshot or capture under the spotlight. */
27  backgroundSrc?: string;
28  /** Size the target was measured against. Defaults to the composition. */
29  sourceWidth?: number;
30  sourceHeight?: number;
31  /** How far the rest of the frame is knocked back, 0–1. */
32  dim?: number;
33  backgroundColor?: string;
34  accentColor?: string;
35  theme?: "dark" | "light";
36  /** Animation speed multiplier. */
37  speed?: number;
38};
39 
40/** Beat plan in seconds. */
41const T = {
42  background: 0,
43  /** The mask closes in from the whole frame onto the target. */
44  iris: 0.3,
45  irisFor: 0.7,
46  ping: 1.0,
47  pingFor: 0.9,
48  connector: 1.05,
49  card: 1.2,
50  kicker: 1.3,
51  title: 1.4,
52  subtitle: 1.6,
53} as const;
54 
55const clamp = {
56  extrapolateLeft: "clamp",
57  extrapolateRight: "clamp",
58} as const;
59 
60/**
61 * A spotlight that is aimed rather than drawn: the frame dims and the mask
62 * closes in from the whole picture onto the target, a ring pings the region
63 * once it lands, and only then does a connector draw out to the callout — so
64 * the eye is taken to the thing before it is told about it.
65 */
66export const CalloutSpotlight: React.FC<CalloutSpotlightProps> = ({
67  title,
68  subtitle,
69  kicker,
70  target,
71  backgroundSrc,
72  sourceWidth,
73  sourceHeight,
74  dim = 0.72,
75  backgroundColor,
76  accentColor = "#E8B86D",
77  theme = "dark",
78  speed = 1,
79}) => {
80  const frame = useCurrentFrame();
81  const { fps, width, height } = useVideoConfig();
82  const palette = CODE_THEMES[theme];
83  const safe = getSafeAreaPadding({ width, height });
84 
85  const at = (seconds: number) => (seconds * fps) / speed;
86  const ease = (from: number, to: number, easing = EASING.enter) =>
87    interpolate(frame, [at(from), at(to)], [0, 1], { easing, ...clamp });
88 
89// … truncated