Setting the file. One moment.
Polaroid · 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/frames/ polaroid.html
HTML · 131 lines · 5 KB
15
16 How to apply in the composition
17 Replace the bare #video-wrap with a wrapper div that draws the polaroid
18 around it. The polaroid card has its own background + padding; the video
19 sits inside a sub-region.
20
21 HTML pattern (use absolute positioning to fit the layout's video bounds):
22 <div class="frame-deco frame-deco--polaroid"
23 style="left:240px; top:140px; width:1440px; height:990px;">
24 <div class="polaroid-card">
25 <div class="polaroid-photo">
26 <!-- the actual #video-wrap element, sized to fill -->
27 < div class = "video-wrapper" id = "video-wrap" >
28 < video src = "input-video.mp4" ... ></ video >
29 </ div >
30 </ div >
31 < div class = "polaroid-caption" >speaker · 2026</ div >
32 </ div >
33 < div class = "washi" ></ div >
34 </ div >
35
36 The video bounds in storyboard.json should be the OUTER polaroid bounds.
37 The CSS inset values below carve out the inner photo area.
38
39 Suggested CSS
40 .frame-deco--polaroid { position: absolute; }
41 .polaroid-card {
42 position: absolute; inset: 24px;
43 background: #fefefe; padding: 14px 14px 64px;
44 box-shadow: 0 28px 60px -18px rgba(0,0,0,.55),
45 0 4px 12px rgba(0,0,0,.12);
46 box-sizing: border-box;
47 }
48 .polaroid-photo {
49 position: relative; width: 100%; height: calc(100% - 50px);
50 overflow: hidden; background: #000;
51 }
52 .polaroid-photo .video-wrapper {
53 position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0;
54 }
55 .polaroid-caption {
56 position: absolute; bottom: 18px; left: 0; right: 0;
57 text-align: center;
58 font: 700 32px/1 "Caveat", ui-serif, cursive;
59 color: #1d1c1a;
60 }
61 .washi {
62 position: absolute; top: 12px; left: 20%;
63 width: 120px; height: 28px;
64 background: rgba(180,210,235,.85);
65 background-image: repeating-linear-gradient(90deg,
66 transparent 0 6px, rgba(255,255,255,.3) 6px 7px);
67 box-shadow: 0 3px 8px rgba(0,0,0,.15);
68 }
69 -->
70 <! doctype html >
71 < html lang = "zh-CN" >
72 < head >
73 < meta charset = "utf-8" />
74 < title >frame · polaroid (white photo frame + caveat label, no tilt)</ title >
75 < style >
76 html , body { margin : 0 ; padding : 0 ; background : #0a0c12 ; color : #fff ;
77 font-family : ui-sans-serif , system-ui , sans-serif ; }
78 .stage { position : relative ; width : 1920 px ; height : 1080 px ;
79 transform-origin : top left ; transform : scale ( 0.5 );
80 background : #0a0c12 ; overflow : hidden ; }
81 .frame-deco { position : absolute ; left : 240 px ; top : 70 px ; width : 1440 px ; height : 940 px ; }
82 .polaroid-card {
83 position : absolute ; inset : 24 px ;
84 background : #fefefe ; padding : 14 px 14 px 64 px ;
85 box-shadow : 0 28 px 60 px -18 px rgba ( 0 , 0 , 0 , .55 ), 0 4 px 12 px rgba ( 0 , 0 , 0 , .12 );
86 box-sizing : border-box ;
87 }
88 .polaroid-photo {
89 position : relative ; width : 100 % ; height : calc ( 100 % - 50 px );
90 overflow : hidden ; background : #1a1f2e ;
91 background-image : repeating-linear-gradient ( 45 deg ,
92 transparent 0 12 px , rgba ( 255 , 255 , 255 , .05 ) 12 px 13 px );
93 }
94 .v-label { position : absolute ; left : 24 px ; top : 24 px ;
95 padding : 8 px 14 px ; border : 1 px solid rgba ( 255 , 255 , 255 , .45 );
96 border-radius : 3 px ; color : rgba ( 255 , 255 , 255 , .7 );
97 font : 600 16 px / 1 ui-monospace , monospace ; letter-spacing : .14 em ; }
98 .polaroid-caption {
99 position : absolute ; bottom : 18 px ; left : 0 ; right : 0 ;
100 text-align : center ;
101 font : 700 32 px / 1 "Caveat" , ui-serif , cursive;
102 color : #1d1c1a ;
103 }
104 .washi {
105 position : absolute ; top : 12 px ; left : 20 % ;
106 width : 120 px ; height : 28 px ;
107 background : rgba ( 180 , 210 , 235 , .85 );
108 background-image : repeating-linear-gradient ( 90 deg ,
109 transparent 0 6 px , rgba ( 255 , 255 , 255 , .3 ) 6 px 7 px );
110 box-shadow : 0 3 px 8 px rgba ( 0 , 0 , 0 , .15 );
111 }
112 .note { position : absolute ; left : 240 px ; bottom : 18 px ; right : 240 px ;
113 text-align : center ; color : rgba ( 255 , 255 , 255 , .5 );
114 font : 14 px / 1.4 ui-monospace , monospace ; letter-spacing : .12 em ; }
115 </ style >
116 </ head >
117 < body >
118 < div class = "stage" >
119 < div class = "frame-deco" >
120 < div class = "polaroid-card" >
121 < div class = "polaroid-photo" >
122 < span class = "v-label" >VIDEO</ span >
123 </ div >
124 < div class = "polaroid-caption" >speaker · 2026</ div >
125 </ div >
126 < div class = "washi" ></ div >
127 </ div >
128 < div class = "note" >POLAROID — white frame, Caveat handwritten caption, blue washi tape on top. Upright (no tilt).</ div >
129 </ div >
130 </ body >
131 </ html >