Arcade Pixel

Renders a pixelated text effect using a 5x7 grid. Displays characters as numeric grids with lit or blank cells. Use for retro or arcade-style text in UIs.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/arcade-pixel

npx layro-cli add @educlopez/arcade-pixel

npx layro-cli add @educlopez/arcade-pixel

bunx layro-cli add @educlopez/arcade-pixel

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { useEffect, useMemo, useRef } from "react";

/**
 * 5x7 pixel font glyphs expressed as readable row strings ("#" = lit pixel,
 * "." = blank pixel). Converted to numeric grids in PIXEL_FONT_5X7 below.
 */
const FONT_GLYPH_ROWS: Record<string, string[]> = {
  " ": [".....", ".....", ".....", ".....", ".....", ".....", "....."],
  "-": [".....", ".....", ".....", "#####", ".....", ".....", "....."],
  ",": [".....", ".....", ".....", ".....", "..#..", "..#..", ".#..."],