model output
Gemini 3 Flash Preview

CSS Spinners
A 0.89T 0.33
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>Shape Morph Animation</title>
7    <style>
8        /* Reset and layout */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            overflow: hidden;
15            display: flex;
16            flex-direction: column;
17        }
18
19        /* Top teal section matching the video background */
20        .top-section {
21            background-color: #0099a4;
22            flex: 1;
23            display: flex;
24            justify-content: center;
25            align-items: center;
26        }
27
28        /* Bottom white section */
29        .bottom-section {
30            background-color: #ffffff;
31            flex: 1;
32        }
33
34        /* The morphing shape */
35        .shape {
36            width: 20px;
37            height: 20px;
38            border: 2px solid rgba(255, 255, 255, 0.9);
39            /* Initial state: Rounded Diamond */
40            transform: rotate(45deg);
41            border-radius: 35%;
42            
43            /* Animation matching the 2-second cycle observed in the frames */
44            animation: morph 2s ease-in-out infinite;
45        }
46
47        /**
48         * Keyframe Breakdown:
49         * 0s (0%)     : Rounded Diamond (35% radius)
50         * 0.5s (25%)  : Sharp Diamond (5% radius)
51         * 1.0s (50%)  : Rounded Diamond (35% radius)
52         * 1.5s (75%)  : Circle (50% radius)
53         * 2.0s (100%) : Back to start
54         */
55        @keyframes morph {
56            0%, 50%, 100% {
57                border-radius: 35%;
58                transform: rotate(45deg) scale(1);
59            }
60            25% {
61                border-radius: 5%;
62                transform: rotate(45deg) scale(1.05);
63            }
64            75% {
65                border-radius: 50%;
66                transform: rotate(45deg) scale(1);
67            }
68        }
69    </style>
70</head>
71<body>
72
73    <div class="top-section">
74        <div class="shape"></div>
75    </div>
76    <div class="bottom-section"></div>
77
78</body>
79</html>