model output
GPT-5.4

Exploring Bourbon
A 0.89T 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>Three Dot Morph Loader</title>
7<style>
8  :root{
9    --bg:#e8d6cf;
10    --dot:#ffffff;
11    --shadow: rgba(120, 58, 78, 0.38);
12    --size: 24px;
13    --gap: 7px;
14    --tilt: 20deg;
15    --dur: 1.15s;
16  }
17
18  html,body{
19    height:100%;
20    margin:0;
21  }
22
23  body{
24    display:grid;
25    place-items:center;
26    background:var(--bg);
27    overflow:hidden;
28    font-family:sans-serif;
29  }
30
31  .loader{
32    display:flex;
33    align-items:center;
34    gap:var(--gap);
35    filter: drop-shadow(-2px 2px 3px var(--shadow));
36    animation: tiltCycle var(--dur) ease-in-out infinite;
37    transform-origin:center;
38  }
39
40  .dot{
41    width:var(--size);
42    height:var(--size);
43    background:var(--dot);
44    border-radius:50%;
45    animation: morph var(--dur) ease-in-out infinite;
46    box-shadow:
47      inset 0 0 0 1px rgba(0,0,0,0.02),
48      0 0 0 0.5px rgba(255,255,255,0.35);
49  }
50
51  .dot:nth-child(2){
52    animation-delay:0s;
53  }
54
55  .dot:nth-child(1),
56  .dot:nth-child(3){
57    animation-delay:0s;
58  }
59
60  @keyframes tiltCycle{
61    0%, 22%, 100%{
62      transform: rotate(0deg);
63    }
64    38%, 62%{
65      transform: rotate(var(--tilt));
66    }
67    78%, 92%{
68      transform: rotate(0deg);
69    }
70  }
71
72  @keyframes morph{
73    0%, 22%, 100%{
74      border-radius:50%;
75      transform: scale(1);
76    }
77    38%, 62%{
78      border-radius:2px;
79      transform: scale(1);
80    }
81    78%, 92%{
82      border-radius:50%;
83      transform: scale(1);
84    }
85  }
86
87  /* center piece stays circular like the reference */
88  .dot:nth-child(2){
89    animation-name:centerMorph;
90  }
91
92  @keyframes centerMorph{
93    0%, 100%{
94      border-radius:50%;
95      transform: scale(1);
96    }
97    38%, 62%{
98      border-radius:50%;
99      transform: scale(1);
100    }
101  }
102</style>
103</head>
104<body>
105  <div class="loader" aria-label="loading">
106    <span class="dot"></span>
107    <span class="dot"></span>
108    <span class="dot"></span>
109  </div>
110</body>
111</html>