--- /** * TextFlippingBoard — a 6x22 split-flap (Solari) board. The full character * grid is computed here in the frontmatter from `text` (auto word-wrapped * and centered) or `rows` (explicit per-row placement); a `nular-*` custom * element then flips each non-blank cell into place once it connects to * the DOM, scrambling through random glyphs via the Web Animations API * with column/row-staggered delays. `{R}` `{O}` `{Y}` `{G}` `{B}` `{V}` * `{W}` tokens in the text render a solid color tile instead of a * character cell. */ interface Props { /** Explicit board rows (up to 6, each up to 22 characters). Takes precedence over `text`. */ rows?: string[]; /** Free-form text, auto word-wrapped to the board width and centered. */ text?: string; /** Total reveal duration in seconds; scales stagger and flip timing. Defaults to ~1.17s. */ duration?: number; /** Additional classes for the root element. */ class?: string; } const { rows, text, duration, class: className } = Astro.props; const FLAP_CHARS = ` ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$()-+&=;:'"%,./?°`; const BOARD_ROWS = 6; const BOARD_COLS = 22; const BASE_COL_DELAY_MS = 30; const BASE_ROW_DELAY_MS = 20; const BASE_STEP_MS = 55; const BASE_FLIP_MS = 350; const BASE_TOTAL_S = ((BOARD_COLS - 1) * BASE_COL_DELAY_MS + (BOARD_ROWS - 1) * BASE_ROW_DELAY_MS + 8 * BASE_STEP_MS) / 1000; const COLOR_MAP: Record = { '{R}': '#d32f2f', '{O}': '#f57c00', '{Y}': '#fbc02d', '{G}': '#43a047', '{B}': '#1e88e5', '{V}': '#8e24aa', '{W}': '#fafafa', }; type ParsedCell = { type: 'char'; value: string } | { type: 'color'; hex: string }; function parseRow(row: string): ParsedCell[] { const cells: ParsedCell[] = []; let i = 0; while (i < row.length) { if (row[i] === '{' && i + 2 < row.length && row[i + 2] === '}') { const code = row.substring(i, i + 3); const hex = COLOR_MAP[code]; if (hex) { cells.push({ type: 'color', hex }); i += 3; continue; } } cells.push({ type: 'char', value: row[i]! }); i++; } return cells; } function wrapParagraph(paragraph: string, maxCols: number): string[] { const lines: string[] = []; const words = paragraph.split(/[ \t]+/).filter(Boolean); let currentLine = ''; for (const word of words) { if (word.length > maxCols) { if (currentLine) { lines.push(currentLine); currentLine = ''; } lines.push(word.slice(0, maxCols)); continue; } if (!currentLine) { currentLine = word; } else if (currentLine.length + 1 + word.length <= maxCols) { currentLine += ` ${word}`; } else { lines.push(currentLine); currentLine = word; } } if (currentLine) lines.push(currentLine); return lines; } function wrapText(input: string, maxCols: number): string[] { return input .split('\n') .flatMap((paragraph) => (paragraph.trim() === '' ? [''] : wrapParagraph(paragraph, maxCols))); } function normalizeChar(ch: string): string { const upper = ch.toUpperCase(); return FLAP_CHARS.includes(upper) ? upper : ' '; } // ── Build the grid server-side: word wrap, centering and color-tile // parsing are all static given the props, so none of it needs to ship as // client JS. ────────────────────────────────────────────────────────── const grid: ParsedCell[][] = Array.from({ length: BOARD_ROWS }, () => Array.from({ length: BOARD_COLS }, () => ({ type: 'char' as const, value: ' ' })), ); if (text) { const lines = wrapText(text, BOARD_COLS).slice(0, BOARD_ROWS); const startRow = Math.max(0, Math.floor((BOARD_ROWS - lines.length) / 2)); lines.forEach((line, i) => { const row = startRow + i; if (row >= BOARD_ROWS) return; const parsed = parseRow(line); const startCol = Math.max(0, Math.floor((BOARD_COLS - parsed.length) / 2)); parsed.forEach((cell, c) => { if (startCol + c < BOARD_COLS) grid[row]![startCol + c] = cell; }); }); } else if (rows) { rows.forEach((row, r) => { if (r >= BOARD_ROWS) return; const parsed = parseRow(row); parsed.forEach((cell, c) => { if (c < BOARD_COLS) grid[r]![c] = cell; }); }); } const scale = (duration ?? BASE_TOTAL_S) / BASE_TOTAL_S; const colDelayMs = BASE_COL_DELAY_MS * scale; const rowDelayMs = BASE_ROW_DELAY_MS * scale; const stepMs = Math.max(1, BASE_STEP_MS * scale); const flipMs = Math.min(600, Math.max(150, BASE_FLIP_MS * scale)); // Plain-text alternative for assistive tech: the visual grid is marked // aria-hidden and this label carries the message instead. const srText = (text ?? (rows ?? []).join('\n')).replace(/\{[ROYGBVW]\}/g, '').trim(); ---

{ grid.flatMap((row, r) => row.map((cell, c) => { if (cell.type === 'color') { return

; } const delay = Math.round(c * colDelayMs + r * rowDelayMs); return (

); }), ) }

Installation

Install dependencies

Add these files

Configuration

Use it