# ASCII Cursor

> A fullscreen neon city that slowly drifts under a faint ASCII grid printed in the colour of its light: tubes flicker like faulty neon and glyph rain falls; the cursor lights denser glyphs, and a click sends a seismic sphere of glyphs with faint ASCII cracks, a small shake and a glitch.

- Category: Animation
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: ascii, canvas, cursor, background, image, dark-mode, responsive, neon, glitch, fullscreen
- Page: https://builder.atheros.ai/components/ascii-cursor
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_ascii_cursor/preview-firstframe-f29d0585991c.webp

## Features

- Background photo of a ruined cyberpunk street, darkened with a token-driven scrim and vignette, drifting in a slow Lissajous pan with a gentle zoom breath; the glyph grid re-samples the moving photo so every glyph stays on the light beneath it
- A full monospaced glyph grid (16px cells, Geist Mono 400) sampled once from the photo: dense glyphs over bright, saturated light, sparse ones over dim areas and nothing in the dark
- Each glyph is tinted by the image colour beneath it, slightly lighter than its surroundings, through one `source-in` composite of a cell-resolution tint map
- Resting presence is very faint (about 5 to 9% on the brightest regions) with a slow ambient shimmer of a few cells
- Cursor movement lights a square, grid-snapped footprint that widens with speed: glyphs move to the dense end of the ramp, gain opacity and decode briefly
- Lit cells fade back with framerate-independent exponential decay (gradual, about 2–3s), scrambling slower as they cool; emission comes only from movement
- Fills the viewport (100dvh) at every width
- At 560px and narrower the view sits 1.15× closer on the city and the cursor trail is off, leaving only the drifting background
- Neon flicker: every 2.4–5.5s one tube runs a real failure pattern (stutter, dropout and restrike, or buzz). Its exact pixels are masked out of the photo, so the tube itself goes dark with its glow halo, and comes back with a brief restrike overshoot; its glyphs fade with it. Tubes are picked by per-cell peak neon score above the street, so reflections and the amber sky never start one
- Glyph rain: faint `| : .` streaks fall one cell at a time, tinted by the city colour beneath, so they show most over lit areas
- Click glitch: a 380ms burst of jumping horizontal slices with a red/cyan channel split over the whole field (desktop only)
- Click sends a seismic sphere: a crisp ring of glyphs races out from the click (900px/s), jolting outward and scrambling, with nothing lingering behind; 3–5 faint fault lines rip through the ASCII after it: glyphs on a crack drop out and the torn edges flicker, scramble and shift about 2px, then everything fades back in place (1.5s); underneath, the field gives a small decaying shake (4px, slight roll) and a neon tube is knocked into a flicker. Touch drags light the grid on larger touch screens; when the pointer rests the grid stays calm (the idle scanner is off by default)
- Glyph atlas, DPR capped at 2, paused offscreen and in hidden tabs, static frame with no loop under `prefers-reduced-motion`

## Accessibility

- **Decorative layers** — The image wrapper and the canvas carry `aria-hidden="true"`; the image has an empty `alt`
- **Landmark** — `<main>` labelled by a single caption heading
- **Contrast** — The caption sits on the darkest scrim band at 4.5:1 or better in both themes
- **Focus indicators** — Global `:focus-visible` outline with `--ring`
- **Reduced motion** — `prefers-reduced-motion: reduce` draws one static frame with no loop

## Keyboard shortcuts

- `Tab` — Moves past the section; it has no interactive controls

## Common questions

**Which frameworks is ASCII Cursor available in?**

ASCII Cursor ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the ASCII Cursor animation component free?**

ASCII Cursor is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does ASCII Cursor support dark mode?**

Yes. ASCII Cursor ships light and dark themes. Switch the preview to dark mode to compare them.

## Get the code

Preview ASCII Cursor live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/ascii-cursor

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt