Interactive 3D aquariumOne-line

Mistral Small 4

by MistralReasoningClean

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 19.5 s
Cost: $0.0021
Output tokens: 3,174
Spent thinking: 471 tokens
Speed: 175.8 tok/s
Console errors: 0

First token after: 1.4 s
First visible text after: 3.7 s
Prompt tokens: 449
Code size: 10.1 KB
Finish reason: stop
Served by: Mistral
Model id: mistralai/mistral-small-2603
Reasoning sent: {"effort":"high"}
Max output: 209,715 tokens
Generated: Nov 12, 2026

What it was asked

The prompt

“a 3D aquarium with Three.js where the fish swim away when I move the mouse near them (Load Three.js only through this import map: <script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"}}</script>)”

System prompt, sent with every prompt

You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 290 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Aquarium</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: linear-gradient(to bottom, #1a6bb0, #0d2b45);
            font-family: Arial, sans-serif;
        }
        #container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }
        #startMessage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background: rgba(0, 0, 0, 0.5);
            padding: 20px 40px;
            border-radius: 10px;
            font-size: 24px;
            text-align: center;
            z-index: 100;
            cursor: pointer;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="startMessage">Click or press a key to start</div>
    </div>

    <script type="importmap">
        {"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"}}
    </script>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // Scene setup
        const scene = new THREE.Scene();
        scene.fog = new THREE.Fog(0x1a6bb0, 10, 30);

        // Camera
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 5, 15);
        camera.lookAt(0, 0, 0);

        // Renderer
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x1a6bb0);
        document.getElementById('container').prepend(renderer.domElement);

        // Lighting
        const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 10, 7);
        scene.add(directionalLight);

        // Aquarium tank
        const tankWidth = 20;
        const tankHeight = 12;
        const tankDepth = 20;

        const tankGeometry = new THREE.BoxGeometry(tankWidth, tankHeight, tankDepth);
        const tankMaterial = new THREE.MeshStandardMaterial({
            color: 0x006994,
            transparent: true,
            opacity: 0.3,
            side: THREE.BackSide
        });
        const tank = new THREE.Mesh(tankGeometry, tankMaterial);
        scene.add(tank);

        // Tank walls (invisible but solid for boundaries)
        const wallMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0 });
        const walls = [];

        // Front wall
        walls.push(new THREE.Mesh(new THREE.BoxGeometry(tankWidth + 0.1, tankHeight + 0.1, 0.1), wallMaterial));
        walls[0].position.z = tankDepth / 2;
        scene.add(walls[0]);

        // Back wall
        walls.push(new THREE.Mesh(new THREE.BoxGeometry(tankWidth + 0.1, tankHeight + 0.1, 0.1), wallMaterial));
        walls[1].position.z = -tankDepth / 2;
        scene.add(walls[1]);

        // Left wall
        walls.push(new THREE.Mesh(new THREE.BoxGeometry(0.1, tankHeight + 0.1, tankDepth + 0.1), wallMaterial));
        walls[2].position.x = -tankWidth / 2;
        scene.add(walls[2]);

        // Right wall
        walls.push(new THREE.Mesh(new THREE.BoxGeometry(0.1, tankHeight + 0.1, tankDepth + 0.1), wallMaterial));
        walls[3].position.x = tankWidth / 2;
        scene.add(walls[3]);

        // Bottom wall
        walls.push(new THREE.Mesh(new THREE.BoxGeometry(tankWidth + 0.1, 0.1, tankDepth + 0.1), wallMaterial));
        walls[4].position.y = -tankHeight / 2;
        scene.add(walls[4]);

        // Top wall
        walls.push(new THREE.Mesh(new THREE.BoxGeometry(tankWidth + 0.1, 0.1, tankDepth + 0.1), wallMaterial));
        walls[5].position.y = tankHeight / 2;
        scene.add(walls[5]);

        // Fish parameters
        const fishCount = 20;
        const fishGroup = new THREE.Group();
        scene.add(fishGroup);

        // Fish colors
        const fishColors = [
            0xff6b6b, 0x4ecdc4, 0x45b7d1, 0xf9ca24,
            0xff9ff3, 0x54a0ff, 0x5f27cd, 0x00d2d3
        ];

        // Create fish
        const fishMeshes = [];
        const fishPositions = [];
        const fishVelocities = [];
        const fishSpeeds = [];
        const fishSizes = [];

        for (let i = 0; i < fishCount; i++) {
            // Fish geometry (cone with tail)
            const fishBody = new THREE.ConeGeometry(0.3, 1, 8);
            const fishMaterial = new THREE.MeshStandardMaterial({
                color: fishColors[i % fishColors.length],
                metalness: 0.1,
                roughness: 0.3
            });

            const fish = new THREE.Mesh(fishBody, fishMaterial);
            fish.rotation.x = Math.PI / 2; // Point forward

            // Position fish randomly in the tank
            const x = (Math.random() - 0.5) * tankWidth * 0.8;
            const y = (Math.random() - 0.5) * tankHeight * 0.8;
            const z = (Math.random() - 0.5) * tankDepth * 0.8;

            fish.position.set(x, y, z);
            fishGroup.add(fish);

            fishMeshes.push(fish);
            fishPositions.push(new THREE.Vector3(x, y, z));
            fishVelocities.push(new THREE.Vector3(
                (Math.random() - 0.5) * 0.02,
                (Math.random() - 0.5) * 0.02,
                (Math.random() - 0.5) * 0.02
            ));
            fishSpeeds.push(0.03 + Math.random() * 0.03);
            fishSizes.push(0.5 + Math.random() * 0.5);
            fish.scale.set(fishSizes[i], fishSizes[i], fishSizes[i]);
        }

        // Mouse interaction
        const mouse = new THREE.Vector2();
        let isActive = false;

        window.addEventListener('mousemove', (event) => {
            if (!isActive) return;

            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            // Convert mouse to 3D position
            const mouse3D = new THREE.Vector3(
                mouse.x * tankWidth / 2,
                mouse.y * tankHeight / 2,
                0
            );

            // Make fish flee from mouse
            fishMeshes.forEach((fish, index) => {
                const fishPos = fishPositions[index];
                const distance = fishPos.distanceTo(mouse3D);

                if (distance < 3) { // Flee threshold
                    const direction = new THREE.Vector3()
                        .subVectors(fishPos, mouse3D)
                        .normalize();

                    // Increase speed away from mouse
                    fishSpeeds[index] = 0.1 + (3 - distance) * 0.02;
                    fishVelocities[index].add(direction.multiplyScalar(0.005));
                }
            });
        });

        // Handle window resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // Start animation
        function startDemo() {
            isActive = true;
            document.getElementById('startMessage').style.display = 'none';
        }

        document.getElementById('startMessage').addEventListener('click', startDemo);
        window.addEventListener('keydown', startDemo);

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);

            if (isActive) {
                // Update fish positions
                fishMeshes.forEach((fish, index) => {
                    const pos = fishPositions[index];
                    const vel = fishVelocities[index];
                    const speed = fishSpeeds[index];

                    // Apply velocity
                    pos.x += vel.x * speed;
                    pos.y += vel.y * speed;
                    pos.z += vel.z * speed;

                    // Bounce off walls
                    if (pos.x < -tankWidth / 2 + 1) {
                        pos.x = -tankWidth / 2 + 1;
                        vel.x = Math.abs(vel.x) * 0.8;
                    } else if (pos.x > tankWidth / 2 - 1) {
                        pos.x = tankWidth / 2 - 1;
                        vel.x = -Math.abs(vel.x) * 0.8;
                    }

                    if (pos.y < -tankHeight / 2 + 1) {
                        pos.y = -tankHeight / 2 + 1;
                        vel.y = Math.abs(vel.y) * 0.8;
                    } else if (pos.y > tankHeight / 2 - 1) {
                        pos.y = tankHeight / 2 - 1;
                        vel.y = -Math.abs(vel.y) * 0.8;
                    }

                    if (pos.z < -tankDepth / 2 + 1) {
                        pos.z = -tankDepth / 2 + 1;
                        vel.z = Math.abs(vel.z) * 0.8;
                    } else if (pos.z > tankDepth / 2 - 1) {
                        pos.z = tankDepth / 2 - 1;
                        vel.z = -Math.abs(vel.z) * 0.8;
                    }

                    // Slow down gradually
                    vel.x *= 0.98;
                    vel.y *= 0.98;
                    vel.z *= 0.98;

                    // Update fish position and rotation
                    fish.position.copy(pos);

                    // Make fish point in direction of movement
                    if (vel.length() > 0.001) {
                        const targetRotation = Math.atan2(vel.z, vel.x) + Math.PI / 2;
                        fish.rotation.z = targetRotation;

                        // Tilt up/down based on vertical movement
                        const tilt = Math.atan2(vel.y, Math.sqrt(vel.x * vel.x + vel.z * vel.z));
                        fish.rotation.x = tilt * 0.3;
                    }
                });
            }

            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>
