TITLE: Iris Kade — Bento Motion Portfolio
PROMPT: Build one self-contained HTML page: a dark bento-grid portfolio for a fictional motion designer. Base #0e0e11, text #f5f5f0, accent #ff5c39, tile #2b2b31, mint #a8e6cf. Page padding clamp(14px,2.2vw,34px); header row with the display name "Iris Kade" (system-ui 800, clamp(28px,5.6vw,64px), letter-spacing -.045em, surname in Georgia italic mint) plus a monospace uppercase nav whose links draw a 1px accent underline from right:100% to right:0 on hover. Below it a CSS grid bento: repeat(4,minmax(0,1fr)) with gap clamp(9px,1.15vw,16px) and tiles that span 1-2 cells — showreel 2x2 with a live canvas, about 2x1 in Georgia italic, a live clock tile, a stats tile, a 2x1 colour-play tile, a contact tile, and a "now" tile that rotates a verb. Every tile is #2b2b31, radius 18px, 1px hairline border, and on hover lifts translateY(-6px) with an accent-tinted border and a deep shadow. The reel canvas draws a looping abstract composition: a radial accent/blue glow, five rotating arcs in the palette with round caps, an orbiting accent dot, and a dashed hairline circle — sized with devicePixelRatio and ctx.setTransform on boot and resize. The clock tile ticks local time in tabular numerals every second. The colour-play tile follows the pointer, moving a conic-gradient blob and applying hue-rotate via a --h custom property on that small blob only, with a monospace hue readout throttled through requestAnimationFrame. The contact tile copies hello@iris-kade.studio to the clipboard, using navigator.clipboard with a textarea/execCommand fallback inside try/catch, and fires a mint toast that slides up with transform only. Media queries collapse the grid to 2 columns under 900px and 1 column under 560px. One IIFE, no external assets, no http substring, system fonts only, prefers-reduced-motion stops every loop and the toast transition.
DESCRIPTION: A moody studio wall of tiles. The big reel tile is the anchor — a dark canvas quietly drawing arcs and orbits — while the surrounding cells behave like objects: the clock ticks, the stats sit in tabular numerals, the colour tile blooms under the cursor, and the contact tile hands you an email with a mint toast. Everything is built from one grid, one tile recipe and one accent, so the asymmetry reads as composition rather than chaos.
TECHNIQUES: asymmetric CSS grid spans with aspect-free min-height clamps; canvas micro-animation with DPR sizing, setTransform and a single rAF loop; tabular-nums clock; conic-gradient blob driven by pointer position with a scoped hue-rotate filter on one small element; rAF-throttled style writes for the colour readout; clipboard write with a guarded legacy fallback; transform-only toast; hover lift via a single transition on transform/border/shadow; reduced-motion media query that freezes all loops.
INTERACTION: Hover any tile to lift it and tint its border accent; the showreel canvas animates continuously and re-sizes on window resize. Move the pointer across the colour-play tile to drag the blob and shift its hue, with the readout following. Click "Copy email" to place hello@iris-kade.studio on the clipboard and see the mint toast rise and retreat after 2.4 seconds. The clock updates every second and the "now" tile cycles animating / editing / grading / rendering every 2.8 seconds. Nav links smooth-scroll to the work, about and contact tiles; everything is keyboard reachable with visible focus rings.