model output
Gemini 3 Flash Preview

Exploring Bourbon
A 0.79T 0.25
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>3D Rotating Pebble Animation</title>
7    <style>
8        /* Define the core layout and background color matching the video */
9        body, html {
10            margin: 0;
11            padding: 0;
12            width: 100%;
13            height: 100%;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            background-color: #e96294; /* The signature pink background */
18            overflow: hidden;
19        }
20
21        /* Container to provide 3D perspective for the flip effect */
22        .scene {
23            perspective: 800px;
24        }
25
26        /* The pebble/blob shape */
27        .pebble {
28            width: 55px;
29            height: 50px;
30            background-color: #ffffff;
31            
32            /* Creating an organic, slightly irregular pebble shape */
33            border-radius: 48% 52% 55% 45% / 45% 55% 45% 55%;
34            
35            /* The shadow is slightly offset to the bottom right */
36            box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
37            
38            /* 3D setup */
39            transform-style: preserve-3d;
40            
41            /* Animation properties: 1 second loop, smooth ease-in-out */
42            animation: spin 1s ease-in-out infinite;
43        }
44
45        /* 
46           Keyframes recreate the 3D flipping motion.
47           The X-axis tilt (25deg) creates the "wobble" look seen in the video,
48           preventing it from being a flat horizontal flip.
49        */
50        @keyframes spin {
51            0% {
52                transform: rotateX(25deg) rotateY(0deg) rotateZ(0deg);
53            }
54            50% {
55                /* At the midpoint, the shape is flipped 180 degrees.
56                   The scale change subtly mimics the depth perspective 
57                   as the "thinner" side faces the camera. */
58                transform: rotateX(25deg) rotateY(180deg) rotateZ(5deg) scale(0.95);
59            }
60            100% {
61                transform: rotateX(25deg) rotateY(360deg) rotateZ(0deg);
62            }
63        }
64
65        /* Optional: Adding a slight breathing effect to the shadow 
66           to make it look more dynamic as the object rotates */
67        @keyframes shadow-shift {
68            0%, 100% { box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15); }
69            50% { box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1); }
70        }
71
72        /* Apply shadow animation if desired, though standard box-shadow 
73           inside the spin keyframe is often sufficient for this style. */
74    </style>
75</head>
76<body>
77
78    <div class="scene">
79        <div class="pebble"></div>
80    </div>
81
82</body>
83</html>