Models 44

Nemotron 3.5 Lightning (free)

by NVIDIAReasoningClean
Open in new window

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

How it went

Total time
26.7 s
Cost
$0
Output tokens
1,795
Spent thinking
0 tokens
Speed
68 tok/s
Console errors
0
First token after
277 ms
First visible text after
277 ms
Prompt tokens
448
Code size
5.8 KB
Finish reason
stop
Served by
Nvidia
Model id
nvidia/nemotron-3.5-lightning:free
Reasoning sent
{"effort":"none"}
Max output
32,000 tokens
Generated
Nov 9, 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 · 179 lines

<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>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">
<title>3D Aquarium</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html, body { width:100%; height:100%; overflow:hidden; font-family:sans-serif; background:#1a1a2e; }
  #canvas { width:100%; height:100%; display:block; }
  #ui { position:absolute; top:20px; left:20px; color:#fff; pointer-events:none; }
  #start { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; background:#e91e63; padding:12px 24px; border:none; border-radius:4px; font-size:18px; cursor:pointer; display:none; }
  #start.visible { display:block; }
  .instructions { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#aaa; font-size:12px; }
</style>
</head>
<body>
<div id="ui">
  <div id="start">Click or press a key to start</div>
  <div class="instructions">Move mouse to chase fish</div>
</div>
<canvas id="canvas"></canvas>

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

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);

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

// Renderer
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas'), antialias:true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// Controls (optional, can be used to navigate)
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

// Fish geometry and material
const fishGeometry = new THREE.ConeGeometry(0.2, 0.4, 8);
const fishMaterial = new THREE.MeshStandardMaterial({ color: 0xff6b6b, flatShading:true });

// School of fish
const fishCount = 30;
const fish = [];
const fishSpeed = [];

for (let i = 0; i < fishCount; i++) {
  const fishMesh = new THREE.Mesh(fishGeometry, fishMaterial);
  fishMesh.position.set(
    (Math.random() - 0.5) * 20,
    (Math.random() - 0.5) * 20,
    (Math.random() - 0.5) * 20
  );
  fishMesh.rotation.z = Math.random() * Math.PI * 2;
  fishMesh.scale.setScalar(0.5 + Math.random() * 0.5);
  scene.add(fishMesh);
  fish.push(fishMesh);
  
  // Random initial speed vector
  const angle = Math.random() * Math.PI * 2;
  const speed = 0.05 + Math.random() * 0.05;
  fishSpeed.push({ angle, speed });
}

// Light
const ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);

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

// Mouse interaction
const mouse = { x: 0, y: 0, active: false };
const fishAvoidRadius = 3;

window.addEventListener('mousemove', (e) => {
  const rect = renderer.domElement.getBoundingClientRect();
  mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
  mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
  mouse.active = true;
});

window.addEventListener('keydown', () => {
  document.getElementById('start').classList.add('visible');
});

// Initial pool of fish dispersion animation on start
function disperseFish() {
  fish.forEach((f, i) => {
    const target = new THREE.Vector3(
      (Math.random() - 0.5) * 15,
      (Math.random() - 0.5) * 15,
      (Math.random() - 0.5) * 15
    );
    f.userData.target = target;
  });
}

// Movement logic
function moveFish(dt) {
  fish.forEach((f, i) => {
    // Avoid mouse if active
    if (mouse.active) {
      const dist = f.position.distanceTo(new THREE.Vector3(mouse.x * fishAvoidRadius, mouse.y * fishAvoidRadius, 0));
      if (dist < fishAvoidRadius && dist > 0) {
        // Push fish away from mouse direction
        const away = new THREE.Vector3();
        away.subVectors(f.position, new THREE.Vector3(mouse.x * fishAvoidRadius, mouse.y * fishAvoidRadius, 0));
        away.normalize();
        away.multiplyScalar((fishAvoidRadius - dist) * 0.1);
        f.position.add(away);
      }
    }
    
    // Simple swimming behavior - move forward along z with some lateral drift
    const speed = fishSpeed[i].speed;
    const angle = fishSpeed[i].angle + (i * 0.2 + performance.now() * 0.001);
    
    f.position.x += Math.cos(angle) * speed * dt;
    f.position.y += Math.sin(angle) * speed * dt * 0.5;
    f.position.z += Math.sin(angle * 0.7) * speed * dt * 0.3;
    
    // Wrap around boundaries
    if (f.position.x > 10) f.position.x = -10;
    if (f.position.x < -10) f.position.x = 10;
    if (f.position.y > 10) f.position.y = -10;
    if (f.position.y < -10) f.position.y = 10;
    if (f.position.z > 10) f.position.z = -10;
    if (f.position.z < -10) f.position.z = 10;
    
    // Point fish in direction of movement
    f.lookAt(f.position.x + Math.cos(angle) * 0.5, f.position.y + Math.sin(angle) * 0.5, f.position.z);
  });
}

// Animation loop
const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  const dt = Math.min(clock.getDelta(), 0.1);
  
  moveFish(dt);
  
  controls.update();
  renderer.render(scene, camera);
}

animate();

// Start UI
document.getElementById('start').addEventListener('click', () => {
  document.getElementById('start').classList.remove('visible');
  disperseFish();
});

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