</html>

Reasoning trace (471 tokens)

I need to create a 3D aquarium with Three.js where fish swim away when the mouse moves near them. The user specified an import map for Three.js, so I'll use that.

Let me break down what I need:
1. Set up a Three.js scene with a camera, renderer, and lighting
2. Create an aquarium environment (a large box with water-like material)
3. Create multiple fish models that swim around
4. Implement mouse interaction where fish flee when mouse gets close
5. Make sure it's responsive and works in the viewport

For the fish, I'll use simple geometries like cones or custom shapes. I'll need to:
- Create a fish geometry (maybe a cone with a tail)
- Add materials with colors
- Position multiple fish randomly in the aquarium
- Make them swim in random directions
- Add a flee behavior when mouse is near

For the aquarium:
- Use a large box as the tank
- Add a water-like blue material
- Add some simple decorations like rocks or plants

For the mouse interaction:
- Track mouse position
- Calculate distance from each fish to mouse
- When distance is below a threshold, make the fish swim away from the mouse
- Use a smooth transition for the fish movement

I'll need to:
1. Set up the Three.js scene
2. Create the aquarium tank
3. Create fish models
4. Add mouse event listeners
5. Implement the flee behavior
6. Add animation loop
7. Make it responsive

Let me structure the code:
- HTML structure with canvas
- CSS to make it fullscreen and responsive
- JavaScript with Three.js setup
- Use the import map provided
- Include a "Click to start" message

I'll use:
- PerspectiveCamera
- WebGLRenderer
- Scene with fog
- BoxGeometry for the tank
- ConeGeometry for fish bodies
- PointLight or ambient light
- Animation loop with requestAnimationFrame
- Mouse move event to track position

For the fish fleeing behavior, I'll:
- Store fish positions and velocities
- On mouse move, calculate direction away from mouse
- Apply velocity changes to fish near the mouse
- Update fish positions in the animation loop

Let me write the complete code.