hyperframes/skills/hyperframes-animation/blueprints/problem-mockup-overwhelm.md

id, role, duration_seconds, phases, visual_arc, uses_rules, element_roles, when_to_use, when_not_to_use, triggers

id	role	duration_seconds	phases	visual_arc	uses_rules	element_roles	when_to_use	when_not_to_use	triggers
problem-mockup-overwhelm	problem	4 6	4	mockups-appear → icons-scatter → morph-to-avatar → bubbles-overwhelm	card-morph-anchor sine-wave-loop svg-icon-enrichment	mockups icons morph_container avatar bubbles 3 product / platform mockups establishing the familiar context Platform / social icons scattered around mockups for density Center mockup that scales down + crossfades into the avatar Character that represents the viewer / user Task / problem text bubbles surrounding the avatar	Frame a problem by showing familiar complexity (too many platforms / tasks) Transition from "tools" to "person" — products → user experience Problem should feel physically overwhelming (surrounded by tasks)	Problem is abstract, can't be shown with mockups No character / avatar representation needed Scene should stay product-focused	too many platforms overwhelmed creator complex workflow surrounded by tasks

Problem · Mockup Overwhelm (HyperFrames)

This is a "familiar tools → person inside them → person crushed by them" arc: three product mockups assemble into something the viewer recognises, platform icons scatter in to amplify "lots of surface area," then the centre mockup collapses into the viewer's avatar and task bubbles close in from all sides. The emotional payoff is recognition followed by claustrophobia.

Single paused timeline, four phases. The non-trivial seam is Phase 3, where the rule's width/height morph is forbidden by HF and we substitute a six-tween orchestration that reads as one event.

When to Use

• Problem-framing scene where the viewer must first see "too many tools" before seeing "the person stuck with them"
• Narrative needs a literal swap of subject (product → user) rather than a cut
• The closing beat should feel surrounded, not zoomed-into — avatar stays put while bubbles invade

Orchestration

Four phases, three rules referenced, and one inline pattern (radial bubble entry). The rule selection here is more about substitution than application — the canonical morph rule asks for width/height tweens that HF forbids, so we re-cast it through GSAP transform aliases.

• Phase 1 — mockups assemble: inline staggered back.out spring-ins on .mockup-left / .mockup-center / .mockup-right, plus a finite sine-wave-loop per mockup. We use the rule's onUpdate multiplicative form because each mockup's resting scale is set during entry (centre = 1, sides ≈ 0.86); float must compose onto that resting scale, never overwrite it (fromTo + yoyo would re-tween to its from state on every cycle and undo the entry). Amplitudes stay near the low end of the rule's range — these are background context, not headlines.
• Phase 2 — icons scatter: use svg-icon-enrichment only for its DOM contract (icons as targets with scale / opacity only, positions pre-baked in CSS). We are not using any of the rule's internal-parts patterns (rotation / pulse / dash-flow) — the icons here are platform logos used as density markers, not animated dials. The only motion is a staggered back.out entry plus the same multiplicative float as the mockups. See "Phase 2 seam" for the icon-enrichment gap.
• Phase 3 — morph to avatar: use card-morph-anchor in a non-uniform transform-alias substitution of its canonical width/height tween. The rule's "old content fades out, container morphs, new content fades in, optional final fade reveals next-shot-anchor" pattern is intact end-to-end — but every dimension change becomes scaleX/scaleY on the container and the anchor is the avatar layer rendered underneath. See "Phase 3 seam" for the derivation and the aspect-mismatch trap.
• Phase 4 — bubbles overwhelm: inline radial layout (no rule — a tight one-off pattern). BUBBLE_TASKS array of {label, angle} pairs, positions baked once at script load via Math.cos/sin, then a staggered back.out entry on .task-bubble. Each bubble gets the same multiplicative-float idle as the mockups. The radial geometry is unique to this scene and not worth ruling.

Phase Timing

Boundaries in seconds. Design pass: pick MORPH_DUR, then walk backwards to MOCKUPS_APPEAR and forwards to BUBBLES_START from the gap rules below.

