animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to background wave animation

model output

LLaMA 4 Scout

background wave animation

A 0.60T 0.25
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>Animation</title>
7    <style>
8        body {
9            margin: 0;
10            background-color: #03055B;
11        }
12        .blob {
13            position: absolute;
14            top: 0;
15            left: 0;
16            width: 100vw;
17            height: 100vh;
18            background: radial-gradient(50% 50% at 50% 50%, #87CEEB 0%, #4682B4 100%);
19            border-radius: 50%;
20            animation: appear 3s forwards;
21        }
22        @keyframes appear {
23            0% {
24                width: 0;
25                height: 0;
26                border-radius: 50%;
27                top: 50%;
28                left: 50%;
29                transform: translate(-50%, -50%);
30            }
31            100% {
32                width: 100vw;
33                height: 100vh;
34                border-radius: 0;
35                top: 0;
36                left: 0;
37                transform: none;
38            }
39        }
40    </style>
41</head>
42<body>
43    <div class="blob"></div>
44</body>
45</html>