Head to head: Kimi-K2.7-Code vs mistral-medium-3-5
Kimi-K2.7-Code vs mistral-medium-3-5
This matchup turned on a basic but decisive failure: Kimi-K2.7-Code didn’t get its scene on screen, while mistral-medium-3-5 did. With only one scored task, the edge is still a lean rather than a rout, but the result is straightforward.
There isn’t much ambiguity here. On **Clockwork Reef Bloom**, Kimi-K2.7-Code lost for the simplest possible reason: its scene code failed to render. In a code-driven animation test, that’s not a stylistic miss or a minor quality gap — it’s a non-starter. mistral-medium-3-5 wins by clearing the bar that matters most: producing a working result. That may sound like faint praise, but reliability is the foundation of any generative coding model. If one model renders and the other doesn’t, the comparison ends there. The aggregate reflects that reality: **7.0 to 0.0**, with task wins at **1 to 0**. Because this head-to-head rests on a single evaluated task, the statistical read is appropriately modest: **mistral-medium-3-5 wins with 75% confidence, a lean rather than a blowout**. That keeps the verdict disciplined without softening what happened. **Final call: mistral-medium-3-5 takes this matchup.** Not because it dazzled across a broad slate, but because Kimi-K2.7-Code failed the core requirement on the only task that counted.
Clockwork Reef Bloom
Animate a twilight undersea scene where a circular coral reef behaves like intricate clockwork: layered rings of procedurally built coral fins, anemone fronds, and shell-like vanes slowly open, interlock, and rotate in coordinated rhythms while tiny bioluminescent plankton drift through the gaps. Use only procedural geometry/materials/lighting to create a rich aquatic mood with caustic-like light shafts, soft particulate glow, and a seamless ~6-second loop that clearly reads as a mechanical reef blooming and resetting.
Kimi-K2.7-Code: const TAU = Math.PI * 2;
function makeRng(seed) {
let s = seed >>> 0;
return function () {
s = (s * 1664525 + 1013904223) >>> 0;
return s / 4294967296;
};
}
const rng = makeRng(20250318);
scene.background = new THREE.Color(0x040a18);
scene.fog = new THREE.FogExp2(0x040a18, 0.09);
const ambient = new THREE.AmbientLight(0x152840, 0.9);
scene.add(ambient);
const hemi = new THREE.HemisphereLight(0x5599cc, 0x120826, 1.3);
scene.add(hemi);
const sun = new THREE.DirectionalLight(0xc8ecff, 1.6);
sun.position.set(3.5, 6, 2.5);
scene.add(sun);
const rim = new THREE.DirectionalLight(0xff6aa6, 0.8);
rim.position.set(-4, 0.5, -4);
scene.add(rim);
const reef = new THREE.Group();
scene.add(reef);
const coreGeo = new THREE.IcosahedronGeometry(0.5, 2);
const coreMat = new THREE.MeshPhysicalMaterial({
color: 0xffffff, metalness: 0.4, roughness: 0.2,
emissive: 0xff3377, emissiveIntensity: 0.2,
iridescence: 1, iridescenceIOR: 1.5, clearcoat: 0.5
});
const core = new THREE.Mesh(coreGeo, coreMat);
reef.add(core);
const coreLight = new THREE.PointLight(0xff6699, 1.8, 6);
core.add(coreLight);
const innerGroup = new THREE.Group();
const midGroup = new THREE.Group();
const outerGroup = new THREE.Group();
const anemGroup = new THREE.Group();
reef.add(innerGroup);
reef.add(midGroup);
reef.add(outerGroup);
reef.add(anemGroup);
function buildRing(count, geo, mat, hueBase, hueRange, sat, light, sMin, sMax) {
const mesh = new THREE.InstancedMesh(geo, mat, count);
mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
const data = [];
for (let i = 0; i < count; i++) {
const hue = ((hueBase + rng() * hueRange) % 1 + 1) % 1;
mesh.setColorAt(i, new THREE.Color().setHSL(hue, sat, light));
data.push({
angle: (i / count) * TAU + (rng() - 0.5) * 0.08,
phase: rng() * TAU,
leanPhase: rng() * TAU,
scaleY: sMin + rng() * (sMax - sMin)
});
}
mesh.instanceColor.needsUpdate = true;
return { mesh, data };
}
const inner = buildRing(
20,
new THREE.BoxGeometry(0.07, 0.9, 0.12),
new THREE.MeshPhysicalMaterial({
color: 0xffffff, metalness: 0.3, roughness: 0.25,
iridescence: 1, iridescenceIOR: 1.3,
emissive: 0x331122, emissiveIntensity: 0.12
}),
0.92, 0.13, 0.85, 0.55, 0.85, 1.2
);
innerGroup.add(inner.mesh);
const mid = buildRing(
28,
new THREE.BoxGeometry(0.09, 1.25, 0.07),
new THREE.MeshPhysicalMaterial({
color: 0xffffff, metalness: 0.35, roughness: 0.22,
iridescence: 1, iridescenceIOR: 1.45,
emissive: 0x001133, emissiveIntensity: 0.12
}),
0.5, 0.18, 0.8, 0.55, 0.95, 1.35
);
midGroup.add(mid.mesh);
const outer = buildRing(
36,
new THREE.BoxGeometry(0.12, 1.75, 0.05),
new THREE.MeshPhysicalMaterial({
color: 0xffffff, metalness: 0.18, roughness: 0.32,
emissive: 0x002211, emissiveIntensity: 0.1
}),
0.28, 0.24, 0.7, 0.55, 0.95, 1.35
);
outerGroup.add(outer.mesh);
const anem = buildRing(
48,
new THREE.ConeGeometry(0.05, 1.4, 6),
new THREE.MeshStandardMaterial({
color: 0xffffff, roughness: 0.45,
emissive: 0x00ffbb, emissiveIntensity: 0.25
}),
0.4, 0.3, 0.85, 0.55, 0.9, 1.35
);
anemGroup.add(anem.mesh);
const pCount = 900;
const pGeo = new THREE.BufferGeometry();
const pPos = new Float32Array(pCount * 3);
const pSize = new Float32Array(pCount);
const pData = [];
for (let i = 0; i < pCount; i++) {
const r = 2.4 + rng() * 3.8;
const th = rng() * TAU;
const y = (rng() - 0.5) * 7.5;
pData.push({
base: new THREE.Vector3(r * Math.cos(th), y, r * Math.sin(th)),
rad: 0.18 + rng() * 0.55,
kx: 1 + Math.floor(rng() * 4),
ky: 1 + Math.floor(rng() * 4),
kz: 1 + Math.floor(rng() * 3),
phase: rng() * TAU,
size: 2 + rng() * 5
});
pSize[i] = pData[i].size;
}
pGeo.setAttribute('position', new THREE.BufferAttribute(pPos, 3));
p
mistral-medium-3-5: // Lighting
const ambient = new THREE.AmbientLight(0x224466, 1);
scene.add(ambient);
const mainLight = new THREE.PointLight(0x44aaff, 2, 50, 1);
mainLight.position.set(5, 8, 5);
scene.add(mainLight);
const causticLight = new THREE.PointLight(0x88ccff, 1.5, 30, 0.5);
causticLight.position.set(-5, -3, 5);
scene.add(causticLight);
// Particles (plankton)
const particleCount = 500;
const particles = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);
const sizes = new Float32Array(particleCount);
for (let i = 0; i < particleCount; i++) {
const theta = Math.PI * 2 * (i / particleCount);
const r = 1.5 + Math.random() * 3;
positions[i * 3] = r * Math.cos(theta);
positions[i * 3 + 1] = -0.5 + Math.random() * 3;
positions[i * 3 + 2] = r * Math.sin(theta);
colors[i * 3] = 0.2 + Math.random() * 0.6;
colors[i * 3 + 1] = 0.5 + Math.random() * 0.4;
colors[i * 3 + 2] = 0.8 + Math.random() * 0.2;
sizes[i] = 0.05 + Math.random() * 0.1;
}
particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
particles.setAttribute('color', new THREE.BufferAttribute(colors, 3));
particles.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
const particleMaterial = new THREE.PointsMaterial({ size: 0.1, vertexColors: true, transparent: true, opacity: 0.8 });
const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);
// Background gradient
scene.background = new THREE.Color(0x000022);
const bgSphere = new THREE.Mesh(
new THREE.SphereGeometry(50, 32, 32),
new THREE.MeshBasicMaterial({
color: 0x001133,
side: THREE.BackSide
})
);
scene.background = null;
// Reef base (subtle Disc)
const reefBase = new THREE.Mesh(
new THREE.RingGeometry(3.5, 6, 64),
new THREE.MeshPhongMaterial({ color: 0x0d2d1f, emissive: 0x003311, emissiveIntensity: 0.3 })
);
reefBase.rotation.x = Math.PI / 2;
scene.add(reefBase);
// Circular coral rings (3 concentric)
const ringCount = 3;
const rings = [];
for (let ri = 0; ri < ringCount; ri++) {
const radius = 3 + ri * 1.2;
const fins = 24 + ri * 8;
const ringGroup = new THREE.Group();
for (let fi = 0; fi < fins; fi++) {
const fin = new THREE.Mesh(
new THREE.BoxGeometry(0.08, 0.4 + ri * 0.15, 0.3),
new THREE.MeshPhongMaterial({
color: 0x336622 + ri * 0x224422,
emissive: ri === 0 ? 0x114411 : (ri === 1 ? 0x226622 : 0x338833),
emissiveIntensity: 0.2 + ri * 0.1
})
);
fin.position.x = radius * Math.cos(2 * Math.PI * fi / fins);
fin.position.z = radius * Math.sin(2 * Math.PI * fi / fins);
fin.position.y = -0.2;
ringGroup.add(fin);
}
rings.push(ringGroup);
scene.add(ringGroup);
}
// Anemone fronds (8 around middle ring)
const anemones = [];
const anemoneRadius = 4.2;
for (let ai = 0; ai < 8; ai++) {
const group = new THREE.Group();
const tentacles = [];
for (let ti = 0; ti < 12; ti++) {
const geometry = new THREE.ConeGeometry(0.05, 0.6, 8);
geometry.rotateX(Math.PI);
geometry.translate(0, 0.3, 0);
const material = new THREE.MeshPhongMaterial({
color: 0xff5544,
emissive: 0x442211,
emissiveIntensity: 0.15
});
const tentacle = new THREE.Mesh(geometry, material);
tentacle.position.x = Math.cos(2 * Math.PI * ti / 12) * 0.12;
tentacle.position.z = Math.sin(2 * Math.PI * ti / 12) * 0.12;
group.add(tentacle);
tentacles.push(tentacle);
}
group.position.x = anemoneRadius * Math.cos(2 * Math.PI * ai / 8);
group.position.z = anemoneRadius * Math.sin(2 * Math.PI * ai / 8);
anemones.push({ group, tentacles });
scene.add(group);
}
// Shell-like vanes (interlocking)
const vaneCount = 12;
const vanes = [];
for (let vi = 0; vi < vaneCount; vi++) {
const geometry = new THREE.ConeGeometry(0.15, 1.2, 16, 1, false, 2 * Math.PI * (0.7 + vi % 2 * 0.1));
geometry.rotateX(Math.PI / 2);
const material = new THREE.MeshPhongMaterial({
color: 0xaa9977 + (vi % 2) * 0x111122,
emissive: 0x333322,
emissiveIntensity: 0.1,
side: THREE.DoubleSide
});
const vane = new THREE.Mesh(geometry, material);
vane.position.x = (3.8 + Math.sin(vi * 0.5) * 0.4) * Math.cos(2 * Math.PI * vi / vaneCount);
vane.position.z = (3.8 + Math.sin(vi * 0.5) * 0.4) * Math.sin(2 * Math.PI * vi / vaneCount);
vane.rotation.y = -2 * Math.PI * vi / vaneCount + Math.PI / 2;
vanes.push(vane);
scene.add(vane);
}
// Caustic light shafts (animated)
const shaftGroup = new THREE.Group();
for (let si = 0; si < 6; si++) {
const geometry = new THREE.PlaneGeometry(0.3, 4, 1);
const material = new THREE.MeshBasicMaterial({
color: 0x44aaff,
transparent: true,
opacity: 0.15,
side: THREE.DoubleSide
});
const shaft = new THREE.Mesh(geometry, material);
shaft.rotation.x = Math.PI / 2;
shaft.position.x = (2 + Math.random() * 2) * Math.cos(2 * Math.PI * si / 6);
shaft.position.z = (2 + Math.random() * 2) * Math.sin(2 * Math.PI * si / 6);
shaft.position.y = 2;
shaftGroup.add(shaft);
}
scene.add(shaftGroup);
// Fog
scene.fog = new THREE.Fog(0x000022, 3, 10);
// Camera position slight override
camera.position.set(0, 0, 8);
__update = (t) => {
// Global time
const T = t / DURATION * 2 * Math.PI;
const T2 = t / DURATION * Math.PI;
// Caustic light movement
causticLight.position.x = -3 + 4 * Math.sin(T * 0.5);
causticLight.position.z = 3 + 4 * Math.cos(T * 0.3);
causticLight.position.y = -4 + 2 * Math.sin(T * 0.2);
mainLight.intensity = 1.8 + 0.3 * Math.sin(T);
causticLight.intensity = 1.2 + 0.5 * Math.sin(T * 1.3);
// Wave-making light shafts
shaftGroup.children.forEach((shaft, i) => {
shaft.position.y = 2 + Math.sin(T * 2 + i) * 0.5;
shaft.scale.y = 1 + 0.3 * Math.sin(T * 1.5 + i * 0.7);
});
// Rotate rings
rings.forEach((ring, ri) => {
const speed = (ri + 1) * 0.2;
ring.rotation.y = T * speed;
// Wobble fins
ring.children.forEach((fin, fi) => {
fin.rotation.x = 0.1 * Math.sin(T * 1.5 + fi * 0.4 + ri * 0.7);
fin.position.y = -0.2 + 0.1 * Math.sin(T * 2 + fi * 0.3 + ri * 0.5);
});
});
// Anemone tentacles
anemones.forEach((anemone, ai) => {
anemone.group.rotation.y = T * 0.1;
const pulse = Math.sin(T * 1.2 + ai * 0.4) * 0.5 + 0.5;
anemone.tentacles.forEach((tentacle, ti) => {
tentacle.scale.y = 0.5 + 0.5 * pulse * (1 + 0.2 * Math.sin(T * 2 + ti + ai));
tentacle.rotation.x = 0.2 * Math.sin(T * 1.8 + ti * 0.5);
});
});
// Vanes open/close and rotate
vanes.forEach((vane, vi) => {
const vanePhase = T * 0.8 + (vi % 2) * Math.PI;
vane.rotation.z = Math.sin(vanePhase) * 0.8;
vane.position.y = 0.2 * Math.sin(T * 1.1 + vi * 0.3);
vane.rotation.y += 0.001 + 0.0005 * Math.sin(T * 3 + vi);
});
// Plankton drift
const particlePos = particleSystem.geometry.attributes.position;
const particleColors = particleSystem.geometry.attributes.color;
for (let i = 0; i < particleCount; i++) {
const i3 = i * 3;
const theta = Math.PI * 2 * (i / particleCount);
const r = 1.5 + Math.sin(t + i * 0.3) * 0.3;
particlePos.setX(i, r * Math.cos(theta + 0.1 * t));
particlePos.setZ(i, r * Math.sin(theta + 0.1 * t));
particlePos.setY(i, -0.5 + Math.sin(t * 0.8 + i * 0.4) * 1);
particleColors.setX(i, 0.2 + 0.4 * (Math.sin(t * 0.5 + i) * 0.5 + 0.5));
particleColors.setY(i, 0.5 + 0.2 * (Math.sin(t * 0.7 + i * 2) * 0.5 + 0.5));
particleColors.setZ(i, 0.8 + 0.1 * (Math.sin(t * 0.3 + i * 3) * 0.5 + 0.5));
}
particleSystem.geometry.attributes.position.needsUpdate = true;
particleSystem.geometry.attributes.color.needsUpdate = true;
};
Model A's scene code failed to render.
Matchup powered by OpenRouter.