animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Such Spinners, Much Loading

model output

GPT-5.4

Such Spinners, Much Loading

A 0.92T 0.38
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>Pulsing Dot</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    background: #ffffff;
13    overflow: hidden;
14  }
15
16  body {
17    display: grid;
18    place-items: center;
19  }
20
21  .dot {
22    width: 42px;
23    height: 42px;
24    border-radius: 50%;
25    background: #2f2f31;
26    box-shadow:
27      inset 0 1px 0 rgba(255,255,255,0.18),
28      0 0 0 1px rgba(0,0,0,0.08);
29    transform-origin: center;
30    animation: pulse 1.6s ease-in-out infinite;
31  }
32
33  @keyframes pulse {
34    0%   { transform: scale(1.00); }
35    20%  { transform: scale(0.72); }
36    50%  { transform: scale(1.00); }
37    72%  { transform: scale(0.72); }
38    100% { transform: scale(1.00); }
39  }
40</style>
41</head>
42<body>
43  <div class="dot"></div>
44</body>
45</html>