Setting the file. One moment. Gsap Min
(opens in a new tab)
references/motion-primitives/particle-burst/scene.html
HTML·106 lines·3 KB
7 --hg-bg: #0a0a0f;
8 --hg-fg: #f5f5fa;
9 --hg-dim: #6b6b78;
10 }
11 * {
12 margin: 0;
13 padding: 0;
14 box-sizing: border-box;
15 }
16 .stage {
17 position: absolute;
18 inset: 0;
19 display: flex;
20 align-items: center;
21 justify-content: center;
22 }
23 .hero {
24 font-weight: 900;
25 font-size: 320px;
26 letter-spacing: -0.05em;
27 color: var(--hg-fg);
28 white-space: nowrap;
29 will-change: transform, opacity;
30 position: relative;
31 z-index: 10;
32 }
33 .particle-stage {
34 position: absolute;
35 inset: 0;
36 display: flex;
37 align-items: center;
38 justify-content: center;
39 pointer-events: none;
40 }
41 .particle {
42 position: absolute;
43 width: 8px;
44 height: 8px;
45 border-radius: 50%;
46 background: var(--hg-violet-2);
47 box-shadow: 0 0 12px var(--hg-violet-2);
48 opacity: 0;
49 will-change: transform, opacity;
50 }
51 </style>
52 <div class="particle-stage" id="particles"></div>
53 <div class="stage"><div class="hero">SPARK</div></div>
54 <script>
55 window.__timelines = window.__timelines || {};
56 const tl = gsap.timeline({ paused: true });
57
58 // Build N particles deterministically
59 const N = 36;
60 const container = document.getElementById("particles");
61 const particles = [];
62 for (let i = 0; i < N; i++) {
63 const p = document.createElement("div");
64 p.className = "particle";
65 // Vary size per particle for visual interest
66 const sz = 4 + (i % 4) * 3;
67 p.style.width = sz + "px";
68 p.style.height = sz + "px";
69 // Slight color variation
70 const hue = ((i * 17) % 60) - 30;
71 p.style.filter = `hue-rotate(${hue}deg)`;
72 container.appendChild(p);
73 particles.push(p);
74 }
75
76 // Hero punch + flash entry
77 tl.fromTo(
78 ".hero",
79 { scale: 0.85, opacity: 0 },
80 { scale: 1, opacity: 1, duration: 0.3, ease: "power4.out" },
81 0.3,
82 );
83
84 // Particles burst out
85 particles.forEach((p, i) => {
86 const angle = (i / N) * Math.PI * 2 + i * 0.137; // golden-angle jitter
87 const radius = 500 + (i % 5) * 90 + (i % 3) * 40;
88 const tx = Math.cos(angle) * radius;
89 const ty = Math.sin(angle) * radius;
90 const dur = 1.1 + (i % 5) * 0.08;
91 tl.fromTo(
92 p,
93 { x: 0, y: 0, scale: 1, opacity: 1 },
94 { x: tx, y: ty, scale: 0, opacity: 0, duration: dur, ease: "expo.out" },
95 0.35 + (i % 6) * 0.012,
96 );
97 });
98
99 // Hero settle wobble
100 tl.to(".hero", { scale: 1.04, duration: 0.1, ease: "power3.out" }, 0.35);
101 tl.to(".hero", { scale: 1.0, duration: 0.5, ease: "elastic.out(1, 0.5)" }, 0.45);
102
103 window.__timelines["particle-burst"] = tl;
104 </script>
105 </div>
106</template>