← back to Animationcompare with ground truth →
model output
Gemini 3 Flash Preview
Animation
A 0.87T 0.36
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>3x3 Grid Animation</title>
7 <style>
8 :root {
9 /* Color Palette */
10 --bg-color: #e0e0e0;
11 --grey-color: #7f7f7f;
12 --salmon-color: #f28b82;
13 --blue-color: #add8e6;
14
15 /* Dimensions */
16 --dot-size: 32px;
17 --gap: 14px;
18 --border-radius: 8px;
19
20 /* Timing */
21 --duration: 6s;
22 --stagger: 0.12s;
23 }
24
25 * {
26 box-sizing: border-box;
27 }
28
29 body {
30 margin: 0;
31 padding: 0;
32 display: flex;
33 justify-content: center;
34 align-items: center;
35 height: 100vh;
36 background-color: var(--bg-color);
37 overflow: hidden;
38 }
39
40 .grid {
41 display: grid;
42 grid-template-columns: repeat(3, var(--dot-size));
43 grid-template-rows: repeat(3, var(--dot-size));
44 gap: var(--gap);
45 }
46
47 .dot {
48 width: var(--dot-size);
49 height: var(--dot-size);
50 background-color: var(--grey-color);
51 border-radius: var(--border-radius);
52 /* Default accent color for the outer dots */
53 --accent: var(--salmon-color);
54 animation: morph-sequence var(--duration) infinite ease-in-out;
55 }
56
57 /* Center dot has a different accent color */
58 .dot:nth-child(5) {
59 --accent: var(--blue-color);
60 }
61
62 /* Staggered diagonal animation delays */
63 /* Pattern: 1 -> (2,4) -> (3,5,7) -> (6,8) -> 9 */
64 .dot:nth-child(1) { animation-delay: calc(0 * var(--stagger)); }
65 .dot:nth-child(2), .dot:nth-child(4) { animation-delay: calc(1 * var(--stagger)); }
66 .dot:nth-child(3), .dot:nth-child(5), .dot:nth-child(7) { animation-delay: calc(2 * var(--stagger)); }
67 .dot:nth-child(6), .dot:nth-child(8) { animation-delay: calc(3 * var(--stagger)); }
68 .dot:nth-child(9) { animation-delay: calc(4 * var(--stagger)); }
69
70 @keyframes morph-sequence {
71 /* Initial State: Grey Square */
72 0%, 8% {
73 transform: scale(1);
74 background-color: var(--grey-color);
75 border-radius: var(--border-radius);
76 }
77 /* Phase 1: Shrink to Grey Dot */
78 22% {
79 transform: scale(0.2);
80 background-color: var(--grey-color);
81 border-radius: 50%;
82 }
83 /* Phase 2: Switch to Accent Color while tiny */
84 28% {
85 transform: scale(0.2);
86 background-color: var(--accent);
87 border-radius: 50%;
88 }
89 /* Phase 3: Grow to Accent Square */
90 42%, 58% {
91 transform: scale(1);
92 background-color: var(--accent);
93 border-radius: var(--border-radius);
94 }
95 /* Phase 4: Shrink to Accent Dot */
96 72% {
97 transform: scale(0.2);
98 background-color: var(--accent);
99 border-radius: 50%;
100 }
101 /* Phase 5: Switch back to Grey while tiny */
102 78% {
103 transform: scale(0.2);
104 background-color: var(--grey-color);
105 border-radius: 50%;
106 }
107 /* Phase 6: Grow back to Original Grey Square */
108 92%, 100% {
109 transform: scale(1);
110 background-color: var(--grey-color);
111 border-radius: var(--border-radius);
112 }
113 }
114 </style>
115</head>
116<body>
117
118 <div class="grid">
119 <div class="dot"></div>
120 <div class="dot"></div>
121 <div class="dot"></div>
122 <div class="dot"></div>
123 <div class="dot"></div>
124 <div class="dot"></div>
125 <div class="dot"></div>
126 <div class="dot"></div>
127 <div class="dot"></div>
128 </div>
129
130</body>
131</html>