model output
Claude Sonnet 4.6

Motion Table - Orbit
A 0.97T 0.72
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>Circle Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #4a4a4a;
12    width: 100vw;
13    height: 100vh;
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    overflow: hidden;
18  }
19
20  .container {
21    position: relative;
22    width: 90px;
23    height: 90px;
24  }
25
26  .ring {
27    position: absolute;
28    top: 0;
29    left: 0;
30    width: 90px;
31    height: 90px;
32    border-radius: 50%;
33    border: 1px solid rgba(200, 200, 200, 0.7);
34  }
35
36  .dot-wrapper {
37    position: absolute;
38    top: 50%;
39    left: 50%;
40    width: 0;
41    height: 0;
42    animation: orbit 2s linear infinite;
43  }
44
45  .dot {
46    position: absolute;
47    width: 18px;
48    height: 18px;
49    background: white;
50    border-radius: 50%;
51    top: -9px;
52    left: 36px; /* radius = 45px, offset by half dot size = 9px => 45-9=36 */
53  }
54
55  @keyframes orbit {
56    from {
57      transform: rotate(0deg);
58    }
59    to {
60      transform: rotate(360deg);
61    }
62  }
63</style>
64</head>
65<body>
66  <div class="container">
67    <div class="ring"></div>
68    <div class="dot-wrapper">
69      <div class="dot"></div>
70    </div>
71  </div>
72</body>
73</html>