@digithings-ai/hero-banner 0.0.0-stage → 0.1.0

package/src/animations/fetch.ts

@@ -0,0 +1,153 @@
+import { emptyFrame, litCells, mulberry32, setPixel } from "../layout";
+import type { Animation, Frame, Layout } from "../types";
+
+/**
+ * FETCH (digifetch). The word is downloaded, not drawn.
+ * LOADING: a request leaves first: one `glint` pixel with an `accent` tail runs
+ * left to right along the middle row and out of the right edge. Then the
+ * response streams back. Every lit cell of the word is a packet that enters at
+ * the right edge on its own row and travels left until it reaches its home
+ * cell; it lands as a short `glint` flash, then `ink`. Packets for the left
+ * columns leave first and travel furthest, so each row is a steady stream
+ * pulled in from off screen and the word fills from left to right.
+ * LIVE: the page is fetched again now and then. A request runs out along one
+ * row, and a small burst of packets returns on that row and its neighbours,
+ * each landing on a cell of the word with a `glint` flash.
+ */
+
+export type FetchOptions = {
+  /** ms per pixel column for a request pixel. */
+  requestColMs: number;
+  /** ms per pixel column for a response packet. */
+  packetColMs: number;
+  /** LOADING: launch delay per home column (left columns launch first). */
+  launchColMs: number;
+  /** LOADING: random extra launch delay per packet, below `launchColMs`. */
+  jitterMs: number;
+  /** ms a landed packet shows `glint` before it settles to `ink`. */
+  flashMs: number;
+  /** `accent` alpha of the trail cells behind a moving pixel, nearest first. */
+  tail: number[];
+  /** LIVE: ms between fetches. */
+  everyMs: number;
+  /** LIVE: packets per fetch, [min, max]. */
+  burst: [number, number];
+};
+
+/** A packet: travels left along row `y` from the right edge to `x`. */
+export type Packet = { x: number; y: number; launch: number; land: number };
+
+export type FetchState = {
+  width: number;
+  height: number;
+  lit: Uint8Array;
+  cells: { x: number; y: number }[];
+  /** LOADING packets, one per lit cell. */
+  packets: Packet[];
+  /** LOADING: when the request pixel has left the right edge. */
+  requestMs: number;
+  seed: number;
+  options: FetchOptions;
+  ms: number;
+};
+
+export function fetchAnimation(options: FetchOptions): Animation<FetchState> {
+  return {
+    kind: "fetch",
+    liveTickMs: 40,
+    prepare(layout: Layout, def) {
+      const { width, height } = layout;
+      const rand = mulberry32(def.seed);
+      const lit = new Uint8Array(width * height);
+      const cells = litCells(layout).map(({ x, y }) => ({ x, y }));
+      for (const c of cells) lit[c.y * width + c.x] = 1;
+      const requestMs = (width + options.tail.length) * options.requestColMs;
+      const packets = cells.map(({ x, y }) => {
+        const launch = Math.round(requestMs + x * options.launchColMs + rand() * options.jitterMs);
+        return { x, y, launch, land: launch + travel(width, x, options.packetColMs) };
+      });
+      const ms = Math.max(...packets.map((p) => p.land)) + options.flashMs;
+      return { width, height, lit, cells, packets, requestMs, seed: def.seed, options, ms };
+    },
+    loadingMs: (state) => state.ms,
+    loading,
+    live,
+    still: settled,
+  };
+}
+
+/** ms a packet takes from the right edge to column `x`. */
+const travel = (width: number, x: number, colMs: number) => (width - 1 - x) * colMs;
+
+/** Paint a moving pixel at column `head` on row `y` with its tail on the side
+ *  it came from (`dir` is +1 moving right, -1 moving left). Lit cells under the
+ *  tail keep their ink. */
+function paintMover(state: FetchState, frame: Frame, head: number, y: number, dir: 1 | -1): void {
+  const { width, lit, options } = state;
+  options.tail.forEach((alpha, i) => {
+    const x = head - dir * (i + 1);
+    if (x >= 0 && x < width && !lit[y * width + x]) setPixel(frame, x, y, { tone: "accent", alpha });
+  });
+  if (head >= 0 && head < width) setPixel(frame, head, y, { tone: "glint", alpha: 1 });
+}
+
+/** Paint packet `p` at `t`: moving, flashing on landing, or settled ink. */
+function paintPacket(state: FetchState, frame: Frame, p: Packet, t: number): void {
+  if (t < p.launch) return;
+  if (t < p.land) {
+    paintMover(state, frame, state.width - 1 - Math.floor((t - p.launch) / state.options.packetColMs), p.y, -1);
+  } else {
+    const flash = t < p.land + state.options.flashMs;
+    setPixel(frame, p.x, p.y, { tone: flash ? "glint" : "ink", alpha: 1 });
+  }
+}
+
+function loading(state: FetchState, t: number): Frame {
+  const frame = emptyFrame(state.width, state.height);
+  const { requestColMs } = state.options;
+  if (t < state.requestMs) paintMover(state, frame, Math.floor(t / requestColMs), state.height >> 1, 1);
+  // Landed cells first, so packets in flight draw over them.
+  const order = [...state.packets].sort((a, b) => Number(t < a.land) - Number(t < b.land));
+  for (const p of order) paintPacket(state, frame, p, t);
+  return frame;
+}
+
+function settled(state: FetchState): Frame {
+  const frame = emptyFrame(state.width, state.height);
+  for (let i = 0; i < state.lit.length; i += 1) if (state.lit[i]) frame.pixels[i] = { tone: "ink", alpha: 1 };
+  return frame;
+}
+
+/** LIVE fetch `i`, seeded per index so any moment can be sampled: the request
+ *  row, when it starts, and the packets of its response. */
+export function liveFetch(state: FetchState, i: number): { y: number; at: number; packets: Packet[] } {
+  const rand = mulberry32((state.seed ^ Math.imul(i + 1, 0x9e3779b1)) >>> 0);
+  const { width, height, cells, options } = state;
+  const at = i * options.everyMs + Math.floor(rand() * options.everyMs * 0.3);
+  const y = 1 + Math.floor(rand() * Math.max(1, height - 2));
+  const back = at + (width + options.tail.length) * options.requestColMs;
+  const rows = cells.filter((c) => Math.abs(c.y - y) <= 1);
+  const n = options.burst[0] + Math.floor(rand() * (options.burst[1] - options.burst[0] + 1));
+  const packets: Packet[] = [];
+  for (let k = 0; k < n && rows.length > 0; k += 1) {
+    const c = rows[Math.floor(rand() * rows.length)];
+    const launch = back + Math.floor(rand() * 6) * options.packetColMs * 2;
+    packets.push({ x: c.x, y: c.y, launch, land: launch + travel(width, c.x, options.packetColMs) });
+  }
+  return { y, at, packets };
+}
+
+function live(state: FetchState, tLive: number): Frame {
+  const frame = settled(state);
+  const { width, options } = state;
+  const span = (width + options.tail.length) * options.requestColMs + 12 * options.packetColMs + width * options.packetColMs + options.flashMs;
+  const first = Math.max(0, Math.floor((tLive - span) / options.everyMs) - 1);
+  const last = Math.floor(tLive / options.everyMs);
+  for (let i = first; i <= last; i += 1) {
+    const f = liveFetch(state, i);
+    const head = Math.floor((tLive - f.at) / options.requestColMs);
+    if (tLive >= f.at && head < width + options.tail.length) paintMover(state, frame, head, f.y, 1);
+    for (const p of f.packets) if (tLive < p.land + options.flashMs) paintPacket(state, frame, p, tLive);
+  }
+  return frame;
+}

