animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Wavy Loading Animations

model output

Claude Sonnet 4.6

Wavy Loading Animations

A 0.59T 0.27
compare with ground truth →
1Looking at the frames, I can see a shape that alternates between a triangle (pointing right) and a flattened oval/ellipse shape, positioned near the top-center of the screen. The shape appears to be rotating/flipping - it's a 3D rotation effect where a triangle rotates around its vertical axis, creating the illusion of flipping between a triangle and a flat disc shape.
2
3The shape is gray (~#aaa), positioned around x:500, y:100 in a ~1024x768 viewport. It cycles through: triangle → flat oval → triangle (pointing left) → flat oval → triangle, suggesting a continuous Y-axis rotation.
4
5<!DOCTYPE html>
6<html lang="en">
7<head>
8<meta charset="UTF-8">
9<meta name="viewport" content="width=device-width, initial-scale=1.0">
10<title>Rotating Triangle Animation</title>
11<style>
12  * { margin: 0; padding: 0; box-sizing: border-box; }
13  
14  body {
15    background-color: #ebebeb;
16    width: 100vw;
17    height: 100vh;
18    overflow: hidden;
19    display: flex;
20    justify-content: center;
21    align-items: flex-start;
22  }
23
24  .scene {
25    position: absolute;
26    top: 80px;
27    left: 50%;
28    transform: translateX(-50%);
29    width: 60px;
30    height: 50px;
31    perspective: 400px;
32  }
33
34  .triangle-wrapper {
35    width: 100%;
36    height: 100%;
37    animation: flipY 1.2s linear infinite;
38    transform-style: preserve-3d;
39    position: relative;
40  }
41
42  .triangle {
43    position: absolute;
44    width: 0;
45    height: 0;
46    top: 50%;
47    left: 50%;
48    transform: translate(-50%, -50%);
49    border-top: 25px solid transparent;
50    border-bottom: 25px solid transparent;
51    border-left: 45px solid #aaa;
52  }
53
54  @keyframes flipY {
55    0%   { transform: rotateY(0deg); }
56    100% { transform: rotateY(360deg); }
57  }
58</style>
59</head>
60<body>
61
62<div class="scene">
63  <div class="triangle-wrapper">
64    <div class="triangle"></div>
65  </div>
66</div>
67
68<script>
69  // The animation is purely CSS-driven
70  // The triangle rotates around Y axis continuously
71  // giving the appearance of flipping between pointing right,
72  // becoming flat (oval), pointing left, flat again, repeat
73</script>
74
75</body>
76</html>