DeepSeek V3.2 vs MiniMax M2.5: Flower Animation on CanopyWave
Same prompt, different interpretations. One model loops properly, the other grows once and stops.
bots.so
The prompt asked for an animated loop. That means the flower should grow, bloom, and reset — infinitely. Let’s see who followed the brief.
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> 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 fromModel A
DeepSeek V3.2
CanopyWave
vs
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.
Did they loop?
MiniMax M2.5 — Yes. Every animation runs on an 8-second infinite cycle with percentage-based keyframes. The flower grows, blooms, fades, and resets cleanly. This is exactly what “animated loop” means.
DeepSeek V3.2 — Partially. The stem, leaves, and bloom all use forwards — they grow once and stop. Only the sparkle particles and a stem wiggle loop. So you get a one-shot growth sequence followed by idle sparkles. Not really a loop.
Prompt checklist
| Requirement | DeepSeek V3.2 | MiniMax M2.5 |
|---|---|---|
| Flower | Yes — 8 petals, gold center | Yes — 8 petals, alternating gradients |
| Brown dirt | Yes — gradient ground | Yes — gradient ground |
| Growing animation | Yes — sequential delays | Yes — percentage-based timeline |
| Loop | No — grows once, then idles | Yes — full grow/bloom/fade cycle |
| CSS only | Yes | Yes |
Verdict
MiniMax nails the brief. DeepSeek builds a prettier scene but misses the core ask — the animation doesn’t loop.
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