← back to Google+ Jinglecompare with ground truth →
model output
Gemini 3 Flash Preview
Google+ Jingle
A 0.81T 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>Swinging Bell Animation</title>
7 <style>
8 :root {
9 --bell-color: #cccccc;
10 --bell-shadow: #b3b3b3;
11 --detail-color: #666666;
12 --bg-color: #ffffff;
13 }
14
15 body {
16 margin: 0;
17 padding: 0;
18 display: flex;
19 justify-content: center;
20 align-items: center;
21 height: 100vh;
22 background-color: var(--bg-color);
23 overflow: hidden;
24 }
25
26 .canvas {
27 position: relative;
28 width: 200px;
29 height: 200px;
30 }
31
32 /* The container that handles the swinging rotation */
33 .bell-container {
34 position: absolute;
35 top: 20%;
36 left: 50%;
37 width: 80px;
38 height: 100px;
39 margin-left: -40px;
40 transform-origin: top center;
41 animation: swing 1s ease-in-out infinite alternate;
42 }
43
44 /* Top loop (the attachment point) */
45 .bell-ring {
46 position: absolute;
47 top: -12px;
48 left: 50%;
49 transform: translateX(-50%);
50 width: 14px;
51 height: 14px;
52 border: 3px solid var(--bell-color);
53 border-radius: 50%;
54 z-index: 1;
55 }
56
57 /* Main bell body */
58 .bell-body {
59 position: absolute;
60 top: 0;
61 width: 100%;
62 height: 70px;
63 background-color: var(--bell-color);
64 border-radius: 40px 40px 10px 10px;
65 overflow: hidden;
66 }
67
68 /* Decorative bottom lip of the bell */
69 .bell-bottom {
70 position: absolute;
71 bottom: 20px;
72 left: -10%;
73 width: 120%;
74 height: 25px;
75 background-color: var(--bell-color);
76 border-radius: 50%;
77 }
78
79 /* The clapper (inner ball) */
80 .clapper {
81 position: absolute;
82 bottom: 5px;
83 left: 50%;
84 transform: translateX(-50%);
85 width: 25px;
86 height: 25px;
87 background-color: var(--bell-shadow);
88 border-radius: 50%;
89 z-index: -1;
90 }
91
92 /* Face details */
93 .face {
94 position: absolute;
95 top: 35px;
96 left: 50%;
97 transform: translateX(-50%);
98 width: 40px;
99 height: 20px;
100 }
101
102 .eye {
103 position: absolute;
104 width: 4px;
105 height: 4px;
106 background-color: var(--detail-color);
107 border-radius: 50%;
108 top: 0;
109 }
110
111 .eye.left { left: 8px; }
112 .eye.right { right: 8px; }
113
114 .mouth {
115 position: absolute;
116 bottom: 2px;
117 left: 50%;
118 transform: translateX(-50%);
119 width: 8px;
120 height: 4px;
121 border-bottom: 2px solid var(--detail-color);
122 border-radius: 0 0 10px 10px;
123 }
124
125 /* Animation keyframes matching the 1-second cycle seen in frames */
126 @keyframes swing {
127 0% {
128 transform: rotate(20deg);
129 }
130 100% {
131 transform: rotate(-20deg);
132 }
133 }
134
135 /* Small physics detail: clapper moves slightly opposite to body */
136 .clapper-container {
137 position: absolute;
138 bottom: 0;
139 left: 50%;
140 transform: translateX(-50%);
141 width: 100%;
142 height: 100%;
143 animation: counter-swing 1s ease-in-out infinite alternate;
144 }
145
146 @keyframes counter-swing {
147 0% {
148 transform: translateX(-3px);
149 }
150 100% {
151 transform: translateX(3px);
152 }
153 }
154 </style>
155</head>
156<body>
157
158 <div class="canvas">
159 <div class="bell-container">
160 <div class="bell-ring"></div>
161 <div class="bell-body">
162 <div class="face">
163 <div class="eye left"></div>
164 <div class="eye right"></div>
165 <div class="mouth"></div>
166 </div>
167 </div>
168 <div class="bell-bottom"></div>
169 <div class="clapper-container">
170 <div class="clapper"></div>
171 </div>
172 </div>
173 </div>
174
175</body>
176</html>