Setting the file. One moment. Pip · Talking Head Recut · heygen-com/hyperframes · Skills Docs34.19
Gsap Min
(opens in a new tab)
references/layouts/pip.html
HTML·143 lines·5 KB
}
16
17 GSAP target for #video-wrap (corner pill — pick one per source aspect):
18
19 landscape (1920×1080), 16:9 source video:
20 tl.set('#video-wrap', { className: 'video-wrapper pip-pill' }, START_SEC);
21 tl.to('#video-wrap',
22 { left: 1432, top: 28, width: 460, height: 258,
23 duration: 0.6, ease: 'power2.inOut' }, START_SEC);
24
25 landscape, 9:16 source video (vertical phone footage):
26 tl.to('#video-wrap',
27 { left: 1644, top: 28, width: 248, height: 440, ... }, START_SEC);
28
29 portrait (1080×1920), 16:9 source video:
30 tl.to('#video-wrap',
31 { left: 690, top: 28, width: 360, height: 203, ... }, START_SEC);
32
33 portrait, 9:16 source video:
34 tl.to('#video-wrap',
35 { left: 738, top: 28, width: 312, height: 555, ... }, START_SEC);
36
37 4:5 (1080×1350) — y values × 0.703, w/h × 0.703:
38 landscape-source: { left: 690, top: 28, width: 360, height: 203 } → keep, fits
39 portrait-source : { left: 738, top: 28, width: 312, height: 390 }
40
41 Recommended .pip-pill CSS (add to composition <style>):
42 .video-wrapper.pip-pill {
43 border-radius: 14px;
44 box-shadow:
45 0 24px 60px -20px rgba(0,0,0,.45),
46 0 0 0 4px rgba(255,255,255,.7),
47 0 0 0 5px rgba(0,0,0,.18);
48 overflow: hidden;
49 }
50
51 Notes
52 - Card-first composition for content-heavy talks.
53 - Default corner is top-right (above); for bottom-right flip y to
54 canvasH - videoH - 28 (e.g. portrait 16:9 source bottom-right:
55 { left: 690, top: 1689, width: 360, height: 203 }).
56 - DOM order: card-host appears BEFORE video-wrapper for the pip window
57 so the video pill paints on top of the card. If you keep them in
58 natural DOM order (video first, card second), use z-index on the
59 card-host to push it behind.
60-->
61<!doctype html>
62<html lang="zh-CN">
63 <head>
64 <meta charset="utf-8" />
65 <title>layout · pip (card hero + video pill)</title>
66 <style>
67 html,
68 body {
69 margin: 0;
70 padding: 0;
71 background: #0a0c12;
72 color: #fff;
73 font-family: ui-sans-serif, system-ui, sans-serif;
74 }
75 .stage {
76 position: relative;
77 width: 1920px;
78 height: 1080px;
79 transform-origin: top left;
80 transform: scale(0.5);
81 background: #0a0c12;
82 overflow: hidden;
83 }
84 .region {
85 position: absolute;
86 box-sizing: border-box;
87 display: flex;
88 align-items: center;
89 justify-content: center;
90 font:
91 600 24px/1.3 ui-monospace,
92 monospace;
93 letter-spacing: 0.12em;
94 }
95 .card-region {
96 left: 0;
97 top: 0;
98 width: 1920px;
99 height: 1080px;
100 background: #f1ead8;
101 color: #1a1d2b;
102 }
103 .video-region {
104 left: 1432px;
105 top: 28px;
106 width: 460px;
107 height: 258px;
108 background: #1a1f2e;
109 color: #fff;
110 border-radius: 14px;
111 box-shadow:
112 0 24px 60px -20px rgba(0, 0, 0, 0.45),
113 0 0 0 4px rgba(255, 255, 255, 0.7),
114 0 0 0 5px rgba(0, 0, 0, 0.18);
115 background-image: repeating-linear-gradient(
116 45deg,
117 transparent 0 12px,
118 rgba(255, 255, 255, 0.05) 12px 13px
119 );
120 }
121 .label {
122 padding: 12px 18px;
123 border: 1.5px solid currentColor;
124 border-radius: 4px;
125 }
126 .v-label {
127 font:
128 600 14px/1 ui-monospace,
129 monospace;
130 letter-spacing: 0.14em;
131 padding: 6px 10px;
132 border: 1px solid currentColor;
133 border-radius: 3px;
134 }
135 </style>
136 </head>
137 <body>
138 <div class="stage">
139 <div class="region card-region"><span class="label">CARD · 1920×1080 (full-bleed)</span></div>
140 <div class="region video-region"><span class="v-label">VIDEO · 460×258 PIP</span></div>
141 </div>
142 </body>
143</html>