package/src/animations/pages.ts

@@ -0,0 +1,197 @@
+import { emptyFrame, litCells, mulberry32, setPixel } from "../layout";
+import type { Animation, Frame, Layout, Pixel } from "../types";
+
+/**
+ * PAGES (digibook). The word is a flipbook.
+ * LOADING: `pages` pages turn right to left, one after another and overlapping
+ * like a riffle. Each turn is a fold line that leans (the bottom corner leads)
+ * with the lifted page, a flap of `accent` paper, curling over the old page
+ * just ahead of it. Behind the fold the next page shows. Page k of N carries
+ * the lit cells whose seeded rank is below k/N, in faint `accent`; the last
+ * page is the whole word in ink, so the riffle draws the word up and the last,
+ * slowest turn lays it down.
+ * LIVE: a reader. Every so often one page turns over the settled word (the
+ * fold in `glint`, a short shadow on the page it uncovers); one in four is a
+ * riffle of three quick pages, one in five turns back (left to right).
+ */
+
+export type PagesOptions = {
+  /** LOADING: number of pages riffled. The last one carries the full word. */
+  pages: number;
+  /** LOADING: ms each page takes to turn, first to last. Cycled if shorter than `pages`. */
+  turnMs: number[];
+  /** LOADING: fraction of a turn after which the next page starts (riffle overlap). */
+  overlap: number;
+  /** Widest the flap (lifted page) gets, in pixels, at mid-turn. */
+  curlMax: number;
+  /** How far the bottom of the fold leads the top, in pixels. */
+  lean: number;
+  /** LIVE: ms between page events. */
+  everyMs: number;
+  /** LIVE: ms for one page turn. */
+  liveTurnMs: number;
+  /** LIVE: ms between the pages of a riffle. */
+  riffleGapMs: number;
+};
+
+export type PageTurn = { at: number; ms: number; back: boolean };
+
+export type PagesState = {
+  width: number;
+  height: number;
+  /** Rank of each lit cell in [0, 1); -1 for an empty cell. */
+  rank: Float32Array;
+  /** LOADING turns, in order. Turn k uncovers page k + 1. */
+  turns: PageTurn[];
+  seed: number;
+  options: PagesOptions;
+  ms: number;
+};
+
+export function pagesAnimation(options: PagesOptions): Animation<PagesState> {
+  return {
+    kind: "pages",
+    liveTickMs: 40,
+    prepare(layout: Layout, def) {
+      const { width, height } = layout;
+      const rand = mulberry32(def.seed);
+      const rank = new Float32Array(width * height).fill(-1);
+      for (const cell of litCells(layout)) rank[cell.y * width + cell.x] = rand();
+      const turns: PageTurn[] = [];
+      let at = 0;
+      for (let k = 0; k < options.pages; k += 1) {
+        const ms = options.turnMs[k % options.turnMs.length];
+        turns.push({ at, ms, back: false });
+        at += Math.round(ms * options.overlap);
+      }
+      const ms = Math.max(...turns.map((turn) => turn.at + turn.ms));
+      return { width, height, rank, turns, seed: def.seed, options, ms };
+    },
+    loadingMs: (state) => state.ms,
+    loading,
+    live,
+    still: settled,
+  };
+}
+
+/** Ease in and out: the page lifts slowly, crosses fast, settles slowly. */
+const ease = (p: number) => (p < 0.5 ? 4 * p * p * p : 1 - (-2 * p + 2) ** 3 / 2);
+
+/** Fold geometry of a turn at progress `p` (0..1), in the turn's own direction
+ *  (x counted from the side the page starts on). `edge(y)` is the first column
+ *  of the uncovered page; the flap covers the `flap` columns before it. */
+function fold(state: PagesState, p: number) {
+  const { width, height } = state;
+  const { curlMax, lean } = state.options;
+  const u = ease(Math.min(1, Math.max(0, p)));
+  const from = width + lean;
+  const to = -curlMax - 1;
+  const base = from - u * (from - to);
+  const flap = u > 0 && u < 1 ? Math.max(1, Math.round(curlMax * Math.sin(Math.PI * u))) : 0;
+  const edge = (y: number) => Math.round(base - (lean * y) / Math.max(1, height - 1));
+  return { edge, flap };
+}
+
+type Side = "new" | "flap" | "fold" | "shadow" | "old";
+
+/** Where column `x` of row `y` sits relative to a turn at progress `p`. */
+function sideOf(state: PagesState, p: number, back: boolean, x: number, y: number): { side: Side; depth: number } {
+  if (p <= 0) return { side: "old", depth: 0 };
+  if (p >= 1) return { side: "new", depth: 0 };
+  const { edge, flap } = fold(state, p);
+  // A forward turn runs right to left; a back turn mirrors it.
+  const fx = back ? state.width - 1 - x : x;
+  const e = edge(y);
+  if (fx >= e) return { side: fx - e < 2 ? "shadow" : "new", depth: fx - e };
+  const d = e - 1 - fx;
+  if (d === 0 && flap > 0) return { side: "fold", depth: 0 };
+  if (d < flap) return { side: "flap", depth: d };
+  return { side: "old", depth: 0 };
+}
+
+/** Paper of the flap: brightest at the fold, falling off toward its free edge. */
+function paper(side: Side, depth: number, flap: number): Pixel {
+  if (side === "fold") return { tone: "glint", alpha: 1 };
+  return { tone: "accent", alpha: 0.85 - (0.45 * depth) / Math.max(1, flap) };
+}
+
+/** Cell (x, y) of LOADING page `k` (0 is blank, `pages` is the full word). */
+function pageCell(state: PagesState, k: number, x: number, y: number): Pixel | null {
+  const r = state.rank[y * state.width + x];
+  if (r < 0 || k <= 0) return null;
+  const n = state.options.pages;
+  if (k >= n) return { tone: "ink", alpha: 1 };
+  if (r >= k / n) return null;
+  return { tone: "accent", alpha: 0.3 + (0.35 * k) / n };
+}
+
+const dim = (pixel: Pixel | null): Pixel | null => (pixel ? { ...pixel, alpha: pixel.alpha * 0.45 } : null);
+
+function loading(state: PagesState, t: number): Frame {
+  const frame = emptyFrame(state.width, state.height);
+  for (let y = 0; y < state.height; y += 1) {
+    for (let x = 0; x < state.width; x += 1) {
+      // The page showing here is the count of turns whose fold has passed it.
+      // A flap of an active turn covers whatever is under it.
+      let page = 0;
+      let top: Pixel | null = null;
+      let shadow = false;
+      for (const turn of state.turns) {
+        const p = (t - turn.at) / turn.ms;
+        const { side, depth } = sideOf(state, p, turn.back, x, y);
+        if (side === "new" || side === "shadow") page += 1;
+        if (side === "shadow") shadow = true;
+        if (side === "flap" || side === "fold") top = paper(side, depth, fold(state, p).flap);
+      }
+      const cell = pageCell(state, page, x, y);
+      setPixel(frame, x, y, top ?? (shadow ? dim(cell) : cell));
+    }
+  }
+  return frame;
+}
+
+function settled(state: PagesState): Frame {
+  const frame = emptyFrame(state.width, state.height);
+  for (let i = 0; i < state.rank.length; i += 1) {
+    if (state.rank[i] >= 0) frame.pixels[i] = { tone: "ink", alpha: 1 };
+  }
+  return frame;
+}
+
+/** Page event `i` of the LIVE schedule: one turn, or a riffle of three. Seeded
+ *  per index, so any moment can be sampled. */
+export function liveEvent(state: PagesState, i: number): PageTurn[] {
+  const rand = mulberry32((state.seed ^ Math.imul(i + 1, 0x9e3779b1)) >>> 0);
+  const { everyMs, liveTurnMs, riffleGapMs } = state.options;
+  const at = i * everyMs + Math.floor(rand() * everyMs * 0.4);
+  const back = rand() < 1 / 5;
+  const count = rand() < 1 / 4 ? 3 : 1;
+  return Array.from({ length: count }, (_, k) => ({
+    at: at + k * riffleGapMs,
+    ms: count > 1 ? Math.round(liveTurnMs * 0.7) : liveTurnMs,
+    back,
+  }));
+}
+
+function live(state: PagesState, tLive: number): Frame {
+  const frame = settled(state);
+  const { everyMs, liveTurnMs, riffleGapMs } = state.options;
+  const span = liveTurnMs + 2 * riffleGapMs;
+  const first = Math.max(0, Math.floor((tLive - span) / everyMs) - 1);
+  const last = Math.floor(tLive / everyMs);
+  for (let i = first; i <= last; i += 1) {
+    for (const turn of liveEvent(state, i)) {
+      const p = (tLive - turn.at) / turn.ms;
+      if (p <= 0 || p >= 1) continue;
+      const { flap } = fold(state, p);
+      for (let y = 0; y < state.height; y += 1) {
+        for (let x = 0; x < state.width; x += 1) {
+          const { side, depth } = sideOf(state, p, turn.back, x, y);
+          if (side === "flap" || side === "fold") setPixel(frame, x, y, paper(side, depth, flap));
+          else if (side === "shadow") setPixel(frame, x, y, dim(frame.pixels[y * state.width + x]));
+        }
+      }
+    }
+  }
+  return frame;
+}

