a14-ui-panel-float

name	A14-ui-panel-float
description	motion-graphic scene archetype — realistic app UI mockup drifting on a fake Z-axis with subtle 3D tilt, blur halo, and parallax. canonical base44-style product reveal. composes ui-panel-float-z + aurora-blob-continuity backdrop + optional sticker-chip-pop labels. renderer = hyperframe-gsap for realistic depth, OR remotion.

A14 — UI panel float

Composes

• ui-panel-float-z (the Z-axis drift + tilt + blur halo)
• aurora-blob-continuity (renders behind, pack-required)
• Optional sticker-chip-pop for callout labels around the panel

Renderer

hyperframe-gsap preferred — CSS 3D transforms and backdrop-filter give better depth than Remotion's pure flat compositing.

Layout

canvas: 1080x1920 (or pack-specified)

panel_zone:
  anchor: center
  origin: { x: canvas_w/2, y: canvas_h/2 }
  width: 720-900px (UI is rendered at near-product fidelity)
  border_radius: 24
  shadow:
    offset_y_px: 32
    blur_px: 64
    opacity: 0.12
  tilt_deg: -3                           # subtle Y-axis tilt
  blur_halo_px: 4                        # outline glow

aurora_layer:
  behind panel
  diameter: 720
  color: pack.transitions.default_continuity_element.color
  blur_px: 80

callout_chips:
  optional
  count: 0-3
  positions: relative-to-panel anchors
  tier: 2

Choreography

phase_1_aurora_morph_into_scene:
  start_frame: 0
  effect: aurora-blob-continuity
  morph_from_prior: 24                   # carries over from previous scene's aurora

phase_2_panel_enter:
  start_frame: 6                          # aurora is established
  effect: ui-panel-float-z
  scale_start: 0.96
  scale_end: 1.00
  opacity_start: 0
  opacity_end: 1
  duration_frames: 24
  easing: bezier(0.4, 0, 0.2, 1)

phase_3_parallax_drift:
  start_frame: 30                        # after panel settles
  effect: ui-panel-float-z (continuous)
  amplitude_px: 12
  period_seconds: 6

phase_4_callouts:                         # optional tier-2
  start_frame: 36
  effect: sticker-chip-pop per chip
  stagger_frames: 6


     
                       

Style pack compatibility

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

This is THE SP-F archetype. UI panels don't fit any other pack's transition vocabulary.

Pack-specific overrides

SP-F (product-demo)

• Aurora always behind.
• UI rendered at real product fidelity (small type, real dashboards, real charts).
• Callout chips: light bg, ink text, optional small emoji.
• NO hard cuts — always aurora-morph between scenes.

Duration

duration_seconds: [3.0, 6.0]
default: 4.0

Long enough for viewer to read the UI mock.

Quality Checks

• UI panel has a non-zero Y-axis tilt (3D depth cue).
• Shadow + blur halo render — panel feels "above" the bg.
• Aurora-blob is BEHIND panel, never in front.
• Parallax drift is continuous after settle — never stops moving.
• UI type is legible (not microscopic, not over-sized).
• No hard cut on scene entry — aurora morphs into the new state.

Failure Modes

• Panel looks flat (no depth). Missing tilt or shadow. Add both.
• Aurora visible in front of panel. Z-index inverted.
• Panel pops in too fast. Use bezier easing, 24+ frame entry.
• UI type unreadable (too small or pixelated). Render UI at native resolution and scale-down with image-rendering: auto, not nearest-neighbor.