Session Handoff — Artifacts Playground: badge/replay system, particle family, backgrounds reshape (Sondra still angry about the open)

Where it started

Continuation of the Amplif-AI Artifacts Special Effects Playground (single self-contained index.html). The prior handoff had compressed Sondra's 30-point voice rant down to a paragraph and LOST most of it; she was furious "where are all those things?". This session recovered her full critique from the origin transcript (C:\Users\srver\.claude\projects\c--Users-srver-AIOS-Workspace-aios-starter-kit\c1671447-faaf-4d17-9dd7-06d818324063.jsonl), saved it as a permanent spec, then executed the whole list. She then reviewed the result and is STILL angry about how the page "starts" and about the empty realism backgrounds — those are now deleted, but her core "make it GORGEOUS, it still looks shitty" verdict is unresolved. Session hit ~328K tokens (past her 250K freshness line) — that's why she ran the handoff.

Decisions locked + what shipped

All in c:\Users\srver\AIOS-Workspace\aios-starter-kit\PROJECTS\Artifacts Workshop\index.html:

• Affordance badge on EVERY card (her 3x-asked ask): corner pill showing Move mouse / Hover / Click / Drag / On scroll / Live. Driven by IX id-map + IXM icon/label map + afford(e) in the app <script>. Default 'auto' => "Live".
• Replay button on every card (top-right, shows on card hover): re-mounts the iframe via mount(f). Handler is the first branch in the grid.addEventListener('click',...).
• FONT injection: const FONT (a <style> with --d serif-display, --g condensed, --s clean-sans stacks) is prepended to every iframe srcdoc in mount(). Artifact-safe system stacks (Sitka/Cambria/Bahnschrift -> Georgia fallback), NOT a loaded webfont — external font loading is blocked inside a Claude Artifact. She may want a specific font embedded as base64 later.
• 4 bug fixes: gradborder (rotating conic now contained in an overflow:hidden wrapper — the "keeps popping up" was corners overflowing); grain (now visibly crawls, mix-blend overlay, dark bg not candy); glass (dark frosted over one soft light, no candy); shimmer (real brushed-metal gold multi-stop + bevel + sweep). Also added metalbtn (brushed silver). Upgraded holographic (richer foil + foil-line texture).
• Premium fonts applied to text effects: typewriter/letterstagger/shimmertext -> var(--d) serif; gradienttext/glitch/neon/wavy -> var(--g) condensed.
• New card effects: ribbon (glow-from-behind on hover, per her ask) + lifthover (lift+glow, breathes at rest). expandhover/holographic already existed.
• New Scroll category (4): scrollcounter, scrollparallax, scrollzoom, scrollstagger — auto-play once on mount; Replay button re-watches (preview iframe has no scrollbar).
• LAST TURN — the reshape she demanded: DELETED realbg (Ambient Depth = "just a black page") and realbglight (Soft Daylight = "just a white page") — templates AND EFFECTS rows gone. KILLED the ambient category entirely and folded ALL particle effects into Backgrounds (she does NOT want a category named like the reference site). Backgrounds now = 19 effects and OPENS with motion: Rising Bubbles -> Falling Stars -> Click Sparkles -> Emoji Rain -> Glowing Fireflies -> Falling Snow -> Hearts -> Petals -> Embers -> Twinkling Stars -> gradient/aurora/particles/starfield/mesh/dotgrid/orbs/grain -> Confetti.
• Particle family added earlier this session (all self-contained, alive-at-rest): bubbles, fallingstars, sparkles (click), emojirain (toned down), fireflies, snow, hearts, petals, embers, twinkle. She confirmed emoji rain + stars + "some of these" look GOOD.
• Current totals: 96 effects, 10 categories. 0 console errors on the pre-reshape verify pass (badge/replay/metal buttons/cards all screenshot-verified live before the reshape).

Key files for next session

