model output
LLaMA 4 Scout

Motion Table - Orbit
A 0.54T 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>Animation</title>
7    <style>
8        body {
9            background-color: #333;
10            margin: 0;
11            display: flex;
12            justify-content: center;
13            align-items: center;
14            height: 100vh;
15            overflow: hidden;
16        }
17        .target {
18            position: relative;
19            width: 100px;
20            height: 100px;
21        }
22        .circle {
23            position: absolute;
24            top: 50%;
25            left: 50%;
26            transform: translate(-50%, -50%);
27            width: 100%;
28            height: 100%;
29            border-radius: 50%;
30            border: 2px solid #fff;
31            box-shadow: 0 0 0 0 #fff, 0 0 0 0 rgba(255, 255, 255, 0.5);
32        }
33        .inner-circle {
34            position: absolute;
35            top: 50%;
36            left: 50%;
37            transform: translate(-50%, -50%);
38            width: 50px;
39            height: 50px;
40            border-radius: 50%;
41            border: 2px solid #fff;
42        }
43        .crosshair {
44            position: absolute;
45            top: 50%;
46            left: 50%;
47            transform: translate(-50%, -50%);
48            width: 2px;
49            height: 20px;
50            background-color: #fff;
51        }
52        .crosshair-vertical {
53            position: absolute;
54            top: 50%;
55            left: 50%;
56            transform: translate(-50%, -50%) rotate(90deg);
57            width: 2px;
58            height: 20px;
59            background-color: #fff;
60        }
61        .blob {
62            position: absolute;
63            top: 50%;
64            left: 50%;
65            transform: translate(-50%, -50%);
66            width: 20px;
67            height: 20px;
68            border-radius: 50%;
69            background-color: #FFD700;
70        }
71    </style>
72</head>
73<body>
74    <div class="target">
75        <div class="circle"></div>
76        <div class="inner-circle"></div>
77        <div class="crosshair" style="top: calc(50% - 1px);"></div>
78        <div class="crosshair-vertical" style="top: calc(50% - 1px);"></div>
79        <div class="blob" style="top: 40px; left: 40px;"></div>
80        <div class="blob" style="top: 40px; left: 60px;"></div>
81        <div class="blob" style="top: 60px; left: 40px;"></div>
82        <div class="blob" style="top: 60px; left: 60px;"></div>
83    </div>
84
85    <script>
86        // Animation logic
87        const blobs = document.querySelectorAll('.blob');
88        const circle = document.querySelector('.circle');
89        const innerCircle = document.querySelector('.inner-circle');
90        const crosshair = document.querySelector('.crosshair');
91        const crosshairVertical = document.querySelector('.crosshair-vertical');
92
93        // Animation frames
94        const frames = [
95            { blobs: [[40, 40], [60, 40], [40, 60], [60, 60]] },
96            { blobs: [[30, 50], [50, 30], [70, 50], [50, 70]] },
97            { blobs: [[20, 50], [80, 50], [50, 20], [50, 80]] },
98            { blobs: [[10, 50], [90, 50], [50, 10], [50, 90]] },
99            { blobs: [[20, 40], [80, 40], [40, 20], [60, 80]] },
100            { blobs: [[30, 30], [70, 30], [30, 70], [70, 70]] },
101        ];
102
103        let currentFrame = 0;
104
105        function animate() {
106            const frame = frames[currentFrame];
107            blobs.forEach((blob, index) => {
108                blob.style.top = `${frame.blobs[index][0]}px`;
109                blob.style.left = `${frame.blobs[index][1]}px`;
110            });
111            currentFrame = (currentFrame + 1) % frames.length;
112            requestAnimationFrame(animate);
113        }
114
115        animate();
116    </script>
117</body>
118</html>