Beamish.Ink — AI skill for Claude Code

Beamish

Web effects and interface components for AI coding agents.

Three.js scenes, WebGL shaders, text animations and interface components. There is nothing to install. Browse [beamish.ink](https://beamish.ink), pick one, press **Copy prompt**, and paste the result into Claude Code or Cursor. Your agent fetches the source from this repo and writes it into your project.

Why a prompt and not a package

A component library has to guess your build, your framework and your styling system. It will be wrong about at least one of them.

A prompt does not guess. It hands your agent the real source file, every option with the range that actually looks good, wiring for React, Vue and plain HTML, and the three mistakes most likely to be made with that particular effect. Then it stays out of the way while the agent adapts all of it to the project in front of it.

Every prompt pins its URLs to a git tag, never to `main`. A prompt you pasted six months ago still fetches the file it was written about.

What's here

Two tiers with two contracts. They are not unified and will not be.

**`effects/`** is canvas and WebGL. A framework-free module that takes a DOM element and returns a handle:

export type EffectHandle = {
  start(): void
  stop(): void
  update(opts: Partial): void
  renderAtTime(t: number): void  // deterministic: same t, same frame
  destroy(): void                // releases the WebGL context, RAF and listeners
}

**`components/`** is navs, buttons, menus and cursors. Ordinary React and Vue components. Semantics, keyboard handling and focus management are the whole job here, and an imperative handle is the wrong shape for any of them.

The two tiers share tokens, motion, `meta.json`, the prompt system and the recorder. The runtime contract is the one thing they do not share.

Built for paper

Every library in this space assumes a near-black canvas, and their effects come apart the moment you put them on anything else. The background