Setting the file. One moment.
Hairline · 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/ hairline.html
HTML · 171 lines · 6 KB
<div class="video-wrapper" id="video-wrap">
16 <video src="input-video.mp4" ...></video>
17 </div>
18 <div class="frame-deco frame-deco--hairline"
19 style="left:240px; top:140px; width:1440px; height:810px;
20 --frame-accent: #2557a7;">
21 <span class="tick tl"></span>
22 <span class="tick tr"></span>
23 <span class="tick bl"></span>
24 <span class="tick br"></span>
25 </div>
26
27 CSS (4 corners via explicit spans — preferred over ::before/::after
28 because pseudo-elements give you at most 2 corners cleanly):
29
30 .frame-deco { position: absolute; pointer-events: none; z-index: 3; }
31 .frame-deco--hairline {
32 box-shadow:
33 inset 0 0 0 2px var(--frame-accent),
34 inset 0 0 0 6px color-mix(in srgb, var(--frame-accent) 13%, transparent),
35 0 0 0 1px rgba(0,0,0,.1);
36 }
37 .frame-deco .tick { position: absolute; width: 24px; height: 24px; }
38 .frame-deco .tick.tl { top: -3px; left: -3px; border-top: 4px solid var(--frame-accent); border-left: 4px solid var(--frame-accent); }
39 .frame-deco .tick.tr { top: -3px; right: -3px; border-top: 4px solid var(--frame-accent); border-right: 4px solid var(--frame-accent); }
40 .frame-deco .tick.bl { bottom: -3px; left: -3px; border-bottom: 4px solid var(--frame-accent); border-left: 4px solid var(--frame-accent); }
41 .frame-deco .tick.br { bottom: -3px; right: -3px; border-bottom: 4px solid var(--frame-accent); border-right: 4px solid var(--frame-accent); }
42
43 When the layout changes mid-composition
44 Move + resize the frame-deco div together with #video-wrap using GSAP:
45 tl.to('#video-wrap, .frame-deco', { left:, top:, width:, height:, ... }, T);
46 Or fade out the deco entirely before transitioning to a clean PiP.
47 -->
48 <! doctype html >
49 < html lang = "zh-CN" >
50 < head >
51 < meta charset = "utf-8" />
52 < title >frame · hairline (double stroke + viewfinder ticks)</ title >
53 < style >
54 html ,
55 body {
56 margin : 0 ;
57 padding : 0 ;
58 background : #0a0c12 ;
59 color : #fff ;
60 font-family : ui-sans-serif , system-ui , sans-serif ;
61 }
62 .stage {
63 position : relative ;
64 width : 1920 px ;
65 height : 1080 px ;
66 transform-origin : top left ;
67 transform : scale ( 0.5 );
68 background : #0a0c12 ;
69 overflow : hidden ;
70 }
71 .video-wrap {
72 position : absolute ;
73 left : 240 px ;
74 top : 140 px ;
75 width : 1440 px ;
76 height : 810 px ;
77 background : #1a1f2e ;
78 background-image : repeating-linear-gradient (
79 45 deg ,
80 transparent 0 12 px ,
81 rgba ( 255 , 255 , 255 , 0.05 ) 12 px 13 px
82 );
83 }
84 .v-label {
85 position : absolute ;
86 left : 24 px ;
87 top : 24 px ;
88 padding : 8 px 14 px ;
89 border : 1 px solid rgba ( 255 , 255 , 255 , 0.45 );
90 border-radius : 3 px ;
91 color : rgba ( 255 , 255 , 255 , 0.7 );
92 font :
93 600 16 px / 1 ui-monospace ,
94 monospace ;
95 letter-spacing : 0.14 em ;
96 }
97 .frame-deco {
98 position : absolute ;
99 left : 240 px ;
100 top : 140 px ;
101 width : 1440 px ;
102 height : 810 px ;
103 pointer-events : none ;
104 z-index : 3 ;
105 --frame-accent : #2557a7 ;
106 box-shadow :
107 inset 0 0 0 2 px var ( --frame-accent ),
108 inset 0 0 0 6 px rgba ( 37 , 87 , 167 , 0.13 ),
109 0 0 0 1 px rgba ( 0 , 0 , 0 , 0.1 );
110 }
111 .tick {
112 position : absolute ;
113 width : 24 px ;
114 height : 24 px ;
115 }
116 .tick.tl {
117 top : -3 px ;
118 left : -3 px ;
119 border-top : 4 px solid var ( --frame-accent , #2557a7 );
120 border-left : 4 px solid var ( --frame-accent , #2557a7 );
121 }
122 .tick.tr {
123 top : -3 px ;
124 right : -3 px ;
125 border-top : 4 px solid var ( --frame-accent , #2557a7 );
126 border-right : 4 px solid var ( --frame-accent , #2557a7 );
127 }
128 .tick.bl {
129 bottom : -3 px ;
130 left : -3 px ;
131 border-bottom : 4 px solid var ( --frame-accent , #2557a7 );
132 border-left : 4 px solid var ( --frame-accent , #2557a7 );
133 }
134 .tick.br {
135 bottom : -3 px ;
136 right : -3 px ;
137 border-bottom : 4 px solid var ( --frame-accent , #2557a7 );
138 border-right : 4 px solid var ( --frame-accent , #2557a7 );
139 }
140 .note {
141 position : absolute ;
142 left : 240 px ;
143 bottom : 60 px ;
144 right : 240 px ;
145 text-align : center ;
146 color : rgba ( 255 , 255 , 255 , 0.5 );
147 font :
148 14 px / 1.4 ui-monospace ,
149 monospace ;
150 letter-spacing : 0.12 em ;
151 }
152 </ style >
153 </ head >
154 < body >
155 < div class = "stage" >
156 < div class = "video-wrap" >
157 < span class = "v-label" >VIDEO</ span >
158 </ div >
159 < div class = "frame-deco" >
160 < span class = "tick tl" ></ span >
161 < span class = "tick tr" ></ span >
162 < span class = "tick bl" ></ span >
163 < span class = "tick br" ></ span >
164 </ div >
165 < div class = "note" >
166 HAIRLINE — double stroke (2px inner + soft 6px halo) + four-corner viewfinder ticks. Accent
167 color matches the card style.
168 </ div >
169 </ div >
170 </ body >
171 </ html >