← back to Only CSS: Colorful Jewelrycompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Colorful Jewelry
A 0.82T 0.18
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>Geometric Prismatic Animation</title>
7 <style>
8 :root {
9 --bg-color: #000;
10 --container-w: 320px;
11 --container-h: 600px;
12 }
13
14 body {
15 margin: 0;
16 padding: 0;
17 background-color: var(--bg-color);
18 display: flex;
19 justify-content: center;
20 align-items: center;
21 height: 100vh;
22 overflow: hidden;
23 }
24
25 /* The main frame of the animation */
26 .stage {
27 width: var(--container-w);
28 height: var(--container-h);
29 position: relative;
30 background: #111;
31 overflow: hidden;
32 box-shadow: 0 0 50px rgba(0,0,0,0.5);
33 }
34
35 /* Triangle shards */
36 .shard {
37 position: absolute;
38 top: -25%;
39 left: -25%;
40 width: 150%;
41 height: 150%;
42 opacity: 0.6;
43 mix-blend-mode: screen;
44 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
45 pointer-events: none;
46 }
47
48 /* Specific Shard Animations */
49 @keyframes float-1 {
50 0% { transform: translate(0, 0) rotate(0deg) scale(1); }
51 33% { transform: translate(-10%, 5%) rotate(120deg) scale(1.2); }
52 66% { transform: translate(5%, -10%) rotate(240deg) scale(0.8); }
53 100% { transform: translate(0, 0) rotate(360deg) scale(1); }
54 }
55
56 @keyframes float-2 {
57 0% { transform: translate(0, 0) rotate(0deg) scale(1.1); }
58 50% { transform: translate(15%, 10%) rotate(-180deg) scale(0.9); }
59 100% { transform: translate(0, 0) rotate(-360deg) scale(1.1); }
60 }
61
62 @keyframes float-3 {
63 0% { transform: translate(0, 0) rotate(45deg); opacity: 0.4; }
64 50% { transform: translate(-5%, -15%) rotate(225deg); opacity: 0.8; }
65 100% { transform: translate(0, 0) rotate(405deg); opacity: 0.4; }
66 }
67
68 /* Flare layer for the bright center highlight */
69 .flare {
70 position: absolute;
71 width: 200%;
72 height: 200%;
73 top: -50%;
74 left: -50%;
75 background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%);
76 mix-blend-mode: overlay;
77 animation: pulse-flare 8s infinite ease-in-out;
78 }
79
80 @keyframes pulse-flare {
81 0%, 100% { transform: scale(1) translate(0,0); opacity: 0.3; }
82 50% { transform: scale(1.2) translate(-5%, 5%); opacity: 0.6; }
83 }
84 </style>
85</head>
86<body>
87
88 <div class="stage" id="stage">
89 <!-- Flare highlight for the center glow effect -->
90 <div class="flare"></div>
91 </div>
92
93 <script>
94 const stage = document.getElementById('stage');
95
96 // Define a set of colors matching the video (Pinks, Purples, Golds, Greens, Cyans)
97 const colors = [
98 '#ff00ff', // Magenta
99 '#00ffff', // Cyan
100 '#7fff00', // Chartreuse
101 '#ff8c00', // Dark Orange
102 '#9400d3', // Dark Violet
103 '#ffd700', // Gold
104 '#ffffff', // White (for center brightness)
105 '#4169e1', // Royal Blue
106 '#ff1493' // Deep Pink
107 ];
108
109 // Create shards programmatically to ensure variety and coverage
110 const shardCount = 18;
111
112 for (let i = 0; i < shardCount; i++) {
113 const shard = document.createElement('div');
114 shard.className = 'shard';
115
116 // Randomize properties
117 const color = colors[i % colors.length];
118 const duration = 12 + Math.random() * 20; // 12s to 32s
119 const delay = Math.random() * -20; // Random start point
120 const animType = (i % 3) + 1; // Pick one of the 3 keyframe sets
121
122 // Generate a random skinny triangle shape
123 const p1 = Math.random() * 100;
124 const p2 = Math.random() * 100;
125 const p3 = Math.random() * 100;
126 shard.style.clipPath = `polygon(${p1}% 0%, 0% ${p2}%, 100% ${p3}%)`;
127
128 shard.style.backgroundColor = color;
129 shard.style.animation = `float-${animType} ${duration}s infinite linear`;
130 shard.style.animationDelay = `${delay}s`;
131
132 // Vary the opacity for depth
133 shard.style.opacity = Math.random() * 0.4 + 0.2;
134
135 stage.appendChild(shard);
136 }
137
138 // Add a few very bright shards to recreate the white center flash seen in the video
139 for (let i = 0; i < 4; i++) {
140 const light = document.createElement('div');
141 light.className = 'shard';
142 light.style.backgroundColor = '#fff';
143 light.style.clipPath = `polygon(50% 20%, 20% 80%, 80% 80%)`;
144 light.style.animation = `float-1 ${10 + i * 2}s infinite ease-in-out reverse`;
145 light.style.opacity = '0.3';
146 stage.appendChild(light);
147 }
148 </script>
149</body>
150</html>