"use client"; import React, { useEffect, useRef, useState, useMemo } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; const FLAP_CHARS = " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$()-+&=;:'\"%,./?°"; const BOARD_ROWS = 6; const BOARD_COLS = 22; const BASE_COL_DELAY = 30; const BASE_ROW_DELAY = 20; const BASE_STEP_MS = 55; const BASE_FLIP_S = 0.35; const BASE_TOTAL_S = ((BOARD_COLS - 1) * BASE_COL_DELAY + (BOARD_ROWS - 1) * BASE_ROW_DELAY + 8 * BASE_STEP_MS) / 1000; type AccentColor = { top: string; bottom: string; text: string; }; const ACCENT_COLORS: AccentColor[] = [ { top: "bg-red-600", bottom: "bg-red-700", text: "text-white" }, { top: "bg-orange-500", bottom: "bg-orange-600", text: "text-white" }, { top: "bg-yellow-400", bottom: "bg-yellow-500", text: "text-neutral-900" }, { top: "bg-green-600", bottom: "bg-green-700", text: "text-white" }, { top: "bg-blue-600", bottom: "bg-blue-700", text: "text-white" }, { top: "bg-violet-600", bottom: "bg-violet-700", text: "text-white" }, { top: "bg-white", bottom: "bg-neutral-100", text: "text-neutral-900" }, ]; const CELL_TEXT_STYLE: React.CSSProperties = { fontSize: "clamp(6px, 2vw, 22px)", lineHeight: 1, }; // ── Individual Split-Flap Character ─────────────────────────────────── const FlapCell = React.memo(function FlapCell({ target, delay, stepMs, flipDuration, }: { target: string; delay: number; stepMs: number; flipDuration: number; }) { const [current, setCurrent] = useState(" "); const [prev, setPrev] = useState(" "); const [flipId, setFlipId] = useState(0); const [accent, setAccent] = useState(null); const [prevAccent, setPrevAccent] = useState(null); const curRef = useRef(" "); const tgtRef = useRef(null); const accentRef = useRef(null); const startTimer = useRef | null>(null); const stepTimer = useRef | null>(null); useEffect(() => { if (startTimer.current) clearTimeout(startTimer.current); if (stepTimer.current) clearTimeout(stepTimer.current); startTimer.current = null; stepTimer.current = null; const normalized = FLAP_CHARS.includes(target.toUpperCase()) ? target.toUpperCase() : " "; if (normalized === tgtRef.current) return; tgtRef.current = normalized; if (normalized === " " && curRef.current === " ") return; const scrambleCount = normalized === " " ? 8 + Math.floor(Math.random() * 8) : 25 + Math.floor(Math.random() * 15); const runStep = (i: number) => { const isLast = i === scrambleCount; const ch = isLast ? normalized : FLAP_CHARS[1 + Math.floor(Math.random() * (FLAP_CHARS.length - 1))]; const newAccent = isLast ? null : Math.random() < 0.2 ? ACCENT_COLORS[Math.floor(Math.random() * ACCENT_COLORS.length)] : null; setPrev(curRef.current); setPrevAccent(accentRef.current); curRef.current = ch; accentRef.current = newAccent; setCurrent(ch); setAccent(newAccent); setFlipId((n) => n + 1); if (!isLast) { stepTimer.current = setTimeout(() => runStep(i + 1), stepMs); } }; startTimer.current = setTimeout(() => runStep(1), delay); return () => { if (startTimer.current) clearTimeout(startTimer.current); if (stepTimer.current) clearTimeout(stepTimer.current); startTimer.current = null; stepTimer.current = null; tgtRef.current = null; }; }, [target, delay, stepMs]); const show = current === " " ? "\u00A0" : current; const showPrev = prev === " " ? "\u00A0" : prev; const textCx = "absolute inset-x-0 flex select-none items-center justify-center font-mono font-bold tracking-wide"; const topBg = accent?.top ?? "bg-neutral-200/80 dark:bg-neutral-900"; const bottomBg = accent?.bottom ?? "bg-neutral-200/80 dark:bg-neutral-900"; const textColor = accent?.text ?? "text-neutral-800 dark:text-white"; const flapTopBg = prevAccent?.top ?? "bg-neutral-100 dark:bg-neutral-800"; const flapTextColor = prevAccent?.text ?? "text-neutral-800 dark:text-white"; const bottomDelay = flipDuration * 0.5; return (

{/* Flap content area */}

{/* Static top – new character top half */}

{show}

{/* Static bottom – new character bottom half */}

{show}

{flipId > 0 && ( )}

{/* Flipping top flap – old character top half, drops down */} {flipId > 0 && (

{showPrev}

)} {/* Flipping bottom flap – new character bottom half, rises up */} {flipId > 0 && (

{show}

)} {/* Split line */}

{/* Bottom stripes – decorative, outside the flap area */}

); }, (prevProps, nextProps) => prevProps.target === nextProps.target && prevProps.delay === nextProps.delay && prevProps.stepMs === nextProps.stepMs && prevProps.flipDuration === nextProps.flipDuration, ); // ── Color Tile ──────────────────────────────────────────────────────── const COLOR_MAP: Record = { "{R}": "#D32F2F", "{O}": "#F57C00", "{Y}": "#FBC02D", "{G}": "#43A047", "{B}": "#1E88E5", "{V}": "#8E24AA", "{W}": "#FAFAFA", }; const ColorCell = React.memo(function ColorCell({ color }: { color: string }) { return (

); }); // ── Row Parser ──────────────────────────────────────────────────────── 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); if (COLOR_MAP[code]) { cells.push({ type: "color", hex: COLOR_MAP[code] }); i += 3; continue; } } cells.push({ type: "char", value: row[i] }); i++; } return cells; } // ── Word Wrap ───────────────────────────────────────────────────────── 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), ); } // ── Main TextFlippingBoard Component ────────────────────────────────── export interface TextFlippingBoardProps { rows?: string[]; text?: string; className?: string; /** Total animation duration in seconds. Defaults to ~1.2s. */ duration?: number; } export function TextFlippingBoard({ rows, text, className, duration = BASE_TOTAL_S, }: TextFlippingBoardProps) { const scale = duration / BASE_TOTAL_S; const colDelay = BASE_COL_DELAY * scale; const rowDelay = BASE_ROW_DELAY * scale; const stepMs = BASE_STEP_MS * scale; const flipDur = Math.min(0.6, Math.max(0.15, BASE_FLIP_S * scale)); const board = useMemo(() => { 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; } }); }); } return grid; }, [rows, text]); return (

{board.map((row, r) => row.map((cell, c) => cell.type === "color" ? ( ) : ( ), ), )}

); }

Text Flipping Board

Instalação

Dependências