I gave Fable 5 my hardest design prompts. Here's what came back.

You are a creative technologist at a studio famous for award-winning WebGL sites. Build ORRERY: a portfolio site where the navigation IS a stylized solar system, in ONE self-contained HTML file (Three.js r160+ via CDN import map, custom GLSL, no build step, no external assets — every texture must be procedural).

THE SCENE
- A central sun built from layered fractal brownian motion (fBm) noise in a fragment shader: animated surface convection, rim-darkened limb, and a corona rendered as a separate additive-blended billboard shader. The sun is the page's light source — all planets receive its light direction in their shaders.
- 5 planets, each representing a portfolio project, each with a DISTINCT procedural material:
  1. Molten world — flowing lava using domain-warped noise, emissive cracks
  2. Ocean world — animated normal-mapped waves + Fresnel atmosphere rim
  3. Gas giant — banded turbulence (curl noise) with a slowly rotating storm vortex
  4. Ice world — sharp voronoi cellular cracks with subsurface-scatter fake glow
  5. Terra world — continents from thresholded fBm, day/night terminator with city lights on the dark side
- Planets orbit on inclined elliptical paths at different speeds. Thin glowing orbit lines. A sparse starfield + faint procedural nebula background (big inverted sphere, fBm in fragment shader).

CINEMATOGRAPHY & INTERACTION
- Scroll does NOT scroll a page — it drives the camera along a choreographed spline that gravity-slingshots from planet to planet. Use damped scroll (lerp toward target) so motion feels weighty.
- As the camera approaches each planet, a project card (HTML overlay, glassmorphic, kinetic type) slides in, synced to camera distance. Typography: a characterful display face from Google Fonts + a clean grotesque for body. Pick something NOT Inter/Space Grotesk defaults.
- Clicking a planet triggers a dive: camera accelerates into the atmosphere, screen fills with that planet's shader colors via a custom full-screen transition shader (radial distortion + chromatic aberration), then cross-dissolves to a full case-study panel. Escape reverses it.
- Cursor exerts a tiny gravitational pull on nearby planets (springs back). Subtle, not gimmicky.

POLISH BAR
- Post-processing: bloom (selective on sun/emissives), filmic tonemapping, vignette, gentle film grain.
- 60fps target on a mid laptop: cap pixel ratio at 1.5, no shadow maps, share geometries.
- Loading sequence: planets scale in with staggered elastic easing while the sun ignites (uniform ramp).
- Respect prefers-reduced-motion (static layout fallback with planets as a vertical list). Keyboard nav between planets with visible focus.
- Invent real-sounding project copy (names, one-line descriptions, 3 stats each). No lorem ipsum.

Before coding, write a 10-line design plan (palette as named hexes, type pairing, the one signature moment). Then build the complete file. Self-critique against the plan before finalizing.

Build an interface inspired by teenage engineering. the objective is to showcase your (Fable 5) design capabilities.

Build a single-file interactive web experience that explains the Transformer 
("Attention Is All You Need", Vaswani et al., 2017) in exactly 60 seconds. 
Think of it as a playable movie: an auto-advancing, cinematic journey with 
perfect pacing — Apple keynote meets Distill.pub. The user presses one 
button and is taken through the core idea with zero effort, but can pause 
and scrub at any moment.

THE 60-SECOND TIMELINE (auto-advancing scenes):

  0:00–0:08 — THE HOOK
  Black screen. The sentence "The animal didn't cross the street because 
  it was too tired" fades in, one word at a time. The word "it" pulses. 
  Text: "What does 'it' refer to? You know instantly. Here's how a machine 
  learned to."

  0:08–0:20 — ATTENTION REVEALED
  Animated attention lines bloom from "it" to every other word, thickness 
  proportional to real computed attention weights. The line to "animal" 
  glows brightest. Text: "Every word looks at every other word and decides 
  what matters. This is attention."

  0:20–0:32 — THE MATH, FAST
  The sentence morphs into small Q, K, V matrices. A rapid but legible 
  animated pipeline: Q·Kᵀ → ÷√d_k → softmax → ×V, each step landing with 
  a satisfying snap and a 3-word label. Real numbers, computed live in JS.

  0:32–0:44 — MANY HEADS, MANY MEANINGS
  The view splits into 8 panels — 8 attention heads on the same sentence, 
  each lighting up different word relationships simultaneously. Text: 
  "8 heads, each learning a different kind of relationship — in parallel."

  0:44–0:54 — THE FULL MACHINE
  Camera zooms out: the attention block we just watched shrinks and slots 
  into the full encoder-decoder architecture diagram. Data pulses flow 
  through all layers. Text: "Stack it 6 times. No recurrence. No 
  convolution. Attention is all you need."

  0:54–1:00 — THE PAYOFF
  Architecture fades to a single line: "This idea powers GPT, Claude, and 
  modern AI." A replay button and an "Explore freely" button appear.

