quanhoangindex/ascii-reveal

选用指南

AI 根据 README 整理 · 2026/10/26 21:41:34

使用方式

通过npm安装，以React组件形式使用，支持无React环境通过core模块调用。

查看 README 依据

- **Skeleton-fast.** `<AsciiSkeleton>` is plain HTML and CSS: it paints on the first frame, renders on the server and needs no JavaScript. Data becomes readable about 400 ms after it arrives. - **Light.** One canvas per reveal, repainted at ~30 fps, one animation loop shared by every instance. Slow devices get a short fade instead. About 15 KB gzipped with all mascots and the skeleton, no dependencies. ## Install From npm: ```bash npm i ascii-reveal ``` Straight from GitHub (no npm publish needed): ```bash npm i github:quanhoangindex/ascii-reveal ```

| `terminal` | Faint 0s and 1s, lit up in `--ascii-accent` as the band passes. | ```tsx <AsciiSkeleton variant="braille" lines={3} /> <AsciiSkeleton variant="dither" rows={6} width={64} height={64} circle /> <AsciiSkeleton animate={false} lines={2} /> {/* still pattern: cheapest, for long lists */} ``` Without React: `el.innerHTML = asciiSkeletonHTML({ lines: 3 })`, then `animateSkeletons(el)`, both from `ascii-reveal/core`. #### How much does it cost?

部署要求

需要React 17或更高版本作为peer dependency。

查看 README 依据

React 17 or newer is a peer dependency. The built files in `dist/` are committed, so the GitHub install works without a build step. ## Quick start ```tsx import { AsciiReveal } from 'ascii-reveal'; export function Page() { return ( <AsciiReveal preset="decode"> <article className="card" data-ascii="surface"> <img src="/cover.jpg" alt="" /> <h2>Hello world</h2> <button data-ascii="fade">Read more</button> </article> </AsciiReveal> ); } ``` The content reveals when the component mounts. ### Loading states ```tsx

已知限制

跨域图片若无CORS头无法采样，将以中性字形纹理显示；若字体加载较晚，需在document.fonts.ready后启动揭示。

查看 README 依据

- **Measuring is batched** and limited to the viewport plus a margin. Sections further down are hidden without measuring and decode when scrolled to. - **Image grids are precomputed** once per cell size. - **Watchdog**: if 8 frames blow past 45 ms, the reveal finishes immediately and the next reveals fade instead. ## Notes - Cross-origin images without CORS headers can't be sampled; they reveal through a neutral glyph texture instead. - Works with Next.js App Router: the React entry is marked `"use client"`.

- The reveal measures layout once when it starts. If the wrapper resizes mid-reveal, the reveal finishes instantly instead of drawing in the wrong place. If your fonts load late, start the reveal after `document.fonts.ready`. - Icons drawn with `currentColor` stay visible while text is hidden. Emoji and combined characters are split correctly, and glyphs are clipped to scrolling containers. - An `asciireveal` event (`detail: { active }`) bubbles from the wrapper when animation starts and stops, if you want to pause your own effects meanwhile. ## Develop ```bash npm install