bots.so — The AI Inference Model Index

The prompt: a flower growing from brown dirt, animated as a loop, CSS only. One model built a proper infinite cycle. The other built a charming grow-then-idle sequence.

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

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

Model A

Kimi K2.5

CanopyWave

Model B

MiMo V2 Flash

CanopyWave

3,268

Tokens

→ 2,119

208

Lines of Code

→ 234

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

Did they loop?

Kimi K2.5 — Yes. Every animation — stem growth, leaf appearance, bloom, particles, sparkles — runs on a synchronized infinite 8-second cycle. The flower grows, holds, fades, and restarts. Textbook loop.

MiMo V2 Flash — No. The dirt pops in, the stem grows, leaves and petals appear — all using forwards (one-shot). Only the petal wiggle and a gentle sway continue looping. The growth itself never repeats.

Prompt checklist

Requirement	Kimi K2.5	MiMo V2 Flash
Flower	Yes — 8 petals, alternating colors	Yes — 4 petals, gold center
Brown dirt	Yes — textured radial gradients	Yes — brown gradient mound
Growing animation	Yes — staged percentage keyframes	Yes — sequential delays
Loop	Yes — full infinite cycle	No — one-shot growth, idle wiggle
CSS only	Yes	Yes

Verdict

Kimi follows the prompt faithfully — a proper looping animation with atmosphere. MiMo delivers a clean, compact result but ignores the “loop” requirement. The petals wiggling forever isn’t the same as the growth animation looping.

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

Kimi K2.5 vs MiMo V2 Flash: Flower Animation on CanopyWave

A full looping composition versus a charming one-shot. Two very different takes on the same prompt.

Did they loop?

Prompt checklist

Verdict

Models

Providers

Resources

Legal

Kimi K2.5 vs MiMo V2 Flash: Flower Animation on CanopyWave

A full looping composition versus a charming one-shot. Two very different takes on the same prompt.

Did they loop?

Prompt checklist

Verdict

Get the signal, skip the noise.

Models

Providers

Resources

Legal