Session Handoff — Artifacts Playground realism reshape (restraint REJECTED, new direction locked)

Where it started

Continuation of the Amplif-AI Artifacts Special Effects Playground (single self-contained index.html, ~79 effects across 9 categories, live as a private Claude Artifact). Prior handoff diagnosed the "cartoon vs 21st.dev" gap and set a "4 realism levers" direction (dark-dominant, soft/blurred depth, slow eased motion, hairline detail). This session built exemplars to that spec — and Sondra REJECTED the direction as too minimal/boring. The real target is now clear and different: effects must be VISIBLY ALIVE at rest, premium, fun, with an on-card affordance badge and a replay button.

Decisions locked + what shipped

• Shipped this session (all in c:\Users\srver\AIOS-Workspace\aios-starter-kit\PROJECTS\Artifacts Workshop\index.html), but the exemplars are NOW SUPERSEDED by the new direction — keep the good ones, rework the rest:
• Added 10 "✦ Realism" exemplars (one per category + a light-background bonus): ids realbg, realbglight, realtext, realmotion, realbutton, realcard, realdata, realux, realinput, realsection. Each is a <template data-snip="id"> + a row at the TOP of the EFFECTS[] array, tagged Realism.
• Fixed Starfield drift speed (s.x-=s.z → s.x-=s.z*0.14) — Sondra confirms slower is better. KEEP.
• Added idle self-demo loops to 4 previously "dead at rest" cards: magnetic, flip (CSS autoflip), parallax, beforeafter. Same if(!hv){...} pattern spotlight/tilt3d use.
• Added <meta charset="utf-8"> (line 1) — the ✦ was rendering as mojibake without it. KEEP.
• Sondra's verdict + NEW DIRECTION (this is the spec to build next):
• realbg reads as "just a black page", realbglight as "just a white page" — restraint went too far. Effects must be visibly alive at rest, not blank-until-hover.
• THREE-TIMES-ASKED, still open: an affordance badge/overlay on EVERY card saying what to do — Hover / Click / Move mouse / Drag / Auto. Highest priority.
• Replay button on every card whose effect plays once or needs scroll (preview iframe has no scrollbar, so scroll effects look dead without it). Her reference library has this.
• ADD the effect families she loves (currently missing): confetti, rising bubbles, falling stars, click sparkles, emoji rain, glowing fireflies, falling snowflakes, hearts, floating embers, twinkling stars, falling petals. These become a proper ambient/particle set.
• Fonts: boring system-ui is a big reason hers reads premium and mine doesn't — bring in real display fonts (NOT a copy of hers, but well past system-ui).
• Glassmorphism (glass): make it dark, not candy-colored behind it — hers wins because it's dark.
• Shimmer button: real METALLIC gold/silver sheen, not just a color.
• Gradient Border button (gradborder): has a glitch — "keeps popping up / need to move it up or down", and the rotating border reads as unintentional. Investigate + fix.
• Add a Scroll category: number-counters-on-scroll, parallax layers, zoom-in reveal, staggered-grid pop — each with a replay.
• KEEPERS she named as good (do not rework): aurora, particles (particle network), starfield (now slow), the text set, realcard (ambient glass card — "much better"), flip (3D flip), spotlight, tilt3d (3D tilt), realbutton (frosted CTA "pretty cool"). Also wants, from her reference: holographic foil (hers cooler than current holographic), expand-on-hover, a ribbon-badge idea (glow-from-behind on hover), lift-on-hover-with-glow.

Key files for next session

• c:\Users\srver\AIOS-Workspace\aios-starter-kit\PROJECTS\Artifacts Workshop\index.html — the entire deliverable; read first. Architecture: each effect = inert <template data-snip="id"> (self-contained HTML/CSS/JS) rendered into a lazy <iframe srcdoc> (IntersectionObserver, 220px rootMargin) so preview == copied code. Metadata rows in the EFFECTS[] array in the bottom <script>; P() wraps prompt copy. Card DOM is built in buildCard(e). To add the affordance badge: add an interact: field per EFFECTS row + render a corner chip in buildCard(). To add replay: a button that re-sets iframe.srcdoc from the template (re-mounts the effect).
• C:\Users\srver\.claude\projects\c--Users-srver-AIOS-Workspace-aios-starter-kit\memory\feedback_effects_need_affordance_and_replay.md — memory written this session capturing the affordance-badge + replay + alive-at-rest requirement (the 3x-asked miss). Read before building.
• Prior handoff (fuller build history): c:\Users\srver\AIOS-Workspace\aios-starter-kit\PROJECTS\Artifacts Workshop\handoffs\artifacts-playground-2026-07-08.md.
• c:\Users\srver\AIOS-Workspace\aios-starter-kit\context\ACCESS-MAP.md — 21st.dev CLI row. Usage: export PATH="$PATH:$(npm config get prefix)" then 21st search "<q>" / 21st get <id> to pull real components to port.
• c:\Users\srver\AIOS-Workspace\aios-starter-kit\PROJECTS\Artifacts Workshop\README.md — how-to; STALE (says ~20 effects). Update when convenient.
• Plan file: none.
• Memory files touched: feedback_effects_need_affordance_and_replay.md (new) + MEMORY.md index line added.

Running state

• Background processes: a detached python -m http.server 4788 serving PROJECTS\Artifacts Workshop\ is LISTENING (PID 39868 per netstat -ano | grep 4788). Started in a prior session — NOT a tracked shell ID. Kill: taskkill //F //PID 39868, or leave it.
• Dev servers / ports: http://127.0.0.1:4788/index.html (the server above).
• Playwright MCP browser session left open on that URL (used for verification screenshots). MCP screenshot output root = c:\Users\srver\AIOS-Workspace\aios-starter-kit\.playwright-mcp\ (not the project folder). No temp PNGs left in the project folder (cleaned).
• Open worktrees / branches: none.

Verification — how to confirm things still work

• Open http://127.0.0.1:4788/index.html (server already up) — search box, type "realism" to isolate the 10 new exemplars. Confirmed this session: all 10 render, realbglight is genuinely light, ✦ renders correctly, only console error is a favicon 404.
• If the server is dead: cd "c:\Users\srver\AIOS-Workspace\aios-starter-kit\PROJECTS\Artifacts Workshop" && python -m http.server 4788 then reload.
• Iframes lazy-mount on scroll; to force-mount for a screenshot, evaluate over .card iframe and set f.srcdoc from the matching template[data-snip].

Deferred + open questions

• Open (her call, next session): after building the affordance-badge + replay system, does she want the full effect-family rollout in one pass, or category-by-category review?
• Open: light backgrounds — she's now SEEN dark vs light; unresolved whether the rollout is dark-dominant with occasional light, or a real light/dark split.
• Deferred: the live private Claude Artifact is a SEPARATE copy from this local index.html — not redeployed this session. To update it, use the Artifact tool (needs its existing URL to hit the same one, else it mints a new URL).
• Deferred (unrelated, mentioned once): marlowe-vsl-closer.skill sits unprocessed in _INBOX-DROP-FILES-HERE/new skills to add/.
• Note: session ended at ~274K tokens (past Sondra's 250K freshness line) — the reason for this handoff.

Pick up here

Build the two structural wins first on the existing cards — (1) a per-card affordance badge (Hover/Click/Move/Drag/Auto) via an interact: field + buildCard() chip, and (2) a Replay button that re-mounts the iframe — then move to the fun effect families (confetti/bubbles/fireflies/snow/embers/petals/etc.), real display fonts, dark glassmorphism, the metallic shimmer button, and the gradborder glitch fix.