Setting the file. One moment. 14.43
Hershey Script Med
(opens in a new tab)
modes/cinematic/_archive/portrait-header/template.html
HTML·170 lines·5 KB
"en"
>
15 <head>
16 <meta charset="UTF-8" />
17 <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
18 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
19 <style>
20 :root { --font-scale: {{FONT_SCALE}}; }
21
22 * { margin: 0; padding: 0; box-sizing: border-box; }
23 html, body {
24 margin: 0;
25 width: {{WIDTH}}px; height: {{HEIGHT}}px;
26 overflow: hidden;
27 background: #000;
28 font-family: "Inter", system-ui, sans-serif;
29 }
30 #a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
31 #stage {
32 position: absolute;
33 top: 0; left: 0;
34 width: {{WIDTH}}px; height: {{HEIGHT}}px;
35 pointer-events: none;
36 z-index: 2;
37 }
38
39 /* LAYOUT */
40 .header-plane {
41 position: absolute;
42 top: {{HEADER_TOP}}px;
43 left: 0; right: 0;
44 height: {{HEADER_HEIGHT}}px;
45 padding: 24px 40px;
46 }
47 .header-plane .cap {
48 position: absolute;
49 top: 24px;
50 left: 40px; right: 40px;
51 max-width: calc(100% - 80px);
52 text-align: center;
53 }
54 .crown-plane {
55 position: absolute;
56 top: {{CROWN_TOP}}px;
57 left: 0; right: 0;
58 text-align: center;
59 pointer-events: none;
60 }
61
62 /* STYLE (locked) */
63 .cap {
64 display: block;
65 position: relative;
66 line-height: 1.05;
67 opacity: 0;
68 mix-blend-mode: {{BLEND_MODE}};
69 color: {{CAP_COLOR}};
70 text-shadow: {{TEXT_SHADOW}};
71 filter: {{TEXT_FILTER}};
72 will-change: transform, opacity;
73 }
74 .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
75
76 .cap-intro { font-size: calc(72px * var(--font-scale));
77 font-weight: 500; font-style: italic;
78 letter-spacing: -0.005em; line-height: 1.1; }
79 .cap-phrase { font-size: calc(88px * var(--font-scale));
80 font-weight: 600;
81 letter-spacing: -0.015em; line-height: 1.05; }
82 .cap-emph { font-size: calc(104px * var(--font-scale));
83 font-weight: 800;
84 letter-spacing: -0.025em; line-height: 1.0; }
85 .cap-dream { font-size: calc(92px * var(--font-scale));
86 font-weight: 700; font-style: italic;
87 letter-spacing: -0.015em; line-height: 1.05; }
88 .cap-crown { font-size: calc(130px * var(--font-scale));
89 font-weight: 900;
90 letter-spacing: -0.035em; text-transform: uppercase;
91 line-height: 1.0; }
92 </style>
93 </head>
94 <body>
95 <div
96 id="root"
97 data-composition-id="main"
98 data-start="0"
99 data-duration="{{DURATION}}"
100 data-width="{{WIDTH}}"
101 data-height="{{HEIGHT}}"
102 >
103 <video
104 id="a-roll"
105 src="source.mp4"
106 muted
107 playsinline
108 data-duration="{{DURATION}}"
109 data-track-index="0"
110 style="z-index: 1"
111 ></video>
112
113 <div id="stage">
114 <div class="header-plane">{{GROUPS_HTML}}</div>
115 <div class="crown-plane">{{CROWN_HTML}}</div>
116 </div>
117
118 <audio
119 id="a-roll-audio"
120 src="source.mp4"
121 data-start="0"
122 data-duration="{{DURATION}}"
123 data-track-index="3"
124 data-volume="1"
125 ></audio>
126 </div>
127
128 <script>
129 window.__timelines = window.__timelines || {};
130 const tl = gsap.timeline({ paused: true });
131 const DUR = {{DURATION}};
132 const GROUPS = {{GROUPS_JSON}};
133 const CROWN = {{CROWN_JSON}};
134
135 function animateGroup(g) {
136 var sel = "#" + g.id;
137 var isSoft = g.tone === "soft";
138 tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
139
140 g.words.forEach(function (w, i) {
141 var wsel = sel + " .w[data-i='" + i + "']";
142 if (isSoft) {
143 tl.fromTo(wsel,
144 { opacity: 0, y: 8 },
145 { opacity: 1, y: 0, duration: 0.42, ease: "power2.out", overwrite: "auto" },
146 w.start);
147 } else {
148 tl.fromTo(wsel,
149 { opacity: 0, y: 6, scale: 1.04 },
150 { opacity: 1, y: 0, scale: 1.0, duration: 0.22,
151 ease: "power3.out", overwrite: "auto", transformOrigin: "50% 50%" },
152 w.start);
153 }
154 });
155
156 if (g.out < DUR) {
157 tl.to(sel, { opacity: 0, duration: 0.45, ease: "power2.in", overwrite: "auto" },
158 g.out - 0.45);
159 }
160 tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
161 }
162
163 GROUPS.forEach(animateGroup);
164 if (CROWN) animateGroup(CROWN);
165
166 tl.seek(0);
167 window.__timelines["main"] = tl;
168 </script>
169 </body>
170</html>