Grok Header

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/**
7 * GrokHeader — Grok CLI's launch card.
8 *
9 * The logo is Grok's braille mark, decoded to a 1-bit sprite and drawn as a
10 * crisp SVG so there are no font seams. Grok's resting animation is a grayscale
11 * shimmer sweeping across the mark — reproduced here with a masked gradient
12 * that translates on a loop (and holds still under prefers-reduced-motion).
13 */
14const LOGO_BITS = [
15  "00000000000000000000000001",
16  "00000000000111110000000010",
17  "00000000111111111110000100",
18  "00000001111111111110001000",
19  "00000011111000000000011000",
20  "00000111100000000000110000",
21  "00001111000000000001111000",
22  "00001110000000000011111000",
23  "00011100000000000110111000",
24  "00011100000000001100011100",
25  "00011100000000010000011100",
26  "00011100000000100000011100",
27  "00011100000001000000011100",
28  "00011100000000000000011100",
29  "00011100000000000000011000",
30  "00001110000000000000111000",
31  "00001110000000000001111000",
32  "00001110000000000011110000",
33  "00001100000000000111100000",
34  "00011000011111111111000000",
35  "00010000111111111110000000",
36  "00100000001111111000000000",
37  "01000000000000000000000000",
38  "10000000000000000000000000",
39];
40 
41const AMBER = "#e0af68";
42 
43function usePrefersReducedMotion() {
44  const [reduced, setReduced] = React.useState(false);
45  React.useEffect(() => {
46    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
47    setReduced(mq.matches);
48    const on = () => setReduced(mq.matches);
49    mq.addEventListener("change", on);
50    return () => mq.removeEventListener("change", on);
51  }, []);
52  return reduced;
53}
54 
55export function GrokLogo({
56  scale = 4,
57  className,
58}: {
59  scale?: number;
60  className?: string;
61}) {
62  const uid = React.useId().replace(/[^a-z0-9]/gi, "");
63  const reduced = usePrefersReducedMotion();
64  const cols = LOGO_BITS[0].length;
65  const rows = LOGO_BITS.length;
66 
67  // Grok renders each braille dot as a separate spaced dot, not filled strokes.
68  const CELL = 10;
69  const DOT = 5.2; // ~half the pitch, matching the real dot/gap ratio
70  const off = (CELL - DOT) / 2;
71  const W = cols * CELL;
72  const H = rows * CELL;
73  const dots: React.ReactElement[] = [];
74  LOGO_BITS.forEach((row, y) => {
75    for (let x = 0; x < cols; x += 1) {
76      if (row[x] === "1") {
77        dots.push(
78          <rect
79            key={`${x}-${y}`}
80            x={x * CELL + off}
81            y={y * CELL + off}
82            width={DOT}
83            height={DOT}
84// … truncated