Phase	Start ≥	Internal duration	Notes
1	0 (or end of previous scene)	MOCKUP_ENTRY_DUR + 2·STAGGER	Three spring-ins, last one anchors phase end
2	phase1_end + ~0.1s	ICON_ENTRY_DUR + (n−1)·ICON_STAGGER	Tight stagger; cluster reads as one event
3	phase2_end + ICON_READ_TIME (~0.6–1.0s dwell)	MORPH_DUR	Dwell required so density registers before it dissolves
4	MORPH_TRIGGER + BUBBLES_START_FRAC · MORPH_DUR	bubble stagger + dwell to end	Must start after avatar layer is fading in

The ~0.1s gap between Phase 1 and 2 lets the last mockup's back.out overshoot rebound before icons start popping; without it the cluster reads as still-arriving when the icons land on top. The ICON_READ_TIME dwell (Phase 2 → 3) is the most important pacing knob in the scene: too short and "lots of platforms" never lands as a thought; too long and the morph feels like a separate scene. 0.6–1.0s is the comfortable range. The Phase 4 start is fractional against MORPH_DUR (not a separate constant) so that as you tune MORPH_DUR the bubbles automatically slide with it — see Phase 3 seam for why BUBBLES_START_FRAC > AVATAR_LAYER_IN_FRAC is mandatory.

Initial DOM Nesting

Two parallel layers, both kept in the DOM the entire scene; visibility is gated by opacity (seek can move time backward, conditional rendering would flicker):

#root
  .bg                                ← static
  .mockup-cluster                    ← Phase 1–3 (fades during morph tail)
    .mockup-left  / .mockup-right    ← Phase 1 entry + float
    .mockup-center                   ← Phase 1 entry + Phase 3 morph subject
      .mockup-center-content         ← fades during first ~40% of morph
    .platform-icon (× n)             ← Phase 2 entry + concurrent exit
  .avatar-with-bubbles               ← starts opacity:0, fades in mid-morph
    .avatar                          ← Phase 3 pop target
    .task-bubble (× 6–8)             ← Phase 4 radial entry (built at script load)
  .vignette                          ← static

