Skip to content
ascii-things

Koi card

The card owns the chrome, the spacing, and the seed control. The koi wrapper fills a sized box, so the surrounding design system never has to know how the scene is rendered.

Koi pondascii-things/react · abyss
live

Installation

Section titled “Installation”
Terminal window
npx shadcn@latest add https://ascii-things.dev/r/koi-card.json

This adds components/koi-card.tsx, installs ascii-things, and pulls the card, badge, and button shadcn primitives.

Usage

Section titled “Usage”
import { KoiCard } from "@/components/koi-card";


export function Pond() {
  return <KoiCard />;
}

Composition

Section titled “Composition”

The important part is the sized child. AsciiKoi fills its parent; a parent without a height gives the canvas nothing to fill.

<CardContent className="p-0">
  <div className="h-96 w-full bg-black">
    <AsciiKoi palette="abyss" seed={seed} count={5} label="A live ASCII koi pond" />
  </div>
</CardContent>

The Re-seed button increments local state. A new seed is a new world, so the scene remounts without any imperative calls.

Source

Section titled “Source”