a11-stacked-mockup-peek-through

name	A11-stacked-mockup-peek-through
description	motion-graphic scene archetype — multiple mockup cards stacked vertically peeking above and below a centered hero headline. the headline obscures the middle of the stack so cards "peek through" the type. canonical to size-assets / product-grid scenes. composes mask-wipe-through-letters + pop-in on the cards.

A11 — stacked-mockup peek-through

Composes

• mask-wipe-through-letters (the letterform-as-alpha-mask effect)
• pop-in on the stacked mockup cards behind
• Optional pop-in on a sub-label

Layout

canvas: 1080x1920 (or pack-specified)

stacked_cards_zone:
  position: vertical column behind the hero
  origin: { x: canvas_w/2, y: canvas_h/2 }
  card_size: 480 × 240                   # mockup cards
  vertical_stack_gap: 24
  card_count: 3-5
  z_index: 1                              # behind the hero word

hero_word_zone:
  position: center
  origin: { x: canvas_w/2, y: canvas_h/2 }
  font_size: ~display-scale-bumped       # word is HUGE, fills middle band
  z_index: 2                              # in front of cards
  mask_mode: true                         # the word ALSO masks the cards behind it

The visual effect: cards stack vertically, and the hero word's outline is the cutout through which cards become visible in the middle band. Cards above and below the word are unmasked.

Choreography

phase_1_card_stack_appears:
  start_frame: 0
  effect: pop-in per card with stagger
  per_card_stagger_frames: 4

phase_2_hero_word_lands:
  start_frame: 12                        # after cards settle
  effect: pop-in or scale-bounce

phase_3_hold:
  start_frame: 30
  duration_frames: ≥ 40

Style pack compatibility

supported: [SP-A, SP-E, SP-F]
preferred_in: [SP-F]
incompatible: [SP-D]

Pack-specific overrides

SP-F (product-demo) — canonical

• Aurora-blob renders behind everything (still continuity device).
• Mockup cards are realistic product screens (UI dashboards, settings panels).
• Hero word is the product category name ("Mockups", "Music", "Text").

SP-A (marshmallow)

• Cards on cream bg.
• Hero word in display weight, ink color.
• Simpler — no aurora.

Duration

duration_seconds: [2.0, 3.5]
default: 2.5

Quality Checks

• Hero word's bbox overlaps the middle 2-3 cards in the stack.
• Cards above/below the word render fully (no clipping by word's bbox).
• Word-as-mask uses CSS mask-image or SVG mask, not z-index trickery.
• Card stagger is visible — cards don't all appear simultaneously.

Failure Modes

• Cards float in space (don't peek through). Mask is wrong. Use word's bounding box or SVG path as the mask source.
• Hero word looks like it's IN FRONT OF the cards, not cutout. Z-index confused. The word should mask the cards, not occlude them.
• Cards all appear at once. Per-card stagger isn't applied. Bump stagger to 4+ frames per card.