ASCII Logo
An ASCII wordmark that dodges the cursor and scatters, falls, and regroups on click.
Preview
Installation
pnpm dlx shadcn@latest add @23rd/ascii-logoOr from the public GitHub registry:
pnpm dlx shadcn@latest add radiumcoders/23rd.dev/ascii-logoUsage
Give the parent a size; the canvas fills it.
"use client"
import { AsciiLogo } from "@/components/ui/ascii-logo"
export function FooterMark() {
return (
<div className="relative h-64 w-full overflow-hidden bg-background">
<AsciiLogo text="23rd" />
</div>
)
}text takes up to 5 letters. Pass src to sample an image instead (any raster, or a same-origin SVG).
<AsciiLogo src="/logo-mark.png" />Clicks cycle logo → scattered → fallen → returning → logo.
Props
| Prop | Type | Default |
|---|---|---|
text | string | "23rd" (max 5 letters) |
src | string | none |
fit | number | 0.82 |
cellSize | number | 11 |
cellGap | number | 2 |
charset | string | letters, numbers, a few symbols |
threshold | number | 0.2 |
invert | boolean | true when src is set |
color | string | theme ink |
backgroundColor | string | theme paper |
hoverRadius | number | 7 |
hoverPush | number | 2.6 |
hoverEase | number | 0.18 |
scatterRange | number | 16 |
scatterEase | number | 0.055 |
gravity | number | 0.14 |
bounce | number | 0.28 |
resetEase | number | 0.08 |
staggerFrames | number | 18 |
interactive | boolean | true |
theme | "light" | "dark" | "auto" | auto |
label | string | text or "ASCII logo" |
onPhaseChange | (phase) => void | none |
className | string | React only |
class | string | Svelte only |