← back to Exploring Bourboncompare with ground truth →
model output
Claude Sonnet 4.6
Exploring Bourbon
A 0.75T 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>Square Animation</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 width: 100vw;
12 height: 100vh;
13 background-color: #d9644a;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 overflow: hidden;
18 }
19
20 .container {
21 position: relative;
22 width: 50px;
23 height: 50px;
24 display: flex;
25 flex-direction: column;
26 align-items: center;
27 justify-content: center;
28 }
29
30 .top-half, .bottom-half {
31 width: 50px;
32 height: 25px;
33 background-color: #9b2355;
34 position: absolute;
35 left: 0;
36 }
37
38 .top-half {
39 top: 0;
40 border-radius: 0;
41 animation: topHalf 2s ease-in-out infinite;
42 }
43
44 .bottom-half {
45 bottom: 0;
46 border-radius: 0;
47 animation: bottomHalf 2s ease-in-out infinite;
48 }
49
50 @keyframes topHalf {
51 0% {
52 top: 0;
53 height: 25px;
54 background-color: #9b2355;
55 border-radius: 0;
56 }
57 30% {
58 top: -2px;
59 height: 25px;
60 background-color: #9b2355;
61 border-radius: 0;
62 }
63 50% {
64 top: 0;
65 height: 25px;
66 background-color: white;
67 border-radius: 14px 14px 14px 14px;
68 }
69 70% {
70 top: -2px;
71 height: 25px;
72 background-color: #9b2355;
73 border-radius: 0;
74 }
75 100% {
76 top: 0;
77 height: 25px;
78 background-color: #9b2355;
79 border-radius: 0;
80 }
81 }
82
83 @keyframes bottomHalf {
84 0% {
85 bottom: 0;
86 height: 25px;
87 background-color: #9b2355;
88 border-radius: 0;
89 }
90 30% {
91 bottom: -2px;
92 height: 25px;
93 background-color: #9b2355;
94 border-radius: 0;
95 }
96 50% {
97 bottom: 0;
98 height: 25px;
99 background-color: white;
100 border-radius: 14px 14px 14px 14px;
101 }
102 70% {
103 bottom: -2px;
104 height: 25px;
105 background-color: #9b2355;
106 border-radius: 0;
107 }
108 100% {
109 bottom: 0;
110 height: 25px;
111 background-color: #9b2355;
112 border-radius: 0;
113 }
114 }
115
116 .box {
117 width: 50px;
118 height: 50px;
119 background-color: #9b2355;
120 border-radius: 0px;
121 animation: boxAnim 2s ease-in-out infinite;
122 position: absolute;
123 }
124
125 @keyframes boxAnim {
126 0% { background-color: #9b2355; border-radius: 4px; transform: scale(1); }
127 25% { background-color: white; border-radius: 14px; transform: scale(1); }
128 50% { background-color: #9b2355; border-radius: 4px; transform: scale(1); }
129 75% { background-color: white; border-radius: 14px; transform: scale(1); }
130 100% { background-color: #9b2355; border-radius: 4px; transform: scale(1); }
131 }
132</style>
133</head>
134<body>
135 <div class="container">
136 <div class="box"></div>
137 </div>
138
139 <script>
140 // Animate the box with split effect
141 const box = document.querySelector('.box');
142 const container = document.querySelector('.container');
143
144 let phase = 0;
145 const duration = 2000;
146
147 function animate() {
148 const t = (Date.now() % duration) / duration;
149
150 if (t < 0.25) {
151 // Crimson square
152 const p = t / 0.25;
153 box.style.background = '#9b2355';
154 box.style.borderRadius = '4px';
155 box.style.clipPath = '';
156 } else if (t < 0.5) {
157 // Transition to white rounded
158 const p = (t - 0.25) / 0.25;
159 const r = 4 + p * 14;
160 box.style.background = `rgb(${Math.round(155 + p*100)}, ${Math.round(35 + p*220)}, ${Math.round(85 + p*170)})`;
161 box.style.borderRadius = r + 'px';
162 } else if (t < 0.75) {
163 // Split: white rounded
164 const p = (t - 0.5) / 0.25;
165 box.style.background = 'white';
166 box.style.borderRadius = '14px';
167 } else {
168 // Back to crimson
169 const p = (t - 0.75) / 0.25;
170 const r = 14 - p * 10;
171 box.style.background = `rgb(${Math.round(255 - p*100)}, ${Math.round(255 - p*220)}, ${Math.round(255 - p*170)})`;
172 box.style.borderRadius = r + 'px';
173 }
174
175 requestAnimationFrame(animate);
176 }
177
178 animate();
179 </script>
180</body>
181</html>