← back to Only CSS: Text Slicercompare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Text Slicer
A 0.39T 0.22
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>Halloween Animation</title>
7 <style>
8 body {
9 background-color: #000;
10 overflow: hidden;
11 margin: 0;
12 font-family: Arial, sans-serif;
13 }
14 .animation-container {
15 position: absolute;
16 top: 50%;
17 left: 50%;
18 transform: translate(-50%, -50%);
19 font-size: 2em;
20 }
21 .fragment {
22 position: absolute;
23 background-color: #fff;
24 transition: all 0.5s ease-out;
25 }
26 </style>
27</head>
28<body>
29 <div class="animation-container">
30 <!-- Fragments will be generated here -->
31 </div>
32
33 <script>
34 const container = document.querySelector('.animation-container');
35 const colors = ['#FF69B4', '#33CC33', '#6666FF', '#CC3333', '#CCCC33'];
36 const fragments = [];
37 let animationComplete = false;
38
39 // Function to create fragment
40 function createFragment(x, y, color, width, height) {
41 const fragment = document.createElement('div');
42 fragment.classList.add('fragment');
43 fragment.style.top = `${y}%`;
44 fragment.style.left = `${x}%`;
45 fragment.style.width = `${width}px`;
46 fragment.style.height = `${height}px`;
47 fragment.style.background = color;
48 fragment.style.transform = `translate(${Math.random() * 100}px, ${Math.random() * 100}px)`;
49 container.appendChild(fragment);
50 return fragment;
51 }
52
53 // Initial fragments
54 for (let i = 0; i < 50; i++) {
55 const x = Math.random() * 100;
56 const y = Math.random() * 100;
57 const color = colors[Math.floor(Math.random() * colors.length)];
58 const width = Math.random() * 20 + 10;
59 const height = Math.random() * 20 + 10;
60 fragments.push(createFragment(x, y, color, width, height));
61 }
62
63 // Animation loop
64 function animate() {
65 if (animationComplete) return;
66 fragments.forEach((fragment, index) => {
67 const x = Math.random() * 100;
68 const y = Math.random() * 100;
69 fragment.style.top = `${y}%`;
70 fragment.style.left = `${x}%`;
71 fragment.style.transform = `translate(${Math.random() * 100}px, ${Math.random() * 100}px) rotate(${Math.random() * 360}deg)`;
72 if (index > 20 && Math.random() > 0.8) {
73 fragment.style.opacity = 0;
74 setTimeout(() => {
75 fragment.remove();
76 fragments.splice(index, 1);
77 }, 500);
78 }
79 });
80 if (fragments.length < 10) {
81 const x = Math.random() * 100;
82 const y = Math.random() * 100;
83 const color = colors[Math.floor(Math.random() * colors.length)];
84 const width = Math.random() * 20 + 10;
85 const height = Math.random() * 20 + 10;
86 fragments.push(createFragment(x, y, color, width, height));
87 }
88 if (fragments.length === 0) {
89 animationComplete = true;
90 const happyHalloween = document.createElement('div');
91 happyHalloween.style.fontSize = '3em';
92 happyHalloween.style.color = '#fff';
93 happyHalloween.style.position = 'absolute';
94 happyHalloween.style.top = '50%';
95 happyHalloween.style.left = '50%';
96 happyHalloween.style.transform = 'translate(-50%, -50%)';
97 happyHalloween.textContent = 'HAPPY HALLOWEEN :)';
98 container.appendChild(happyHalloween);
99 }
100 requestAnimationFrame(animate);
101 }
102 animate();
103 </script>
104</body>
105</html>