quanhoangindex/ascii-reveal

ascii-reveal is a React component for making loading states and mount transitions look like an ASCII decode, rather than a gray skeleton. If you want that effect, it is a small, focused package; if you mainly need fast perceived performance, judge the trade-off below first.

The problem

A team has data-driven cards, profile panels or headings that pop in when a fetch resolves. The usual approach is a gray skeleton that is replaced abruptly, or a three-line CSS transition on opacity. With ascii-reveal, the subtree stays in its real position and the effect is drawn on a layer above it, so text, images, canvas and video decode into place in one wave.

What's different

The mechanism is the interesting part. Content is never removed from the DOM and moved; the scramble is painted above the real layout, which is why the README can claim no layout shift. Wrapping a subtree captures every text node and media element inside it, and data-ascii attributes let you mark surfaces, fade elements, media or skipped regions. A loading prop turns the same component into a real loading state: content scrambles out, a shimmer runs where data will land, and new data decodes in. Presets (decode, dither, terminal, blueprint), duration and wave origin are configurable, and a ref exposes replay and hide calls.

The trade-off is that this is an aesthetic layer, not a performance technique. The README's own benchmark, on a pre-rendered page without a GPU, shows AsciiSkeleton costing more style/layout time and more browser CPU while waiting than a gray box (21% vs 15%) and shipping 3.2 KB gzipped HTML versus 0.5 KB; with animate={false} CPU drops to 0%. The numbers come from the author's measurement, so treat them as a directional comparison rather than an independent benchmark. Every animation also needs an accessible path, and the project addresses that: screen readers keep reading the real text, and prefers-reduced-motion replaces the reveal with a short fade.

Who should try it

This fits a developer building a React interface where the loading moment is part of the product identity: a portfolio, a launch page, a dashboard whose cards should feel like they are resolving from noise. It is a poor fit if your priority is the smallest possible HTML and lowest idle CPU on low-end devices, or if you already have a design system skeleton that must stay visually consistent. Teams rendering server-side should note that server-rendered content is deliberately not hidden on hydration; revealOnHydrate must be set explicitly if you want the effect there.

Requirements and limitations

React 17 or newer is the peer dependency. The package can be installed from npm or directly from GitHub, and the README states that built files in dist/ are committed, so the GitHub install needs no build step. The effect wraps content you already render, so it does not fetch or manage data for you; loading is just a prop you keep in sync with your query state. The main ongoing cost is tuning: selectors, data-ascii markers and preset choices need to be applied across your components, and skipped subtrees such as toolbars must be marked so they remain usable. The README excerpts do not cover every prop or browser, so check the project instructions against your target stack before adopting it widely.

HotRepo's take

HotRepo first recorded this repository on 2026-10-24, three days after creation, and on 2026-10-25 it appeared at #14 on the NEW-REPOSITORY board for TypeScript with 231 total stars. That is a new-project board placement, not a daily Trending rank, and there is insufficient daily-board history to say whether interest is rising or fading. The project is young and the snapshot is thin; treat it as an interesting effect worth evaluating, not a settled choice. Before committing, verify the live demo and the component's behavior under prefers-reduced-motion and server rendering.