kimi-k2.7-code Code

Model-specific source generated from the shared prompt shown on the gallery page. The prompt itself is intentionally not duplicated here.

src/main.js src/styles.css package.json

JavaScript

src/main.js

1import './styles.css';2import * as THREE from 'three';3 4// Model/run identity inferred from the working directory name.5const MODEL_NAME = 'kimi-k2-7-code';6 7const app = document.querySelector('#app');8app.innerHTML = `9  <canvas id="ocean-canvas"></canvas>10  <div class="ui-panel">11    <div class="ui-row">12      <button id="play-pause" type="button" aria-pressed="false">Pause</button>13    </div>14    <label class="ui-row">15      <span>Wave height</span>16      <input id="wave-height" type="range" min="0" max="3" step="0.05" value="1" />17    </label>18    <label class="ui-row">19      <span>Speed</span>20      <input id="speed" type="range" min="0" max="3" step="0.05" value="1" />21    </label>22    <label class="ui-row">23      <span>Render mode</span>24      <select id="render-mode">25        <option value="solid" selected>Solid</option>26        <option value="wireframe">Wireframe</option>27      </select>28    </label>29  </div>30  <div class="model-badge">${MODEL_NAME}</div>31`;32 33const canvas = document.querySelector('#ocean-canvas');34 35// Scene setup36const scene = new THREE.Scene();37scene.background = new THREE.Color(0x87ceeb);38scene.fog = new THREE.Fog(0x87ceeb, 20, 160);39 40const camera = new THREE.PerspectiveCamera(41  55,42  window.innerWidth / window.innerHeight,43  0.1,44  100045);46camera.position.set(0, 8, 28);47camera.lookAt(0, 0, 0);48 49const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });50renderer.setSize(window.innerWidth, window.innerHeight);51renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));52 53// Lighting54const ambient = new THREE.HemisphereLight(0xffffff, 0x0044ff, 0.6);55scene.add(ambient);56 57const sun = new THREE.DirectionalLight(0xffffff, 1.2);58sun.position.set(-10, 20, 10);59scene.add(sun);60 61// Ocean uniforms62const oceanUniforms = {63  uTime: { value: 0 },64  uWaveHeight: { value: 1.0 },65  uSpeed: { value: 1.0 },66  uColorDeep: { value: new THREE.Color(0x001e4d) },67  uColorShallow: { value: new THREE.Color(0x00aaff) },68};69 70const oceanGeometry = new THREE.PlaneGeometry(140, 140, 160, 160);71oceanGeometry.rotateX(-Math.PI / 2);72 73const oceanMaterial = new THREE.ShaderMaterial({74  uniforms: oceanUniforms,75  vertexShader: `76    uniform float uTime;77    uniform float uWaveHeight;78    uniform float uSpeed;79 80    varying float vHeight;81    varying vec3 vNormal;82 83    float waveHeight(vec2 p, float t) {84      float w1 = sin(p.x * 0.15 + t) * cos(p.y * 0.10 + t * 0.8);85      float w2 = sin(p.x * 0.30 - t * 1.2) * 0.5 + cos(p.y * 0.25 + t * 0.6) * 0.5;86      float w3 = sin((p.x + p.y) * 0.08 + t * 0.4) * 1.2;87      return (w1 + w2 + w3) * uWaveHeight;88    }89 90    void main() {91      vec3 pos = position;92      float t = uTime * uSpeed;93 94      float h = waveHeight(pos.xz, t);95      pos.y += h;96 97      // Approximate normal via finite differences98      float eps = 0.1;99      float hx = waveHeight(pos.xz + vec2(eps, 0.0), t);100      float hz = waveHeight(pos.xz + vec2(0.0, eps), t);101      vec3 tangentX = vec3(eps, hx - h, 0.0);102      vec3 tangentZ = vec3(0.0, hz - h, eps);103      vNormal = normalize(cross(tangentZ, tangentX));104 105      vHeight = h;106      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);107    }108  `,109  fragmentShader: `110    uniform vec3 uColorDeep;111    uniform vec3 uColorShallow;112 113    varying float vHeight;114    varying vec3 vNormal;115 116    void main() {117      float mixFactor = clamp(vHeight / 2.0 + 0.5, 0.0, 1.0);118      vec3 color = mix(uColorDeep, uColorShallow, mixFactor);119 120      vec3 lightDir = normalize(vec3(-0.3, 1.0, 0.4));121      float diff = max(dot(vNormal, lightDir), 0.0);122      color += vec3(1.0) * diff * 0.25;123 124      gl_FragColor = vec4(color, 1.0);125    }126  `,127  side: THREE.DoubleSide,128  wireframe: false,129});130 131const ocean = new THREE.Mesh(oceanGeometry, oceanMaterial);132scene.add(ocean);133 134// UI controls135const playPauseBtn = document.querySelector('#play-pause');136const waveHeightInput = document.querySelector('#wave-height');137const speedInput = document.querySelector('#speed');138const renderModeSelect = document.querySelector('#render-mode');139 140let isPlaying = true;141 142playPauseBtn.addEventListener('click', () => {143  isPlaying = !isPlaying;144  playPauseBtn.textContent = isPlaying ? 'Pause' : 'Resume';145  playPauseBtn.setAttribute('aria-pressed', String(!isPlaying));146});147 148waveHeightInput.addEventListener('input', (e) => {149  oceanUniforms.uWaveHeight.value = parseFloat(e.target.value);150});151 152speedInput.addEventListener('input', (e) => {153  oceanUniforms.uSpeed.value = parseFloat(e.target.value);154});155 156renderModeSelect.addEventListener('change', (e) => {157  oceanMaterial.wireframe = e.target.value === 'wireframe';158});159 160// Resize handling161window.addEventListener('resize', () => {162  camera.aspect = window.innerWidth / window.innerHeight;163  camera.updateProjectionMatrix();164  renderer.setSize(window.innerWidth, window.innerHeight);165});166 167// Animation loop168const clock = new THREE.Clock();169 170function animate() {171  requestAnimationFrame(animate);172 173  const delta = clock.getDelta();174  if (isPlaying) {175    oceanUniforms.uTime.value += delta;176  }177 178  const t = oceanUniforms.uTime.value;179  camera.position.x = Math.sin(t * 0.05) * 3;180  camera.lookAt(0, 0, 0);181 182  renderer.render(scene, camera);183}184 185animate();186

