model output
Gemini 3 Flash Preview

Simple Spinner
A 0.81T 0.19
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>Square Color Animation</title>
7    <style>
8        /* 
9           Background matches the deep red of the video.
10           The layout centers the central block perfectly.
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            background-color: #c61c1e;
16            display: flex;
17            justify-content: center;
18            align-items: center;
19            height: 100vh;
20            overflow: hidden;
21        }
22
23        .box {
24            width: 48px;
25            height: 48px;
26            /* 
27               The animation follows a 4-second loop (0.5s per step as per timestamps).
28               Using 'step-end' ensures distinct frame changes like the provided video.
29            */
30            animation: colorShift 4s step-end infinite;
31        }
32
33        /* 
34           Timing analysis:
35           0s: Teal (#22a39f) + subtle perspective tilt
36           0.5s: Brown (#a65d36)
37           1s: Gold (#ffbb2e)
38           1.5s: Light Green (#61c461)
39           2s: Red-Orange (#e44126) + side tilt
40           2.5s: Solid Red (matches background)
41           3s: Olive (#8a9a31) + perspective tilt
42           3.5s: Orange (#f18f1c)
43        */
44        @keyframes colorShift {
45            0% { 
46                background-color: #22a39f; 
47                transform: perspective(100px) rotateX(25deg);
48            }
49            12.5% { /* 0.5s */
50                background-color: #a65d36; 
51                transform: none;
52            }
53            25% { /* 1.0s */
54                background-color: #ffbb2e; 
55                transform: scale(0.95);
56            }
57            37.5% { /* 1.5s */
58                background-color: #61c461; 
59                transform: none;
60            }
61            50% { /* 2.0s */
62                background-color: #e44126; 
63                transform: perspective(100px) rotateY(-25deg);
64            }
65            62.5% { /* 2.5s */
66                background-color: #c61c1e; 
67                transform: none;
68            }
69            75% { /* 3.0s */
70                background-color: #8a9a31; 
71                transform: perspective(100px) rotateX(-20deg);
72            }
73            87.5% { /* 3.5s */
74                background-color: #f18f1c; 
75                transform: none;
76            }
77            100% {
78                background-color: #22a39f;
79                transform: perspective(100px) rotateX(25deg);
80            }
81        }
82    </style>
83</head>
84<body>
85    <div class="box"></div>
86</body>
87</html>