Caret Wipe

1"use client";
2 
3import type {
4  TransitionPresentation,
5  TransitionPresentationComponentProps,
6} from "@remotion/transitions";
7import type React from "react";
8import { AbsoluteFill, Easing, interpolate } from "remotion";
9 
10const clampOpts = {
11  extrapolateLeft: "clamp" as const,
12  extrapolateRight: "clamp" as const,
13};
14 
15export type CaretWipeProps = {
16  /** Sweep direction. `right` types the screen left→right; `left` reverses it. */
17  direction?: "left" | "right";
18  /** The caret's color — the remocn lime by default. */
19  caretColor?: string;
20  /** Caret bar width in px. */
21  caretWidth?: number;
22  /** Caret bar height as a fraction of frame height (0–1), vertically centered. */
23  caretHeight?: number;
24};
25 
26// ---------------------------------------------------------------------------
27// caret-wipe — a typographic scene transition.
28//
29// A single tall caret (the remocn text cursor) sweeps across the frame in one
30// eased pass. The caret IS the wipe boundary: the region it has PASSED shows
31// the incoming scene (freshly "typed in" — it settles down and un-blurs just
32// behind the caret), while the region it has NOT reached still shows the
33// outgoing scene (being "backspaced" — it lifts and blurs as it's consumed).
34//
35// Both scenes share whatever backdrop sits behind the TransitionSeries, so the
36// complementary clips never expose a seam. Pure frame-driven interpolate — no
37// CSS keyframes — so it seeks correctly and renders identically every time.
38// ---------------------------------------------------------------------------
39const CaretWipePresentation: React.FC<
40  TransitionPresentationComponentProps<CaretWipeProps>
41> = ({
42  children,
43  presentationProgress,
44  presentationDirection,
45  passedProps,
46}) => {
47  const {
48    direction = "right",
49    caretColor = "#C3E88D",
50    caretWidth = 3,
51    caretHeight = 0.5,
52  } = passedProps;
53 
54  const entering = presentationDirection === "entering";
55  const p = presentationProgress;
56  const goingRight = direction === "right";
57 
58  // Eased sweep so the caret decelerates as it lands the last column.
59  const eased = interpolate(p, [0, 1], [0, 1], {
60    ...clampOpts,
61    easing: Easing.bezier(0.65, 0, 0.35, 1),
62  });
63  // Caret position as a percent of frame width; the wipe boundary.
64  const caretX = goingRight ? eased * 100 : (1 - eased) * 100;
65 
66  if (!entering) {
67    // Outgoing: keep only the column the caret hasn't reached yet, and let it
68    // lift + blur as it's consumed (backspaced).
69// … truncated