model output
GPT-5.4

Exploring Bourbon
A 0.79T 0.30
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>Minimal Rotating Blob Animation</title>
7<style>
8  :root{
9    --bg:#86d7c8;
10    --yellow1:#f6d45a;
11    --yellow2:#e7b52f;
12    --shadow:rgba(170,120,20,.28);
13  }
14
15  html,body{
16    margin:0;
17    width:100%;
18    height:100%;
19    overflow:hidden;
20    background:var(--bg);
21  }
22
23  body{
24    display:grid;
25    place-items:center;
26    font-family:sans-serif;
27  }
28
29  .scene{
30    position:relative;
31    width:120px;
32    height:120px;
33  }
34
35  .group{
36    position:absolute;
37    left:50%;
38    top:50%;
39    width:56px;
40    height:56px;
41    transform:translate(-50%,-50%);
42    animation:wobble 1.8s ease-in-out infinite;
43    filter:drop-shadow(0 4px 8px var(--shadow));
44  }
45
46  .blob{
47    position:absolute;
48    left:50%;
49    top:50%;
50    width:38px;
51    height:38px;
52    transform:translate(-50%,-50%) rotate(-45deg);
53    transform-origin:50% 50%;
54    background:linear-gradient(135deg,var(--yellow1) 0%, #f0c847 55%, var(--yellow2) 100%);
55    border-radius:55% 55% 55% 0;
56    animation:spin 1.8s cubic-bezier(.55,.08,.45,.92) infinite;
57  }
58
59  .dot{
60    position:absolute;
61    left:50%;
62    top:50%;
63    width:10px;
64    height:10px;
65    margin:-5px 0 0 -5px;
66    border-radius:50%;
67    background:linear-gradient(135deg,var(--yellow1),var(--yellow2));
68    animation:orbit 1.8s cubic-bezier(.55,.08,.45,.92) infinite;
69  }
70
71  @keyframes spin{
72    0%   { transform:translate(-50%,-50%) rotate(-45deg); }
73    25%  { transform:translate(-50%,-50%) rotate(0deg); }
74    50%  { transform:translate(-50%,-50%) rotate(45deg); }
75    75%  { transform:translate(-50%,-50%) rotate(0deg); }
76    100% { transform:translate(-50%,-50%) rotate(-45deg); }
77  }
78
79  /* Dot stays just outside the flat edge, moving from left -> bottom -> right -> bottom */
80  @keyframes orbit{
81    0%   { transform:translate(-27px, -2px); }
82    25%  { transform:translate(-5px, 23px); }
83    50%  { transform:translate(27px, -2px); }
84    75%  { transform:translate(-5px, 23px); }
85    100% { transform:translate(-27px, -2px); }
86  }
87
88  /* slight positional drift like the sampled frames */
89  @keyframes wobble{
90    0%   { transform:translate(-50%,-50%) translate(-2px,-2px); }
91    25%  { transform:translate(-50%,-50%) translate(0px,0px); }
92    50%  { transform:translate(-50%,-50%) translate(2px,-1px); }
93    75%  { transform:translate(-50%,-50%) translate(0px,0px); }
94    100% { transform:translate(-50%,-50%) translate(-2px,-2px); }
95  }
96</style>
97</head>
98<body>
99  <div class="scene">
100    <div class="group">
101      <div class="blob"></div>
102      <div class="dot"></div>
103    </div>
104  </div>
105</body>
106</html>