outros
outros
multi-style — ONE metal iPhone MATCH-MOVES through four differently-styled animated key-art scenes (fullscreen 1920x1080, ~31s; textures render natively at 1920x1080 — the original portrait layout sits uniform-scaled x0.75 as a centered 810px column that overlays the old portrait frustum, so texture content stays aligned with the 3D cast; only full-bleed fills/bands and wash glows stretch edge-to-edge). No scene carries a companion phone any more, so every transition carries exactly the one matched phone:
Read the rig's notes
1. appforge-keyart — dark navy "Build the Future. Today." with glass-chip fan (phone upper-centre)
2. codeflow-promo — blurred office-desk world, floating code cards (phone centre, CodeFlow app)
3. phone-spin-features — dark teal/purple "Flux" automation app, four feature chips around the
phone
4. build-your-dream — silver studio "Build Your Dream App" (phone rolled clockwise, chat skeleton)
Five scenes were LIFTED OUT and reskinned as the outros of the finished reels
under promos/final/ — meta-connect → analytical-hub, connect-keyart → bold-saas,
motus-keyart → travel-calm, social-media-app → formly, an-app-made-for-locals →
gold. codeflow-promo went back to transition="match-move" when it lost its
unmatched neighbour, so all four scenes now chain by the matched phone.
Match-move recipe (per firefit-promo):
• every scene: IDENTICAL camera (fov40 z=12) + the SAME light ids (amb/key/fill/rim/acc/acc2)
so lighting LERPS across each gap instead of snapping
• phone = <node match="phone" kind="layer" type="group"> rig with the SCALE ON THE RIG,
asset child (iphone_straight.glb) at scale 1 — static pose per scene, the 0.8s gap
morph does all the travel; neighbour rig scales kept DISTINCT (1.710/1.752/1.738/1.880)
• the phone body uses the SAME factory GLB metal finish in every scene (no chalky
band overrides); only the SCREEN ui changes (texture snaps at the cut — inherent)
• NO large non-matched element may fade in over the flying phone (veil trap): every
backdrop plus the appforge chips/props carry authored <opacity> keyframes — hold 0
through the gap, wave-fade in AFTER the cut, fade out DURING the exit gap. Every
scene shares ONE dark void <background> (#0d0f1c) so each transition reads as
"poster dissolves → phone flies through the void → next world materialises".
• per elegant-animation-preference: one motion language (soft rise+fade, easeOutCubic,
shared-timing waves), no rotation keyframes on the posed phone.
• SCREEN UI animates OUT before each boundary and IN after each cut: every screen
item carries an entrance wave (fade/enter, starting after the cut at scene-local
0.8) plus an `exit` track (soft dy=-12 drift + fade; exit tracks stay inert until
their window so one item can both fly in and out) completing just before the gap,
so the phone always flies with a BLANK tinted glass screen and the next UI draws
in on arrival. Base full-screen fill cards stay static (the glass tint in flight).
• PERSISTENT MATCH-MOVED CAST in every scene (no keyframes — the gap morph is
their only motion): a matched <icon id="brand-mark" match="brand"> living at
each poster's logo slot whose OUTLINE POINT-MORPHS across every gap (bolt →
terminal → bolt → code brackets, colour crossfading across the gap; the icon
sugar needs stage_width/height + plane_width/height set to the frame — its
defaults are 1280x720 on an 11x6.2 plane, which put px coords off-screen);
a match="halo" glow-sprite aura behind the phone (pulse="0", brand colour per
scene — additive sprites are the one textured material whose colour morphs);
and three match="orb-a/b/c" pearl spheres recoloured/re-composed per scene
(untextured standard → colour + position morph). The baked logo glyphs were
REMOVED from the backdrop/front-text textures so the world icon replaces them.
Timing: gaps are APPENDED after each scene's duration (total 31.05s); the incoming
scene's local clock starts at GAP START, so the cut lands at local 0.8 — all
entrance animation starts are authored ≥ 0.8.
Geometry: backdrop plane z=-7 matches the 16:9 frustum exactly (24.592 x 13.833);
front text planes z=3 (11.648 x 6.552).
Preview: /packages/runtime/index.html?project=promos/primitives/multi-style/multi-style.promo- Topic
- scenes
- Scenes
- 4
- Kind
- reference rig
//
multi-style — ONE metal iPhone MATCH-MOVES through four differently-styled
animated key-art scenes (fullscreen 1920x1080, ~31s; textures render natively
at 1920x1080 — the original portrait layout sits uniform-scaled x0.75 as a
centered 810px column that overlays the old portrait frustum, so texture
content stays aligned with the 3D cast; only full-bleed fills/bands and wash
glows stretch edge-to-edge). No scene carries a companion phone any more, so
every transition carries exactly the one matched phone:
1. appforge-keyart — dark navy "Build the Future. Today." with glass-chip fan (phone upper-centre)
2. codeflow-promo — blurred office-desk world, floating code cards (phone centre, CodeFlow app)
3. phone-spin-features — dark teal/purple "Flux" automation app, four feature chips around the
phone
4. build-your-dream — silver studio "Build Your Dream App" (phone rolled clockwise, chat skeleton)
Five scenes were LIFTED OUT and reskinned as the outros of the finished reels
under promos/final/ — meta-connect → analytical-hub, connect-keyart → bold-saas,
motus-keyart → travel-calm, social-media-app → formly, an-app-made-for-locals →
gold. codeflow-promo went back to transition="match-move" when it lost its
unmatched neighbour, so all four scenes now chain by the matched phone.
Match-move recipe (per firefit-promo):
• every scene: IDENTICAL camera (fov40 z=12) + the SAME light ids (amb/key/fill/rim/acc/acc2)
so lighting LERPS across each gap instead of snapping
• phone = <node match="phone" kind="layer" type="group"> rig with the SCALE ON THE RIG,
asset child (iphone_straight.glb) at scale 1 — static pose per scene, the 0.8s gap
morph does all the travel; neighbour rig scales kept DISTINCT (1.710/1.752/1.738/1.880)
• the phone body uses the SAME factory GLB metal finish in every scene (no chalky
band overrides); only the SCREEN ui changes (texture snaps at the cut — inherent)
• NO large non-matched element may fade in over the flying phone (veil trap): every
backdrop plus the appforge chips/props carry authored <opacity> keyframes — hold 0
through the gap, wave-fade in AFTER the cut, fade out DURING the exit gap. Every
scene shares ONE dark void <background> (#0d0f1c) so each transition reads as
"poster dissolves → phone flies through the void → next world materialises".
• per elegant-animation-preference: one motion language (soft rise+fade, easeOutCubic,
shared-timing waves), no rotation keyframes on the posed phone.
• SCREEN UI animates OUT before each boundary and IN after each cut: every screen
item carries an entrance wave (fade/enter, starting after the cut at scene-local
0.8) plus an `exit` track (soft dy=-12 drift + fade; exit tracks stay inert until
their window so one item can both fly in and out) completing just before the gap,
so the phone always flies with a BLANK tinted glass screen and the next UI draws
in on arrival. Base full-screen fill cards stay static (the glass tint in flight).
• PERSISTENT MATCH-MOVED CAST in every scene (no keyframes — the gap morph is
their only motion): a matched <icon id="brand-mark" match="brand"> living at
each poster's logo slot whose OUTLINE POINT-MORPHS across every gap (bolt →
terminal → bolt → code brackets, colour crossfading across the gap; the icon
sugar needs stage_width/height + plane_width/height set to the frame — its
defaults are 1280x720 on an 11x6.2 plane, which put px coords off-screen);
a match="halo" glow-sprite aura behind the phone (pulse="0", brand colour per
scene — additive sprites are the one textured material whose colour morphs);
and three match="orb-a/b/c" pearl spheres recoloured/re-composed per scene
(untextured standard → colour + position morph). Th