# Cyber skull

A rotating low-poly skull in glyphs, lit to tones with edge-glyph wireframe, a hinged jaw, glowing eyes and a scan band.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. The asciicn agent skill, for building any ASCII effect on the engine, is at [/.well-known/agent-skills/asciicn/SKILL.md](/.well-known/agent-skills/asciicn/SKILL.md).

> **This is an example, not the only option.** It is one component built on the asciicn engine. Install it when it is what you were asked for. For any other look, don't stretch its props to fit: write your own field on `AsciiShader` ([Write your own](/docs/engine/write-your-own.md)), or draw a CPU grid with `AsciiGrid`, and read this example's source for technique. Its full source is in [https://asciicn.dev/r/cyber-skull.json](https://asciicn.dev/r/cyber-skull.json), under `files[].content`.

## Installation [#installation]

```bash
npx shadcn@latest add https://asciicn.dev/r/cyber-skull.json
```

## Usage [#usage]

```tsx
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 [#examples]

### Wireframe on an error page [#wireframe-on-an-error-page]

`shading="wire"` in Braille with a red accent and the jaw held shut.

```tsx title="examples/cyber-skull-panic.tsx"
import { CyberSkull } from "@/components/asciicn/cyber-skull";

export default function CyberSkullPanic() {
  return (
    <section className="grid w-full max-w-2xl items-center gap-6 border bg-background p-6 font-mono sm:grid-cols-[minmax(0,15rem)_1fr]">
      <CyberSkull
        shading="wire"
        charset="braille"
        accent="red"
        jaw={false}
        speed={0.4}
        interactive={false}
        className="aspect-square w-full"
      />
      <div className="flex flex-col gap-3 text-sm">
        <p className="text-muted-foreground text-xs uppercase tracking-widest">
          Error 500 · worker-3
        </p>
        <h3 className="text-balance font-medium text-2xl tracking-[-0.02em]">
          The build died on step 4 of 7
        </h3>
        <p className="text-pretty text-muted-foreground">
          Out of memory while bundling the client. We kept the logs and
          restarted the queue.
        </p>
        <span className="text-muted-foreground text-xs">
          exit 137 · 2.1 GB peak
        </span>
      </div>
    </section>
  );
}
```

### Smooth bone in duotone [#smooth-bone-in-duotone]

`surface="smooth"` and `shading="solid"` in the dense charset, coloured by the `infrared` ramp, without the eye glow.

```tsx title="examples/cyber-skull-infrared.tsx"
import { CyberSkull } from "@/components/asciicn/cyber-skull";

export default function CyberSkullInfrared() {
  return (
    <CyberSkull
      shading="solid"
      surface="smooth"
      charset="dense"
      colorMode="duotone"
      ramp="infrared"
      eyes={false}
      speed={-0.25}
      cell={9}
      className="aspect-[4/3] w-full max-w-xl"
    />
  );
}
```

## Props [#props]

Every [ASCII image](/docs/images/ascii-image#props) look prop also applies, with `charset` defaulting to `"standard"`, plus `fx` for a CRT finish.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `shading` | `"solid" \| "wire" \| "both"` | `"both"` | Lit faces, visible edges only, or lit faces with the main edges drawn over them. |
| `surface` | `"faceted" \| "smooth"` | `"faceted"` | One tone per face, or light blended across faces. |
| `speed` | `number` | `0.3` | Turn around the vertical axis, in radians per second. Negative turns the other way. |
| `jaw` | `boolean` | `true` | Open and close the jaw slowly now and then. |
| `scan` | `boolean` | `true` | A bright band that falls slowly down the bone every eight seconds. Not drawn with `shading="wire"`. |
| `eyes` | `boolean` | `true` | A pulsing glow deep in each eye socket. |
| `color` | `AsciiColor` | `"--ascii-ink"` | Bone colour in truecolor. |
| `accent` | `AsciiColor` | `"blue"` | Edges, rim light, scan band and eyes in truecolor and the other colour modes. |
| `colorMode` | `"mono" \| "truecolor" \| "ansi16" \| "duotone" \| "palette"` | `"truecolor"` | How glyphs are coloured. |
| `interactive` | `boolean` | `true` | Drag or use the arrow keys to turn it. |
| `cell` | `number` | `10` | Glyph cell height in CSS pixels. |
| `animate` | `boolean` | `true` | false draws one still frame. |
| `handle` | `RefObject<AsciiHandle \| null>` |  | Filled with a handle for export. |

## Notes [#notes]

* It is announced as an image. Pass `aria-label` to 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.