Installation
pnpm dlx shadcn@latest add https://asciicn.dev/r/cyber-skull.jsonUsage
import { CyberSkull } from "@/components/asciicn/cyber-skull";
export function NotFound() {
return <CyberSkull className="aspect-square w-80" />;
}The skull is a mesh of about 3,200 triangles built in code when the component first draws. The cranium is a shell with sunken eye sockets, a nasal opening, a brow ridge, cheekbones and temples. An upper jaw holds one row of teeth, and a hinged mandible holds the other. Every face goes through a depth buffer, so the jaw, the teeth and the far side of the head hide behind whatever is in front of them from any angle.
shading picks what you see. solid lights the faces to glyph tones, with the inside of the sockets in shadow and a rim light in accent. wire draws only the edges the camera can see, as - / | \ glyphs, plus the outline. both lights the faces and draws the sockets, the nose, the jaw and the teeth over them. In Braille and quadrants the edges are drawn as lit dots instead of edge glyphs, so they stay as fine as the rest of the picture.
surface="faceted" gives each face one tone, so the low-poly mesh shows. smooth blends the light across faces for a rounder bone.
It does not react to hover. Press and drag sideways to turn it and up or down to nod it. Let go mid-drag and it coasts, then settles back to its own spin. With keyboard focus, the arrow keys turn it.
Examples
Wireframe on an error page
shading="wire" in Braille with a red accent and the jaw held shut.
Smooth bone in duotone
surface="smooth" and shading="solid" in the dense charset, coloured by the infrared ramp, without the eye glow.
Props
Every ASCII image look prop also applies, with charset defaulting to "standard", plus fx for a CRT finish.
| Prop | Type | Default |
|---|---|---|
| shading Lit faces, visible edges only, or lit faces with the main edges drawn over them. | Type: "solid" | "wire" | "both" | Default "both" |
| surface One tone per face, or light blended across faces. | Type: "faceted" | "smooth" | Default "faceted" |
| speed Turn around the vertical axis, in radians per second. Negative turns the other way. | Type: number | Default 0.3 |
| jaw Open and close the jaw slowly now and then. | Type: boolean | Default true |
| scan A bright band that falls slowly down the bone every eight seconds. Not drawn with `shading="wire"`. | Type: boolean | Default true |
| eyes A pulsing glow deep in each eye socket. | Type: boolean | Default true |
| color Bone colour in truecolor. | Type: AsciiColor | Default "--ascii-ink" |
| accent Edges, rim light, scan band and eyes in truecolor and the other colour modes. | Type: AsciiColor | Default "blue" |
| colorMode How glyphs are coloured. | Type: "mono" | "truecolor" | "ansi16" | "duotone" | "palette" | Default "truecolor" |
| interactive Drag or use the arrow keys to turn it. | Type: boolean | Default true |
| cell Glyph cell height in CSS pixels. | Type: number | Default 10 |
| animate false draws one still frame. | Type: boolean | Default true |
| handle Filled with a handle for export. | Type: RefObject<AsciiHandle | null> | Default – |
Notes
- It is announced as an image. Pass
aria-labelto describe what it stands for on your page. - Under reduced motion it draws one still frame, with the jaw shut, and stays put.
- It draws at up to 60 fps on the CPU and pauses offscreen and in hidden tabs. The mesh is built once and shared by every skull on the page.
- On a touch screen, vertical swipes scroll the page. Sideways swipes turn the skull.