deepseek-v4-pro 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 label ----5const label = document.createElement('div');6label.id = 'model-label';7label.textContent = 'deepseek-v4-pro';8document.querySelector('#app').appendChild(label);9 10// ---- UI panel ----11const panel = document.createElement('div');12panel.id = 'ui-panel';13panel.innerHTML = `14  <button id="pause-btn">Pause</button>15  <div class="control-group">16    <label for="wave-height">Wave Height</label>17    <input type="range" id="wave-height" min="0.1" max="1.5" step="0.05" value="0.6">18  </div>19`;20document.querySelector('#app').appendChild(panel);21 22// ---- Three.js renderer ----23const renderer = new THREE.WebGLRenderer({ antialias: true });24renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));25renderer.setSize(window.innerWidth, window.innerHeight);26document.querySelector('#app').appendChild(renderer.domElement);27 28// ---- Scene ----29const scene = new THREE.Scene();30scene.background = new THREE.Color(0x1a3a5c);31scene.fog = new THREE.FogExp2(0x1a3a5c, 0.0018);32 33// ---- Camera ----34const camera = new THREE.PerspectiveCamera(35  60,36  window.innerWidth / window.innerHeight,37  0.5,38  100,39);40camera.position.set(0, 6, 14);41camera.lookAt(0, 0, 0);42 43// ---- Ocean geometry ----44const WIDTH = 32;45const SEGMENTS = 256;46const geometry = new THREE.PlaneGeometry(WIDTH, WIDTH, SEGMENTS, SEGMENTS);47 48// ---- Ocean shader material ----49const vertexShader = /* glsl */ `50  uniform float uTime;51  uniform float uWaveHeight;52 53  varying float vHeight;54  varying vec2 vUv;55 56  void main() {57    vec3 pos = position;58    float h = 0.0;59 60    h += sin(pos.x * 1.2 + uTime * 1.0) * cos(pos.y * 1.6 + uTime * 0.7) * 0.5;61    h += sin(pos.x * 2.4 - uTime * 0.6) * sin(pos.y * 2.0 + uTime * 0.9) * 0.35;62    h += cos(pos.x * 3.1 + uTime * 1.1) * cos(pos.y * 2.8 - uTime * 0.5) * 0.25;63    h += sin(pos.x * 4.5) * cos(pos.y * 3.5 + uTime * 0.8) * 0.15;64    h += cos(pos.x * 1.8 - uTime * 1.4) * sin(pos.y * 4.0 + uTime * 0.4) * 0.2;65    h += sin(pos.x * 5.2 + uTime * 0.3) * sin(pos.y * 4.8 - uTime * 0.6) * 0.1;66 67    pos.z += h * uWaveHeight;68 69    vHeight = h;70    vUv = uv;71 72    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);73  }74`;75 76const fragmentShader = /* glsl */ `77  uniform float uTime;78  uniform float uWaveHeight;79  uniform vec3 uDeepColor;80  uniform vec3 uShallowColor;81 82  varying float vHeight;83  varying vec2 vUv;84 85  void main() {86    float h = vHeight * 2.0 + 0.4;87    vec3 color = mix(uDeepColor, uShallowColor, clamp(h, 0.0, 1.0));88 89    float foam = smoothstep(0.75, 0.95, h);90    color = mix(color, vec3(0.9, 0.95, 1.0), foam * 0.5);91 92    float sparkle = sin(vUv.x * 300.0 + uTime * 2.0) * cos(vUv.y * 250.0 - uTime * 1.5);93    sparkle = smoothstep(0.95, 1.0, sparkle);94    color += sparkle * 0.06;95 96    gl_FragColor = vec4(color, 1.0);97  }98`;99 100const uniforms = {101  uTime: { value: 0 },102  uWaveHeight: { value: 0.6 },103  uDeepColor: { value: new THREE.Color(0x0a3d6b) },104  uShallowColor: { value: new THREE.Color(0x4db8c7) },105};106 107const material = new THREE.ShaderMaterial({108  vertexShader,109  fragmentShader,110  uniforms,111  side: THREE.DoubleSide,112});113 114const ocean = new THREE.Mesh(geometry, material);115ocean.rotation.x = -Math.PI / 2;116scene.add(ocean);117 118// ---- Lights ----119scene.add(new THREE.AmbientLight(0x6688aa, 0.5));120const sun = new THREE.DirectionalLight(0xffeedd, 1.2);121sun.position.set(10, 15, 5);122scene.add(sun);123 124// ---- State ----125let paused = false;126let time = 0;127const clock = new THREE.Clock();128 129// ---- UI events ----130const pauseBtn = document.querySelector('#pause-btn');131const waveHeightInput = document.querySelector('#wave-height');132 133pauseBtn.addEventListener('click', () => {134  paused = !paused;135  pauseBtn.textContent = paused ? 'Resume' : 'Pause';136});137 138waveHeightInput.addEventListener('input', (e) => {139  uniforms.uWaveHeight.value = parseFloat(e.target.value);140});141 142// ---- Resize ----143window.addEventListener('resize', () => {144  renderer.setSize(window.innerWidth, window.innerHeight);145  camera.aspect = window.innerWidth / window.innerHeight;146  camera.updateProjectionMatrix();147});148 149// ---- Render loop ----150function animate() {151  requestAnimationFrame(animate);152 153  const dt = clock.getDelta();154  if (!paused) {155    time += dt;156  }157  uniforms.uTime.value = time;158 159  // Subtle camera sway160  camera.position.x = Math.sin(time * 0.15) * 1.5;161  camera.position.z = 14 + Math.cos(time * 0.2) * 1.0;162  camera.position.y = 6 + Math.sin(time * 0.25) * 0.5;163  camera.lookAt(Math.sin(time * 0.1) * 2, 0, 0);164 165  renderer.render(scene, camera);166}167 168animate();169

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

