Claude Code
Reads the repo, installs the package and writes a simulation beside your app.
LIVING ASCII SCENES · v1.0.0-rc.0
Your interface,
but alive.
Drop a night lagoon, a shark tank, a robot floor, or a jellyfish bloom behind your UI. Zero dependencies. One canvas.
$
npm i ascii-thingsLIVE NIGHT REEF· ambient simulation
COMPOSITIONS / LIVE
One scene. Every surface.
The same canvas in the paper, product, and immersive languages. Swap the scene; keep the surface.
Open compositions ↗01 / HABITATS
Living scenes.
One tiny runtime.
Each one is a small ecosystem, not a looped animation. Seeded, themeable, and capped so it stays fast on a real page.
01
Lagoon
OPEN ↗A full-canvas marine family: turtle, manta, seahorse, dolphin, hammerhead, tang.
02
Shark tank
OPEN ↗Schools, hunts, panic, and settles. Four sharks, five fish species.
03
Robot floor
OPEN ↗A working factory floor. Patrols, jobs, charging bays, low batteries.
04
Jellyfish bloom
OPEN ↗Five kinds of bell, drifting on a live current. Click to send a shockwave.
05
Robot dog
OPEN ↗A test yard with a ball, a dock, and a very good quadruped.
06
Starling murmuration
OPEN ↗A murmuration folds, ripples, and scatters around a hunting shadow.
07
Firefly meadow
OPEN ↗A dusk meadow where a few hundred small lights drift and blink.
08
Ant trail
OPEN ↗A colony lays trails, finds crumbs, and carries food home.
09
Koi pond
OPEN ↗A pond of koi, lily pads, and ripples that spread from every visit.
10
City grid
OPEN ↗A night grid of towers, windows, traffic, and signals.
11
Server room
OPEN ↗A rack room with fans, status LEDs, and packets crossing the aisle.
02 / KANJI
The alphabet
is the artwork.
Fifteen studies and two live marks. The same engine, switched to kanji: a live helix, fields, water, sky, land, a torii, seasons, a fan, an ink field, and a glyph murmuration.
Live 3D
Kanji helix
A double helix turning through a field of bright characters.
WEBGL · 龍神光Ink
Kanji ink field
Sumi ink drifts across warm paper and slowly resolves into characters.
INK · 永風水空Flock
Kanji murmuration
Hundreds of glyphs gather into a character, scatter, and re-form.
FLOCK · 飛鳥風空03 / INTEGRATE
One install.
Anywhere you render.
React, plain HTML, Astro, Vue, Svelte, or a static page. Canvas in, life out. The host app keeps its own UI.
- Zero runtime dependencies
- ESM, tree-shakeable subpath exports
- Optional React ≥ 18 peer
- Works with your design system — or ours
import { AsciiDog } from "ascii-things/react";
export function Hero() {
return (
<AsciiDog
palette="abyss"
seed={7}
spread={[0.68, 0.68]}
label="A live ASCII robot dog test yard"
/>
);
}<script type="module">
import "ascii-things/element";
</script>
<ascii-dog
palette="abyss"
seed="7"
spread="0.68,0.68"
style="height: 420px"
></ascii-dog>import { createDog } from "ascii-things/dog";
const scene = createDog(canvas, {
palette: "abyss",
seed: 7,
count: 1,
spread: [0.68, 0.68],
interactive: true,
});
scene.throwBall(canvas.clientWidth * 0.55, canvas.clientHeight * 0.5);Same API in every scene. Swap the import and the options.
04 / WHY IT FEELS ALIVE
Small simulations.
Serious defaults.
Zero dependencies
One canvas, no WebGL, no image pipeline. The whole runtime is yours to read.
Deterministic
Seed the world and it plays the same way twice. Screenshot it, test it, ship it.
Themeable
Abyss, paper, neon, mono, or a palette of your own. The scene follows your ink.
Accessible defaults
Reduced motion settles the world. Decorative canvases stay out of the a11y tree.
Built for 60fps
Cell caps and adaptive columns keep 4K pages from turning into a particle furnace.
MIT, forever
Use it in a portfolio, a product, or a pitch deck. No seat counts, no watermark.
THE PRINCIPLE
Not an animation.
A habitat.
Every scene runs on its own small rules. No two loads are quite the same.