model output
Gemini 3 Flash Preview

Loaders (WIP)
A 0.91T 0.26
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>Clock Animation</title>
7  <style>
8    /* Reset and centering */
9    body, html {
10      margin: 0;
11      padding: 0;
12      width: 100%;
13      height: 100%;
14      background-color: #e84f3f; /* Vibrant red background from the video */
15      display: flex;
16      justify-content: center;
17      align-items: flex-start; /* Position the clock towards the top */
18      overflow: hidden;
19    }
20
21    /* Clock face container */
22    .clock {
23      margin-top: 65px; /* Spacing from top */
24      width: 68px;
25      height: 68px;
26      border: 3px solid white;
27      border-radius: 50%;
28      position: relative;
29      box-sizing: border-box;
30    }
31
32    /* Base hand styles */
33    .hand {
34      position: absolute;
35      bottom: 50%; /* Anchor bottom to the center of clock */
36      left: 50%;
37      width: 3px;
38      height: 31px; /* Reaches nearly to the outer circle */
39      background-color: white;
40      transform-origin: bottom center; /* Rotate around the clock center */
41      border-radius: 1.5px;
42      margin-left: -1.5px; /* Offset to center the 3px width */
43    }
44
45    /* 
46       Animation details:
47       Both hands rotate clockwise at the same speed.
48       They maintain a constant 60-degree gap (equivalent to 2 hours).
49       Duration: 3 seconds per full rotation.
50    */
51
52    .hand-right {
53      /* Starts at 1 o'clock (30 degrees) */
54      animation: rotateRight 3s linear infinite;
55    }
56
57    .hand-left {
58      /* Starts at 11 o'clock (330 degrees) */
59      animation: rotateLeft 3s linear infinite;
60    }
61
62    @keyframes rotateRight {
63      from {
64        transform: rotate(30deg);
65      }
66      to {
67        transform: rotate(390deg);
68      }
69    }
70
71    @keyframes rotateLeft {
72      from {
73        transform: rotate(330deg);
74      }
75      to {
76        transform: rotate(690deg);
77      }
78    }
79  </style>
80</head>
81<body>
82
83  <div class="clock">
84    <!-- The two hands that maintain a fixed V-shape while rotating -->
85    <div class="hand hand-left"></div>
86    <div class="hand hand-right"></div>
87  </div>
88
89</body>
90</html>