animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Fall In Love

model output

LLaMA 4 Scout

Only CSS: Fall In Love

A 0.56T 0.17
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>Fall in Love Animation</title>
7    <style>
8        body {
9            background-color: #000;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            overflow: hidden;
16        }
17        .text {
18            font-size: 50px;
19            font-family: monospace;
20            color: #fff;
21            text-transform: uppercase;
22        }
23        @keyframes glitch {
24            0% {
25                transform: translateX(0);
26            }
27            20% {
28                transform: translateX(5px);
29            }
30            40% {
31                transform: translateX(-5px);
32            }
33            60% {
34                transform: translateX(5px);
35            }
36            80% {
37                transform: translateX(-5px);
38            }
39            100% {
40                transform: translateX(0);
41            }
42        }
43        .glitch-text {
44            animation: glitch 3s infinite;
45            background: linear-gradient(90deg, #ff69b4, #ffe6cc, #ff69b4);
46            -webkit-background-clip: text;
47            -webkit-text-fill-color: transparent;
48        }
49    </style>
50</head>
51<body>
52    <div class="text">
53        <span class="glitch-text">F</span>
54        <span class="glitch-text">A</span>
55        <span class="glitch-text">L</span>
56        <span class="glitch-text">L</span>
57        <br>
58        <span class="glitch-text">I</span>
59        <span class="glitch-text">N</span>
60        <br>
61        <span class="glitch-text">L</span>
62        <span class="glitch-text">O</span>
63        <span class="glitch-text">V</span>
64        <span class="glitch-text">E</span>
65    </div>
66</body>
67</html>