← back to Nice spinny stuffcompare with ground truth →
model output
Gemini 3 Flash Preview
Nice spinny stuff
A 0.90T 0.11
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>Hand-Drawn Pink Sparkle Animation</title>
7 <style>
8 :root {
9 /* Using a soft pink color as seen in the frames */
10 --pink-color: #fbcfe8;
11 }
12
13 body {
14 margin: 0;
15 padding: 0;
16 background-color: #ffffff;
17 overflow: hidden;
18 display: flex;
19 justify-content: flex-start;
20 align-items: flex-start;
21 height: 100vh;
22 }
23
24 .animation-container {
25 position: relative;
26 width: 400px;
27 height: 400px;
28 margin-top: 20px;
29 margin-left: 20px;
30 }
31
32 /* All frames are hidden by default */
33 .frame {
34 position: absolute;
35 top: 0;
36 left: 0;
37 width: 100%;
38 height: 100%;
39 opacity: 0;
40 visibility: hidden;
41 /* Step-end animation ensures they switch instantly without fading */
42 animation: frameLoop 2s infinite step-end;
43 }
44
45 /*
46 0s - 0.5s: Frame 1
47 0.5s - 1.0s: Frame 2
48 1.0s - 1.5s: Frame 3
49 1.5s - 2.0s: Frame 4
50 */
51 .frame-1 { animation-delay: 0s; }
52 .frame-2 { animation-delay: 0.5s; }
53 .frame-3 { animation-delay: 1s; }
54 .frame-4 { animation-delay: 1.5s; }
55
56 @keyframes frameLoop {
57 0% {
58 opacity: 1;
59 visibility: visible;
60 }
61 25% {
62 opacity: 0;
63 visibility: hidden;
64 }
65 100% {
66 opacity: 0;
67 visibility: hidden;
68 }
69 }
70
71 .pink-blob {
72 fill: var(--pink-color);
73 }
74
75 /* Aesthetic tweaks for a hand-drawn feel */
76 svg {
77 filter: drop-shadow(0px 0px 2px rgba(251, 207, 232, 0.5));
78 }
79 </style>
80</head>
81<body>
82
83 <div class="animation-container">
84 <!-- Frame 1: Heart-like blob and rising dots -->
85 <svg class="frame frame-1" viewBox="0 0 400 400">
86 <path class="pink-blob" d="M112,245 c-4-5-10-2-10,5 c0,8 10,14 10,14 s10-6 10-14 c0-7-6-10-10-5 Z" />
87 <circle class="pink-blob" cx="132" cy="212" r="4.5" />
88 <circle class="pink-blob" cx="150" cy="182" r="3.5" />
89 <circle class="pink-blob" cx="170" cy="155" r="5" />
90 </svg>
91
92 <!-- Frame 2: Curved trail of dots -->
93 <svg class="frame frame-2" viewBox="0 0 400 400">
94 <circle class="pink-blob" cx="118" cy="238" r="3.5" />
95 <circle class="pink-blob" cx="128" cy="215" r="5" />
96 <circle class="pink-blob" cx="140" cy="195" r="4" />
97 <circle class="pink-blob" cx="155" cy="178" r="6" />
98 <circle class="pink-blob" cx="172" cy="160" r="4.5" />
99 <circle class="pink-blob" cx="188" cy="148" r="3.5" />
100 <circle class="pink-blob" cx="205" cy="140" r="2.5" />
101 </svg>
102
103 <!-- Frame 3: Cluster of three main blobs -->
104 <svg class="frame frame-3" viewBox="0 0 400 400">
105 <path class="pink-blob" d="M120,240 c-3-4-7-1-7,4 c0,6 7,11 7,11 s7-5 7-11 c0-5-4-8-7-4 Z" />
106 <path class="pink-blob" d="M145,200 c-5-5-10-2-10,6 c0,8 10,15 10,15 s10-7 10-15 c0-8-5-11-10-6 Z" />
107 <path class="pink-blob" d="M175,160 c-3-3-6-1-6,4 c0,5 6,10 6,10 s6-5 6-10 c0-5-3-7-6-4 Z" />
108 <circle class="pink-blob" cx="135" cy="225" r="3" />
109 </svg>
110
111 <!-- Frame 4: Scattered dots and a small accent -->
112 <svg class="frame frame-4" viewBox="0 0 400 400">
113 <circle class="pink-blob" cx="115" cy="245" r="3.5" />
114 <circle class="pink-blob" cx="130" cy="225" r="4.5" />
115 <circle class="pink-blob" cx="150" cy="208" r="2.5" />
116 <circle class="pink-blob" cx="165" cy="185" r="5.5" />
117 <path class="pink-blob" d="M185,165 c-2-3-5-1-5,3 c0,4 5,8 5,8 s5-4 5-8 c0-4-3-6-5-3 Z" />
118 <circle class="pink-blob" cx="210" cy="150" r="4" />
119 </svg>
120 </div>
121
122 <script>
123 /**
124 * Recreating the 0.5s step-based animation cycle seen in the video.
125 * The CSS animation already handles the 2s loop (4 frames * 0.5s).
126 * This script ensures the animation stays synced perfectly over long durations.
127 */
128 document.addEventListener('DOMContentLoaded', () => {
129 console.log("Animation initialized matching the video timing: 0.5s per frame.");
130 });
131 </script>
132</body>
133</html>