Gooey Counter

1// Built using Hyperiux Vault: https://vault.hyperiux.com
2 
3"use client";
4 
5import { useEffect, useId, useRef } from "react";
6 
7const DEFAULT_GRID_SIZE = 22;
8const MIN_GRID_SIZE = 12;
9const MAX_GRID_SIZE = 50;
10const DEFAULT_MAX_VALUE = 100;
11const MAX_COUNTER_VALUE = 100;
12 
13type Cell = [number, number];
14type GooeyBlock = {
15 cr: number;
16 cc: number;
17 tr: number;
18 tc: number;
19 sr: number;
20 sc: number;
21 idle: boolean;
22};
23type GooeyLayout = {
24 vw: number;
25 vh: number;
26 cell: number;
27 gridW: number;
28 gridH: number;
29 originX: number;
30 originY: number;
31};
32type GooeyTransition = {
33 start: number;
34 duration: number;
35 onDone?: () => void;
36};
37type GooeyState = {
38 blocks: GooeyBlock[];
39 phase: string;
40 nextNumber: number;
41 timer: ReturnType<typeof setTimeout> | null;
42 raf: number | null;
43 layout: GooeyLayout | null;
44 transition: GooeyTransition | null;
45 activeRows: number;
46 activeCols: number;
47 viewportWidth: number;
48 maxBlocks: number;
49 start?: () => void;
50};
51 
52const ROWS = 13;
53const ROWS_TABLET = 30;
54const ROWS_MOBILE = 32;
55const CELL_MAX = 48;
56const TRANSITION_MS = 480;
57const NUMBER_DWELL_MS = 1000;
58const RANDOM_DWELL_MS = 300;
59const RANGE_MIN = 0;
60const GRID_STROKE = "rgba(255,255,255,0.55)";
61const MOBILE_MAX_WIDTH = 768;
62const TABLET_MAX_WIDTH = 1024;
63const DIGIT_HEIGHT = 9;
64const DIGIT_WIDTH = 6;
65const DIGIT_GAP = 1;
66const MOBILE_DIGIT_HEIGHT = 13;
67const MOBILE_DIGIT_WIDTH = 8;
68const MOBILE_DIGIT_GAP = 1;
69 
70const DIGIT_MAPS = {
71 0: ["011100","110011","110011","110011","110011","110011","110011","110011","011100"],
72 1: ["001100","011100","001100","001100","001100","001100","001100","001100","011110"],
73 2: ["011100","110011","000011","000110","001100","011000","110000","110000","111111"],
74 3: ["111100","000011","000011","000011","011100","000011","000011","000011","111100"],
75 4: ["000110","001110","011010","110010","110010","111111","000010","000010","000010"],
76 5: ["111111","110000","110000","110000","111100","000011","000011","000011","111100"],
77 6: ["001110","011000","110000","110000","111100","110011","110011","110011","011100"],
78 7: ["111111","000011","000011","000011","000110","001100","001100","011000","011000"],
79 8: ["011100","110011","110011","110011","011100","110011","110011","110011","011100"],
80 9: ["011100","110011","110011","110011","011111","000011","000011","000110","011000"],
81};
82 
83/**
84 * @param {string[]} rows
85 * @returns {string[]}
86 */
87function strokeize(rows: string[]) {
88 const h = rows.length, w = rows[0].length;
89// … truncated