Pimp My IDE / Garage Dispatch
Back to garage
September 25, 2026 | interaction / tools / web craft

Hand them the wrench.

A product page can describe a new kind of tool. The better page lets visitors touch the idea, change it, recover from a bad move, and take something useful away.

The take: Ink & Switch put an interactive artwork on its homepage and built it with its own research software. That is product communication with skin in the game. The interaction still needs clear controls, a reset, and non-drag routes.
Run the Workshop Proof Bench

The demo is the claim.

Ink & Switch marked its tenth year with Tenfold, an interactive set of ten letter machines. The lab says it built the piece inside Patchwork, its research environment for malleable software.[1] Visitors do not meet that claim through a diagram. They click and drag the result.

The homepage still explains the lab. It also gives the visitor a live specimen. That choice turns the first screen into evidence of the lab's taste and working method.

If the product promises agency, the page should surrender some control.

Constraints make the door smaller.

The Tenfold playground did not expose the full Canvas API. Its custom drawing API uses white lines, a fixed stroke, normalized coordinates, a repeating time value, and pointer position. The authors say those constraints made the space less intimidating for people who had not made procedural art before.[2]

This is the useful part of malleability. It is not a settings dump. It is a small set of handles that produce legible change. The related Malleable Software essay argues for tools that people can reshape at the point of use instead of waiting for a distant product team.[3]

Recovery belongs in the interaction.

The playground note also records a failure. Incomplete loop edits synced through Automerge before the next frame and could lock every collaborator who had that letter open. The team added a parser step that injects a counter and break into loops.[2] The fun surface needed a brake.

The same rule applies to smaller interactions. A visitor needs a clear stock state and a one-click reset. W3C guidance says dragging actions need a simple pointer alternative because some people cannot perform precise press, hold, move, and release gestures.[4] Its motion guidance also recommends honoring reduced-motion preferences or giving users a way to stop nonessential animation.[5]

Use the workshop test.

Before calling an interactive page useful, check four things:

  1. The visitor can find the controls without instructions hidden elsewhere.
  2. Each control creates an immediate, understandable change.
  3. Every drag path has a click, tap, or keyboard route.
  4. The visitor can reset the state and carry out a result or recipe.

The bench below makes that contract visible. The canvas reacts to pointer movement, but native sliders and buttons own the state. The generated card records the configuration. It does not certify usability or accessibility.

Interactive makeover / procedural tool

Workshop proof bench.

Traditional purpose replaced: a hero screenshot plus a claim about custom tools. Better version: tune a procedural plot with native controls, try an optional pointer input, stop motion, reset the machine, and copy the exact setup.

Tune the line machine

The sliders are the source of truth. Arrow keys work. Pointer movement on the plot only changes its bias.

36
12 lines72 lines
42%
0 percent100 percent
28%
stillfull
CUSTOM SETUP3 TUNING PARAMETERS

The visitor can alter the specimen.

The machine exposes line count, twist, and pulse through labeled native controls.

Current setup36 lines / 42 percent twist / 28 percent pulse
Motion stateRunning. Reduced-motion preference starts this control stopped.
Pointer routeOptional. Sliders and buttons provide the complete control path.
This is an interaction checklist with a live specimen. It is not user research or an accessibility audit.
  • Controls are visible and labeled.
  • Changes appear on the same surface.
  • The pointer gesture is optional.
  • Reset and copy routes exist.

Copy the setup card

What this carriesThe card records the chosen values and the four design checks. Run assistive-technology and user tests before making a compliance or usability claim.

Sources read, not vibes

Open the source log
  1. Ink & Switch, "Tenfold": the anniversary artwork, its origin in physical letterforms, its construction in Patchwork, and the authors' account of agentic coding as implementation help under human visual direction.
  2. Ink & Switch, "The Tenfold Playground": drawing constraints, normalized inputs, frame evaluation, Automerge sync, collaborative failure mode, and loop-counter response.
  3. Ink & Switch, "Malleable Software": the case for software that people can adapt at the point of use and compose into their own workflows.
  4. W3C WAI, Understanding WCAG 2.2 Success Criterion 2.5.7: provide a simple pointer alternative when an action uses dragging.
  5. W3C WAI, Understanding Success Criterion 2.3.3: support motion preferences and let users disable nonessential interaction animation.
  6. Hacker News item 49842270: discovery trail for the interactive homepage.

Source boundary: Ink & Switch describes its own project and design decisions. The W3C pages explain accessibility criteria. The Workshop Proof Bench is our editorial test pattern. It does not measure Tenfold, Patchwork, or any other product.