model output
Claude Sonnet 4.6

Exploring Bourbon
A 0.75T 0.25
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>Spinning Ball</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    width: 100vw;
16    height: 100vh;
17    background-color: #e8609a;
18    display: flex;
19    align-items: center;
20    justify-content: center;
21    overflow: hidden;
22  }
23
24  .scene {
25    position: relative;
26    width: 50px;
27    height: 50px;
28    display: flex;
29    align-items: center;
30    justify-content: center;
31  }
32
33  .ball {
34    width: 40px;
35    height: 40px;
36    background: white;
37    border-radius: 50%;
38    position: relative;
39    animation: spin3d 1.2s ease-in-out infinite;
40    box-shadow: 4px 6px 8px rgba(0,0,0,0.25);
41  }
42
43  @keyframes spin3d {
44    0% {
45      transform: scaleX(1);
46      box-shadow: 4px 6px 8px rgba(0,0,0,0.25);
47    }
48    25% {
49      transform: scaleX(0.15);
50      box-shadow: 2px 6px 6px rgba(0,0,0,0.2);
51    }
52    50% {
53      transform: scaleX(1);
54      box-shadow: 4px 6px 8px rgba(0,0,0,0.25);
55    }
56    75% {
57      transform: scaleX(0.15);
58      box-shadow: 2px 6px 6px rgba(0,0,0,0.2);
59    }
60    100% {
61      transform: scaleX(1);
62      box-shadow: 4px 6px 8px rgba(0,0,0,0.25);
63    }
64  }
65</style>
66</head>
67<body>
68  <div class="scene">
69    <div class="ball"></div>
70  </div>
71</body>
72</html>