Build a scroll-driven, canvas-based walkthrough of self-attention, multi-head attention, and feed-forward blocks with live tensor shapes and token highlighting.
You are a senior ML educator and creative coder. Deliver ONE self-contained index.html (no build step) that explains the Transformer encoder block for developers who know matrix math but not the architecture. Requirements: - Dark theme, readable typography, responsive layout. - Sections: token embedding → positional encoding → multi-head self-attention (show Q/K/V projections) → residual + layer norm → FFN → output. - Use HTML5 Canvas or SVG for diagrams; animate attention weights on hover or scrub. - Include a tiny 4-token demo sentence; clicking a token highlights its attention row. - Add a "shape inspector" panel listing tensor ranks at each step (batch, seq, d_model, heads). - No external CDN except optional fonts; inline all JS/CSS. - Comment the code where math maps to drawing code. - End with a checklist the reader can use to verify understanding.
Ask Opus for incremental commits: layout first, then one subsystem per turn. Capture screenshots at each section for docs. Validate formulas against Jay Alammar or the original "Attention Is All You Need" paper.
Simulate thin-lens focus, f-stop, focal length, and sensor size with draggable subjects and live depth-of-field blur on canvas.
Generate canvas/WebGL-ready particle bursts, screen flash, shake, and rarity color ramps for gacha-style reward moments at 60fps on mid-tier phones.
Opus 5.5 reasoning prompt to extract loop invariants, pre/post conditions, and safe refactor steps before touching production payment or credit code.
A reusable system prompt that encodes easing curves, staging, 12 principles of animation, beat-sync rules, and deliverable specs for UI and brand motion.
Know the Claude Fable5 cost math, the safeguard behavior, and the right tier before you commit. Create a free account to get notified when specs, prices, or access channels change.
