Setting the file. One moment. (opens in a new tab)
assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-2.html
HTML·98 lines·3 KB
7
display
:
flex
;
8 align-items: center;
9 justify-content: center;
10 opacity: 0;
11 }
12 .scene-2 {
13 gap: 48px;
14 }
15 .stat-card {
16 width: 280px;
17 height: 220px;
18 background: #1a1a1a;
19 border-radius: 16px;
20 border: 2px solid var(--card-color);
21 display: flex;
22 flex-direction: column;
23 justify-content: center;
24 align-items: center;
25 opacity: 0;
26 }
27 .stat-card .number {
28 font-size: 72px;
29 font-weight: 800;
30 color: var(--card-color);
31 line-height: 1;
32 }
33 .stat-card .label {
34 font-size: 24px;
35 font-weight: 500;
36 color: #9ca3af;
37 margin-top: 16px;
38 text-transform: uppercase;
39 letter-spacing: 0.1em;
40 }
41 </style>
42 <div class="scene scene-2">
43 <div
44 class="stat-card"
45 data-stat-index="0"
46 data-stat-value="1247"
47 style="--card-color: #fbbf24"
48 >
49 <div class="number">0</div>
50 <div class="label">Stars</div>
51 </div>
52 <div
53 class="stat-card"
54 data-stat-index="1"
55 data-stat-value="312"
56 style="--card-color: #60a5fa"
57 >
58 <div class="number">0</div>
59 <div class="label">Forks</div>
60 </div>
61 <div class="stat-card" data-stat-index="2" data-stat-value="48" style="--card-color: #f87171">
62 <div class="number">0</div>
63 <div class="label">Issues</div>
64 </div>
65 </div>
66 <script>
67 // Remotion: <Sequence 90..210> StatsScene; StatCard stagger i*12 frames = i*0.4s.
68 const tl = gsap.timeline({ paused: true });
69 const scene = document.querySelector(".scene-2");
70 tl.set(scene, { opacity: 1 }, 0);
71 scene.querySelectorAll(".stat-card").forEach((card, i) => {
72 const start = i * 0.4;
73 const value = Number(card.dataset.statValue);
74 const numberEl = card.querySelector(".number");
75 // spring({damping:14, stiffness:90, mass:1}) -> back.out(1.2) ~0.7s; opacity 0..0.4s linear
76 tl.fromTo(card, { scale: 0 }, { scale: 1, duration: 0.7, ease: "back.out(1.2)" }, start);
77 tl.to(card, { opacity: 1, duration: 0.4, ease: "none" }, start);
78 // AnimatedNumber: easeOutCubic over 45 frames (1.5s) is GSAP power2.out on a counter.
79 const counter = { v: 0 };
80 tl.to(
81 counter,
82 {
83 v: value,
84 duration: 1.5,
85 ease: "power2.out",
86 onUpdate: () => {
87 numberEl.textContent = Math.round(counter.v).toLocaleString();
88 },
89 },
90 start,
91 );
92 });
93 tl.set(scene, { opacity: 0 }, 4);
94 window.__timelines = window.__timelines || {};
95 window.__timelines["scene-2"] = tl;
96 </script>
97 </div>
98</template>