← back to Loaders (WIP)compare with ground truth →
model output
Claude Sonnet 4.6
Loaders (WIP)
A 0.89T 0.24
1Looking at the frames, I can see:
2
31. A red/coral background (#e8473f or similar)
42. A white square that transitions from semi-transparent/pink to fully white and back
53. A small white dot that orbits around the square
64. The dot appears to rotate around the square in a circular path
7
8The square stays roughly centered around (510, 97) area, and the dot orbits around it. The square's opacity cycles (starts semi-transparent, becomes fully white, then back). The dot orbits clockwise around the square.
9
10<!DOCTYPE html>
11<html>
12<head>
13<style>
14 * { margin: 0; padding: 0; box-sizing: border-box; }
15 body {
16 background: #e8473f;
17 width: 100vw;
18 height: 100vh;
19 overflow: hidden;
20 }
21 .scene {
22 position: absolute;
23 top: 50%;
24 left: 50%;
25 transform: translate(-50%, -50%) translateY(-150px);
26 }
27 .square {
28 width: 32px;
29 height: 32px;
30 background: white;
31 position: absolute;
32 top: 0;
33 left: 8px;
34 animation: squareOpacity 2s linear infinite;
35 }
36 .dot-orbit {
37 position: absolute;
38 top: 16px;
39 left: 24px;
40 width: 0;
41 height: 0;
42 animation: orbit 2s linear infinite;
43 }
44 .dot {
45 width: 7px;
46 height: 7px;
47 background: white;
48 border-radius: 50%;
49 position: absolute;
50 transform: translate(-50%, -50%) translateX(28px);
51 }
52
53 @keyframes orbit {
54 0% { transform: rotate(-90deg); }
55 100% { transform: rotate(270deg); }
56 }
57
58 @keyframes squareOpacity {
59 0% { opacity: 0.45; }
60 25% { opacity: 0.55; }
61 50% { opacity: 1; }
62 75% { opacity: 0.55; }
63 100% { opacity: 0.45; }
64 }
65</style>
66</head>
67<body>
68 <div class="scene">
69 <div class="square"></div>
70 <div class="dot-orbit">
71 <div class="dot"></div>
72 </div>
73 </div>
74</body>
75</html>