← back to Only CSS: Text Slicercompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Text Slicer
A 0.72T 0.21
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 Animation</title>
7 <style>
8 :root {
9 --bg-color: #0e0404;
10 }
11
12 body, html {
13 margin: 0;
14 padding: 0;
15 width: 100%;
16 height: 100%;
17 background-color: var(--bg-color);
18 display: flex;
19 justify-content: center;
20 align-items: center;
21 overflow: hidden;
22 font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
23 }
24
25 #container {
26 position: relative;
27 text-align: left;
28 user-select: none;
29 }
30
31 .line-wrapper {
32 position: relative;
33 height: 90px;
34 width: 600px;
35 display: flex;
36 justify-content: flex-start;
37 }
38
39 .shard {
40 position: absolute;
41 left: 0;
42 top: 0;
43 font-size: 85px;
44 line-height: 1;
45 white-space: nowrap;
46 opacity: 0;
47 transition: transform 4.5s cubic-bezier(0.19, 1, 0.22, 1),
48 opacity 3s ease-out;
49 transform-style: preserve-3d;
50 }
51
52 .shard.assembled {
53 transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1) !important;
54 opacity: 1 !important;
55 }
56
57 /* Responsive scaling */
58 @media (max-width: 650px) {
59 #container {
60 transform: scale(0.6);
61 }
62 }
63 </style>
64</head>
65<body>
66
67 <div id="container">
68 <div class="line-wrapper" id="line1"></div>
69 <div class="line-wrapper" id="line2"></div>
70 <div class="line-wrapper" id="line3"></div>
71 </div>
72
73 <script>
74 const texts = ["HAPPY", "HALLOWEEN", ":)"];
75 const colors = [
76 '#9b59b6', // Purple
77 '#2ecc71', // Green
78 '#f1c40f', // Yellow
79 '#e91e63', // Pink
80 '#3498db', // Blue
81 '#1abc9c', // Teal
82 '#95a5a6' // Grey/Silver
83 ];
84
85 const shardsPerLine = 25;
86
87 function createShards() {
88 texts.forEach((text, lineIndex) => {
89 const container = document.getElementById(`line${lineIndex + 1}`);
90
91 for (let i = 0; i < shardsPerLine; i++) {
92 const shard = document.createElement('div');
93 shard.className = 'shard';
94 shard.textContent = text;
95
96 // Random color from palette
97 shard.style.color = colors[Math.floor(Math.random() * colors.length)];
98
99 // Random clip-path polygon to create "shattered" look
100 const p1 = `${Math.random() * 100}% ${Math.random() * 100}%`;
101 const p2 = `${Math.random() * 100}% ${Math.random() * 100}%`;
102 const p3 = `${Math.random() * 100}% ${Math.random() * 100}%`;
103 const p4 = `${Math.random() * 100}% ${Math.random() * 100}%`;
104 shard.style.clipPath = `polygon(${p1}, ${p2}, ${p3}, ${p4})`;
105
106 // Initial chaotic state (off-screen or dispersed)
107 const tx = (Math.random() - 0.5) * 1500;
108 const ty = (Math.random() - 0.5) * 1000;
109 const tz = (Math.random() - 0.5) * 2000;
110 const rx = (Math.random() - 0.5) * 1000;
111 const ry = (Math.random() - 0.5) * 1000;
112 const rz = (Math.random() - 0.5) * 500;
113 const scale = 0.1 + Math.random() * 2;
114
115 shard.style.transform = `translate3d(${tx}px, ${ty}px, ${tz}px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg) scale(${scale})`;
116
117 container.appendChild(shard);
118
119 // Staggered entry delay to match the video's gradual build-up
120 const delay = 500 + (Math.random() * 1000);
121
122 setTimeout(() => {
123 shard.classList.add('assembled');
124 }, delay);
125 }
126 });
127 }
128
129 // Initialize animation after a small delay
130 window.addEventListener('load', () => {
131 setTimeout(createShards, 100);
132 });
133
134 // Optional: Periodic "glitch" or slight movement to keep it dynamic after assembly
135 setInterval(() => {
136 const allShards = document.querySelectorAll('.shard');
137 const randomShard = allShards[Math.floor(Math.random() * allShards.length)];
138 if (randomShard) {
139 randomShard.style.transition = 'transform 0.2s ease-out';
140 randomShard.style.transform = 'translate3d(2px, -2px, 0) scale(1.02)';
141 setTimeout(() => {
142 randomShard.style.transition = 'transform 1s ease-out';
143 randomShard.style.transform = 'translate3d(0, 0, 0) scale(1)';
144 }, 200);
145 }
146 }, 150);
147
148 </script>
149</body>
150</html>