ASCII Washi

CanvasSVG

The washi mark on its own, cycling the treatments Cook 005 built for it. The sandbox plays an authored scene rotation -- fills, tiles, a scroll-velocity ASCII beat where the vector layers corrode cell by cell into a letter soup drawn from the wordmark (solid areas pick from EMAWSHI, edges thin to punctuation) and re-form the instant motion stops -- while flipbook swaps texture frames on a beat, tiles cuts the silhouette into a grid, and still is the plain mark. Press s for the treatment panel, h to hide it; the choice persists in localStorage.

Controls▼

treatment

Source

AsciiWashi.tsx36 lines

"use client";

import { useState } from "react";
import BirdMark, { MODES, type Mode } from "@/components/BirdMark";
import DraggablePanel from "../DraggablePanel";
import { PanelSelect } from "../_kansei/controls";

/* ASCII Washi — the washi mark by itself, cycling the treatments Cook 005
   (/ascii-lab) built for it: the sandbox scene rotation with its ASCII beat,
   the flipbook, the tile cut, the plain mark. BirdMark owns the effects; this
   is a big stage and one control. */

export default function AsciiWashi() {
  const [mode, setMode] = useState<Mode>("sandbox");

  return (
    <div
      className="fixed inset-0 grid place-items-center overflow-hidden select-none"
      style={{ background: "var(--paper)", color: "var(--ink)" }}
    >
      <BirdMark
        className="block h-auto w-[clamp(240px,46vw,640px)] aspect-[138/82.334]"
        src="/ascii/bird.svg"
        alt="washi mark"
        sandboxAscii
        storeKey="bird-mode-lab-entry"
        mode={mode}
      />

      <DraggablePanel isLight controls={[]}>
        <PanelSelect label="treatment" value={mode} options={MODES} set={setMode} isLight />
      </DraggablePanel>
    </div>
  );
}