Search Typing

1"use client";
2 
3import { loadFont } from "@remotion/google-fonts/Outfit";
4import {
5  type CSSProperties,
6  useEffect,
7  useLayoutEffect,
8  useRef,
9  useState,
10} from "react";
11import {
12  continueRender,
13  delayRender,
14  Easing,
15  getRemotionEnvironment,
16  interpolate,
17  random,
18  useCurrentFrame,
19  useVideoConfig,
20} from "remotion";
21import { Caret } from "@/components/snap-cn/caret";
22import { inputStyleContext } from "@/components/snap-cn/input";
23import { mixOklch, type SnapCnTheme, useSnapCnTheme } from "@/lib/snap-cn-ui";
24 
25// Outfit Light. Identified by measuring the reference's letterforms against a
26// field of candidates: its stem/cap ratio is 0.121, and Outfit 300 is the only
27// geometric face that hits that exactly (stem 12px at a 99px cap, like for like).
28// Loaded through @remotion/google-fonts rather than a CSS variable so the Player,
29// the rendered mp4 and a user's own project all get the same face.
30const { fontFamily: OUTFIT } = loadFont("normal", {
31  weights: ["300", "400"],
32  subsets: ["latin"],
33});
34 
35/**
36 * `shadcn` — the field is a shadcn Input: a card surface, a hairline border, and a
37 * shadow you have to look for. Correct on a light page, and the default.
38 * `glass`  — the field the reference uses: a grey crown falling to white, lit from
39 * below. It is measured, and it only works on a DARK backdrop; on a light one the
40 * crown reads as dirt and the shadow as a smear.
41 */
42export type SearchTypingSurface = "shadcn" | "glass";
43export type SearchTypingIcon = "search" | "sparkle" | "none";
44 
45export interface SearchTypingProps {
46  /** The sentence typed into the field, one character at a time. */
47  text: string;
48  /** Typing speed. 14 is what the reference does. */
49  charsPerSecond?: number;
50  /**
51   * Keystroke-interval variance, 0–1. 0 is a metronome. Deterministic — every
52   * interval is drawn from `seed`, never from a clock.
53   */
54  humanize?: number;
55  /** Beat after a space, as a multiple of the base keystroke interval. */
56  wordPause?: number;
57  /** Beat after `.,!?;:`, as a multiple of the base keystroke interval. */
58  punctuationPause?: number;
59  /** Seconds the field holds, parked and blinking, before the first keystroke. */
60  startDelay?: number;
61  /** Seconds the field takes to come forward once typing starts. */
62  dollyDuration?: number;
63  /** Seconds the field takes to slide from its left half to its right half. */
64  panDuration?: number;
65  /** Seconds the finished sentence holds at the front before the field goes back. */
66// … truncated