animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Single Element Spinner

model output

GPT-5.4

Single Element Spinner

A 0.90T 0.31
compare with ground truth →
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.0" />
6<title>Rotating Blue Ring</title>
7<style>
8  :root{
9    --bg:#111;
10    --ring:#11b8ff;
11    --size:42px;
12    --stroke:2px;
13    --dur:1s;
14  }
15
16  html,body{
17    margin:0;
18    width:100%;
19    height:100%;
20    background:var(--bg);
21    overflow:hidden;
22  }
23
24  .stage{
25    position:relative;
26    width:100vw;
27    height:100vh;
28    background:var(--bg);
29  }
30
31  /* Positioned to match the frames: small ring near upper-left */
32  .spinner{
33    position:absolute;
34    left:193px;
35    top:70px;
36    width:var(--size);
37    height:var(--size);
38    border-radius:50%;
39    box-sizing:border-box;
40    border:var(--stroke) solid rgba(17,184,255,.18);
41    border-top-color:var(--ring);
42    border-right-color:var(--ring);
43    box-shadow:
44      0 0 0 1px rgba(17,184,255,.04) inset,
45      0 0 6px rgba(17,184,255,.18);
46    animation: spin var(--dur) linear infinite;
47  }
48
49  @keyframes spin{
50    from{ transform:rotate(0deg); }
51    to{ transform:rotate(360deg); }
52  }
53</style>
54</head>
55<body>
56  <div class="stage">
57    <div class="spinner"></div>
58  </div>
59</body>
60</html>