animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Exploring Bourbon

model output

GPT-5.4

Exploring Bourbon

A 0.90T 0.26
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>Rounded Square Pulse</title>
7<style>
8  :root{
9    --bg: #7f6b6b;
10    --box: #b8d56f;
11    --box2:#aeca72;
12    --size: 50px;
13    --dur: 1.2s;
14  }
15
16  html, body {
17    margin: 0;
18    width: 100%;
19    height: 100%;
20    overflow: hidden;
21    background: var(--bg);
22  }
23
24  body{
25    display:grid;
26    place-items:center;
27  }
28
29  .shape{
30    width: var(--size);
31    height: var(--size);
32    background: linear-gradient(to bottom, #bddb72 0%, #b4cf72 65%, #adc56f 100%);
33    box-shadow:
34      0 6px 12px rgba(0,0,0,.18),
35      0 1px 0 rgba(255,255,255,.12) inset,
36      0 -1px 0 rgba(0,0,0,.08) inset;
37    animation: morph var(--dur) ease-in-out infinite;
38    transform-origin: center;
39  }
40
41  @keyframes morph {
42    0%, 100% {
43      border-radius: 0px;
44      transform: scale(1);
45    }
46    50% {
47      border-radius: 14px;
48      transform: scale(1);
49    }
50  }
51</style>
52</head>
53<body>
54  <div class="shape"></div>
55</body>
56</html>