← back to Only CSS: Text Slicercompare with ground truth →
model output
Claude Sonnet 4.6
Only CSS: Text Slicer
A 0.78T 0.35
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>Happy Halloween</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 background: #0d0005;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 min-height: 100vh;
16 overflow: hidden;
17 font-family: 'Arial Black', 'Arial Bold', sans-serif;
18 }
19
20 .scene {
21 position: relative;
22 width: 600px;
23 text-align: left;
24 }
25
26 .text-container {
27 position: relative;
28 }
29
30 .line {
31 display: block;
32 font-size: 90px;
33 font-weight: 900;
34 line-height: 1;
35 letter-spacing: 2px;
36 margin-bottom: 5px;
37 }
38
39 .line3 {
40 font-size: 80px;
41 }
42
43 .letter {
44 display: inline-block;
45 position: relative;
46 animation: letterAssemble 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
47 opacity: 0;
48 }
49
50 @keyframes letterAssemble {
51 0% {
52 opacity: 0;
53 transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(0.3);
54 }
55 30% { opacity: 1; }
56 100% {
57 opacity: 1;
58 transform: translate(0, 0) rotate(0deg) scale(1);
59 }
60 }
61
62 /* Color layers effect - multiple colored copies */
63 .letter::before,
64 .letter::after {
65 content: attr(data-char);
66 position: absolute;
67 top: 0;
68 left: 0;
69 width: 100%;
70 height: 100%;
71 }
72
73 .letter::before {
74 color: var(--c2);
75 transform: translate(-3px, 2px);
76 z-index: -1;
77 }
78
79 .letter::after {
80 color: var(--c3);
81 transform: translate(3px, -2px);
82 z-index: -2;
83 }
84
85 /* Individual letter colors */
86 .l-H1 { color: #9b59b6; --c2: #2ecc71; --c3: #e74c3c; --tx: -300px; --ty: -200px; --tr: -45deg; animation-delay: 0.5s; }
87 .l-A1 { color: #e91e8c; --c2: #00bcd4; --c3: #8bc34a; --tx: -100px; --ty: -300px; --tr: 30deg; animation-delay: 0.6s; }
88 .l-P1 { color: #3498db; --c2: #ff5722; --c3: #9c27b0; --tx: 200px; --ty: -250px; --tr: -20deg; animation-delay: 0.7s; }
89 .l-P2 { color: #ff69b4; --c2: #4caf50; --c3: #ff9800; --tx: 300px; --ty: -100px; --tr: 40deg; animation-delay: 0.8s; }
90 .l-Y1 { color: #a8e063; --c2: #e91e8c; --c3: #00bcd4; --tx: 400px; --ty: -200px; --tr: -35deg; animation-delay: 0.9s; }
91
92 .l-H2 { color: #00bcd4; --c2: #ff5722; --c3: #9b59b6; --tx: -400px; --ty: 100px; --tr: 50deg; animation-delay: 1.0s; }
93 .l-A2 { color: #e91e8c; --c2: #8bc34a; --c3: #3498db; --tx: -200px; --ty: 200px; --tr: -25deg; animation-delay: 1.1s; }
94 .l-L1 { color: #ff5722; --c2: #9b59b6; --c3: #00bcd4; --tx: 100px; --ty: 300px; --tr: 60deg; animation-delay: 1.2s; }
95 .l-L2 { color: #8bc34a; --c2: #e91e8c; --c3: #ff9800; --tx: -300px; --ty: 300px; --tr: -40deg; animation-delay: 1.3s; }
96 .l-O1 { color: #a8e063; --c2: #3498db; --c3: #e74c3c; --tx: 200px; --ty: 250px; --tr: 20deg; animation-delay: 1.4s; }
97 .l-W1 { color: #ff69b4; --c2: #00bcd4; --c3: #8bc34a; --tx: 350px; --ty: 150px; --tr: -55deg; animation-delay: 1.5s; }
98 .l-E1 { color: #e74c3c; --c2: #9b59b6; --c3: #ff5722; --tx: 450px; --ty: 50px; --tr: 35deg; animation-delay: 1.6s; }
99 .l-E2 { color: #00bcd4; --c2: #8bc34a; --c3: #e91e8c; --tx: 500px; --ty: -100px; --tr: -30deg; animation-delay: 1.7s; }
100 .l-N1 { color: #9b59b6; --c2: #ff69b4; --c3: #3498db; --tx: 400px; --ty: 200px; --tr: 45deg; animation-delay: 1.8s; }
101
102 .l-S1 { color: #9b59b6; --c2: #ff9800; --c3: #e91e8c; --tx: -350px; --ty: 200px; --tr: -60deg; animation-delay: 1.9s; }
103 .l-D1 { color: #ff9800; --c2: #9b59b6; --c3: #00bcd4; --tx: -100px; --ty: 350px; --tr: 25deg; animation-delay: 2.0s; }
104
105 /* Floating extra colored shapes */
106 .extra {
107 position: absolute;
108 font-size: 90px;
109 font-weight: 900;
110 opacity: 0;
111 animation: floatExtra 3s ease-out forwards;
112 }
113
114 @keyframes floatExtra {
115 0% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--tr)) scale(0.5); }
116 40% { opacity: 0.7; }
117 100% { opacity: 0; transform: translate(calc(var(--tx) * 0.1), calc(var(--ty) * 0.1)) rotate(calc(var(--tr) * 0.1)) scale(0.8); }
118 }
119</style>
120</head>
121<body>
122<div class="scene">
123 <div class="text-container">
124 <div class="line">
125 <span class="letter l-H1" data-char="H">H</span><span class="letter l-A1" data-char="A">A</span><span class="letter l-P1" data-char="P">P</span><span class="letter l-P2" data-char="P">P</span><span class="letter l-Y1" data-char="Y">Y</span>
126 </div>
127 <div class="line">
128 <span class="letter l-H2" data-char="H">H</span><span class="letter l-A2" data-char="A">A</span><span class="letter l-L1" data-char="L">L</span><span class="letter l-L2" data-char="L">L</span><span class="letter l-O1" data-char="O">O</span><span class="letter l-W1" data-char="W">W</span><span class="letter l-E1" data-char="E">E</span><span class="letter l-E2" data-char="E">E</span><span class="letter l-N1" data-char="N">N</span>
129 </div>
130 <div class="line line3">
131 <span class="letter l-S1" data-char=":">:</span><span class="letter l-D1" data-char=")">)</span>
132 </div>
133 </div>
134</div>
135
136<script>
137 // Add dynamic random starting positions for each letter
138 document.querySelectorAll('.letter').forEach((el, i) => {
139 const angle = (Math.random() * 360) * Math.PI / 180;
140 const dist = 300 + Math.random() * 400;
141 const tx = Math.cos(angle) * dist;
142 const ty = Math.sin(angle) * dist;
143 const tr = (Math.random() - 0.5) * 180;
144 el.style.setProperty('--tx', tx + 'px');
145 el.style.setProperty('--ty', ty + 'px');
146 el.style.setProperty('--tr', tr + 'deg');
147 });
148
149 // Create floating ghost letters
150 const colors = ['#e91e8c','#00bcd4','#8bc34a','#ff5722','#9b59b6','#ff69b4','#a8e063','#3498db','#e74c3c','#ff9800'];
151 const chars = 'HAPPYHALLOWEEN';
152 const scene = document.querySelector('.scene');
153
154 for (let i = 0; i < 20; i++) {
155 const ghost = document.createElement('div');
156 ghost.className = 'extra';
157 ghost.textContent = chars[Math.floor(Math.random() * chars.length)];
158 ghost.style.color = colors[Math.floor(Math.random() * colors.length)];
159 ghost.style.left = (Math.random() * 700 - 100) + 'px';
160 ghost.style.top = (Math.random() * 400 - 100) + 'px';
161 ghost.style.fontSize = (40 + Math.random() * 60) + 'px';
162 const tx = (Math.random() - 0.5) * 600;
163 const ty = (Math.random() - 0.5) * 400;
164 const tr = (Math.random() - 0.5) * 180;
165 ghost.style.setProperty('--tx', tx + 'px');
166 ghost.style.setProperty('--ty', ty + 'px');
167 ghost.style.setProperty('--tr', tr + 'deg');
168 ghost.style.animationDelay = (Math.random() * 1.5) + 's';
169 ghost.style.animationDuration = (2 + Math.random() * 2) + 's';
170 scene.appendChild(ghost);
171 }
172</script>
173</body>
174</html>