MiniMax M2.5 vs MiMo V2 Flash: Flower Animation on CanopyWave
The most elaborate output versus the most compact. But only one follows the prompt.
bots.so
The biggest and smallest outputs in this benchmark set. MiniMax produces 4,161 tokens. MiMo produces 2,119. The prompt asked for a looping animation — let’s see who delivered.
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
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 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>Model A
MiniMax M2.5
CanopyWave
vs
Model B
MiMo V2 Flash
CanopyWave
4,161
Tokens
→ 2,119
368 ←
Lines of Code
234
Green highlights the leading metric per row. Fewer tokens = more efficient. More lines = more detail.
Did they loop?
MiniMax M2.5 — Yes. Every animation runs infinite on a synchronized 8-second cycle. It even includes a chain-of-thought reasoning block where the model explicitly plans the looping architecture before writing code. The grow-bloom-fade-reset cycle works cleanly.
MiMo V2 Flash — No. Growth animations use forwards (one-shot). The dirt pops, stem grows, petals appear — then stop. Only a petal wiggle and gentle sway continue looping. The flower doesn’t regrow.
Prompt checklist
| Requirement | MiniMax M2.5 | MiMo V2 Flash |
|---|---|---|
| Flower | Yes — 8 petals, sun, particles | Yes — 4 petals, gold center |
| Brown dirt | Yes | Yes — with bounce entrance |
| Growing animation | Yes | Yes |
| Loop | Yes — full infinite cycle | No — one-shot, then idle |
| CSS only | Yes | Yes |
Verdict
MiniMax follows the prompt despite being the most verbose model in the set. MiMo delivers a clean result but skips the loop. Twice the tokens, but it actually does what was asked.
Part of our Model Animation Benchmark series on CanopyWave. Subscribe for new comparisons.
Newsletter
Get the signal, skip the noise.
Weekly digest of new models and provider updates across 40+ compute providers. Curated for AI builders who ship.
New model releases
Capability updates
Provider status