model output
Gemini 3 Flash Preview

Exploring Bourbon
A 0.80T 0.23
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>Bouncing Pill Animation</title>
7    <style>
8        /* 
9           Background color: #E37D5F (Terracotta/Orange)
10           Primary Maroon: #8F3D4D
11           Primary White: #FFFFFF
12        */
13        body {
14            margin: 0;
15            padding: 0;
16            display: flex;
17            justify-content: center;
18            align-items: center;
19            height: 100vh;
20            background-color: #e37d5f;
21            overflow: hidden;
22        }
23
24        .pill-loader {
25            box-sizing: border-box;
26            width: 32px;
27            height: 22px;
28            background-color: #ffffff;
29            border-radius: 6px;
30            border-top: 5px solid #8f3d4d;
31            border-bottom: 5px solid #8f3d4d;
32            
33            /* Timing matches the 2-second cycle observed in the video timestamps (0.5s intervals) */
34            animation: bounce-cycle 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
35        }
36
37        @keyframes bounce-cycle {
38            /* 0.0s - Initial horizontal pill state */
39            0%, 50%, 100% {
40                width: 32px;
41                height: 22px;
42                border-top-width: 5px;
43                border-bottom-width: 5px;
44                transform: translateY(0);
45                border-radius: 6px;
46            }
47
48            /* 0.5s - Peak of the stretch: tall and mostly white */
49            25% {
50                width: 24px;
51                height: 34px;
52                border-top-width: 2px;
53                border-bottom-width: 2px;
54                transform: translateY(-8px);
55                border-radius: 8px;
56            }
57
58            /* 1.5s - Peak of the squash: flat with prominent maroon stripes (Latvian/Austrian flag look) */
59            75% {
60                width: 42px;
61                height: 14px;
62                border-top-width: 6px;
63                border-bottom-width: 6px;
64                transform: translateY(4px);
65                border-radius: 4px;
66            }
67        }
68    </style>
69</head>
70<body>
71    <div class="pill-loader"></div>
72</body>
73</html>