← back to Star Burstcompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Star Burst
A 0.30T 0.00
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Explosion Animation</title>
7 <style>
8 body {
9 margin: 0;
10 background-color: #000;
11 overflow: hidden;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 height: 100vh;
16 }
17 .explosion {
18 position: relative;
19 width: 200px;
20 height: 200px;
21 }
22 .particle {
23 position: absolute;
24 background: linear-gradient(to right, #00f, #fff);
25 border-radius: 50%;
26 transform-origin: center;
27 animation: explode 1s ease-out forwards;
28 }
29 @keyframes explode {
30 0% {
31 transform: scale(0) rotate(0deg);
32 opacity: 0;
33 }
34 100% {
35 transform: scale(2) rotate(360deg);
36 opacity: 0;
37 }
38 }
39 .center {
40 position: absolute;
41 top: 50%;
42 left: 50%;
43 transform: translate(-50%, -50%);
44 width: 20px;
45 height: 20px;
46 background: radial-gradient(circle, #00f, #fff);
47 border-radius: 50%;
48 z-index: 10;
49 }
50 </style>
51</head>
52<body>
53 <div class="explosion">
54 <div class="center"></div>
55 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.1s;"></div>
56 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.2s;"></div>
57 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.3s;"></div>
58 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.4s;"></div>
59 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.5s;"></div>
60 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.6s;"></div>
61 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.7s;"></div>
62 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.8s;"></div>
63 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.9s;"></div>
64 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.0s;"></div>
65 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.1s;"></div>
66 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.2s;"></div>
67 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.3s;"></div>
68 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.4s;"></div>
69 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.5s;"></div>
70 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.6s;"></div>
71 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.7s;"></div>
72 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.8s;"></div>
73 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.9s;"></div>
74 <div class="particle" style="top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 2.0s;"></div>
75 </div>
76
77 <script>
78 const explosion = document.querySelector('.explosion');
79 const particles = explosion.querySelectorAll('.particle');
80
81 // Create more particles with different angles and delays
82 for (let i = 0; i < 30; i++) {
83 const particle = document.createElement('div');
84 particle.classList.add('particle');
85 particle.style.width = '2px';
86 particle.style.height = '2px';
87 particle.style.left = '50%';
88 particle.style.top = '50%';
89 particle.style.transform = 'translate(-50%, -50%)';
90 particle.style.animationDelay = `${i * 0.05}s`;
91 particle.style.animationDuration = '1s';
92 particle.style.background = 'linear-gradient(to right, #00f, #fff)';
93 particle.style.borderRadius = '50%';
94 particle.style.opacity = '0';
95 particle.style.transformOrigin = 'center';
96 particle.style.position = 'absolute';
97
98 // Random angle
99 const angle = (i * 360 / 30) + Math.random() * 360;
100 particle.style.transform = `translate(-50%, -50%) rotate(${angle}deg) scale(0)`;
101
102 explosion.appendChild(particle);
103 }
104
105 // Add animation for each particle
106 particles.forEach((p, index) => {
107 p.style.animation = 'explode 1s ease-out forwards';
108 p.style.animationDelay = `${index * 0.05}s`;
109 });
110
111 // Add a small delay before starting the animation
112 setTimeout(() => {
113 explosion.style.animation = 'none';
114 explosion.style.opacity = '1';
115 }, 100);
116 </script>
117</body>
118</html>