model output
Gemini 3 Flash Preview

Exploring Bourbon
A 0.82T 0.24
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>Bell Animation Recreation</title>
7    <style>
8        :root {
9            --bg-color: #77d1b8;
10            --gold-light: #f7e082;
11            --gold-dark: #d4a017;
12            --animation-speed: 2.5s;
13        }
14
15        * {
16            margin: 0;
17            padding: 0;
18            box-sizing: border-box;
19        }
20
21        body {
22            background-color: var(--bg-color);
23            height: 100vh;
24            display: flex;
25            justify-content: center;
26            align-items: center;
27            overflow: hidden;
28        }
29
30        .container {
31            position: relative;
32            width: 100px;
33            height: 100px;
34            display: flex;
35            justify-content: center;
36            align-items: center;
37        }
38
39        /* The central bell-like shape */
40        .bell {
41            width: 36px;
42            height: 44px;
43            background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
44            border-radius: 18px 18px 6px 6px;
45            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
46            animation: rock var(--animation-speed) ease-in-out infinite;
47            z-index: 2;
48        }
49
50        /* The container for the orbiting dot */
51        .orbit-container {
52            position: absolute;
53            width: 70px;
54            height: 70px;
55            top: 50%;
56            left: 50%;
57            transform: translate(-50%, -50%);
58            animation: orbit var(--animation-speed) linear infinite;
59            z-index: 1;
60        }
61
62        /* The orbiting dot */
63        .dot {
64            position: absolute;
65            top: 50%;
66            left: 0;
67            width: 6px;
68            height: 6px;
69            background-color: var(--gold-dark);
70            border-radius: 50%;
71            transform: translate(-50%, -50%);
72            box-shadow: 0 0 4px rgba(212, 160, 23, 0.6);
73        }
74
75        /* Keyframes for the bell rocking motion */
76        @keyframes rock {
77            0% {
78                transform: rotate(-35deg);
79            }
80            50% {
81                transform: rotate(35deg);
82            }
83            100% {
84                transform: rotate(-35deg);
85            }
86        }
87
88        /* Keyframes for the dot's circular orbit */
89        @keyframes orbit {
90            0% {
91                transform: translate(-50%, -50%) rotate(0deg);
92            }
93            100% {
94                transform: translate(-50%, -50%) rotate(360deg);
95            }
96        }
97
98        /* Subtle scaling pulse for the whole group to match the video's rhythm */
99        .container {
100            animation: pulse calc(var(--animation-speed) * 0.5) ease-in-out infinite alternate;
101        }
102
103        @keyframes pulse {
104            from {
105                transform: scale(1);
106            }
107            to {
108                transform: scale(1.05);
109            }
110        }
111    </style>
112</head>
113<body>
114
115    <div class="container">
116        <!-- Main gold shape -->
117        <div class="bell"></div>
118        
119        <!-- Rotating particle -->
120        <div class="orbit-container">
121            <div class="dot"></div>
122        </div>
123    </div>
124
125    <script>
126        /**
127         * The animation is purely CSS-driven to ensure high performance 
128         * and smooth rendering, matching the 60fps feel of the video.
129         * 
130         * Timing logic:
131         * - Bell: rocks between -35deg and +35deg using ease-in-out for a natural pendulum feel.
132         * - Dot: performs a linear 360-degree rotation.
133         * - Container: subtle pulse adds to the organic motion.
134         */
135    </script>
136</body>
137</html>