← back to Nice spinny stuffcompare with ground truth →
model output
LLaMA 4 Scout
Nice spinny stuff
A 0.48T 0.13
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>Animation</title>
7 <style>
8 .dot-container {
9 position: relative;
10 width: 100vw;
11 height: 100vh;
12 background-color: #fff;
13 }
14 .dot {
15 position: absolute;
16 border-radius: 50%;
17 background-color: #FFC5C5; /* Light pink color */
18 }
19 /* Define animations */
20 @keyframes fadeIn {
21 0% {
22 opacity: 0;
23 transform: scale(0.5);
24 }
25 100% {
26 opacity: 1;
27 transform: scale(1);
28 }
29 }
30 @keyframes moveOut {
31 0% {
32 transform: translate(0, 0);
33 }
34 100% {
35 transform: translate(50px, 0);
36 }
37 }
38 </style>
39</head>
40<body>
41 <div class="dot-container">
42 <!-- JavaScript will generate dots here -->
43 </div>
44
45 <script>
46 // Create dots
47 const container = document.querySelector('.dot-container');
48 for (let i = 0; i < 10; i++) {
49 const dot = document.createElement('div');
50 dot.classList.add('dot');
51 dot.style.top = `${Math.random() * 100}%`;
52 dot.style.left = `${Math.random() * 100}%`;
53 dot.style.width = `${Math.random() * 10 + 5}px`;
54 dot.style.height = dot.style.width;
55 dot.style.animation = 'fadeIn 2s';
56 container.appendChild(dot);
57
58 // Animate dots
59 setTimeout(() => {
60 dot.style.animation = 'moveOut 2s';
61 setTimeout(() => {
62 dot.remove();
63 }, 2000);
64 }, i * 200);
65 }
66 </script>
67</body>
68</html>