INTERACTION MODEL:
- Starts with a single elegant "Play" button on a title card
- A thin timeline scrubber at the bottom: pause, scrub, jump to any scene
- Spacebar pauses; while paused, the current scene becomes interactive 
  (e.g. in scene 2, click any word to see ITS attention lines)
- "Explore freely" at the end unlocks a free-play attention playground

DESIGN REQUIREMENTS:
- Cinematic dark theme: near-black background, cyan→magenta gradient for 
  attention weights, one display typeface for big statements
- Every transition choreographed — elements morph between scenes rather 
  than cut (the sentence becomes the matrices, the matrices become the 
  architecture block)
- 60fps animations via requestAnimationFrame; easing on everything
- Big, confident typography; never more than one sentence on screen

TECHNICAL CONSTRAINTS:
- Single self-contained HTML file, vanilla JS or D3 from CDN, no build step
- All attention weights computed live with real scaled dot-product math 
  on small demo vectors — nothing hardcoded as images
- A master timeline controller driving all scenes, so scrubbing is 
  frame-accurate

The bar: a viewer with no ML background should reach 1:00 and genuinely 
understand what attention is — and feel like they just watched something 
beautiful.

Build a complete monster-catching RPG in the style of classic handheld
games, as a single self-contained HTML file (inline CSS and JS, no
frameworks, no localStorage — all state in memory). Use original
creatures only: no Pokémon names, characters, or assets.

GAME STRUCTURE — three screens:
1. Title screen: game name "Monsterbound" and a choice of 3 starters,
   each shown as a card with sprite, name, type badge, one-line flavor
   text, and a Choose button.
2. Overworld: a 16×12 tile map drawn on a <canvas> (32px tiles).
   Tile types: grass (walkable), tall grass (walkable, 18% chance per
   step of a wild encounter), trees and water (blocked), path, and a
   red-roofed house that fully heals the party when stepped on.
   Border the map with trees. Show the party as small cards above the
   canvas (sprite, name, level, HP bar) plus a toast line for messages.
   Move with on-screen d-pad buttons AND arrow keys/WASD.
3. Battle screen: enemy panel top (name, level, HP bar, sprite),
   player panel below (same, plus HP numbers and a thin XP bar),
   a one-line message log, and action buttons: Fight / Catch / Run.
   Fight opens a 2-column move menu showing each move's type and power,
   with a Back button.

CREATURES — 5 species with base stats (hp/atk/def/spd) and movepools:
- Embercub (fire): Scratch, Ember, Flame whirl
- Puddlit (water): Tackle, Bubble jet, Tide snap
- Leaflit (leaf): Tackle, Leaf dart, Vine lash
- Fluffowl (normal): Peck, Gust
- Buzzlebee (normal, fast/frail): Buzz, Gust
First three are the starters (level 5). Draw each as a small inline
SVG sprite — round body, eyes, smile, plus one signature feature
(flame tail, head fin, leaf sprout, owl wings, bee stripes).

BATTLE MECHANICS:
- Type triangle: fire > leaf > water > fire (2x), reversed = 0.5x,
  same-type vs same-type = 0.5x, normal is neutral. Show "It's super
  effective!" / "It's not very effective..." messages.
- Damage: classic formula shape — ((2·level/5 + 2) · power · atk/def)
  / 50 + 2, times type multiplier, times random 0.85–1.0, minimum 1.
- Stats scale with level (~12–16% of base per level). Turn order by
  speed. Enemy picks a random move. Resolve turns step by step with
  ~800ms delays between log messages; disable actions while resolving.
- Catch: chance = 0.25 + 0.6·(1 − currentHP/maxHP), with throw and
  wobble messages. Caught monsters join the party (max 6).
- Run: 70% success; on failure the enemy gets a free attack.
- XP: 22 × enemy level per win; level-up at level×40 XP, recompute
  stats keeping damage taken, learn the third move at level 7.
- If the active monster faints, send out the next healthy one; if none
  remain, return the player to the start tile with a healed party.
- Wild encounters: weighted species pool (Fluffowl most common,
  Buzzlebee rare), level = highest party level −2 to +1, minimum 2.

LOOK AND FEEL:
- Frame the whole game inside a chunky handheld console shell: deep
  pine-green plastic, dark bezel, pale mint LCD screen, working d-pad
  below the screen with a small control legend beside it.
- Pixel font (Press Start 2P with monospace fallback) for headings and
  buttons; monospace body text. Cards get 2px ink borders with offset
  block shadows for a retro sticker look. Coral-red accent buttons.
- HP bars shift green → amber → red. Brief screen flash on encounters.
- Visible keyboard focus styles; respect prefers-reduced-motion.