Setting the file. One moment.
Split · Talking Head Recut · heygen-com/hyperframes · Skills Docs
Back to the top of the page 34.19
Gsap Min
(opens in a new tab)
references/layouts/ split.html
HTML · 121 lines · 4 KB
"accentIndex": 0,
16 "zone": "side-panel",
17 "contentHints": { "kicker": "...", "title": "...", "detail": "..." }
18 }
19
20 GSAP target for #video-wrap during this card (paste in <script>):
21 landscape (1920×1080):
22 tl.to('#video-wrap',
23 { left: 960, top: 0, width: 960, height: 1080,
24 duration: 0.6, ease: 'power2.inOut' }, START_SEC);
25
26 portrait (1080×1920) — flips to top/bottom:
27 tl.to('#video-wrap',
28 { left: 0, top: 960, width: 1080, height: 960,
29 duration: 0.6, ease: 'power2.inOut' }, START_SEC);
30
31 4:5 (1080×1350) — derive by ×0.703 on y/h:
32 tl.to('#video-wrap',
33 { left: 0, top: 675, width: 1080, height: 675,
34 duration: 0.6, ease: 'power2.inOut' }, START_SEC);
35
36 Notes
37 - Card-host (from card.zone="side-panel") covers half the canvas;
38 opaque card background is fine — it only paints its own half.
39 - Flip card/video sides: swap which side gets the speaker tween.
40 - With 14–18px page-level gap, set composition bg to deep color
41 (e.g. #0a0c12) so the gap reads as a clean separator.
42 -->
43 <! doctype html >
44 < html lang = "zh-CN" >
45 < head >
46 < meta charset = "utf-8" />
47 < title >layout · split (50/50)</ title >
48 < style >
49 html ,
50 body {
51 margin : 0 ;
52 padding : 0 ;
53 background : #0a0c12 ;
54 color : #fff ;
55 font-family : ui-sans-serif , system-ui , sans-serif ;
56 }
57 .stage {
58 position : relative ;
59 width : 1920 px ;
60 height : 1080 px ;
61 transform-origin : top left ;
62 transform : scale ( 0.5 );
63 background : #0a0c12 ;
64 overflow : hidden ;
65 }
66 .region {
67 position : absolute ;
68 box-sizing : border-box ;
69 display : flex ;
70 align-items : center ;
71 justify-content : center ;
72 font :
73 600 24 px / 1.3 ui-monospace ,
74 monospace ;
75 letter-spacing : 0.12 em ;
76 }
77 .card-region {
78 left : 18 px ;
79 top : 18 px ;
80 width : 942 px ;
81 height : 1044 px ;
82 background : #f1ead8 ;
83 color : #1a1d2b ;
84 }
85 .video-region {
86 left : 978 px ;
87 top : 18 px ;
88 width : 924 px ;
89 height : 1044 px ;
90 background : #1a1f2e ;
91 background-image : repeating-linear-gradient (
92 45 deg ,
93 transparent 0 12 px ,
94 rgba ( 255 , 255 , 255 , 0.05 ) 12 px 13 px
95 );
96 }
97 .label {
98 padding : 12 px 18 px ;
99 border : 1.5 px solid currentColor ;
100 border-radius : 4 px ;
101 }
102 .meta {
103 position : absolute ;
104 left : 18 px ;
105 top : -36 px ;
106 font :
107 12 px / 1 ui-monospace ,
108 monospace ;
109 letter-spacing : 0.18 em ;
110 color : #888 ;
111 }
112 </ style >
113 </ head >
114 < body >
115 < div class = "stage" >
116 < div class = "meta" >SPLIT · 1920×1080 · card 960 | video 960</ div >
117 < div class = "region card-region" >< span class = "label" >CARD · 960×1080</ span ></ div >
118 < div class = "region video-region" >< span class = "label" >VIDEO · 960×1080</ span ></ div >
119 </ div >
120 </ body >
121 </ html >