Split Flap

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface SplitFlapProps extends Omit<
8  React.ComponentProps<"div">,
9  "children"
10> {
11  /** The string the board settles on. Matched against the charset in caps. */
12  value: string
13  /** Every glyph a cell can show, in the order it flaps through them. */
14  charset?: string
15  /** Milliseconds per flap. One flap is also this long, so the board never gaps. */
16  interval?: number
17  /** Flaps of head start each cell gives the one after it. */
18  stagger?: number
19  /** Keep at least this many cells, so a shorter value does not resize the board. */
20  padTo?: number
21}
22 
23/** The glyphs a departure board actually carries, in board order. */
24const DEFAULT_CHARSET = " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,:'-?!"
25 
26export function SplitFlap({
27  value,
28  charset = DEFAULT_CHARSET,
29  interval = 62,
30  stagger = 2,
31  padTo,
32  className,
33  ...props
34}: SplitFlapProps) {
35  const target = React.useMemo(() => {
36    const text = value.toUpperCase()
37    const width = Math.max(padTo ?? 0, text.length)
38    return text.padEnd(width, " ").split("")
39  }, [value, padTo])
40 
41  const blank = charset[0] ?? " "
42  const charsRef = React.useRef<string[]>(target.map(() => blank))
43  const [chars, setChars] = React.useState(charsRef.current)
44 
45  // The half falling away carries the glyph from the previous commit, so the
46  // flap has something to show on its way out. Read during render, written
47  // after it, which is the only ordering that gives the outgoing face.
48  const previousRef = React.useRef(chars)
49  const previous = previousRef.current
50  React.useEffect(() => {
51    previousRef.current = chars
52  }, [chars])
53 
54  React.useEffect(() => {
55    const commit = (next: string[]) => {
56      charsRef.current = next
57      setChars(next)
58    }
59 
60    // A board that grew gets blank cells to flap up from rather than popping.
61    const from = target.map((_, index) => charsRef.current[index] ?? blank)
62 
63    // Flaps forward through the charset, per cell. A cell whose target is not
64    // in the charset takes none and is set outright.
65    const steps = from.map((char, index) => {
66      const start = charset.indexOf(char)
67      const end = charset.indexOf(target[index])
68      if (start < 0 || end < 0) {
69        return 0
70      }
71      return (end - start + charset.length) % charset.length
72    })
73 
74    const total = steps.reduce(
75      (longest, count, index) =>
76// … truncated