bots.so — The AI Inference Model Index

One prompt. Four models. All on CanopyWave. The prompt asked for a flower growing from brown dirt as an animated loop using only CSS. Simple brief — but half the models ignored the “loop” part.

Prompt

“Create a gorgeous flower growing from brown dirt, as an animated loop using only HTML and CSS.”

Pure HTML/CSS · No JavaScript · Single file

DeepSeek V3.2 CanopyWave

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Flower</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FF 100%);
            overflow: hidden;
        }

        .scene {
            position: relative;
            width: 300px;
            height: 400px;
        }

        .dirt {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 120px;
            background: linear-gradient(to top, #8B4513 0%, #A0522D 100%);
            border-radius: 50% 50% 0 0;
            box-shadow: 
                inset 0 10px 20px rgba(0,0,0,0.3),
                0 5px 15px rgba(0,0,0,0.4);
            overflow: hidden;
        }

        .dirt::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 20%;
            width: 60px;
            height: 30px;
            background: #654321;
            border-radius: 50%;
            opacity: 0.6;
        }

        .dirt::after {
            content: '';
            position: absolute;
            top: 25px;
            right: 25%;
            width: 40px;
            height: 20px;
            background: #5D4037;
            border-radius: 50%;
            opacity: 0.5;
        }

        .stem {
            position: absolute;
            bottom: 120px;
            left: 50%;
            width: 12px;
            height: 0;
            background: linear-gradient(to top, #2E7D32, #4CAF50);
            transform: translateX(-50%);
            border-radius: 6px;
            animation: growStem 4s ease-out forwards;
            transform-origin: bottom;
        }

        .leaf {
            position: absolute;
            width: 40px;
            height: 25px;
            background: #4CAF50;
            border-radius: 50% 0 50% 50%;
            transform-origin: right bottom;
            opacity: 0;
        }

        .leaf.left {
            left: 50%;
            bottom: 180px;
            transform: translateX(-20px) rotate(-30deg);
            animation: growLeafLeft 1s 3.5s ease-out forwards;
        }

        .leaf.right {
            left: 50%;
            bottom: 230px;
            transform: translateX(10px) rotate(30deg) scaleX(-1);
            animation: growLeafRight 1s 4s ease-out forwards;
        }

        .flower {
            position: absolute;
            left: 50%;
            bottom: 250px;
            transform: translateX(-50%);
            opacity: 0;
            animation: bloom 2s 5s ease-out forwards;
        }

        .petal {
            position: absolute;
            width: 50px;
            height: 70px;
            background: linear-gradient(to bottom, #FF4081, #F50057);
            border-radius: 50% 50% 40% 40%;
            transform-origin: bottom center;
            box-shadow: inset 0 -10px 20px rgba(255,255,255,0.3);
        }

        .petal:nth-child(1) { transform: rotate(0deg); }
        .petal:nth-child(2) { transform: rotate(45deg); }
        .petal:nth-child(3) { transform: rotate(90deg); }
        .petal:nth-child(4) { transform: rotate(135deg); }
        .petal:nth-child(5) { transform: rotate(180deg); }
        .petal:nth-child(6) { transform: rotate(225deg); }
        .petal:nth-child(7) { transform: rotate(270deg); }
        .petal:nth-child(8) { transform: rotate(315deg); }

        .center {
            position: absolute;
            width: 40px;
            height: 40px;
            background: radial-gradient(circle, #FFD700, #FF9800);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            box-shadow: 
                inset 0 0 10px rgba(255,152,0,0.5),
                0 0 20px rgba(255,152,0,0.3);
        }

        .sparkle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #FFF;
            border-radius: 50%;
            opacity: 0;
        }

        .sparkle:nth-child(1) {
            top: 5px;
            left: 15px;
            animation: sparkle 2s 6s infinite;
        }

        .sparkle:nth-child(2) {
            top: 15px;
            right: 5px;
            animation: sparkle 2s 6.5s infinite;
        }

        .sparkle:nth-child(3) {
            bottom: 10px;
            left: 10px;
            animation: sparkle 2s 7s infinite;
        }

        @keyframes growStem {
            0% {
                height: 0;
            }
            100% {
                height: 250px;
            }
        }

        @keyframes growLeafLeft {
            0% {
                transform: translateX(-20px) rotate(-30deg) scale(0);
                opacity: 0;
            }
            100% {
                transform: translateX(-20px) rotate(-30deg) scale(1);
                opacity: 1;
            }
        }

        @keyframes growLeafRight {
            0% {
                transform: translateX(10px) rotate(30deg) scaleX(-1) scale(0);
                opacity: 0;
            }
            100% {
                transform: translateX(10px) rotate(30deg) scaleX(-1) scale(1);
                opacity: 1;
            }
        }

        @keyframes bloom {
            0% {
                transform: translateX(-50%) scale(0);
                opacity: 0;
            }
            70% {
                transform: translateX(-50%) scale(1.1);
                opacity: 1;
            }
            100% {
                transform: translateX(-50%) scale(1);
                opacity: 1;
            }
        }

        @keyframes sparkle {
            0%, 100% {
                opacity: 0;
                transform: scale(0);
            }
            50% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .scene:hover .stem {
            animation: growStem 4s ease-out forwards, wiggleStem 2s 6s infinite;
        }

        @keyframes wiggleStem {
            0%, 100% { transform: translateX(-50%) rotate(0deg); }
            25% { transform: translateX(-50%) rotate(1deg); }
            75% { transform: translateX(-50%) rotate(-1deg); }
        }
    </style>
</head>
<body>
    <div class="scene">
        <div class="dirt"></div>
        <div class="stem"></div>
        <div class="leaf left"></div>
        <div class="leaf right"></div>
        <div class="flower">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="center">
                <div class="sparkle"></div>
                <div class="sparkle"></div>
                <div class="sparkle"></div>
            </div>
        </div>
    </div>

    <script>
        document.querySelector('.scene').addEventListener('animationend', function() {
            this.classList.add('completed');
        });
    </script>
</body>
</html>

Tokens

1,991

Lines of Code

245

MiniMax M2.5 CanopyWave

<think>1.  **Analyze the Request:**
    *   **Goal:** Create a gorgeous flower growing from brown dirt.
    *   **Format:** Animated loop.
    *   **Technologies:** Only HTML and CSS (no JavaScript, no images).
    *   **Output:** Valid HTML/CSS code (no markdown fences, no explanation).

2.  **Deconstruct the Visual Elements:**
    *   **Background:** Needs a sky or simple backdrop to make the flower pop.
    *   **Dirt:** Brown ground at the bottom.
    *   **Stem:** Green, growing upwards.
    *   **Leaves:** Green, growing out from the stem.
    *   **Flower:**
        *   Petals: Colorful (pink/red/orange), radiating from center.
        *   Center: Yellow/Orange.
        *   Animation: Growing, blooming, maybe swaying slightly.
    *   **Sun/Light (Optional but adds "gorgeousness"):** A glowing sun in the corner.

3.  **Drafting the CSS Structure:**

    *   *Container:* Center everything.
    *   *Sky:* Gradient blue.
    *   *Ground:* Brown rectangle/curve at the bottom.
    *   *Stem:* A thin green div, initially height 0, grows to full height.
    *   *Leaves:* Pseudo-elements or separate divs on the stem, scaling from 0 to 1.
    *   *Flower Head:* Container for petals and center.
    *   *Petals:* Multiple divs rotated around a center.
    *   *Animation:*
        *   `@keyframes grow-stem`: height 0 -> full.
        *   `@keyframes bloom`: scale 0 -> 1, rotate.
        *   `@keyframes sway`: slight rotation for natural feel.

4.  **Refining the Animation Sequence (The Loop):**
    *   Total cycle: ~8 seconds.
    *   0-2s: Stem grows.
    *   2-3s: Leaves appear.
    *   3-5s: Flower blooms (scales up).
    *   5-7s: Swaying/Fully bloomed.
    *   7-8s: Wither/Fade out (to make it a loop smoothly, or just reset). Let's make it grow, stay, then fade to restart.

5.  **Detailed Implementation Steps (Mental Code Writing):**

    *   **HTML Structure:**
        ```html
        <div class="scene">
            <div class="sun"></div>
            <div class="flower-container">
                <div class="stem"></div>
                <div class="leaf leaf-left"></div>
                <div class="leaf leaf-right"></div>
                <div class="flower">
                    <div class="petal p1"></div>
                    <div class="petal p2"></div>
                    ...
                    <div class="center"></div>
                </div>
            </div>
            <div class="dirt"></div>
        </div>
        ```

    *   **CSS Styling:**
        *   *Reset:* margin 0, overflow hidden.
        *   *Scene:* 100vh, flex center.
        *   *Sun:* Yellow circle, box-shadow for glow, animation for rising/pulsing.
        *   *Dirt:* Brown, rounded top.
        *   *Stem:* Green, width ~10px, transform-origin bottom.
        *   *Leaves:* Green ovals, attached to stem.
        *   *Flower:* Absolute positioned on top of stem.
        *   *Petals:* Use `transform: rotate(Xdeg) translateY(-Ypx)`. Pink/Purple gradient.

6.  **Polishing the "Gorgeous" aspect:**
    *   Use `border-radius` for organic shapes.
    *   Use `box-shadow` for depth (petals, sun).
    *   Gradients on petals (hotpink to lighter pink).
    *   Smooth easing (`ease-out`, `cubic-bezier`).

7.  **Writing the Code (Iterative refinement):**

    *   *Stem Animation:* `grow` from height 0 to 150px.
    *   *Leaf Animation:* `grow-leaf` scale 0 to 1.
    *   *Flower Animation:* `bloom` scale 0 to 1.
    *   *Sway:* Add a continuous `sway` animation to the whole flower container after it blooms.

    *   *Petals:* Need about 6-8 petals.
        *   CSS: `.petal { position: absolute; width: 30px; height: 60px; background: pink; border-radius: 50% 50% 0 50%; ... }`
        *   Transform: `rotate(var(--r)) translate(-30px, -50px)` (adjust values).

    *   *The Loop Logic:*
        To make it loop smoothly, I'll set the animation to run, hold, and then reverse or fade out. Or simpler: The animation keyframes go 0% -> 80% (bloomed) -> 90% (start fading) -> 100% (reset).

8.  **Final Code Assembly:**

    *   Set up the sky gradient.
    *   Draw the dirt mound.
    *   Draw the stem (green).
    *   Draw leaves (green, curved).
    *   Draw the flower head.
    *   *Crucial:* Ensure z-indexes are correct (stem behind dirt? No, stem comes out of dirt). Dirt needs to cover the bottom of the stem. Actually, stem grows *from* dirt.

    *   *Refined Animation Timing:*
        *   Stem: 0% h:0 -> 30% h:200px.
        *   Leaves: 30% scale 0 -> 50% scale 1.
        *   Flower: 50% scale 0 -> 70% scale 1.
        *   Sway: 0% -> 100% continuous.
        *   Fade out: 90% -> 100% opacity 1 -> 0.

9.  **Self-Correction during drafting:**
    *   *Issue:* If I just use `height` for the stem, the leaves might look weird attached to the bottom.
    *   *Fix:* The stem is a wrapper. The leaves are absolute positioned relative to the stem height.
    *   *Aesthetics:* Let's make the flower a "daisy" or "cosmos" style. Multiple layers of petals look better. Let's stick to a single layer for code conciseness but make them large and pretty.

10. **Final Polish:**
    *   Add a cloud? Maybe too complex for pure CSS without too much markup. A glowing sun is enough.
    *   Dirt: A simple brown ellipse.
    *   Petal color: `linear-gradient` makes it look premium.

11. **Constructing the Output:** (Proceeding to generate the HTML string).

    *   *HTML:*
        ```html
        <!DOCTYPE html>
        <html>
        <head>
        <style>
            /* CSS goes here */
        </style>
        </head>
        <body>
            <!-- Elements -->
        </body>
        </html>
        ```

    *   *CSS details:*
        *   Petal positioning: Use `nth-child` to rotate them.
        *   `@keyframes grow`: height 0 to 250px.
        *   `@keyframes bloom`: scale 0 to 1, rotate start.
        *   `@keyframes sway`: rotate -5deg to 5deg.

    *   *Let's write the actual CSS logic for petals:*
        `.petal { transform: rotate(var(--r)) translateY(-60px); }` - this rotates them around the center.

    *   *Timing:*
        Total loop: 8s.
        Stem grows first 2s.
        Leaves 2s-3s.
        Flower 3s-4s.
        Hold/Fade 7s-8s.

12. **Final Review against constraints:**
    *   "Gorgeous": Use gradients, shadows, smooth animation.
    *   "Animated loop": Yes, keyframes.
    *   "Only HTML/CSS": Yes.
    *   "Return ONLY HTML code": Yes.

This thought process moves from understanding requirements to structural planning, styling details, animation logic, and finally code generation. The resulting code focuses on clean CSS shapes and smooth keyframe animations.

**(Self-Correction during final code generation):** Make sure the dirt covers the bottom of the stem so it looks like it's coming *out* of the ground. Z-index: Dirt > Stem.

Let's build it.

*   **Sky:** Light blue gradient.
*   **Sun:** Top right, glowing.
*   **Ground:** Bottom, brown.
*   **Stem:** Green, grows up.
*   **Leaves:** 2 leaves, scale up.
*   **Flower:** 8 petals + center. Bloom animation.
*   **Loop:** Fade out at end to restart.

Code structure ready. Writing output. (Note: No markdown fences).

*   *Petal logic:*
    p1: 0deg
    p2: 45deg
    ...
    Use CSS variables for rotation to keep it clean? Or just hardcode nth-child. Hardcoding nth-child is safer for a single file without JS setup.

*   *Bloom effect:* The petals should start rotated inwards (scale 0) and then expand outwards.

Let's go.

*   Stem height: 200px.
*   Petal length: 50px.
*   Colors: #ff69b4 (HotPink) for petals, #ffd700 (Gold) for center.

Final check of the prompt: "Return ONLY the HTML code, no explanation."
Okay.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flower Animation</title>
<style>
    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 100%);
        overflow: hidden;
    }

    .scene {
        position: relative;
        width: 400px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    /* Sun */
    .sun {
        position: absolute;
        top: 40px;
        right: 40px;
        width: 60px;
        height: 60px;
        background: #FFD700;
        border-radius: 50%;
        box-shadow: 0 0 40px #FFA500, 0 0 80px #FFD700;
        animation: sunPulse 4s infinite alternate;
    }

    /* Dirt */
    .dirt {
        position: absolute;
        bottom: 0;
        width: 200px;
        height: 40px;
        background: #5D4037;
        border-radius: 50% 50% 0 0;
        z-index: 10;
    }

    /* Flower Container */
    .flower {
        position: absolute;
        bottom: 30px; /* Starts inside dirt */
        width: 10px;
        height: 10px;
        z-index: 5;
        transform-origin: bottom center;
        animation: 
            growStem 8s linear infinite,
            sway 3s ease-in-out infinite alternate;
    }

    /* Stem */
    .stem {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 8px;
        height: 0; /* Grows */
        background: linear-gradient(to right, #4CAF50, #8BC34A);
        border-radius: 4px;
        transform-origin: bottom center;
        animation: growStemHeight 8s linear infinite;
    }

    /* Leaves */
    .leaf {
        position: absolute;
        width: 30px;
        height: 15px;
        background: #66BB6A;
        border-radius: 0 50% 0 50%;
        opacity: 0;
        animation: growLeaf 8s linear infinite;
    }

    .leaf-left {
        bottom: 80px;
        left: -25px;
        transform: rotate(-20deg);
    }

    .leaf-right {
        bottom: 120px;
        right: -25px;
        transform: rotate(20deg) scaleX(-1);
    }

    /* Flower Head */
    .head {
        position: absolute;
        top: -220px; /* Position on top of stem */
        left: 50%;
        transform: translateX(-50%) scale(0);
        width: 60px;
        height: 60px;
        animation: bloom 8s linear infinite;
    }

    /* Petals */
    .petal {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 50px;
        background: linear-gradient(to top, #E91E63, #FF80AB);
        border-radius: 50% 50% 0 50%;
        transform-origin: bottom center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .petal:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg) translateY(-30px); }
    .petal:nth-child(2) { transform: translate(-50%, -100%) rotate(45deg) translateY(-30px); }
    .petal:nth-child(3) { transform: translate(-50%, -100%) rotate(90deg) translateY(-30px); }
    .petal:nth-child(4) { transform: translate(-50%, -100%) rotate(135deg) translateY(-30px); }
    .petal:nth-child(5) { transform: translate(-50%, -100%) rotate(180deg) translateY(-30px); }
    .petal:nth-child(6) { transform: translate(-50%, -100%) rotate(225deg) translateY(-30px); }
    .petal:nth-child(7) { transform: translate(-50%, -100%) rotate(270deg) translateY(-30px); }
    .petal:nth-child(8) { transform: translate(-50%, -100%) rotate(315deg) translateY(-30px); }

    /* Center */
    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        background: radial-gradient(circle, #FFD700 30%, #FFA000 100%);
        border-radius: 50%;
        box-shadow: inset -2px -2px 5px rgba(0,0,0,0.2);
        z-index: 2;
    }

    /* Animations */
    @keyframes growStemHeight {
        0% { height: 0; }
        20% { height: 200px; }
        80% { height: 200px; }
        90% { height: 200px; opacity: 1; }
        100% { height: 200px; opacity: 0; }
    }

    @keyframes growLeaf {
        0% { opacity: 0; transform: scale(0); }
        20% { opacity: 0; }
        30% { opacity: 1; transform: scale(1) rotate(-20deg); }
        80% { opacity: 1; }
        90% { opacity: 1; }
        100% { opacity: 0; }
    }

    @keyframes bloom {
        0% { transform: translateX(-50%) scale(0) rotate(0deg); }
        30% { transform: translateX(-50%) scale(0) rotate(0deg); }
        50% { transform: translateX(-50%) scale(1) rotate(180deg); }
        80% { transform: translateX(-50%) scale(1) rotate(180deg); }
        90% { transform: translateX(-50%) scale(1) rotate(180deg); opacity: 1;}
        100% { transform: translateX(-50%) scale(1) rotate(180deg); opacity: 0;}
    }

    @keyframes sway {
        0% { transform: rotate(-5deg); }
        100% { transform: rotate(5deg); }
    }

    @keyframes sunPulse {
        0% { transform: scale(1); opacity: 0.9; }
        100% { transform: scale(1.1); opacity: 1; }
    }
</style>
</head>
<body>
    <div class="scene">
        <div class="sun"></div>
        <div class="flower">
            <div class="stem"></div>
            <div class="leaf leaf-left"></div>
            <div class="leaf leaf-right"></div>
            <div class="head">
                <div class="petal"></div>
                <div class="petal"></div>
                <div class="petal"></div>
                <div class="petal"></div>
                <div class="petal"></div>
                <div class="petal"></div>
                <div class="petal"></div>
                <div class="petal"></div>
                <div class="center"></div>
            </div>
        </div>
        <div class="dirt"></div>
    </div>
</body>
</html>
```
I need to check if the stem animation logic aligns with the leaves.
Stem grows 0-20%.
Leaves appear 30%.
Bloom starts 30%.
The stem is growing via height. The leaves are absolute.
Wait, `.flower` is the container. `.stem` is inside.
If `.stem` height grows, the leaves (children of `.flower`) need to be positioned relative to where the stem ends, or the stem needs to push them up.
Actually, `.stem` is `position: absolute`. If it grows, it won't push the `.head` up automatically unless `.head` is a child of `.stem` or positioned relative to it.
Let's adjust:
Structure:
`flower-container` (animates sway)
  -> `stem` (animates height)
  -> `leaf-left` (absolute, bottom: 80px)
  -> `leaf-right` (absolute, bottom: 120px)
  -> `head` (absolute, bottom: 200px)

If the stem grows, the leaves and head need to move up.
It is easier to animate the `bottom` property of the stem, leaves, and head simultaneously.
OR, make the stem a wrapper that expands.
Let's try `bottom` animation for the elements.
Stem: height grows, but `bottom` stays 0.
Leaves: `bottom` animates from

Tokens

4,161

Lines of Code

368

Model A

DeepSeek V3.2

CanopyWave

Model B

MiniMax M2.5

CanopyWave

1,991 ←

Tokens

4,161

245

Lines of Code

→ 368

Green highlights the leading metric per row. Fewer tokens = more efficient. More lines = more detail.

Additional models

Kimi K2.5 CanopyWave

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Growth Animation</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.scene {
  position: relative;
  width: 400px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.dirt {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
  background: 
    radial-gradient(circle at 20% 30%, #5c4033 2px, transparent 2px),
    radial-gradient(circle at 60% 50%, #4a3728 3px, transparent 3px),
    radial-gradient(circle at 80% 20%, #6b4423 2px, transparent 2px),
    radial-gradient(circle at 40% 70%, #3d2817 4px, transparent 4px),
    linear-gradient(to bottom, #4a3728, #2f1f16);
  border-radius: 50% 50% 0 0 / 20px 20px 0 0;
  box-shadow: inset 0 10px 20px rgba(0,0,0,0.5);
  z-index: 10;
}

.flower-container {
  position: relative;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: bottom center;
  animation: sway 4s ease-in-out infinite;
}

.stem {
  width: 8px;
  height: 250px;
  background: linear-gradient(to right, #1a4015, #2d5a27, #1a4015);
  border-radius: 4px;
  transform-origin: bottom center;
  animation: growStem 8s ease-out infinite;
  position: relative;
}

.leaf {
  position: absolute;
  width: 40px;
  height: 20px;
  background: linear-gradient(45deg, #2d5a27, #4a8f3c);
  border-radius: 0 100% 0 100%;
  opacity: 0;
  animation: growLeaf 8s ease-out infinite;
}

.leaf.left {
  left: -35px;
  top: 100px;
  transform: rotate(-30deg);
  animation-delay: 0.5s;
}

.leaf.right {
  right: -35px;
  top: 140px;
  transform: rotate(120deg) scaleX(-1);
  animation-delay: 0.8s;
}

.flower-head {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 120px;
  height: 120px;
  animation: bloom 8s ease-out infinite;
}

.petal {
  position: absolute;
  width: 40px;
  height: 60px;
  background: linear-gradient(to bottom, #ff6b9d, #ff8fab, #ffc2d1);
  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
  transform-origin: bottom center;
  left: 40px;
  top: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.petal:nth-child(1) { transform: rotate(0deg) translateY(-30px); }
.petal:nth-child(2) { transform: rotate(45deg) translateY(-30px); background: linear-gradient(to bottom, #ff8fab, #ffb3c6, #ffd6e0); }
.petal:nth-child(3) { transform: rotate(90deg) translateY(-30px); }
.petal:nth-child(4) { transform: rotate(135deg) translateY(-30px); background: linear-gradient(to bottom, #ff8fab, #ffb3c6, #ffd6e0); }
.petal:nth-child(5) { transform: rotate(180deg) translateY(-30px); }
.petal:nth-child(6) { transform: rotate(225deg) translateY(-30px); background: linear-gradient(to bottom, #ff8fab, #ffb3c6, #ffd6e0); }
.petal:nth-child(7) { transform: rotate(270deg) translateY(-30px); }
.petal:nth-child(8) { transform: rotate(315deg) translateY(-30px); background: linear-gradient(to bottom, #ff8fab, #ffb3c6, #ffd6e0); }

.center {
  position: absolute;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 30% 30%, #ffed4e, #ffd700, #ffaa00);
  border-radius: 50%;
  left: 45px;
  top: 45px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 20;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 215, 0, 0.6);
  border-radius: 50%;
  animation: float 8s linear infinite;
}

.particle:nth-child(1) { left: 20%; animation-delay: 0s; }
.particle:nth-child(2) { left: 50%; animation-delay: 2s; }
.particle:nth-child(3) { left: 80%; animation-delay: 4s; }

@keyframes growStem {
  0%, 100% { transform: scaleY(0); }
  20% { transform: scaleY(0); }
  50% { transform: scaleY(1); }
  90% { transform: scaleY(1); }
}

@keyframes growLeaf {
  0%, 100% { opacity: 0; transform: scale(0) rotate(-30deg); }
  40% { opacity: 0; transform: scale(0) rotate(-30deg); }
  55% { opacity: 1; transform: scale(1) rotate(-30deg); }
  90% { opacity: 1; transform: scale(1) rotate(-30deg); }
}

@keyframes bloom {
  0%, 100% { transform: translateX(-50%) scale(0) rotate(0deg); }
  50% { transform: translateX(-50%) scale(0) rotate(0deg); }
  65% { transform: translateX(-50%) scale(0.5) rotate(180deg); }
  80% { transform: translateX(-50%) scale(1) rotate(360deg); }
  90% { transform: translateX(-50%) scale(1) rotate(360deg); }
}

@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@keyframes float {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-300px) translateX(20px); opacity: 0; }
}

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  filter: blur(1px);
  animation: sparkle 3s ease-in-out infinite;
}

.sparkle:nth-child(1) { top: 20%; left: 30%; animation-delay: 0s; }
.sparkle:nth-child(2) { top: 40%; left: 70%; animation-delay: 1s; }
.sparkle:nth-child(3) { top: 60%; left: 20%; animation-delay: 2s; }

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 0.8; transform: scale(1); }
}
</style>
</head>
<body>
<div class="scene">
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="sparkle"></div>
  <div class="sparkle"></div>
  <div class="sparkle"></div>
  <div class="dirt"></div>
  <div class="flower-container">
    <div class="flower-head">
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="petal"></div>
      <div class="center"></div>
    </div>
    <div class="stem">
      <div class="leaf left"></div>
      <div class="leaf right"></div>
    </div>
  </div>
</div>
</body>
</html>

Tokens

3,268

Lines of Code

208

MiMo V2 Flash CanopyWave

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keyframe Flower Garden</title>
    <style>
        /* General Reset and Body Styling */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            width: 100%;
            background: linear-gradient(to bottom, #87CEFA 0%, #E0F7FA 100%);
            display: flex;
            justify-content: center;
            align-items: flex-end;
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* Keyframe Animations */
        @keyframes grow-stem {
            0% { height: 0; }
            100% { height: 200px; }
        }

        @keyframes sway {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(2deg); }
            75% { transform: rotate(-2deg); }
        }

        @keyframes bloom {
            0% { transform: scale(0); opacity: 0; }
            80% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes petal-wiggle {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(5deg); }
        }

        @keyframes pop {
            0% { transform: scale(0); }
            80% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        /* Scene Container */
        .scene {
            position: relative;
            width: 300px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* The Dirt (Ground) */
        .dirt {
            position: absolute;
            bottom: 0;
            width: 200px;
            height: 60px;
            background: #5D4037;
            border-radius: 0 0 100px 100px;
            z-index: 1;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            animation: pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            transform-origin: bottom center;
        }

        /* Texture for dirt */
        .dirt::before {
            content: '';
            position: absolute;
            top: 10px;
            width: 100%;
            height: 10px;
            background: #4E342E;
            border-radius: 50%;
        }

        /* The Plant Structure (Holds Stem and Leaves) */
        .plant {
            position: absolute;
            bottom: 55px; /* Starts just above the dirt */
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50px;
        }

        /* The Stem */
        .stem {
            width: 8px;
            height: 0; /* Starts short */
            background: #388E3C;
            background: linear-gradient(to right, #2e7d32, #4caf50, #2e7d32);
            border-radius: 4px;
            z-index: 2;
            animation: grow-stem 1.5s ease-out forwards;
        }

        /* Leaves */
        .leaves {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 3;
            opacity: 0;
            animation: bloom 0.5s ease-out 1.4s forwards; /* Wait for stem to grow */
        }

        .leaf {
            position: absolute;
            width: 25px;
            height: 12px;
            background: #66BB6A;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            transform-origin: left center;
        }

        .leaf.left {
            top: 20px;
            left: -15px;
            background: #43A047;
            transform: rotate(-30deg);
        }

        .leaf.right {
            top: 60px;
            right: -15px;
            width: 20px;
            height: 10px;
            background: #388E3C;
            transform: rotate(180deg) rotate(30deg);
        }

        /* The Flower Head */
        .flower-head {
            position: absolute;
            top: -220px; /* Position relative to plant container */
            left: 50%;
            transform: translateX(-50%) translateY(0);
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: bloom 1s ease-out 1.8s forwards; /* Wait for stem */
            transform-origin: center;
            z-index: 1;
        }

        /* Center of flower */
        .center {
            width: 20px;
            height: 20px;
            background: #FFC107;
            border-radius: 50%;
            z-index: 10;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            animation: pop 0.5s ease-out 2.5s backwards;
        }

        /* Petals (4 of them) */
        .petal {
            position: absolute;
            width: 30px;
            height: 50px;
            background: #E91E63;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            z-index: 5;
            transform-origin: 50% 100%;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
            animation: petal-wiggle 2s ease-in-out infinite;
        }

        .petal:nth-child(1) { 
            transform: rotate(0deg) translateY(15px); 
            background: #F06292;
        }
        .petal:nth-child(2) { 
            transform: rotate(90deg) translateY(15px); 
            background: #EC407A;
            animation-delay: 0.1s;
        }
        .petal:nth-child(3) { 
            transform: rotate(180deg) translateY(15px); 
            background: #D81B60;
            animation-delay: 0.2s;
        }

        .petal:nth-child(4) { 
            transform: rotate(270deg) translateY(15px); 
            animation-delay: 0.3s;
        }

        /* Floating Animation for the whole flower head */
        .flower-head {
            animation: 
                bloom 1s ease-out 1.8s forwards, 
                sway 4s ease-in-out infinite 2.8s;
        }

        /* Text */
        .message {
            position: absolute;
            top: 40%;
            color: #2F4F4F;
            font-weight: bold;
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            opacity: 0;
            animation: fadeText 2s ease-out forwards 2s;
            z-index: 0;
        }

        @keyframes fadeText {
            0% { opacity: 0; transform: translateY(10px); }
            100% { opacity: 1; transform: translateY(0); }
        }

    </style>
</head>
<body>

    <div class="scene">
        <div class="message">Growing Beauty</div>

        <!-- The Flower Head Group -->
        <div class="flower-head">
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="petal"></div>
            <div class="center"></div>
        </div>

        <!-- The Stem and Leaves -->
        <div class="plant">
            <div class="stem"></div>
            <div class="leaves">
                <div class="leaf left"></div>
                <div class="leaf right"></div>
            </div>
        </div>

        <!-- The Dirt (Bottom Layer) -->
        <div class="dirt"></div>
    </div>

</body>
</html>

Tokens

2,119

Lines of Code

234

The loop test

This is the single most important question: did the model build an animation that loops?

Model	Loops?	How
Kimi K2.5	Yes	8-second `infinite` cycle, percentage-based keyframes, grow-bloom-fade-reset
MiniMax M2.5	Yes	8-second `infinite` cycle, chain-of-thought planned the loop architecture
DeepSeek V3.2	No	Growth uses `forwards` (one-shot), only sparkles loop
MiMo V2 Flash	No	Growth uses `forwards` (one-shot), only petal wiggle loops

Two out of four followed the prompt. The other two built a grow-then-idle sequence — the flower appears once and stays there. That’s not a loop.

Prompt adherence scorecard

Requirement	DeepSeek V3.2	MiniMax M2.5	Kimi K2.5	MiMo V2 Flash
Flower with petals	8 petals	8 petals	8 petals	4 petals
Brown dirt	Yes	Yes	Yes (textured)	Yes (bouncing)
Grows from dirt	Yes	Yes	Yes	Yes
Animated loop	No	Yes	Yes	No
CSS only (no JS)	Yes	Yes	Yes	Yes

Every model nails the visual basics — flower, dirt, growth, CSS-only. The differentiator is whether they read “animated loop” as a requirement or a suggestion.

Bottom line

Kimi K2.5 and MiniMax M2.5 followed the prompt. DeepSeek V3.2 and MiMo V2 Flash built nice flowers but didn’t build loops. If you’re evaluating models for instruction-following on creative tasks, this is the kind of detail that matters.

Part of our Model Animation Benchmark series on CanopyWave. Subscribe for new comparisons.

CanopyWave Flower Animation Roundup: 4 Models Compared

We asked four models on CanopyWave for a looping CSS flower animation. Half of them actually looped.

The loop test

Prompt adherence scorecard

Bottom line

Models

Providers

Resources

Legal

CanopyWave Flower Animation Roundup: 4 Models Compared

We asked four models on CanopyWave for a looping CSS flower animation. Half of them actually looped.

The loop test

Prompt adherence scorecard

Bottom line

Get the signal, skip the noise.

Models

Providers

Resources

Legal