model output
Claude Sonnet 4.6

Exploring Bourbon
A 0.82T 0.21
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>Bell 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: #6ecfb5;
14    display: flex;
15    align-items: center;
16    justify-content: center;
17  }
18
19  .bell-wrapper {
20    position: relative;
21    display: flex;
22    flex-direction: column;
23    align-items: center;
24    animation: ring 1s ease-in-out infinite;
25    transform-origin: center top;
26  }
27
28  @keyframes ring {
29    0%   { transform: rotate(-25deg); }
30    15%  { transform: rotate(25deg); }
31    30%  { transform: rotate(-20deg); }
32    45%  { transform: rotate(20deg); }
33    60%  { transform: rotate(-10deg); }
34    75%  { transform: rotate(10deg); }
35    90%  { transform: rotate(-3deg); }
36    100% { transform: rotate(0deg); }
37  }
38
39  .bell-body {
40    width: 50px;
41    height: 55px;
42    background: linear-gradient(135deg, #f5c842 0%, #e8a020 100%);
43    border-radius: 25px 25px 0 0;
44    position: relative;
45  }
46
47  .bell-body::after {
48    content: '';
49    position: absolute;
50    bottom: 0;
51    left: 0;
52    right: 0;
53    height: 14px;
54    background: linear-gradient(135deg, #f5c842 0%, #e8a020 100%);
55    border-radius: 0;
56  }
57
58  .bell-base {
59    width: 54px;
60    height: 10px;
61    background: linear-gradient(135deg, #f5c842 0%, #e8a020 100%);
62    border-radius: 0 0 4px 4px;
63    margin-top: 0;
64  }
65
66  .bell-clapper {
67    width: 10px;
68    height: 10px;
69    background: linear-gradient(135deg, #f5c842 0%, #e8a020 100%);
70    border-radius: 50%;
71    margin-top: 5px;
72    animation: clapper 1s ease-in-out infinite;
73    transform-origin: center top;
74  }
75
76  @keyframes clapper {
77    0%   { transform: translateX(-10px); }
78    15%  { transform: translateX(10px); }
79    30%  { transform: translateX(-8px); }
80    45%  { transform: translateX(8px); }
81    60%  { transform: translateX(-4px); }
82    75%  { transform: translateX(4px); }
83    90%  { transform: translateX(-1px); }
84    100% { transform: translateX(0); }
85  }
86</style>
87</head>
88<body>
89  <div class="bell-wrapper">
90    <div class="bell-body"></div>
91    <div class="bell-base"></div>
92    <div class="bell-clapper"></div>
93  </div>
94</body>
95</html>