← back to Only CSS: Fall In Lovecompare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Fall In Love
A 0.56T 0.17
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>