// ---- Model label ----
const label = document.createElement('div');
label.id = 'model-label';
label.textContent = 'deepseek-v4-pro';
document.querySelector('#app').appendChild(label);

// ---- UI panel ----
const panel = document.createElement('div');
panel.id = 'ui-panel';
panel.innerHTML = `
  <button id="pause-btn">Pause</button>
  <div class="control-group">
    <label for="wave-height">Wave Height</label>
    <input type="range" id="wave-height" min="0.1" max="1.5" step="0.05" value="0.6">
  </div>
`;
document.querySelector('#app').appendChild(panel);

// ---- Three.js renderer ----
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
document.querySelector('#app').appendChild(renderer.domElement);

// ---- Scene ----
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a3a5c);
scene.fog = new THREE.FogExp2(0x1a3a5c, 0.0018);

// ---- Camera ----
const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.5,
  100,
);
camera.position.set(0, 6, 14);
camera.lookAt(0, 0, 0);

// ---- Ocean geometry ----
const WIDTH = 32;
const SEGMENTS = 256;
const geometry = new THREE.PlaneGeometry(WIDTH, WIDTH, SEGMENTS, SEGMENTS);

// ---- Ocean shader material ----
const vertexShader = /* glsl */ `
  uniform float uTime;
  uniform float uWaveHeight;

varying float vHeight;
  varying vec2 vUv;

void main() {
    vec3 pos = position;
    float h = 0.0;

h += sin(pos.x * 1.2 + uTime * 1.0) * cos(pos.y * 1.6 + uTime * 0.7) * 0.5;
    h += sin(pos.x * 2.4 - uTime * 0.6) * sin(pos.y * 2.0 + uTime * 0.9) * 0.35;
    h += cos(pos.x * 3.1 + uTime * 1.1) * cos(pos.y * 2.8 - uTime * 0.5) * 0.25;
    h += sin(pos.x * 4.5) * cos(pos.y * 3.5 + uTime * 0.8) * 0.15;
    h += cos(pos.x * 1.8 - uTime * 1.4) * sin(pos.y * 4.0 + uTime * 0.4) * 0.2;
    h += sin(pos.x * 5.2 + uTime * 0.3) * sin(pos.y * 4.8 - uTime * 0.6) * 0.1;

pos.z += h * uWaveHeight;

vHeight = h;
    vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
  }
`;

const fragmentShader = /* glsl */ `
  uniform float uTime;
  uniform float uWaveHeight;
  uniform vec3 uDeepColor;
  uniform vec3 uShallowColor;

varying float vHeight;
  varying vec2 vUv;

void main() {
    float h = vHeight * 2.0 + 0.4;
    vec3 color = mix(uDeepColor, uShallowColor, clamp(h, 0.0, 1.0));

float foam = smoothstep(0.75, 0.95, h);
    color = mix(color, vec3(0.9, 0.95, 1.0), foam * 0.5);

float sparkle = sin(vUv.x * 300.0 + uTime * 2.0) * cos(vUv.y * 250.0 - uTime * 1.5);
    sparkle = smoothstep(0.95, 1.0, sparkle);
    color += sparkle * 0.06;

gl_FragColor = vec4(color, 1.0);
  }
`;

const uniforms = {
  uTime: { value: 0 },
  uWaveHeight: { value: 0.6 },
  uDeepColor: { value: new THREE.Color(0x0a3d6b) },
  uShallowColor: { value: new THREE.Color(0x4db8c7) },
};

const material = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader,
  uniforms,
  side: THREE.DoubleSide,
});

const ocean = new THREE.Mesh(geometry, material);
ocean.rotation.x = -Math.PI / 2;
scene.add(ocean);

// ---- Lights ----
scene.add(new THREE.AmbientLight(0x6688aa, 0.5));
const sun = new THREE.DirectionalLight(0xffeedd, 1.2);
sun.position.set(10, 15, 5);
scene.add(sun);