package/src/animations/rise.ts

@@ -0,0 +1,157 @@
+import { emptyFrame, litCells, mulberry32, setPixel } from "../layout";
+import type { Animation, Frame, Layout } from "../types";
+
+/**
+ * RISE (digiquant). LOADING: cells grow up from the baseline, column by column
+ * left to right, like bars building the word, in the up and down tones, then
+ * settle to ink; strays blink once. LIVE: a few cells glint and about a third
+ * of the strays keep blinking, each in its own up or down tone, so both colours
+ * stay alive after the build (never a single-colour accent).
+ * Port of apps/digiquant-web/app/_chrome/QuantWordmark.tsx (#4986 + #5416) and
+ * its dq-rise / dq-stray / dq-glint / dq-blink keyframes: same seed, same draw order.
+ */
+
+export type RiseOptions = {
+  /** Wordmark column timing, shared with the digiquant hero chart sweep. */
+  startMs: number;
+  columnMs: number;
+  glintChance: number;
+  strays: number;
+  glintDuty: number;
+  /** Share of the rise spent in the up/down tone before it turns to ink. */
+  toneUntil: number;
+  /** Share of strays that keep blinking after the build. */
+  blinkChance: number;
+  blinkDuty: number;
+  blinkAlpha: number;
+  /** Earliest blink: every cell has finished rising (hero-build BUILD_DONE_MS). */
+  buildDoneMs: number;
+};
+
+type RiseCell = {
+  x: number;
+  y: number;
+  delay: number;
+  dur: number;
+  tone: "up" | "down";
+  glint: { period: number; offset: number } | null;
+};
+
+type Stray = {
+  x: number;
+  y: number;
+  delay: number;
+  dur: number;
+  tone: "up" | "down";
+  blink: { period: number; offset: number } | null;
+};
+
+export type RiseState = { width: number; height: number; cells: RiseCell[]; strays: Stray[]; options: RiseOptions; ms: number };
+
+/** cubic-bezier(0.2, 0.7, 0.2, 1), solved for y at time x. */
+export function riseEase(x: number): number {
+  if (x <= 0) return 0;
+  if (x >= 1) return 1;
+  const p1x = 0.2, p1y = 0.7, p2x = 0.2, p2y = 1;
+  const bx = (s: number) => 3 * (1 - s) * (1 - s) * s * p1x + 3 * (1 - s) * s * s * p2x + s * s * s;
+  const by = (s: number) => 3 * (1 - s) * (1 - s) * s * p1y + 3 * (1 - s) * s * s * p2y + s * s * s;
+  let lo = 0, hi = 1;
+  for (let i = 0; i < 24; i += 1) {
+    const mid = (lo + hi) / 2;
+    if (bx(mid) < x) lo = mid;
+    else hi = mid;
+  }
+  return by((lo + hi) / 2);
+}
+
+/** Each set (rise, glint, blink) must show both sides of the pair, not a run of one tone. */
+function mixDirections(cells: { tone: "up" | "down" }[]): void {
+  if (cells.length < 2) return;
+  if (!cells.some((c) => c.tone === "up")) cells[0]!.tone = "up";
+  if (!cells.some((c) => c.tone === "down")) cells[1]!.tone = "down";
+}
+
+export function riseAnimation(options: RiseOptions): Animation<RiseState> {
+  const columnDelay = (col: number) => options.startMs + col * options.columnMs;
+  return {
+    kind: "rise",
+    liveTickMs: 100,
+    prepare(layout: Layout, def) {
+      const rand = mulberry32(def.seed);
+      const used = new Set<string>();
+      const cells: RiseCell[] = [];
+      for (const cell of litCells(layout)) {
+        used.add(`${cell.x},${cell.y}`);
+        const glint = rand() < options.glintChance;
+        const delay = columnDelay(cell.x) + (layout.height - 1 - cell.y) * 9 + Math.floor(rand() * 140);
+        const dur = 260 + Math.floor(rand() * 220);
+        const g = glint ? { period: 7000 + Math.floor(rand() * 8000), offset: 3500 + Math.floor(rand() * 6000) } : null;
+        cells.push({ x: cell.x, y: cell.y, delay, dur, tone: rand() < 0.5 ? "up" : "down", glint: g });
+      }
+      mixDirections(cells);
+      mixDirections(cells.filter((c) => c.glint));
+      const strays: Stray[] = [];
+      while (strays.length < options.strays) {
+        const x = Math.floor(rand() * layout.width);
+        const y = Math.floor(rand() * layout.height);
+        const key = `${x},${y}`;
+        if (used.has(key)) continue;
+        used.add(key);
+        const dur = 60 + Math.floor(rand() * 140);
+        const delay = Math.floor(rand() * 1400);
+        const blinks = rand() < options.blinkChance;
+        const period = 4000 + Math.floor(rand() * 6000);
+        const offset = options.buildDoneMs + 400 + Math.floor(rand() * 5000);
+        strays.push({ x, y, delay, dur, tone: rand() < 0.5 ? "up" : "down", blink: blinks ? { period, offset } : null });
+      }
+      mixDirections(strays);
+      mixDirections(strays.filter((s) => s.blink));
+      const ms = Math.max(0, ...cells.map((c) => c.delay + c.dur), ...strays.map((s) => s.delay + s.dur));
+      return { width: layout.width, height: layout.height, cells, strays, options, ms };
+    },
+    loadingMs: (state) => state.ms,
+    loading(state, t) {
+      const frame = emptyFrame(state.width, state.height);
+      for (const cell of state.cells) {
+        const p = (t - cell.delay) / cell.dur;
+        if (p <= 0) continue;
+        // A terminal cell cannot scale on Y, so the rise reads as opacity.
+        const alpha = riseEase(p);
+        setPixel(frame, cell.x, cell.y, { tone: p < state.options.toneUntil ? cell.tone : "ink", alpha });
+      }
+      for (const stray of state.strays) {
+        if (t >= stray.delay && t < stray.delay + stray.dur) {
+          setPixel(frame, stray.x, stray.y, { tone: stray.tone, alpha: 0.25 });
+        }
+      }
+      paintAfterglow(frame, state, t);
+      return frame;
+    },
+    live(state, _tLive, tMount) {
+      const frame = settled(state);
+      paintAfterglow(frame, state, tMount);
+      return frame;
+    },
+    still: settled,
+  };
+}
+
+function settled(state: RiseState): Frame {
+  const frame = emptyFrame(state.width, state.height);
+  for (const cell of state.cells) setPixel(frame, cell.x, cell.y, { tone: "ink", alpha: 1 });
+  return frame;
+}
+
+const on = (t: number, cycle: { period: number; offset: number }, duty: number) =>
+  t >= cycle.offset && (t - cycle.offset) % cycle.period < cycle.period * duty;
+
+/** Glints (letters) and blinks (strays), each in its own up or down tone. */
+function paintAfterglow(frame: Frame, state: RiseState, t: number): void {
+  const { glintDuty, blinkDuty, blinkAlpha } = state.options;
+  for (const cell of state.cells) {
+    if (cell.glint && on(t, cell.glint, glintDuty)) setPixel(frame, cell.x, cell.y, { tone: cell.tone, alpha: 1 });
+  }
+  for (const stray of state.strays) {
+    if (stray.blink && on(t, stray.blink, blinkDuty)) setPixel(frame, stray.x, stray.y, { tone: stray.tone, alpha: blinkAlpha });
+  }
+}