← back to Loaders (WIP)compare with ground truth →
model output
Claude Sonnet 4.6
Loaders (WIP)
A 0.88T 0.31
1Looking at the frames, I can see the Black Widow hourglass logo spinning/rotating inside a circle on a red background. The animation shows the hourglass shape rotating through different orientations - starting vertical (hourglass), rotating to show triangles pointing sideways (bowtie/butterfly shape), completing a full rotation cycle.
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6<meta charset="UTF-8">
7<meta name="viewport" content="width=device-width, initial-scale=1.0">
8<title>Black Widow Logo Animation</title>
9<style>
10 * { margin: 0; padding: 0; box-sizing: border-box; }
11
12 body {
13 background-color: #e8473a;
14 width: 100vw;
15 height: 100vh;
16 display: flex;
17 align-items: flex-start;
18 justify-content: center;
19 padding-top: 60px;
20 }
21
22 .logo-container {
23 width: 80px;
24 height: 80px;
25 position: relative;
26 }
27
28 .circle {
29 width: 80px;
30 height: 80px;
31 border: 3px solid white;
32 border-radius: 50%;
33 position: absolute;
34 top: 0;
35 left: 0;
36 }
37
38 .hourglass-wrapper {
39 position: absolute;
40 top: 50%;
41 left: 50%;
42 transform: translate(-50%, -50%);
43 width: 44px;
44 height: 44px;
45 animation: spinHourglass 1.2s linear infinite;
46 }
47
48 .hourglass-svg {
49 width: 100%;
50 height: 100%;
51 }
52
53 @keyframes spinHourglass {
54 0% { transform: translate(-50%, -50%) rotate(0deg); }
55 100% { transform: translate(-50%, -50%) rotate(360deg); }
56 }
57</style>
58</head>
59<body>
60
61<div class="logo-container">
62 <div class="circle"></div>
63 <div class="hourglass-wrapper">
64 <svg class="hourglass-svg" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
65 <!-- Top triangle pointing down -->
66 <polygon points="22,22 4,4 40,4" fill="white"/>
67 <!-- Bottom triangle pointing up -->
68 <polygon points="22,22 4,40 40,40" fill="white"/>
69 </svg>
70 </div>
71</div>
72
73</body>
74</html>