import './styles.css';
import * as THREE from 'three';

// Model/run identity inferred from the working directory name.
const MODEL_NAME = 'kimi-k2-7-code';

const app = document.querySelector('#app');
app.innerHTML = `
  <canvas id="ocean-canvas"></canvas>
  <div class="ui-panel">
    <div class="ui-row">
      <button id="play-pause" type="button" aria-pressed="false">Pause</button>
    </div>
    <label class="ui-row">
      <span>Wave height</span>
      <input id="wave-height" type="range" min="0" max="3" step="0.05" value="1" />
    </label>
    <label class="ui-row">
      <span>Speed</span>
      <input id="speed" type="range" min="0" max="3" step="0.05" value="1" />
    </label>
    <label class="ui-row">
      <span>Render mode</span>
      <select id="render-mode">
        <option value="solid" selected>Solid</option>
        <option value="wireframe">Wireframe</option>
      </select>
    </label>
  </div>
  <div class="model-badge">${MODEL_NAME}</div>
`;

const canvas = document.querySelector('#ocean-canvas');

// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87ceeb);
scene.fog = new THREE.Fog(0x87ceeb, 20, 160);

const camera = new THREE.PerspectiveCamera(
  55,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 8, 28);
camera.lookAt(0, 0, 0);

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

// Lighting
const ambient = new THREE.HemisphereLight(0xffffff, 0x0044ff, 0.6);
scene.add(ambient);

