ShareLoopStage: implement wireframe Frame 5 as React component

[federicodeponte]

Summary

Adds <ShareLoopStage /> — the two-column sender/receiver share-loop demonstration section from wireframe page-hero-scroll-v2-5.html (Frame 5 of 5). This component does not yet appear in any page; it is ready to drop into LandingPage.tsx after Federico's visual approval.

Wireframe source

/root/floom-internal/relay-oss-prep-archive-2026-05-06/wireframes-final-cleanup/page-hero-scroll-v2-5.html

Token mapping (19 tokens, 100% fidelity)

Wireframe token	React token
--cream-2	var(--v0-cream-2)
--emerald	var(--v0-emerald)
--emerald-2	var(--v0-emerald-2)
--emerald-soft	var(--v0-emerald-soft)
--emerald-tint	var(--v0-emerald-tint)
--ink	var(--v0-ink)
--ink-2	var(--v0-ink-2)
--muted	var(--v0-muted)
--muted-2	var(--v0-muted-2)
--line	var(--v0-line)
--glass-bg	var(--v0-glass-bg)
--glass-border	var(--v0-glass-border)
--glass-shadow-hero	var(--v0-glass-shadow-hero)
--radius-card-lg	var(--v0-radius-card-lg)
--radius-pill	var(--v0-radius-pill)
--font-display	var(--v0-font-display)
--font-mono	var(--v0-font-mono)
--font-body	var(--v0-font-body)
--cream	var(--v0-cream)

Zero hardcoded hex values in component or CSS file.

Animation mapping (5 animations)

CSS @Keyframes	framer-motion equivalent
fadeInLeft 0.5s ease 0.1s	motion.div initial:{opacity:0,x:-20} + appleSpring delay:0.1
fadeInRight 0.5s ease 0.2s	motion.div initial:{opacity:0,x:20} + appleSpring delay:0.2
connectorPop cubic-bezier(0.23,1,0.32,1) 0.4s	scale:0.5→1 + appleSpring delay:0.4
mascotPop cubic-bezier(0.23,1,0.32,1) 1.2s	scale:0.4→1 opacity:0→1 + appleSpring delay:1.2
toastIn cubic-bezier(0.23,1,0.32,1) 0.8s	y:-8→0 + appleSpring delay:0.8
btnGlow 2s ease infinite	CSS animation preserved (framer repeat:Infinity produces different pulse feel)

Verification

• TypeScript: npx tsc --noEmit — zero errors on ShareLoopStage.tsx
• Token audit: all 19 var(--v0-*) tokens verified present in globals.css
• No createAvatar() direct calls
• mascotDataUri() used for both mascots
• useReducedMotion() gates all entrance animations + looping glow
• isMounted guard prevents SSR opacity:0 flash (P0 pattern from commit 4fc87ff)
• No Tailwind classes
• No hardcoded hex

Deviations from wireframe

1. Mascot SVG replaced with mascotDataUri() — wireframe embeds raw SVG faces; React uses the mascotDataUri() helper (CLAUDE.md anti-slop rule: never call createAvatar(bigSmile, ...) directly).
2. Share/QR buttons are stubs — wired to type="button", no actual share sheet or QR modal. These need product decisions before wiring.
3. Skill data is props — wireframe hardcodes "floom PR review" + 847 saves. Component accepts slug, skillName, skillDesc props with those as defaults.

Integration path

To render in the landing page, import and add after the hero card section:

import { ShareLoopStage } from "@/components/ShareLoopStage";
import "@/components/ShareLoopStage.css"; // auto-imported inside component

// In LandingPage.tsx hero section:
<RevealSection className="landing-shareloop-section">
  <ShareLoopStage />
</RevealSection>

Do NOT land without Federico's visual approval.

What's still not amazing

• The btnGlow pulse animation is CSS (not framer-motion) — this means it can't be paused on hover or intersection like framer animations can. Acceptable for v0, but not ideal.
• Mobile layout at 375px is untested in a real browser — only reviewed at 768px breakpoint.
• The phone mockup "847 saves" is hardcoded in the skill type line (wireframe value). Should pull real count from props or Supabase, same as publishedCount in LandingPage.

🤖 Generated with Claude Code + /wireframe-to-react skill