animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Japanese "人力車"

model output

GPT-5.4

Only CSS: Japanese "人力車"

A 0.69T 0.39
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" />
6<title>Recreated Chair Rotation</title>
7<style>
8  html, body {
9    margin: 0;
10    height: 100%;
11    background: #fff;
12    overflow: hidden;
13    font-family: sans-serif;
14  }
15
16  .stage {
17    width: 100vw;
18    height: 100vh;
19    display: grid;
20    place-items: center;
21    perspective: 1100px;
22    perspective-origin: 50% 45%;
23  }
24
25  /* Whole object slowly rotates around vertical axis */
26  .scene {
27    position: relative;
28    width: 420px;
29    height: 420px;
30    transform-style: preserve-3d;
31    animation: spin 6.4s linear infinite;
32  }
33
34  .chair {
35    position: absolute;
36    left: 50%;
37    top: 50%;
38    width: 0;
39    height: 0;
40    transform-style: preserve-3d;
41    transform:
42      translate3d(-50%, -50%, 0)
43      rotateX(68deg)
44      rotateZ(-2deg);
45  }
46
47  .part {
48    position: absolute;
49    transform-style: preserve-3d;
50  }
51
52  /* Seat */
53  .seat {
54    width: 150px;
55    height: 92px;
56    background: #ff0a0a;
57    transform:
58      translate3d(-75px, -10px, 0);
59  }
60
61  /* Backrest */
62  .back {
63    width: 150px;
64    height: 195px;
65    background: linear-gradient(to top, #ff1a12 0%, #ff7a12 42%, #ffb31a 72%, #fff200 100%);
66    transform-origin: 50% 100%;
67    transform:
68      translate3d(-75px, -205px, 0)
69      rotateX(-88deg);
70  }
71
72  /* Side blocks / arm supports */
73  .side {
74    width: 26px;
75    height: 78px;
76    background: #000;
77    transform-origin: 50% 50%;
78  }
79
80  .side.left {
81    transform: translate3d(-92px, -2px, 0);
82  }
83
84  .side.right {
85    transform: translate3d(66px, -2px, 0);
86  }
87
88  /* Wheels */
89  .wheel {
90    width: 118px;
91    height: 118px;
92    border: 6px solid #000;
93    border-radius: 50%;
94    background: transparent;
95    box-sizing: border-box;
96  }
97
98  .wheel.left {
99    transform: translate3d(-118px, -22px, 0) rotateX(90deg);
100  }
101
102  .wheel.right {
103    transform: translate3d(0px, -22px, 0) rotateX(90deg);
104  }
105
106  /* Base frame */
107  .frame {
108    width: 300px;
109    height: 170px;
110    border: 6px solid #000;
111    background: transparent;
112    box-sizing: border-box;
113    transform-origin: 50% 50%;
114    transform:
115      translate3d(-150px, 18px, -2px);
116  }
117
118  /* Slight line softness similar to rasterized source */
119  .wheel, .frame, .side, .seat, .back {
120    filter: saturate(1.02);
121  }
122
123  @keyframes spin {
124    from {
125      transform: rotateY(0deg);
126    }
127    to {
128      transform: rotateY(360deg);
129    }
130  }
131
132  /* Keep proportions similar on smaller screens */
133  @media (max-width: 700px) {
134    .scene { transform: scale(.72); transform-origin: center; }
135  }
136</style>
137</head>
138<body>
139  <div class="stage">
140    <div class="scene">
141      <div class="chair">
142        <div class="part frame"></div>
143        <div class="part wheel left"></div>
144        <div class="part wheel right"></div>
145        <div class="part side left"></div>
146        <div class="part side right"></div>
147        <div class="part seat"></div>
148        <div class="part back"></div>
149      </div>
150    </div>
151  </div>
152
153<script>
154  // No JS required; CSS handles the continuous rotation.
155</script>
156</body>
157</html>