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

ground truth

Motion Table - Orbit

model outputs

1<div class="orbit">
2  <div class="absolute left-0 top-0 w-quart h-quart border border-solid border-white-transparent-2 rounded-full wave"
3    style="--wave-delay: 1.1s"></div>
4  <div class="absolute left-0 bottom-0 w-half h-half border border-solid border-white-transparent-2 rounded-full wave"
5    style="--wave-delay: 1s"></div>
6  <div
7    class="absolute right-0 bottom-0 w-quart h-quart border border-solid border-white-transparent-2 rounded-full wave"
8    style="--wave-delay: 1.2s"></div>
9  <div class="absolute top-0 right-0 w-half h-half bg-blue-transparent rounded-full wave" style="--wave-delay: 1.4s">
10  </div>
11  <div class="absolute left-0 w-half h-half bg-white-transparent-2 rounded-full wave" style="--wave-delay: 1.5s"></div>
12  <div class="absolute w-full h-0 border border-dashed border-white-transparent-1"></div>
13  <div class="absolute w-0 h-full border border-dashed border-white-transparent-1"></div>
14  <div class="absolute border border-solid border-white w-half h-half rounded-full"></div>
15  <div class="absolute border border-solid border-white w-quart h-quart rounded-full"></div>
16  <div class="point" style="--point-color: var(--red-color-transparent); --point-width: 1rem"></div>
17  <div class="point" style="
18      --point-color: var(--red-color-transparent);
19      --point-width: 1rem;
20      --spin-delay: calc(var(--spin-duration) / -2);
21      --spin-duration: 2s;
22    "></div>
23  <div class="point" style="
24      --point-color: var(--red-color-transparent);
25      --point-width: 1rem;
26      --spin-delay: calc(var(--spin-duration) / -4);
27      --spin-duration: 2s;
28    "></div>
29</div>