Interactive ASCII Logo
A logo sampled onto a dot grid and rendered as flickering ASCII glyphs on a canvas. The cursor shoves nearby characters outward with spring physics, so the wordmark scatters and reforms as you move through it. No dependencies.
npx shadcn@latest add https://ui.aryank.space/r/ascii-logo.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | "https://ui.aryank.space/assets/ascii-logo/logo.png" | Logo image, sampled into glyphs. Same-origin or CORS-enabled. |
| background | string | "#0f0f0f" | Frame background color. |
| gridColor | string | "#171717" | Resting dot-grid color. |
| charColor | string | "#dadada" | Lit glyph color. |
| chars | string | ".:+*#%@0369" | Glyph ramp, dark to bright. |
| threshold | number | 0.5 | Brightness (0–1) a pixel must clear to become a glyph. |
| cellSize / cellGap | number | 8 / 2 | Glyph cell size and gap in px on desktop. |
| mobileCellSize / mobileCellGap | number | 3 / 1 | Cell size and gap below mobileBreakpoint. |
| mobileBreakpoint | number | 768 | Viewport width under which the denser mobile grid kicks in. |
| pushRadius | number | 5 | Cursor influence radius, in cells. |
| pushForce | number | 30 | Strength of the cursor push. |
| spring | number | 0.025 | Spring stiffness pulling glyphs back home. |
| damping | number | 0.5 | Velocity damping per frame. |
| flickerMs | number | 50 | Interval at which lit glyphs reshuffle their character. |
| logoScale | number | 75 | Logo width as a percentage of the container. |
charColor / gridColor / backgroundcolorLit glyphs, the resting dot grid, and the frame backdrop.
charstextGlyph ramp, ordered dark to bright.
pushForcetextHow hard the cursor scatters nearby glyphs.
srcasset-urlSampled wordmark, hosted through https://ui.aryank.space/assets/ascii-logo/logo.png.
None.