Musashi/Motion
Motion | GSAP | Canvas | Noto Serif JPIterativeView Brief ↗
← Back to demo

Musashi

How a motion vocabulary became a visual language.

The Prompt

One line: “Neo-bushido. Balance between quiet minimalism and armored intensity.” Everything else grew from that tension. No wireframes. No component spec. Just a direction and a question: what does motion look like when it serves a mood instead of a function?

The Motion System

Musashi was built to test what Claude Code could do with motion. Not animation libraries dropped into a page. A layered vocabulary where every section uses a different primitive:

  • ParticleField — Cherry blossoms and dust motes. Two presets, tunable count, speed, and opacity. The air between things.
  • GradientMesh — Atmospheric color fields. Slow-moving, low-opacity. Backgrounds that breathe.
  • CursorField — Parallax depth response to mouse position. Makes the hero feel inhabited.
  • Timeline — GSAP stagger reveals. Items materialize in sequence, not all at once.
  • Perspective3D — 3D tilt on hover. The virtue cards feel physical, like lacquered wood.
  • ScrollProgress — A crimson line that grows with scroll. The only UI chrome in the entire page.

The Images

Five images generated with Nano Banana Pro. Each represents a different facet of the bushido concept:

  1. Hero mountains — Ink wash landscape, atmospheric perspective, layered depth
  2. Sumi-e blossoms — Ink branch on washi, wabi-sabi negative space
  3. Katana detail — Close-up, metallic texture, shallow depth of field
  4. Neo-samurai — Armored figure, environmental portrait, contemporary warrior
  5. Moon reflection — Water and light. Yugen: profound mystery, the beauty of things half-seen.

The Build

Musashi was the first direct Opus build. Not dispatched to Sonnet via instruction file. Opus wrote the code, started the dev server, ran eval, iterated. Three things surfaced that instructions alone never catch:

  1. GradientMesh needs careful opacity tuning. Above 0.2, it competes with content. Below 0.08, it disappears. The sweet spot is narrow.
  2. GSAP scroll-triggered content is invisible until you scroll. Screenshots miss everything below the fold. You have to watch the page, not just capture it.
  3. Iterating with a live browser catches issues that specs miss. The washi section needed three passes before the background opacity and text contrast felt right.

The “Iterative” build time reflects this. No fixed scope, no turn budget. The page evolved through build-eval-fix cycles until it felt right.

Credit

The seven virtues of Bushido are from the Hagakure and the writings of Nitobe Inazo. Poetry from Ryokan (1758–1831) and Takuan Soho (1573–1645).

View DemoAll Demos