Setting the file. One moment. 34.19
Gsap Min
(opens in a new tab)
references/layouts/overlay.html
HTML·164 lines·5 KB
"contentHints": { "kicker": "...", "title": "...", "detail": "..." }
16 }
17
18 GSAP target for #video-wrap (full-bleed — usually unchanged):
19 tl.to('#video-wrap',
20 { left: 0, top: 0, width: COMPOSITION_W, height: COMPOSITION_H,
21 duration: 0.6, ease: 'power2.inOut' }, START_SEC);
22 // Use defaults: landscape 1920×1080 / portrait 1080×1920 / 4:5 1080×1350
23
24 Recommended card-host inline style (since zone="video-overlay" gives
25 full-canvas bounds, you typically inset the actual card visual via CSS):
26
27 landscape glass card, mid-left:
28 .card[data-card-id="X"] .root {
29 position: absolute; left: 48px; top: 460px;
30 width: 660px; height: 540px;
31 background: rgba(15,16,22,.78);
32 backdrop-filter: blur(22px) saturate(140%);
33 -webkit-backdrop-filter: blur(22px) saturate(140%);
34 border-radius: 18px;
35 box-shadow: 0 30px 80px -20px rgba(0,0,0,.45);
36 }
37
38 portrait glass card, bottom band:
39 .card[data-card-id="X"] .root {
40 position: absolute; left: 24px; top: 1280px;
41 width: 1032px; height: 564px;
42 /* same glass treatment */
43 }
44
45 4:5 glass card (y/h × 0.703):
46 .card[data-card-id="X"] .root {
47 position: absolute; left: 24px; top: 900px;
48 width: 1032px; height: 397px;
49 /* same glass treatment */
50 }
51
52 Legibility gradient (insert as a third absolute layer between video
53 and card-host, in the composition's <div id="stage">):
54
55 <div class="legibility"></div>
56
57 .legibility {
58 position: absolute; inset: 0; pointer-events: none; z-index: 2;
59 background:
60 linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 22%,
61 transparent 50%, rgba(0,0,0,.72) 100%);
62 }
63
64 Notes
65 - Card root MUST be transparent or use rgba/glass background — see
66 Pattern A in SKILL.md "Transparent card backgrounds".
67 - Glass without legibility gradient = white-on-white catastrophe over
68 bright video. Always pair them.
69 - Glass on a light video also benefits from a darker base color (use
70 rgba(15,16,22,.78) over rgba(255,255,255,.10) when source has bright
71 daylight / interior shots).
72-->
73<!doctype html>
74<html lang="zh-CN">
75 <head>
76 <meta charset="utf-8" />
77 <title>layout · overlay (video full-bleed, glass card)</title>
78 <style>
79 html,
80 body {
81 margin: 0;
82 padding: 0;
83 background: #0a0c12;
84 color: #fff;
85 font-family: ui-sans-serif, system-ui, sans-serif;
86 }
87 .stage {
88 position: relative;
89 width: 1920px;
90 height: 1080px;
91 transform-origin: top left;
92 transform: scale(0.5);
93 background: #0a0c12;
94 overflow: hidden;
95 }
96 .video-region {
97 position: absolute;
98 left: 0;
99 top: 0;
100 width: 1920px;
101 height: 1080px;
102 background: #1a1f2e;
103 background-image: repeating-linear-gradient(
104 45deg,
105 transparent 0 12px,
106 rgba(255, 255, 255, 0.05) 12px 13px
107 );
108 }
109 .gradient {
110 position: absolute;
111 inset: 0;
112 pointer-events: none;
113 background:
114 linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, transparent 35%),
115 linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
116 }
117 .card-region {
118 position: absolute;
119 left: 48px;
120 top: 460px;
121 width: 660px;
122 height: 540px;
123 background: rgba(255, 255, 255, 0.1);
124 backdrop-filter: blur(18px) saturate(140%);
125 -webkit-backdrop-filter: blur(18px) saturate(140%);
126 border-radius: 18px;
127 box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
128 display: flex;
129 align-items: center;
130 justify-content: center;
131 color: #fff;
132 font:
133 600 24px/1.3 ui-monospace,
134 monospace;
135 letter-spacing: 0.12em;
136 }
137 .label {
138 padding: 12px 18px;
139 border: 1.5px solid rgba(255, 255, 255, 0.7);
140 border-radius: 4px;
141 }
142 .v-label {
143 position: absolute;
144 left: 28px;
145 top: 28px;
146 color: rgba(255, 255, 255, 0.55);
147 padding: 8px 14px;
148 border: 1px solid rgba(255, 255, 255, 0.3);
149 border-radius: 3px;
150 font:
151 600 16px/1 ui-monospace,
152 monospace;
153 letter-spacing: 0.14em;
154 }
155 </style>
156 </head>
157 <body>
158 <div class="stage">
159 <div class="video-region"><span class="v-label">VIDEO · 1920×1080 (full-bleed)</span></div>
160 <div class="gradient"></div>
161 <div class="card-region"><span class="label">CARD · 660×540 glass</span></div>
162 </div>
163 </body>
164</html>