.mockup-center carries z-index above .avatar (e.g. 25 > 20). The avatar only becomes visible when .mockup-center opacity reaches 0 — this is what sells the "one object morphing" illusion. Use DOM order + opacity, never z-index tween (see card-morph-anchor's "don't snap z-index mid-fade").

Phase 2 Seam: Why svg-icon-enrichment Without Internal Parts

The rule assumes the icon has named internal children (clock-hand, rec-dot, data-flow) that get the animation. Here the platform icons are flat logos — there's nothing inside to rotate or pulse. We reference the rule because its DOM/contract (each icon as a separate selector target, positions pre-baked as CSS left/top, GSAP touches only scale / opacity / x / y) is exactly what we need. The four signature motion patterns in the rule are not applied. Flag for later: the rule could grow a "decorative cluster" variation that documents this no-internal-parts usage; today, an agent reading the rule alone wouldn't know it covers this case.

The source blueprint also references a shared-scene-ticker-for-multiple-sine-motions subsection on the rule — that subsection doesn't exist. For 6–10 floating icons + 8 floating bubbles + avatar breath, the right collapse is a single phase: { p: 0 } tween whose onUpdate writes sin(p + offset_i) into each element. Doing it as N independent yoyos works but spends N tweens for what is one clock.

Phase 3 Seam: Aspect-Mismatched Morph + Concurrent Exits + Avatar Handoff

This is the core of the scene and the section worth re-reading. card-morph-anchor tweens width / height / borderRadius / background in lockstep, then crossfades old/new content, then optionally fades the container to reveal .next-shot-anchor. Two things change in this blueprint:

1. The width/height tween becomes a scaleX/scaleY tween. HyperFrames forbids tweening width / height (they cause layout reflows and are off the allowlist). The substitution:

MORPH_END_SCALE_X = AVATAR_DIAMETER / MOCKUP_CENTER_W
MORPH_END_SCALE_Y = AVATAR_DIAMETER / MOCKUP_CENTER_H

The most common mistake is to derive a single uniform MORPH_END_SCALE = AVATAR_DIAMETER / MOCKUP_CENTER_W and apply it to both axes. That only works if mockup and avatar share an aspect ratio — and they almost never do (mockup is a phone, ~9:16; avatar is a circle, 1:1). Uniform scale on a phone aspect → the "circle" stays an ellipse at morph end and the handoff to the round avatar pops. Use independent scaleX / scaleY, derived from each axis independently.

borderRadius tween is paint-only and allowed; tween to "50%" so the corner-rounding tracks the actual post-scale dimensions rather than baking a pixel value that drifts when MOCKUP_CENTER_W changes.

2. The content fade-out and final-fade phases of the rule are augmented with concurrent sibling exits. The rule fades only .content-old during the first portion of the morph; here we fade .mockup-center-content and .mockup-left and .mockup-right and .platform-icon in the same window. These are three separate tl.to(...) calls at the same MORPH_TRIGGER position, sharing power2.out. The constraint is that exits run concurrent with the morph, not before (would feel premature, like the scene aborted) and not after (would feel detached, like an outro layered on the climax). EXIT_DUR_FRAC of 0.5 (so exits complete halfway through the morph, leaving the morph container alone for its final shape and handoff tail) reads as a clean dissolve.

3. The .next-shot-anchor of the rule is .avatar-with-bubbles, gated by a fractional handoff. Three derived constants must satisfy:

AVATAR_POP_DUR  < (1 − HANDOFF_TAIL_FRAC) · MORPH_DUR      // avatar at full scale before the handoff fade fires
AVATAR_LAYER_IN_FRAC ≈ 0.5                                  // layer opacity starts halfway through morph
BUBBLES_START_FRAC   > AVATAR_LAYER_IN_FRAC                 // avatar visible before bubbles arrive

The avatar pops (scale: 0 → 1 with back.out) starting at MORPH_TRIGGER — the same instant as the morph, not after. By the time .mockup-center reaches opacity: 0 at MORPH_TRIGGER + (1 − HANDOFF_TAIL_FRAC) · MORPH_DUR, the avatar is already at full scale underneath. Reversing this order (avatar pop after mockup fade) introduces a single frame where neither object is visible — reads as a flicker.

The rule's "❗ next-shot-anchor must be pixel-identical" caveat applies: .avatar's final width × height (a circle of AVATAR_DIAMETER) must match the morph container's visually scaled end size (MOCKUP_CENTER_W · MORPH_END_SCALE_X × MOCKUP_CENTER_H · MORPH_END_SCALE_Y). Because both axes are derived from AVATAR_DIAMETER, this is automatic if you keep both scaleX and scaleY derived — bake them as const rather than recomputing per frame.

Key Values to Choose (Not Already in the Rules)

Standard parameters (OLD_FADE_FRAC, FINAL_FADE_FRAC, SCALE_AMP, Y_AMP_PX, BOUNCE_FACTOR, etc.) are in the referenced rules; pick from their ranges. Only listing what this blueprint introduces:

• AVATAR_DIAMETER: 180–280 px. Must match .avatar's actual CSS dimensions exactly (see Phase 3 seam — any mismatch pops at handoff).
• MOCKUP_CENTER_W / MOCKUP_CENTER_H: 250–360 px wide, phone or card aspect. Constraint: AVATAR_DIAMETER / MOCKUP_CENTER_W and AVATAR_DIAMETER / MOCKUP_CENTER_H should both land in 0.3–0.8; outside that range the morph reads as either a snap or a crawl.
• ICON_READ_TIME: 0.6–1.0s dwell between icon entries settling and MORPH_TRIGGER. Below 0.6s "lots of platforms" doesn't register; above 1.0s the scene drifts.
• BUBBLE_TASKS: 6–8 entries, each {label, angle}. Angles arranged with visual closure around the centre (cardinal + ordinal directions). Labels 3–6 words — these are labels, not sentences.
• BUBBLE_RADIUS: distance from canvas centre to each bubble centre. Constraint: all bubbles must clear the safe area (≥ 60 px from canvas edges) at maximum scale; bubble width must not exceed the radial arc gap to neighbours, or adjacent bubbles overlap.
• BUBBLES_START_FRAC: 0.5–0.7. Must be > AVATAR_LAYER_IN_FRAC so the avatar is already visible when bubbles arrive (see Phase 3 seam).
• EXIT_DUR_FRAC: 0.4–0.6. Below 0.4 mockups/icons vanish before the morph commits; above 0.6 they linger into the avatar reveal.

Critical Constraints (ordered by failure frequency)

• scaleX and scaleY derived independently from AVATAR_DIAMETER (see Phase 3 seam). Single uniform scale on aspect-mismatched morphs is the highest-traffic failure mode — the final shape is an ellipse, and the round avatar handoff pops.
• .mockup-center z-index > .avatar z-index, gated by opacity (see DOM nesting). Reversing order or snapping z-index mid-tween produces a visible flicker.
• Concurrent exits, not sequential: non-centre mockups and platform icons exit during the morph at the same MORPH_TRIGGER, sharing duration ≈ EXIT_DUR_FRAC · MORPH_DUR. Sequential exits read as detached outros.
• Avatar pop fires at MORPH_TRIGGER, not after: must reach full scale before the morph container's handoff fade. Constraint: AVATAR_POP_DUR < (1 − HANDOFF_TAIL_FRAC) · MORPH_DUR.
• BUBBLES_START_FRAC > AVATAR_LAYER_IN_FRAC: bubbles must not arrive before the avatar is at least fading in, or they appear to orbit nothing.
• Bake every derived constant: MORPH_END_SCALE_X, MORPH_END_SCALE_Y, bubble x / y positions, BUBBLES_START. Per-frame recomputation drifts and Math.random / Date.now / performance.now are forbidden anyway.
• 6–8 bubbles: fewer fails to convey overwhelm; more breaks the radial composition into clutter.
• Tween only allowlisted transforms (x / y / scale / scaleX / scaleY / rotation / opacity) + borderRadius (paint-only) + background (paint-only). Never width / height / left / top.
• Idle floats are multiplicative onUpdate on the mockups, icons, avatar, and bubbles — not fromTo + yoyo (would re-tween entry states on every cycle). For ≥ 8 simultaneous floats, consolidate into one shared phase tween.
• borderRadius: "50%" rather than a baked pixel value — keeps the final corner-rounding aspect-correct against whatever post-scale dimensions land.

Spring → Ease Selection

Four entry feels, one morph driver, one continuous loop. The full mapping lives in hyperframes-animation/SKILL.md; this blueprint's choices:

• Phase 1 mockup entries → back.out(ENTRY_BOUNCE) (subtle overshoot; 1.2–1.6)
• Phase 2 icon entries → back.out(ICON_BOUNCE) (snappier; 1.4–1.8 so the cluster reads as alive)
• Phase 3 morph driver → power3.out (no overshoot — avoid back.out / elastic.out here; per card-morph-anchor, overshoot fights the dimensional change)
• Phase 3 avatar pop → back.out(AVATAR_BOUNCE) (1.2–1.6, slightly firmer than mockups so it reads as a new subject)
• Phase 4 bubble entries → back.out(BUBBLE_BOUNCE) (1.2–1.6)
• All idle floats → Math.sin via onUpdate (phase tween ease: "none" — see sine-wave-loop)

Golden Sample

• problem-mockup-overwhelm.html — runnable 6-second composition. Three phone-shell mockups, nine scattered platform icons, aspect-mismatched morph (MORPH_END_SCALE_X ≈ 0.69, MORPH_END_SCALE_Y ≈ 0.34) into a cyan-teal avatar circle, eight task bubbles in radial layout. Single paused GSAP timeline; one shared phase tween drives every float. Open it, change AVATAR_DIAMETER or MOCKUP_CENTER_W, and watch the morph re-derive — faster than building from scratch.