model output
Claude Sonnet 4.6

Exploring Bourbon
A 0.82T 0.28
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>Loading Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #ddd0cc;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16    width: 100vw;
17  }
18
19  .loader {
20    display: flex;
21    align-items: center;
22    gap: 6px;
23    animation: groupRotate 1.6s ease-in-out infinite;
24  }
25
26  .dot {
27    width: 18px;
28    height: 18px;
29    background: white;
30    border: 1.5px solid rgba(200, 80, 100, 0.4);
31  }
32
33  .dot-left {
34    border-radius: 50%;
35    animation: morphLeft 1.6s ease-in-out infinite;
36  }
37
38  .dot-middle {
39    border-radius: 50%;
40  }
41
42  .dot-right {
43    border-radius: 50%;
44    animation: morphRight 1.6s ease-in-out infinite;
45  }
46
47  @keyframes groupRotate {
48    0%   { transform: rotate(0deg); }
49    25%  { transform: rotate(20deg); }
50    50%  { transform: rotate(0deg); }
51    75%  { transform: rotate(20deg); }
52    100% { transform: rotate(0deg); }
53  }
54
55  @keyframes morphLeft {
56    0%   { border-radius: 50%; }
57    25%  { border-radius: 4px; }
58    50%  { border-radius: 50%; }
59    75%  { border-radius: 4px; }
60    100% { border-radius: 50%; }
61  }
62
63  @keyframes morphRight {
64    0%   { border-radius: 50%; }
65    25%  { border-radius: 4px; }
66    50%  { border-radius: 50%; }
67    75%  { border-radius: 4px; }
68    100% { border-radius: 50%; }
69  }
70</style>
71</head>
72<body>
73  <div class="loader">
74    <div class="dot dot-left"></div>
75    <div class="dot dot-middle"></div>
76    <div class="dot dot-right"></div>
77  </div>
78</body>
79</html>