← back to Loaders (WIP)compare with ground truth →
model output
LLaMA 4 Scout
Loaders (WIP)
A 0.79T 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>Animation</title>
7 <style>
8 body {
9 background-color: #FF3737;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 overflow: hidden;
16 }
17 .clock {
18 position: relative;
19 width: 100px;
20 height: 100px;
21 border-radius: 50%;
22 border: 2px solid white;
23 }
24 .hand {
25 position: absolute;
26 width: 2px;
27 background-color: white;
28 transform-origin: bottom center;
29 }
30 .hour-hand {
31 height: 40px;
32 left: 49px;
33 top: 30px;
34 }
35 .minute-hand {
36 height: 60px;
37 left: 49px;
38 top: 10px;
39 }
40 </style>
41</head>
42<body>
43 <div class="clock">
44 <div class="hand hour-hand" id="hour-hand"></div>
45 <div class="hand minute-hand" id="minute-hand"></div>
46 </div>
47
48 <script>
49 let angle = 0;
50 const hourHand = document.getElementById('hour-hand');
51 const minuteHand = document.getElementById('minute-hand');
52 const totalFrames = 30; // Assuming 30 frames for simplicity
53 let frame = 0;
54
55 function updateClock() {
56 angle += 12; // Increase angle by 12 degrees for each frame
57 if (angle >= 360) angle = 0;
58
59 hourHand.style.transform = `rotate(${angle}deg)`;
60 minuteHand.style.transform = `rotate(${angle * 5}deg)`; // Minute hand moves 5 times faster
61
62 frame++;
63 if (frame < totalFrames) {
64 requestAnimationFrame(updateClock);
65 }
66 }
67 updateClock();
68 </script>
69</body>
70</html>