Decrypt Text

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { useReducedMotion, useVisibilityPause } from "@/lib/motiq";
7 
8/* -------------------------------------------------------------------------- */
9/* Types                                                                      */
10/* -------------------------------------------------------------------------- */
11 
12/** What starts the first decrypt run. Hover re-triggering is separate. */
13export type DecryptTextTrigger = "mount" | "inview" | "hover";
14 
15/** `display` = headline scale; `terminal` = mono CLI card with prompt + caret. */
16export type DecryptTextVariant = "display" | "terminal";
17 
18export interface DecryptTextProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
19  /** The real string. Rendered readable on the server and to screen readers. */
20  text: string;
21  /** Scramble pool each unresolved character cycles through. */
22  glyphs?: string;
23  /** Glyph cycle floor in ms (each char jitters between `speed` and `speed + 35`). */
24  speed?: number;
25  /** Per-character lock-in stagger in ms. */
26  stagger?: number;
27  /** Delay before the first character can lock, in ms. */
28  startDelay?: number;
29  /** Random spread applied to every character's lock time, in ms (± this value). */
30  jitter?: number;
31  /** What starts the first run. */
32  trigger?: DecryptTextTrigger;
33  /** Visual treatment. */
34  variant?: DecryptTextVariant;
35  /** Re-run automatically this many ms after settling; `false` runs once. */
36  loop?: number | false;
37  /** Re-scramble on pointer enter (1.5s cooldown). */
38  retriggerOnHover?: boolean;
39  /** Deterministic seed for the per-character jitter (SSR-stable). */
40  seed?: number;
41  /** Element tag for the rendered text. */
42  as?: "h1" | "h2" | "h3" | "h4" | "p" | "span" | "div";
43  /** Force the static, resolved variant regardless of system preference. */
44  reducedMotion?: boolean;
45  /** Fires each time the line finishes resolving. */
46  onDecrypted?: () => void;
47}
48 
49interface CharItem {
50  /** Index into the flat character list — drives the stagger ramp. */
51  i: number;
52  ch: string;
53}
54 
55/* -------------------------------------------------------------------------- */
56/* Constants                                                                  */
57/* -------------------------------------------------------------------------- */
58 
59const POOL_DISPLAY = "#%&@$?!*+=/{}[]<>~^";
60const POOL_TERMINAL = "abcdef0123456789$#%&*+=/|_~";
61// … truncated