← back to Nice spinny stuffcompare with ground truth →
model output
GPT-5.4
Nice spinny stuff
A 0.85T 0.32
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" />
6<title>Pink Orbit Dots</title>
7<style>
8 html, body {
9 margin: 0;
10 width: 100%;
11 height: 100%;
12 overflow: hidden;
13 background: #fff;
14 }
15
16 .stage {
17 position: relative;
18 width: 100vw;
19 height: 100vh;
20 background: #fff;
21 }
22
23 /* cluster positioned near upper-left like the reference */
24 .cluster {
25 position: absolute;
26 left: 15.8vw;
27 top: 16.8vh;
28 width: 90px;
29 height: 90px;
30 transform: translate(-50%, -50%);
31 filter: blur(.15px);
32 }
33
34 .dot {
35 position: absolute;
36 left: 50%;
37 top: 50%;
38 border-radius: 50%;
39 background: rgba(255, 192, 210, .92);
40 box-shadow: 0 0 8px rgba(255, 192, 210, .18);
41 transform: translate(-50%, -50%);
42 }
43
44 /* 3 larger visible beads */
45 .big {
46 width: 12px;
47 height: 12px;
48 animation: orbitBig 1.55s linear infinite;
49 }
50 .big.b1 { animation-delay: 0s; }
51 .big.b2 { animation-delay: -0.18s; }
52 .big.b3 { animation-delay: -0.36s; }
53
54 /* fading trail beads */
55 .small {
56 width: 6px;
57 height: 6px;
58 animation: orbitSmall 1.55s linear infinite;
59 }
60 .small.s1 { animation-delay: -0.52s; opacity: .55; }
61 .small.s2 { animation-delay: -0.64s; opacity: .42; }
62 .small.s3 { animation-delay: -0.76s; opacity: .30; }
63 .small.s4 { animation-delay: -0.88s; opacity: .20; }
64
65 .tiny {
66 width: 3px;
67 height: 3px;
68 background: rgba(214, 150, 150, .55);
69 box-shadow: none;
70 animation: orbitTiny 1.55s linear infinite;
71 }
72 .tiny.t1 { animation-delay: -1.00s; }
73 .tiny.t2 { animation-delay: -1.10s; }
74 .tiny.t3 { animation-delay: -1.20s; }
75
76 /* The motion alternates between a diagonal chain and a curved arc */
77 @keyframes orbitBig {
78 0% { transform: translate(-50%, -50%) translate(-18px, 18px) scale(1.02); }
79 12.5%{ transform: translate(-50%, -50%) translate(-8px, 6px) scale(1.00); }
80 25% { transform: translate(-50%, -50%) translate(2px, -6px) scale(.98); }
81 37.5%{ transform: translate(-50%, -50%) translate(12px, -18px) scale(.96); }
82 50% { transform: translate(-50%, -50%) translate(10px, -2px) scale(1.00); }
83 62.5%{ transform: translate(-50%, -50%) translate(2px, 8px) scale(1.03); }
84 75% { transform: translate(-50%, -50%) translate(-8px, 16px) scale(1.05); }
85 87.5%{ transform: translate(-50%, -50%) translate(-16px, 10px) scale(1.04); }
86 100% { transform: translate(-50%, -50%) translate(-18px, 18px) scale(1.02); }
87 }
88
89 @keyframes orbitSmall {
90 0% { transform: translate(-50%, -50%) translate(-22px, -2px) scale(.95); }
91 12.5%{ transform: translate(-50%, -50%) translate(-18px, -10px) scale(.88); }
92 25% { transform: translate(-50%, -50%) translate(-10px, -16px) scale(.82); }
93 37.5%{ transform: translate(-50%, -50%) translate(0px, -18px) scale(.76); }
94 50% { transform: translate(-50%, -50%) translate(-2px, -8px) scale(.82); }
95 62.5%{ transform: translate(-50%, -50%) translate(-10px, 0px) scale(.90); }
96 75% { transform: translate(-50%, -50%) translate(-18px, 8px) scale(.96); }
97 87.5%{ transform: translate(-50%, -50%) translate(-22px, 4px) scale(.98); }
98 100% { transform: translate(-50%, -50%) translate(-22px, -2px) scale(.95); }
99 }
100
101 @keyframes orbitTiny {
102 0% { transform: translate(-50%, -50%) translate(18px, -18px) scale(.9); opacity: .35; }
103 25% { transform: translate(-50%, -50%) translate(8px, -8px) scale(.75); opacity: .28; }
104 50% { transform: translate(-50%, -50%) translate(0px, 2px) scale(.6); opacity: .18; }
105 75% { transform: translate(-50%, -50%) translate(-8px, 10px) scale(.45); opacity: .10; }
106 100% { transform: translate(-50%, -50%) translate(18px, -18px) scale(.9); opacity: .35; }
107 }
108</style>
109</head>
110<body>
111 <div class="stage">
112 <div class="cluster">
113 <div class="dot big b1"></div>
114 <div class="dot big b2"></div>
115 <div class="dot big b3"></div>
116
117 <div class="dot small s1"></div>
118 <div class="dot small s2"></div>
119 <div class="dot small s3"></div>
120 <div class="dot small s4"></div>
121
122 <div class="dot tiny t1"></div>
123 <div class="dot tiny t2"></div>
124 <div class="dot tiny t3"></div>
125 </div>
126 </div>
127</body>
128</html>