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