ASCII 3DPro

A rotating torus, cube, octahedron or your logo extruded from an SVG path, drawn as ASCII in the donut.c tradition but ray marched per cell, throttled to about 20 fps.

Markdown

On this page

ProA torus, a cube, an octahedron or the logo, ray marched per cell and drawn as text at 20 fps. Drag it, flick it, or use the arrow keys.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/ascii-3d

Usage

tsx

import { Ascii3D } from "@/components/ui/chatcn/pro/ascii-3d"

<Ascii3D shape="torus" columns={64} />
<Ascii3D shape={{ path: logoPath, viewBox: [0, 0, 32, 32] }} aspectRatio={2} zoom={1.5} />

A path is rasterized once into a signed distance field, fitted to its inked bounds and extruded, so any single color logo works. Paths sway either side of facing you by default, so the mark stays legible; shapes tumble. The text is a real <pre> that updates in place.

Examples

Logo and sizes

ProThe logo extruded as a hero object, large glyphs, a slow turntable, and a custom ramp held paused.

Props

Prop	Type	Notes
`shape`	`"torus" \| "cube" \| "octahedron" \| { path, viewBox? }`	Default `torus`
`label`	`string`	Accessible name. Defaults to the shape, for example `A rotating torus drawn in ASCII`
`columns`	`number`	Characters across. Default 64
`aspectRatio`	`number`	Width over height. Default 1
`motion`	`"tumble" \| "turntable" \| "sway"`	Default `tumble`, or `sway` for paths
`speed`, `zoom`, `depth`	`number`	Defaults 1, 1 and 0.4
`ramp`	`string`	Dark to lit. Default `.,-~:;=!*#$@`
`fps`	`number`	Default 20
`interactive`	`boolean`	Drag, flick and arrow keys. Default true
`still`	`{ pitch, yaw }`	The pose held under reduced motion
`paused`, `defaultPaused`, `onPausedChange`, `pauseControl`		Pause control as every effect

Keyboard

Key	Action
`Tab`	Focuses the object, then the pause button
`ArrowLeft`, `ArrowRight`	Turn it 15 degrees, at once
`ArrowUp`, `ArrowDown`	Tilt it 15 degrees, at once

Accessibility

The object is role="img" with your label and a hint to drag or use the arrow keys; the characters are hidden from screen readers.
Glyphs are text in currentColor, so forced colors and high contrast render them with system colors.
Drags use pointer capture and touch-action: none only on the object, so the page still scrolls around it.

Motion

Turns at about 20 fps through the shared frame clock, paused offscreen and in hidden tabs.
A flick keeps spinning and decays back into the steady turn, critically damped, with no overshoot.
Under reduced motion it holds one still pose; a drag still turns it, since the person moves it.
Arrow keys step the pose without animating.