model output
GPT-5.4

Motion Table - Orbit
A 0.97T 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>Orbit Dot Loader</title>
7<style>
8  :root{
9    --bg:#4a4748;
10    --ring:rgba(255,255,255,.42);
11    --dot:#f7f7f7;
12    --size:98px;
13    --stroke:1px;
14    --dot-size:24px;
15    --duration:2.2s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24  }
25
26  body{
27    display:grid;
28    place-items:center;
29  }
30
31  .loader{
32    position:relative;
33    width:var(--size);
34    height:var(--size);
35  }
36
37  .ring{
38    position:absolute;
39    inset:0;
40    border:var(--stroke) solid var(--ring);
41    border-radius:50%;
42    box-sizing:border-box;
43  }
44
45  .orbit{
46    position:absolute;
47    inset:0;
48    animation:spin var(--duration) linear infinite;
49    transform-origin:50% 50%;
50  }
51
52  .dot{
53    position:absolute;
54    width:var(--dot-size);
55    height:var(--dot-size);
56    left:50%;
57    top:50%;
58    margin-left:calc(var(--dot-size) / -2);
59    margin-top:calc(var(--dot-size) / -2);
60    border-radius:50%;
61    background:var(--dot);
62    transform:translateY(calc(var(--size) / -2));
63    box-shadow:
64      0 0 0 1px rgba(255,255,255,.18),
65      0 0 8px rgba(255,255,255,.08);
66  }
67
68  @keyframes spin{
69    from{ transform:rotate(90deg); }   /* starts at right side */
70    to{ transform:rotate(450deg); }    /* full clockwise loop */
71  }
72</style>
73</head>
74<body>
75  <div class="loader" aria-label="loading animation">
76    <div class="ring"></div>
77    <div class="orbit">
78      <div class="dot"></div>
79    </div>
80  </div>
81</body>
82</html>