← back to Only CSS: Fall In Lovecompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Fall In Love
A 0.63T 0.31
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 Glitch Animation</title>
7 <style>
8 @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
9
10 :root {
11 --bg-color: #0e0509;
12 --primary-color: #ff2d95;
13 --secondary-color: #1e00ff;
14 --accent-color: #00f2ff;
15 --text-main: #f0f0f0;
16 }
17
18 * {
19 margin: 0;
20 padding: 0;
21 box-sizing: border-box;
22 }
23
24 body {
25 background-color: var(--bg-color);
26 height: 100vh;
27 display: flex;
28 justify-content: center;
29 align-items: center;
30 overflow: hidden;
31 font-family: 'Archivo Black', sans-serif;
32 }
33
34 /* Scanline Overlay Effect */
35 body::before {
36 content: " ";
37 display: block;
38 position: absolute;
39 top: 0;
40 left: 0;
41 bottom: 0;
42 right: 0;
43 background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
44 z-index: 10;
45 background-size: 100% 4px, 3px 100%;
46 pointer-events: none;
47 }
48
49 .glitch-wrapper {
50 position: relative;
51 transform: rotate(-10deg) skew(5deg);
52 animation: global-shake 4s infinite;
53 }
54
55 .glitch {
56 position: relative;
57 color: var(--text-main);
58 font-size: 8rem;
59 line-height: 0.85;
60 letter-spacing: -2px;
61 text-transform: uppercase;
62 text-align: left;
63 user-select: none;
64 text-shadow: 2px 0 var(--accent-color), -2px 0 var(--primary-color);
65 }
66
67 /* Glitch Layers */
68 .glitch::before,
69 .glitch::after {
70 content: attr(data-text);
71 position: absolute;
72 top: 0;
73 left: 0;
74 width: 100%;
75 height: 100%;
76 opacity: 0.8;
77 }
78
79 .glitch::before {
80 left: 3px;
81 text-shadow: -3px 0 var(--secondary-color);
82 clip-path: inset(0 0 0 0);
83 animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
84 }
85
86 .glitch::after {
87 left: -3px;
88 text-shadow: -3px 0 var(--primary-color);
89 clip-path: inset(0 0 0 0);
90 animation: glitch-anim-2 3s infinite linear alternate-reverse;
91 }
92
93 /* Animations */
94 @keyframes glitch-anim-1 {
95 0% { clip-path: inset(20% 0 30% 0); transform: translate(-5px, 0); }
96 10% { clip-path: inset(60% 0 10% 0); transform: translate(5px, 2px); }
97 20% { clip-path: inset(10% 0 70% 0); transform: translate(-2px, -3px); }
98 30% { clip-path: inset(40% 0 40% 0); transform: translate(4px, 0); }
99 40% { clip-path: inset(80% 0 5% 0); transform: translate(-4px, 5px); }
100 50% { clip-path: inset(50% 0 20% 0); transform: translate(2px, -2px); }
101 60% { clip-path: inset(15% 0 75% 0); transform: translate(-6px, 1px); }
102 70% { clip-path: inset(35% 0 55% 0); transform: translate(5px, 4px); }
103 80% { clip-path: inset(5% 0 85% 0); transform: translate(-3px, -4px); }
104 90% { clip-path: inset(70% 0 15% 0); transform: translate(4px, 2px); }
105 100% { clip-path: inset(25% 0 35% 0); transform: translate(-2px, 0); }
106 }
107
108 @keyframes glitch-anim-2 {
109 0% { clip-path: inset(10% 0 80% 0); transform: translate(5px, 0); }
110 15% { clip-path: inset(45% 0 25% 0); transform: translate(-5px, -2px); }
111 30% { clip-path: inset(25% 0 60% 0); transform: translate(2px, 3px); }
112 45% { clip-path: inset(75% 0 10% 0); transform: translate(-3px, 0); }
113 60% { clip-path: inset(5% 0 75% 0); transform: translate(5px, -4px); }
114 75% { clip-path: inset(55% 0 30% 0); transform: translate(-4px, 2px); }
115 90% { clip-path: inset(30% 0 45% 0); transform: translate(3px, 4px); }
116 100% { clip-path: inset(85% 0 5% 0); transform: translate(-2px, -1px); }
117 }
118
119 @keyframes global-shake {
120 0% { transform: rotate(-10deg) skew(5deg) translate(0,0); }
121 2% { transform: rotate(-10.5deg) skew(4.5deg) translate(-2px, 1px); }
122 4% { transform: rotate(-9.5deg) skew(5.5deg) translate(2px, -1px); }
123 6% { transform: rotate(-10deg) skew(5deg) translate(0,0); }
124 100% { transform: rotate(-10deg) skew(5deg) translate(0,0); }
125 }
126
127 /* Mobile Adjustments */
128 @media (max-width: 600px) {
129 .glitch {
130 font-size: 4rem;
131 }
132 }
133 </style>
134</head>
135<body>
136
137 <div class="glitch-wrapper">
138 <h1 class="glitch" data-text="FALL IN LOVE">
139 FALL<br>IN<br>LOVE
140 </h1>
141 </div>
142
143 <script>
144 // Optional: Adding extra jitter via JS for a more organic feel
145 const glitchElement = document.querySelector('.glitch');
146
147 function randomGlitch() {
148 const chance = Math.random();
149 if (chance > 0.95) {
150 glitchElement.style.textShadow = `
151 ${Math.random() * 10 - 5}px 0 rgba(255,0,255,0.7),
152 ${Math.random() * 10 - 5}px 0 rgba(0,255,255,0.7)
153 `;
154 setTimeout(() => {
155 glitchElement.style.textShadow = '';
156 }, 50);
157 }
158 requestAnimationFrame(randomGlitch);
159 }
160
161 randomGlitch();
162 </script>
163</body>
164</html>