const sun = new THREE.DirectionalLight(0xffffff, 1.2);
sun.position.set(-10, 20, 10);
scene.add(sun);

// Ocean uniforms
const oceanUniforms = {
  uTime: { value: 0 },
  uWaveHeight: { value: 1.0 },
  uSpeed: { value: 1.0 },
  uColorDeep: { value: new THREE.Color(0x001e4d) },
  uColorShallow: { value: new THREE.Color(0x00aaff) },
};

const oceanGeometry = new THREE.PlaneGeometry(140, 140, 160, 160);
oceanGeometry.rotateX(-Math.PI / 2);

const oceanMaterial = new THREE.ShaderMaterial({
  uniforms: oceanUniforms,
  vertexShader: `
    uniform float uTime;
    uniform float uWaveHeight;
    uniform float uSpeed;

varying float vHeight;
    varying vec3 vNormal;

float waveHeight(vec2 p, float t) {
      float w1 = sin(p.x * 0.15 + t) * cos(p.y * 0.10 + t * 0.8);
      float w2 = sin(p.x * 0.30 - t * 1.2) * 0.5 + cos(p.y * 0.25 + t * 0.6) * 0.5;
      float w3 = sin((p.x + p.y) * 0.08 + t * 0.4) * 1.2;
      return (w1 + w2 + w3) * uWaveHeight;
    }

void main() {
      vec3 pos = position;
      float t = uTime * uSpeed;

float h = waveHeight(pos.xz, t);
      pos.y += h;

// Approximate normal via finite differences
      float eps = 0.1;
      float hx = waveHeight(pos.xz + vec2(eps, 0.0), t);
      float hz = waveHeight(pos.xz + vec2(0.0, eps), t);
      vec3 tangentX = vec3(eps, hx - h, 0.0);
      vec3 tangentZ = vec3(0.0, hz - h, eps);
      vNormal = normalize(cross(tangentZ, tangentX));

vHeight = h;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
    }
  `,
  fragmentShader: `
    uniform vec3 uColorDeep;
    uniform vec3 uColorShallow;

varying float vHeight;
    varying vec3 vNormal;

void main() {
      float mixFactor = clamp(vHeight / 2.0 + 0.5, 0.0, 1.0);
      vec3 color = mix(uColorDeep, uColorShallow, mixFactor);

vec3 lightDir = normalize(vec3(-0.3, 1.0, 0.4));
      float diff = max(dot(vNormal, lightDir), 0.0);
      color += vec3(1.0) * diff * 0.25;

gl_FragColor = vec4(color, 1.0);
    }
  `,
  side: THREE.DoubleSide,
  wireframe: false,
});

const ocean = new THREE.Mesh(oceanGeometry, oceanMaterial);
scene.add(ocean);

// UI controls
const playPauseBtn = document.querySelector('#play-pause');
const waveHeightInput = document.querySelector('#wave-height');
const speedInput = document.querySelector('#speed');
const renderModeSelect = document.querySelector('#render-mode');

let isPlaying = true;

playPauseBtn.addEventListener('click', () => {
  isPlaying = !isPlaying;
  playPauseBtn.textContent = isPlaying ? 'Pause' : 'Resume';
  playPauseBtn.setAttribute('aria-pressed', String(!isPlaying));
});

waveHeightInput.addEventListener('input', (e) => {
  oceanUniforms.uWaveHeight.value = parseFloat(e.target.value);
});

speedInput.addEventListener('input', (e) => {
  oceanUniforms.uSpeed.value = parseFloat(e.target.value);
});

renderModeSelect.addEventListener('change', (e) => {
  oceanMaterial.wireframe = e.target.value === 'wireframe';
});

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

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

function animate() {
  requestAnimationFrame(animate);

const delta = clock.getDelta();
  if (isPlaying) {
    oceanUniforms.uTime.value += delta;
  }

const t = oceanUniforms.uTime.value;
  camera.position.x = Math.sin(t * 0.05) * 3;
  camera.lookAt(0, 0, 0);

renderer.render(scene, camera);
}

