model output
GPT-5.4

CSS Direction Animation
A 0.84T 0.40
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>Rotating Rainbow Star</title>
7<style>
8  :root{
9    --bg:#f4f4f2;
10    --size:min(34vmin, 260px);
11    --dur:8s;
12    --alpha:.34;
13  }
14
15  html,body{
16    margin:0;
17    width:100%;
18    height:100%;
19    overflow:hidden;
20    background:var(--bg);
21    font-family:sans-serif;
22  }
23
24  .stage{
25    position:relative;
26    width:100%;
27    height:100%;
28    display:flex;
29    justify-content:center;
30    align-items:flex-start;
31  }
32
33  .flower{
34    position:relative;
35    width:var(--size);
36    height:var(--size);
37    margin-top:3.5vh;
38    animation: drift var(--dur) linear infinite;
39    transform-origin:50% 50%;
40    filter:saturate(.95) brightness(1.02);
41  }
42
43  .petal{
44    position:absolute;
45    inset:0;
46    transform-origin:50% 50%;
47    animation: spin var(--dur) linear infinite;
48  }
49
50  .petal::before{
51    content:"";
52    position:absolute;
53    left:50%;
54    top:50%;
55    width:44%;
56    height:66%;
57    transform-origin:50% 78%;
58    transform:translate(-50%,-78%);
59    clip-path:polygon(50% 0%, 100% 34%, 82% 100%, 18% 100%, 0% 34%);
60    opacity:var(--alpha);
61    background:var(--c);
62  }
63
64  .core{
65    position:absolute;
66    left:50%;
67    top:50%;
68    width:18%;
69    height:18%;
70    transform:translate(-50%,-50%);
71    border-radius:50%;
72    background:rgba(120,70,70,.28);
73    filter:blur(.2px);
74  }
75
76  .p1{ --c:#ff8a4a; animation-delay:0s; }
77  .p2{ --c:#ffd24a; animation-delay:-1s; }
78  .p3{ --c:#9be35f; animation-delay:-2s; }
79  .p4{ --c:#4fd0c8; animation-delay:-3s; }
80  .p5{ --c:#5f79d8; animation-delay:-4s; }
81  .p6{ --c:#8f58c8; animation-delay:-5s; }
82  .p7{ --c:#d94d86; animation-delay:-6s; }
83  .p8{ --c:#f39ab8; animation-delay:-7s; }
84
85  @keyframes spin{
86    from{ transform:rotate(0deg); }
87    to{ transform:rotate(360deg); }
88  }
89
90  /* slight overall wobble/rotation like the frame sequence */
91  @keyframes drift{
92    0%   { transform:translateY(0px) rotate(0deg) scale(1); opacity:1; }
93    25%  { transform:translateY(2px) rotate(22.5deg) scale(.985); opacity:.92; }
94    50%  { transform:translateY(0px) rotate(45deg) scale(.97); opacity:.84; }
95    75%  { transform:translateY(-1px) rotate(67.5deg) scale(.985); opacity:.92; }
96    100% { transform:translateY(0px) rotate(90deg) scale(1); opacity:1; }
97  }
98</style>
99</head>
100<body>
101  <div class="stage">
102    <div class="flower" aria-hidden="true">
103      <div class="petal p1"></div>
104      <div class="petal p2"></div>
105      <div class="petal p3"></div>
106      <div class="petal p4"></div>
107      <div class="petal p5"></div>
108      <div class="petal p6"></div>
109      <div class="petal p7"></div>
110      <div class="petal p8"></div>
111      <div class="core"></div>
112    </div>
113  </div>
114</body>
115</html>