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