• c:\Users\srver\AIOS-Workspace\aios-starter-kit\PROJECTS\Artifacts Workshop\SONDRA-FEEDBACK-SPEC.md — READ FIRST. Her complete recovered rant, organized (keepers / rework / bugs / structural / new families / scroll). The source of truth so it never gets lost again.
• c:\Users\srver\AIOS-Workspace\aios-starter-kit\PROJECTS\Artifacts Workshop\index.html — the deliverable. Architecture: each effect = inert <template data-snip="id"> -> lazy <iframe srcdoc> (IntersectionObserver, mount(f) prepends FONT). Metadata in EFFECTS[]; categories in CATS[]; card DOM in buildCard(e); badge in afford(e); interaction map in IX/IXM; replay + copy handlers in the single grid click listener.
• c:\Users\srver\AIOS-Workspace\aios-starter-kit\PROJECTS\Artifacts Workshop\handoffs\artifacts-playground-2026-07-08.md — the earlier (overly-compressed) handoff; build history only.
• c:\Users\srver\.claude\projects\c--Users-srver-AIOS-Workspace-aios-starter-kit\memory\feedback_effects_need_affordance_and_replay.md — the affordance+replay+alive-at-rest feedback memory.
• Plan file: none.
• Memory files touched this session: none.

Running state

• Background process: detached python -m http.server 4788 serving PROJECTS\Artifacts Workshop\, PID 39868 (from a prior session, NOT a tracked shell ID). Kill: taskkill //F //PID 39868, or leave it.
• Dev server: http://127.0.0.1:4788/index.html (append ?v=N to bust cache; hard-refresh Ctrl+Shift+R).
• Playwright MCP browser: was open on that URL; got into a "Browser is already in use" lock state at end of session (could not re-navigate). May need the browser closed/reopened or --isolated. MCP screenshots write to c:\Users\srver\AIOS-Workspace\aios-starter-kit\ root (workspace root, NOT the project folder) — 3 temp verify-*.jpeg were created and deleted this session.
• Open worktrees / branches: none.

Verification — how to confirm things still work

• Open http://127.0.0.1:4788/index.html?v=5 (hard-refresh). Expect: 96 effects, 10 categories, Backgrounds section leads with Rising Bubbles (motion, not a black square), every card has a corner affordance badge + a replay button on hover.
• If server is down: cd "c:\Users\srver\AIOS-Workspace\aios-starter-kit\PROJECTS\Artifacts Workshop" && python -m http.server 4788.
• Static checks used this session: grep -c 'data-snip=' index.html (=96), grep -c "cat:'bg'" (=19), grep -c "'ambient'" (=0), grep -c 'realbg' (=0).
• To force-mount an iframe for a screenshot: evaluate over .card iframe, set f.srcdoc from the matching template[data-snip] (or click its .replay).

Deferred + open questions

• OPEN — the unresolved core issue: Sondra says "I hate how THIS STARTS" and it "still looks shitty / not gorgeous." Ambiguous: (a) the opening background cards (now addressed — black/white ones deleted, lively particles lead) OR (b) the TOP HERO BANNER (title + floating Claude tile + spark canvas). She was ASKED which; answer not yet given. Do NOT guess-rebuild the hero — get her to point at it. She wants GORGEOUS, premium, attention-grabbing; her benchmark is the reference "lady's" Artifact library.
• OPEN — she claims "I told you which ones I liked from the other lady's site and you didn't do any of it." Holographic/expand-on-hover/ribbon-glow/lift-glow WERE added (Cards section) — she may not have scrolled to them, or means something else. Confirm she has seen the Cards section.
• Open: exact brand hex palette (never given — still interim navy/blue/gold/orange). CTA link still -> free Skool community, may want STARS join URL.
• Open: fonts are system stacks, not a loaded webfont (artifact CSP blocks external fonts). She may want a specific display font embedded as base64.
• Open: categories she had NOT reviewed when she got angry — Data, Interactive, Inputs, Page Sections. Expect more feedback there.
• Deferred: the live private Claude Artifact (https://claude.ai/code/artifact/c02c80b3-3f26-43ef-add3-db5afadf273f) is a SEPARATE copy — NOT redeployed this session. To sync, use the Artifact tool with that existing URL (else it mints a new URL).
• Deferred: README stale (says ~20 effects; actual 96).
• Deferred (unrelated, mentioned by hook): marlowe-vsl-closer.skill unprocessed in _INBOX-DROP-FILES-HERE\new skills to add\.

Pick up here

Get Sondra to point at exactly what "how it starts" means (the now-fixed opening background cards vs. the top hero banner) BEFORE rebuilding anything — then make that one thing genuinely gorgeous to her reference-library bar. Read SONDRA-FEEDBACK-SPEC.md first.