← back to Only CSS: Fall In Lovecompare with ground truth →
model output
GPT-5.4
Only CSS: Fall In Love
A 0.84T 0.25
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" />
6<title>Fall In Love Text Animation</title>
7<style>
8 :root{
9 --bg:#1a070d;
10 --pink:#ff4aa2;
11 --magenta:#ff3fd8;
12 --violet:#9b5cff;
13 --red:#ff5a6f;
14 --shadow:rgba(255,70,180,.28);
15 }
16
17 html,body{
18 margin:0;
19 height:100%;
20 overflow:hidden;
21 background:var(--bg);
22 font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
23 }
24
25 .stage{
26 position:relative;
27 width:100vw;
28 height:100vh;
29 display:grid;
30 place-items:center;
31 background:var(--bg);
32 }
33
34 .wrap{
35 position:relative;
36 transform: translate(8px, 8px) rotate(-2deg) scale(1.02);
37 filter: saturate(1.15);
38 }
39
40 .text{
41 position:relative;
42 display:grid;
43 grid-template-columns: repeat(4, max-content);
44 grid-auto-rows:max-content;
45 gap: 8px 10px;
46 line-height:.82;
47 font-size:min(16vw, 118px);
48 font-weight:900;
49 letter-spacing:.02em;
50 text-transform:uppercase;
51 user-select:none;
52 }
53
54 .char{
55 position:relative;
56 display:inline-block;
57 color:transparent;
58 background:linear-gradient(180deg, #ff6cf0 0%, var(--magenta) 28%, #d85cff 55%, var(--red) 100%);
59 -webkit-background-clip:text;
60 background-clip:text;
61 transform-origin:50% 50%;
62 animation: jitter 1.15s cubic-bezier(.45,.02,.55,.98) infinite alternate;
63 filter:
64 drop-shadow(0 0 4px rgba(255,80,200,.45))
65 drop-shadow(0 0 10px rgba(255,60,180,.18));
66 }
67
68 .char::before,
69 .char::after{
70 content:attr(data-char);
71 position:absolute;
72 inset:0;
73 pointer-events:none;
74 mix-blend-mode:screen;
75 }
76
77 .char::before{
78 color:rgba(255,70,170,.72);
79 transform:translate(-7px, 2px);
80 filter:blur(.4px);
81 opacity:.9;
82 }
83
84 .char::after{
85 color:rgba(120,90,255,.72);
86 transform:translate(6px, -1px);
87 filter:blur(.6px);
88 opacity:.85;
89 }
90
91 .char > i{
92 position:absolute;
93 inset:0;
94 display:block;
95 font-style:normal;
96 color:transparent;
97 background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0));
98 -webkit-background-clip:text;
99 background-clip:text;
100 mix-blend-mode:screen;
101 opacity:.35;
102 transform:translateX(-2px);
103 }
104
105 .r1{ grid-row:1; }
106 .r2{ grid-row:2; }
107 .r3{ grid-row:3; }
108
109 .c1{ grid-column:1; }
110 .c2{ grid-column:2; }
111 .c3{ grid-column:3; }
112 .c4{ grid-column:4; }
113
114 .f{ animation-delay:-.08s; }
115 .a{ animation-delay:-.22s; }
116 .l1{ animation-delay:-.34s; }
117 .l2{ animation-delay:-.48s; }
118 .i{ animation-delay:-.18s; }
119 .n{ animation-delay:-.42s; }
120 .l3{ animation-delay:-.28s; }
121 .o{ animation-delay:-.52s; }
122 .v{ animation-delay:-.12s; }
123 .e{ animation-delay:-.38s; }
124
125 @keyframes jitter{
126 0%{
127 transform:translate(0px,0px) skewX(0deg) scaleY(1);
128 text-shadow: 0 0 0 rgba(0,0,0,0);
129 }
130 12%{
131 transform:translate(1px,-1px) skewX(-1.2deg) scaleY(1.01);
132 }
133 24%{
134 transform:translate(-2px,1px) skewX(.8deg) scaleY(.995);
135 }
136 38%{
137 transform:translate(2px,0px) skewX(-.8deg) scaleY(1.015);
138 }
139 52%{
140 transform:translate(-1px,2px) skewX(1.4deg) scaleY(.99);
141 }
142 68%{
143 transform:translate(3px,-1px) skewX(-1.8deg) scaleY(1.02);
144 }
145 82%{
146 transform:translate(-2px,1px) skewX(1deg) scaleY(.995);
147 }
148 100%{
149 transform:translate(2px,0px) skewX(-1deg) scaleY(1.01);
150 }
151 }
152
153 .wrap::before{
154 content:"";
155 position:absolute;
156 inset:-40px -50px;
157 background:
158 radial-gradient(circle at 50% 50%, rgba(255,0,140,.08), transparent 42%);
159 filter:blur(18px);
160 pointer-events:none;
161 }
162
163 @media (prefers-reduced-motion: reduce){
164 .char{ animation:none; }
165 }
166</style>
167</head>
168<body>
169 <div class="stage">
170 <div class="wrap">
171 <div class="text" aria-label="Fall In Love">
172 <span class="char f r1 c1" data-char="F">F<i>F</i></span>
173 <span class="char a r1 c2" data-char="A">A<i>A</i></span>
174 <span class="char l1 r1 c3" data-char="L">L<i>L</i></span>
175 <span class="char l2 r1 c4" data-char="L">L<i>L</i></span>
176
177 <span class="char i r2 c1" data-char="I">I<i>I</i></span>
178 <span class="char n r2 c2" data-char="N">N<i>N</i></span>
179
180 <span class="char l3 r3 c1" data-char="L">L<i>L</i></span>
181 <span class="char o r3 c2" data-char="O">O<i>O</i></span>
182 <span class="char v r3 c3" data-char="V">V<i>V</i></span>
183 <span class="char e r3 c4" data-char="E">E<i>E</i></span>
184 </div>
185 </div>
186 </div>
187
188<script>
189 // Subtle per-letter random drift to mimic frame-to-frame analog/glitch wobble.
190 const chars = [...document.querySelectorAll('.char')];
191
192 function tick(t){
193 chars.forEach((el, idx) => {
194 const a = t * 0.0022 + idx * 0.9;
195 const x1 = Math.sin(a * 1.7) * 6;
196 const x2 = Math.cos(a * 1.3 + 1.2) * 5;
197 const y1 = Math.cos(a * 1.9) * 1.5;
198 const y2 = Math.sin(a * 1.5 + .8) * 1.2;
199
200 el.style.setProperty('--bx', `${x1.toFixed(2)}px`);
201 el.style.setProperty('--ax', `${x2.toFixed(2)}px`);
202 el.style.setProperty('--by', `${y1.toFixed(2)}px`);
203 el.style.setProperty('--ay', `${y2.toFixed(2)}px`);
204 });
205 requestAnimationFrame(tick);
206 }
207
208 const style = document.createElement('style');
209 style.textContent = `
210 .char::before{ transform:translate(var(--bx, -7px), var(--by, 2px)); }
211 .char::after{ transform:translate(var(--ax, 6px), var(--ay, -1px)); }
212 `;
213 document.head.appendChild(style);
214 requestAnimationFrame(tick);
215</script>
216</body>
217</html>