model output
Qwen3-VL-8B-Instruct

Motion Table - Orbit
A 0.64T 0.27
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>Target Animation</title>
7<style>
8  body {
9    background-color: #333;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16
17  .target {
18    position: relative;
19    width: 100px;
20    height: 100px;
21  }
22
23  .crosshair {
24    position: absolute;
25    top: 50%;
26    left: 50%;
27    transform: translate(-50%, -50%);
28    width: 2px;
29    height: 100px;
30    background-color: white;
31  }
32
33  .crosshair::before {
34    content: '';
35    position: absolute;
36    top: 50%;
37    left: 0;
38    transform: translateX(-50%);
39    width: 100px;
40    height: 2px;
41    background-color: white;
42  }
43
44  .circle {
45    position: absolute;
46    top: 50%;
47    left: 50%;
48    transform: translate(-50%, -50%);
49    width: 100px;
50    height: 100px;
51    border: 2px solid white;
52    border-radius: 50%;
53    animation: pulse 1.5s ease-in-out infinite alternate;
54  }
55
56  .arrow {
57    position: absolute;
58    width: 0;
59    height: 0;
60    border-left: 10px solid transparent;
61    border-right: 10px solid transparent;
62    border-top: 15px solid red;
63    top: 50%;
64    left: 50%;
65    transform: translate(-50%, -50%);
66    animation: rotate 1.5s ease-in-out infinite alternate;
67  }
68
69  .arrow:nth-child(1) {
70    transform: translate(-50%, -50%) rotate(0deg);
71  }
72
73  .arrow:nth-child(2) {
74    transform: translate(-50%, -50%) rotate(90deg);
75  }
76
77  .arrow:nth-child(3) {
78    transform: translate(-50%, -50%) rotate(180deg);
79  }
80
81  .arrow:nth-child(4) {
82    transform: translate(-50%, -50%) rotate(270deg);
83  }
84
85  @keyframes pulse {
86    0% {
87      transform: translate(-50%, -50%) scale(1);
88    }
89    100% {
90      transform: translate(-50%, -50%) scale(1.1);
91    }
92  }
93
94  @keyframes rotate {
95    0% {
96      transform: translate(-50%, -50%) rotate(0deg);
97    }
98    100% {
99      transform: translate(-50%, -50%) rotate(360deg);
100    }
101  }
102</style>
103</head>
104<body>
105  <div class="target">
106    <div class="circle"></div>
107    <div class="crosshair"></div>
108    <div class="arrow"></div>
109    <div class="arrow"></div>
110    <div class="arrow"></div>
111    <div class="arrow"></div>
112  </div>
113
114  <script>
115    // Add animation for arrows
116    const arrows = document.querySelectorAll('.arrow');
117    arrows.forEach((arrow, index) => {
118      arrow.style.animationDelay = `${index * 0.25}s`;
119    });
120
121    // Add animation for circle
122    const circle = document.querySelector('.circle');
123    circle.style.animationDuration = '1.5s';
124    circle.style.animationTimingFunction = 'ease-in-out';
125  </script>
126</body>
127</html>