animate();

CSS

src/styles.css

1* {2  box-sizing: border-box;3}4 5html,6body,7#app {8  width: 100%;9  height: 100%;10  margin: 0;11}12 13body {14  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;15  overflow: hidden;16  background: #000;17}18 19#ocean-canvas {20  display: block;21  width: 100%;22  height: 100%;23}24 25.ui-panel {26  position: absolute;27  top: 1rem;28  left: 1rem;29  z-index: 10;30  display: flex;31  flex-direction: column;32  gap: 0.75rem;33  width: min(18rem, calc(100% - 2rem));34  padding: 1rem;35  color: #fff;36  background: rgba(0, 0, 0, 0.55);37  border-radius: 0.75rem;38  backdrop-filter: blur(6px);39  -webkit-backdrop-filter: blur(6px);40  user-select: none;41}42 43.ui-row {44  display: flex;45  align-items: center;46  justify-content: space-between;47  gap: 0.75rem;48  font-size: 0.9rem;49}50 51.ui-row span {52  flex: 0 0 auto;53  min-width: 5rem;54}55 56.ui-row input[type='range'],57.ui-row select {58  flex: 1 1 auto;59  min-width: 0;60}61 62.ui-row input[type='range'] {63  cursor: pointer;64}65 66.ui-row select {67  padding: 0.25rem 0.4rem;68  border-radius: 0.35rem;69  border: none;70  font-size: 0.85rem;71}72 73button {74  padding: 0.45rem 0.9rem;75  font-weight: 600;76  color: #000;77  background: #fff;78  border: none;79  border-radius: 0.4rem;80  cursor: pointer;81}82 83button:active {84  transform: translateY(1px);85}86 87.model-badge {88  position: absolute;89  right: 1rem;90  bottom: 1rem;91  z-index: 10;92  padding: 0.35rem 0.75rem;93  font-size: 0.75rem;94  color: #fff;95  letter-spacing: 0.02em;96  background: rgba(0, 0, 0, 0.5);97  border-radius: 999px;98  pointer-events: none;99  user-select: none;100}101 102@media (max-width: 600px) {103  .ui-panel {104    top: 0.5rem;105    left: 0.5rem;106    right: 0.5rem;107    width: auto;108    max-width: none;109    padding: 0.75rem;110    gap: 0.6rem;111    font-size: 0.85rem;112  }113 114  .model-badge {115    right: 0.5rem;116    bottom: 0.5rem;117  }118}119

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
  background: #000;
}

#ocean-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ui-panel {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(18rem, calc(100% - 2rem));
  padding: 1rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 0.75rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: none;
}

.ui-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.ui-row span {
  flex: 0 0 auto;
  min-width: 5rem;
}

.ui-row input[type='range'],
.ui-row select {
  flex: 1 1 auto;
  min-width: 0;
}

.ui-row input[type='range'] {
  cursor: pointer;
}

.ui-row select {
  padding: 0.25rem 0.4rem;
  border-radius: 0.35rem;
  border: none;
  font-size: 0.85rem;
}

button {
  padding: 0.45rem 0.9rem;
  font-weight: 600;
  color: #000;
  background: #fff;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
}

button:active {
  transform: translateY(1px);
}

.model-badge {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  color: #fff;
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 999px;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 600px) {
  .ui-panel {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    max-width: none;
    padding: 0.75rem;
    gap: 0.6rem;
    font-size: 0.85rem;
  }

.model-badge {
    right: 0.5rem;
    bottom: 0.5rem;
  }
}

Package

package.json

1{2  "name": "ocean-ui-model-run",3  "version": "0.1.0",4  "private": true,5  "type": "module",6  "scripts": {7    "dev": "vite --host 127.0.0.1",8    "build": "vite build",9    "preview": "vite preview --host 127.0.0.1"10  },11  "dependencies": {12    "three": "^0.171.0",13    "vite": "^6.0.7"14  },15  "devDependencies": {}16}17