← back to Only CSS: Fall In Lovecompare with ground truth →
model output
Claude Sonnet 4.6
Only CSS: Fall In Love
A 0.84T 0.27
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</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 background: #1a0a14;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 min-height: 100vh;
16 overflow: hidden;
17 }
18
19 .container {
20 position: relative;
21 text-align: left;
22 animation: containerFloat 3s ease-in-out infinite;
23 }
24
25 @keyframes containerFloat {
26 0%, 100% { transform: rotate(-2deg) translate(0, 0); }
27 25% { transform: rotate(-1.5deg) translate(2px, -3px); }
28 50% { transform: rotate(-2.5deg) translate(-2px, 2px); }
29 75% { transform: rotate(-1deg) translate(1px, -1px); }
30 }
31
32 .text-wrapper {
33 position: relative;
34 line-height: 1.1;
35 }
36
37 .line {
38 display: block;
39 position: relative;
40 font-family: 'Arial Black', 'Impact', sans-serif;
41 font-weight: 900;
42 font-size: 72px;
43 letter-spacing: 4px;
44 text-transform: uppercase;
45 color: transparent;
46 -webkit-text-stroke: 0px;
47 }
48
49 /* Base text layer */
50 .line .base {
51 position: relative;
52 display: inline-block;
53 background: linear-gradient(135deg, #ff4d8d, #cc44ff, #ff66aa, #aa44ff);
54 -webkit-background-clip: text;
55 -webkit-text-fill-color: transparent;
56 background-clip: text;
57 filter: blur(0.5px);
58 }
59
60 /* Glitch layers */
61 .line .glitch-r,
62 .line .glitch-b {
63 position: absolute;
64 top: 0;
65 left: 0;
66 display: inline-block;
67 font-family: 'Arial Black', 'Impact', sans-serif;
68 font-weight: 900;
69 font-size: 72px;
70 letter-spacing: 4px;
71 text-transform: uppercase;
72 }
73
74 .line .glitch-r {
75 background: linear-gradient(135deg, #ff2255, #ff44aa, #ff6688);
76 -webkit-background-clip: text;
77 -webkit-text-fill-color: transparent;
78 background-clip: text;
79 opacity: 0.7;
80 animation: glitchR 2s infinite;
81 }
82
83 .line .glitch-b {
84 background: linear-gradient(135deg, #8844ff, #aa66ff, #6633cc);
85 -webkit-background-clip: text;
86 -webkit-text-fill-color: transparent;
87 background-clip: text;
88 opacity: 0.6;
89 animation: glitchB 2s infinite;
90 }
91
92 @keyframes glitchR {
93 0% { transform: translate(3px, 0); clip-path: inset(20% 0 60% 0); }
94 10% { transform: translate(-2px, 1px); clip-path: inset(50% 0 20% 0); }
95 20% { transform: translate(4px, -1px); clip-path: inset(10% 0 70% 0); }
96 30% { transform: translate(-3px, 0); clip-path: inset(60% 0 10% 0); }
97 40% { transform: translate(2px, 2px); clip-path: inset(30% 0 40% 0); }
98 50% { transform: translate(-4px, -1px); clip-path: inset(70% 0 5% 0); }
99 60% { transform: translate(3px, 1px); clip-path: inset(15% 0 55% 0); }
100 70% { transform: translate(-2px, 0); clip-path: inset(45% 0 25% 0); }
101 80% { transform: translate(5px, -2px); clip-path: inset(5% 0 80% 0); }
102 90% { transform: translate(-3px, 1px); clip-path: inset(80% 0 5% 0); }
103 100% { transform: translate(3px, 0); clip-path: inset(20% 0 60% 0); }
104 }
105
106 @keyframes glitchB {
107 0% { transform: translate(-3px, 0); clip-path: inset(60% 0 10% 0); }
108 10% { transform: translate(2px, -1px); clip-path: inset(10% 0 70% 0); }
109 20% { transform: translate(-4px, 1px); clip-path: inset(40% 0 30% 0); }
110 30% { transform: translate(3px, 0); clip-path: inset(75% 0 5% 0); }
111 40% { transform: translate(-2px, -2px); clip-path: inset(5% 0 75% 0); }
112 50% { transform: translate(4px, 1px); clip-path: inset(25% 0 50% 0); }
113 60% { transform: translate(-3px, -1px); clip-path: inset(55% 0 20% 0); }
114 70% { transform: translate(2px, 0); clip-path: inset(85% 0 2% 0); }
115 80% { transform: translate(-5px, 2px); clip-path: inset(35% 0 45% 0); }
116 90% { transform: translate(3px, -1px); clip-path: inset(2% 0 85% 0); }
117 100% { transform: translate(-3px, 0); clip-path: inset(60% 0 10% 0); }
118 }
119
120 /* Motion blur effect */
121 .line {
122 filter: blur(0.3px);
123 animation: lineBlur 2s ease-in-out infinite;
124 }
125
126 .line:nth-child(1) { animation-delay: 0s; }
127 .line:nth-child(2) { animation-delay: 0.3s; }
128 .line:nth-child(3) { animation-delay: 0.6s; }
129
130 @keyframes lineBlur {
131 0%, 100% { filter: blur(0.3px); }
132 25% { filter: blur(1.5px); }
133 50% { filter: blur(0.5px); }
134 75% { filter: blur(2px); }
135 }
136
137 /* Glow effect */
138 .glow {
139 position: absolute;
140 top: 50%;
141 left: 50%;
142 transform: translate(-50%, -50%);
143 width: 300px;
144 height: 300px;
145 background: radial-gradient(ellipse, rgba(180, 50, 180, 0.15) 0%, transparent 70%);
146 pointer-events: none;
147 animation: glowPulse 3s ease-in-out infinite;
148 }
149
150 @keyframes glowPulse {
151 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
152 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
153 }
154
155 /* Vertical motion blur streaks */
156 .line .base::after {
157 content: attr(data-text);
158 position: absolute;
159 top: 0;
160 left: 0;
161 background: linear-gradient(180deg, transparent 0%, rgba(255, 80, 180, 0.3) 50%, transparent 100%);
162 -webkit-background-clip: text;
163 -webkit-text-fill-color: transparent;
164 background-clip: text;
165 filter: blur(4px);
166 animation: streakAnim 2s ease-in-out infinite;
167 }
168
169 @keyframes streakAnim {
170 0%, 100% { transform: scaleY(1) translateY(0); opacity: 0.5; }
171 50% { transform: scaleY(1.3) translateY(-5px); opacity: 0.8; }
172 }
173</style>
174</head>
175<body>
176<div class="container">
177 <div class="glow"></div>
178 <div class="text-wrapper">
179 <div class="line">
180 <span class="glitch-r">FALL</span>
181 <span class="glitch-b">FALL</span>
182 <span class="base" data-text="FALL">FALL</span>
183 </div>
184 <div class="line">
185 <span class="glitch-r">IN</span>
186 <span class="glitch-b">IN</span>
187 <span class="base" data-text="IN">IN</span>
188 </div>
189 <div class="line">
190 <span class="glitch-r">LOVE</span>
191 <span class="glitch-b">LOVE</span>
192 <span class="base" data-text="LOVE">LOVE</span>
193 </div>
194 </div>
195</div>
196
197<script>
198 // Randomize glitch timing slightly for organic feel
199 const glitchR = document.querySelectorAll('.glitch-r');
200 const glitchB = document.querySelectorAll('.glitch-b');
201
202 glitchR.forEach((el, i) => {
203 el.style.animationDelay = `${i * 0.15}s`;
204 el.style.animationDuration = `${1.8 + Math.random() * 0.6}s`;
205 });
206
207 glitchB.forEach((el, i) => {
208 el.style.animationDelay = `${i * 0.2 + 0.1}s`;
209 el.style.animationDuration = `${1.9 + Math.random() * 0.5}s`;
210 });
211
212 // Random intense glitch bursts
213 function randomGlitch() {
214 const container = document.querySelector('.container');
215 const duration = 100 + Math.random() * 150;
216
217 container.style.filter = `blur(${Math.random() * 2}px)`;
218
219 setTimeout(() => {
220 container.style.filter = '';
221 }, duration);
222
223 setTimeout(randomGlitch, 800 + Math.random() * 2000);
224 }
225
226 randomGlitch();
227</script>
228</body>
229</html>