Installation
pnpm dlx shadcn@latest add https://asciicn.dev/r/ascii-logo.jsonUsage
import { AsciiLogo } from "@/components/asciicn/ascii-logo";
export function Brand() {
return (
<AsciiLogo
src="/brand/wordmark.svg"
alt="Acme"
effect="shimmer"
className="h-16"
/>
);
}The logo's coverage decides where glyphs go: a transparent pixel stays empty and a solid one draws the densest glyph. Braille is the default because its 2ร4 dots per cell keep letterforms readable down to small sizes. charset="edge" outlines the shapes with - / | \ strokes.
Give the logo a height (or a width) and it keeps the file's own aspect ratio once it loads. Pass ratio to reserve the space before then. Without cell, the cell is about a tenth of the logo's height.
For a dark logo on an opaque white background, such as a JPEG, set source="dark". tone="original" keeps the file's own colours.
Examples
A row of logos
Eight logos scanning in turn: phase offsets each one's sweep.
Edge strokes and blocks
Sobel strokes for an outline, and ANSI blocks through the ember ramp that assemble once on load.
Props
Every ASCII image look prop also applies. charset defaults to "braille" and background to "transparent".
| Prop | Type | Default |
|---|---|---|
| src SVG or PNG URL. Files on another origin need CORS headers. | Type: string | Default โ |
| alt The brand name, read by screen readers. "" hides it. | Type: string | Default โ |
| color Glyph colour in mono. | Type: AsciiColor | Default "ink" |
| tone One ink, or the file's own colours. | Type: "mono" | "original" | Default "mono" |
| source alpha: the logo is the opaque part of the file. dark: the logo is the dark part of an opaque image. | Type: "alpha" | "dark" | Default "alpha" |
| charset Which glyphs draw the logo. | Type: CharsetName | Default "braille" |
| effect shimmer sweeps a band of solid glyphs across. scan runs a line down and leaves solid glyphs behind. reveal assembles the logo once, left to right. | Type: "none" | "shimmer" | "scan" | "reveal" | Default "none" |
| period Seconds per shimmer or scan. | Type: number | Default 6 |
| phase Where in the sweep this logo starts, 0 to 1. Offsets logos in a row. | Type: number | Default 0 |
| cell Glyph cell height in CSS pixels. | Type: number | Default a tenth of the height, 4 to 12 |
| ratio Width over height, to reserve space before the file loads. | Type: number | Default the file's ratio |
| lazy Load only when the logo nears the viewport. Turn it off inside a clipped, moving row. | Type: boolean | Default true |
| handle Filled with a handle for export. | Type: RefObject<AsciiHandle | null> | Default โ |
Notes
- The wrapper is announced as an image named by
alt. Inside a link that already names the brand, passalt="". - Effects stop under reduced motion, and the logo draws once. They also pause offscreen and in hidden tabs.
- A logo with no effect draws once per size or prop change and runs no frame loop.