animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Merry Christmas Tree!

model output

LLaMA 4 Scout

Merry Christmas Tree!

A 0.40T 0.24
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>Document</title>
7    <style>
8        body {
9            background-color: #000;
10            overflow: hidden;
11            margin: 0;
12            padding: 0;
13        }
14        #star {
15            position: absolute;
16            top: 50%;
17            left: 50%;
18            transform: translate(-50%, -50%);
19            font-size: 50px;
20            color: #fff;
21            animation: twinkle 2s infinite;
22        }
23        .trail {
24            position: absolute;
25            width: 2px;
26            height: 2px;
27            background-color: #ff69b4;
28            border-radius: 50%;
29            animation: trail 2s infinite;
30        }
31        @keyframes twinkle {
32            0% {
33                transform: translate(-50%, -50%) scale(1);
34            }
35            50% {
36                transform: translate(-50%, -50%) scale(1.2);
37            }
38            100% {
39                transform: translate(-50%, -50%) scale(1);
40            }
41        }
42        @keyframes trail {
43            0% {
44                top: 50%;
45                left: 50%;
46                transform: translate(-50%, -50%);
47            }
48            100% {
49                top: 100%;
50                left: 100%;
51                transform: translate(-50%, -50%);
52            }
53        }
54    </style>
55</head>
56<body>
57    <div id="star">&#9733;</div>
58    <div class="trail" style="top: 50%; left: 50%; animation-delay: 0.1s;"></div>
59    <div class="trail" style="top: 50%; left: 50%; animation-delay: 0.2s;"></div>
60    <div class="trail" style="top: 50%; left: 50%; animation-delay: 0.3s;"></div>
61    <script>
62        let star = document.getElementById('star');
63        let trails = document.querySelectorAll('.trail');
64        let angle = 0;
65        function update() {
66            angle += 1;
67            star.style.top = `calc(50% - ${Math.sin(angle * 0.01) * 100}px)`;
68            star.style.left = `calc(50% - ${Math.cos(angle * 0.01) * 100}px)`;
69            trails.forEach((trail, i) => {
70                trail.style.top = `calc(50% - ${Math.sin(angle * 0.01 + i * 0.1) * 100}px)`;
71                trail.style.left = `calc(50% - ${Math.cos(angle * 0.01 + i * 0.1) * 100}px)`;
72            });
73            requestAnimationFrame(update);
74        }
75        update();
76    </script>
77</body>
78</html>