1Looking at the animation frames, I can see:
2
31. Start: 9 gray rounded squares in a 3x3 grid
42. They shrink to small circles while staying gray
53. A wave of color (salmon/coral) sweeps through, starting from top-left, with the center dot turning light blue
64. The colored dots rotate 45° becoming diamond shapes
75. The animation reverses - diamonds go back to circles, colors fade, circles grow back to rounded squares
86. The cycle repeats
9
10The key behaviors:
11- Each dot animates with a staggered delay based on position
12- Shape morphs: rounded square → circle → rotated square (diamond)
13- Color: gray → coral/salmon (#F07B6B), center → light blue (#87CEDB)
14- The wave travels diagonally (top-left to bottom-right)
15
16<!DOCTYPE html>
17<html>
18<head>
19<style>
20* { margin: 0; padding: 0; box-sizing: border-box; }
21body {
22 background: #e8e8e8;
23 display: flex;
24 justify-content: center;
25 align-items: center;
26 height: 100vh;
27 overflow: hidden;
28}
29.grid {
30 display: grid;
31 grid-template-columns: repeat(3, 1fr);
32 gap: 20px;
33}
34.dot {
35 width: 50px;
36 height: 50px;
37 background: #999;
38 border-radius: 12px;
39 animation: dotAnim 4s ease-in-out infinite;
40}
41
42@keyframes dotAnim {
43 0% { border-radius: 12px; transform: scale(1) rotate(0deg); background: #999; }
44 15% { border-radius: 50%; transform: scale(0.35) rotate(0deg); background: #999; }
45 30% { border-radius: 50%; transform: scale(0.35) rotate(0deg); background: #999; }
46 45% { border-radius: 12px; transform: scale(1) rotate(45deg); background: #F07B6B; }
47 55% { border-radius: 12px; transform: scale(1) rotate(45deg); background: #F07B6B; }
48 70% { border-radius: 50%; transform: scale(0.35) rotate(0deg); background: #999; }
49 85% { border-radius: 50%; transform: scale(0.35) rotate(0deg); background: #999; }
50 100% { border-radius: 12px; transform: scale(1) rotate(0deg); background: #999; }
51}
52
53/* Stagger delays based on diagonal wave (row+col index) */
54.dot:nth-child(1) { animation-delay: 0s; } /* 0,0 diag=0 */
55.dot:nth-child(2) { animation-delay: 0.15s; } /* 0,1 diag=1 */
56.dot:nth-child(3) { animation-delay: 0.3s; } /* 0,2 diag=2 */
57.dot:nth-child(4) { animation-delay: 0.15s; } /* 1,0 diag=1 */
58.dot:nth-child(5) { animation-delay: 0.3s; } /* 1,1 diag=2 - center = blue */
59.dot:nth-child(6) { animation-delay: 0.45s; } /* 1,2 diag=3 */
60.dot:nth-child(7) { animation-delay: 0.3s; } /* 2,0 diag=2 */
61.dot:nth-child(8) { animation-delay: 0.45s; } /* 2,1 diag=3 */
62.dot:nth-child(9) { animation-delay: 0.6s; } /* 2,2 diag=4 */
63
64/* Center dot is blue */
65.dot:nth-child(5) {
66 animation-name: dotAnimCenter;
67}
68
69@keyframes dotAnimCenter {
70 0% { border-radius: 12px; transform: scale(1) rotate(0deg); background: #999; }
71 15% { border-radius: 50%; transform: scale(0.35) rotate(0deg); background: #999; }
72 30% { border-radius: 50%; transform: scale(0.35) rotate(0deg); background: #999; }
73 45% { border-radius: 12px; transform: scale(1) rotate(45deg); background: #87CEDB; }
74 55% { border-radius: 12px; transform: scale(1) rotate(45deg); background: #87CEDB; }
75 70% { border-radius: 50%; transform: scale(0.35) rotate(0deg); background: #999; }
76 85% { border-radius: 50%; transform: scale(0.35) rotate(0deg); background: #999; }
77 100% { border-radius: 12px; transform: scale(1) rotate(0deg); background: #999; }
78}
79</style>
80</head>
81<body>
82<div class="grid">
83 <div class="dot"></div>
84 <div class="dot"></div>
85 <div class="dot"></div>
86 <div class="dot"></div>
87 <div class="dot"></div>
88 <div class="dot"></div>
89 <div class="dot"></div>
90 <div class="dot"></div>
91 <div class="dot"></div>
92</div>
93</body>
94</html>