// ---- State ----
let paused = false;
let time = 0;
const clock = new THREE.Clock();

// ---- UI events ----
const pauseBtn = document.querySelector('#pause-btn');
const waveHeightInput = document.querySelector('#wave-height');

pauseBtn.addEventListener('click', () => {
  paused = !paused;
  pauseBtn.textContent = paused ? 'Resume' : 'Pause';
});

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

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

// ---- Render loop ----
function animate() {
  requestAnimationFrame(animate);

const dt = clock.getDelta();
  if (!paused) {
    time += dt;
  }
  uniforms.uTime.value = time;

// Subtle camera sway
  camera.position.x = Math.sin(time * 0.15) * 1.5;
  camera.position.z = 14 + Math.cos(time * 0.2) * 1.0;
  camera.position.y = 6 + Math.sin(time * 0.25) * 0.5;
  camera.lookAt(Math.sin(time * 0.1) * 2, 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, sans-serif;15  overflow: hidden;16  background: #1a3a5c;17}18 19#app {20  position: relative;21}22 23canvas {24  display: block;25}26 27/* ---- Model label ---- */28#model-label {29  position: fixed;30  top: 16px;31  right: 16px;32  background: rgba(0, 0, 0, 0.45);33  backdrop-filter: blur(6px);34  -webkit-backdrop-filter: blur(6px);35  padding: 6px 14px;36  border-radius: 8px;37  color: rgba(255, 255, 255, 0.75);38  font-size: 12px;39  font-weight: 500;40  letter-spacing: 0.02em;41  z-index: 10;42  pointer-events: none;43  user-select: none;44}45 46/* ---- UI panel ---- */47#ui-panel {48  position: fixed;49  bottom: 24px;50  left: 50%;51  transform: translateX(-50%);52  display: flex;53  gap: 20px;54  align-items: center;55  background: rgba(0, 0, 0, 0.55);56  backdrop-filter: blur(10px);57  -webkit-backdrop-filter: blur(10px);58  padding: 12px 24px;59  border-radius: 14px;60  border: 1px solid rgba(255, 255, 255, 0.1);61  z-index: 10;62  color: #fff;63}64 65#pause-btn {66  appearance: none;67  border: 1px solid rgba(255, 255, 255, 0.25);68  background: rgba(255, 255, 255, 0.08);69  color: #fff;70  padding: 8px 18px;71  border-radius: 8px;72  font-size: 14px;73  font-family: inherit;74  cursor: pointer;75  white-space: nowrap;76  transition: background 0.15s, border-color 0.15s;77}78 79#pause-btn:hover {80  background: rgba(255, 255, 255, 0.15);81  border-color: rgba(255, 255, 255, 0.4);82}83 84.control-group {85  display: flex;86  align-items: center;87  gap: 10px;88}89 90.control-group label {91  font-size: 13px;92  white-space: nowrap;93  opacity: 0.8;94}95 96.control-group input[type='range'] {97  width: 120px;98  accent-color: #4db8c7;99  cursor: pointer;100}101 102/* ---- Responsive ---- */103@media (max-width: 600px) {104  #ui-panel {105    flex-direction: column;106    gap: 12px;107    bottom: 12px;108    left: 12px;109    right: 12px;110    transform: none;111    padding: 14px 18px;112  }113 114  #pause-btn {115    width: 100%;116    text-align: center;117    padding: 10px;118  }119 120  .control-group {121    width: 100%;122    justify-content: space-between;123  }124 125  .control-group input[type='range'] {126    width: 100px;127  }128 129  #model-label {130    top: 10px;131    right: 10px;132    font-size: 11px;133    padding: 4px 10px;134  }135}136

* {
  box-sizing: border-box;
}

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

body {
  font-family: system-ui, sans-serif;
  overflow: hidden;
  background: #1a3a5c;
}

#app {
  position: relative;
}

canvas {
  display: block;
}

/* ---- Model label ---- */
#model-label {
  position: fixed;
  top: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  z-index: 10;
  pointer-events: none;
  user-select: none;
}

/* ---- UI panel ---- */
#ui-panel {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 24px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10;
  color: #fff;
}

#pause-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

#pause-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.control-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-group label {
  font-size: 13px;
  white-space: nowrap;
  opacity: 0.8;
}

.control-group input[type='range'] {
  width: 120px;
  accent-color: #4db8c7;
  cursor: pointer;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  #ui-panel {
    flex-direction: column;
    gap: 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;
    transform: none;
    padding: 14px 18px;
  }

#pause-btn {
    width: 100%;
    text-align: center;
    padding: 10px;
  }

.control-group {
    width: 100%;
    justify-content: space-between;
  }

.control-group input[type='range'] {
    width: 100px;
  }

#model-label {
    top: 10px;
    right: 10px;
    font-size: 11px;
    padding: 4px 10px;
  }
}

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