Purpose
Three-phase continuity transition between a brand wordmark and a product UI screen, using a continuity element (typically aurora-blob) as the visual bridge. Says "the brand becomes the product" without text.
Params
{
"phase_1_logo_dissolve": {
"duration_frames": 12,
"logo_element_id": "you-logo",
"target_shape": "aurora-blob-expanded",
"easing": "bezier(0.4, 0, 0.2, 1)"
},
"phase_2_blob_hold": {
"duration_frames": 12,
"blob_scale": 1.4,
"blob_opacity_peak": 0.75
},
"phase_3_app_emerge": {
"duration_frames": 18,
"app_panel_id": "generated-app",
"scale_start": 0.92,
"scale_end": 1.00,
"opacity_start": 0,
"opacity_end": 1,
"easing": "bezier(0.4, 0, 0.2, 1)"
},
"total_duration_frames": 42 // ~1.4s
}
Behaviour
- Phase 1 (frames 0-12): logo opacity ramps to 0 while the aurora-blob expands to cover the logo's bbox.
- Phase 2 (frames 12-24): aurora blob holds at peak scale/opacity. Both logo and app-panel invisible.
- Phase 3 (frames 24-42): aurora-blob settles back to default state while app-panel scales in (0.92→1.0) with opacity fade-in (0→1).
The aurora is the connective tissue across all three phases — it never unmounts.
Style pack overrides
- SP-F (product-demo) — canonical use as the spot's opening beat.
Quality Checks
- Logo and app-panel are NEVER both visible (blob bridges them).
- Aurora-blob expands in phase 1 to cover logo bbox.
- Phase 3 app-panel emerges from blob's center.
- Total duration ≤ 2 seconds — this is a transition, not a scene.
Failure Modes
- Logo and app-panel overlap. Phase timing off; blob doesn't bridge.
- Aurora doesn't expand to cover logo. Scale target too small.
- App emerges before blob settles. Phase 3 starts before phase 2 completes.