deepseek-v4-flash 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';3import { OrbitControls } from 'three/addons/controls/OrbitControls.js';4 5const app = document.querySelector('#app');6 7const scene = new THREE.Scene();8scene.background = new THREE.Color(0x0a0a1a);9scene.fog = new THREE.Fog(0x0a0a1a, 80, 250);10 11const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 500);12camera.position.set(45, 25, 45);13 14const renderer = new THREE.WebGLRenderer({ antialias: true });15renderer.setSize(window.innerWidth, window.innerHeight);16renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));17renderer.toneMapping = THREE.ACESFilmicToneMapping;18renderer.toneMappingExposure = 1.2;19app.appendChild(renderer.domElement);20 21const controls = new OrbitControls(camera, renderer.domElement);22controls.target.set(0, 0, 0);23controls.enableDamping = true;24controls.dampingFactor = 0.05;25controls.maxPolarAngle = Math.PI / 2.15;26controls.minDistance = 10;27controls.maxDistance = 180;28controls.update();29 30const ambientLight = new THREE.AmbientLight(0x222244, 0.6);31scene.add(ambientLight);32 33const moonLight = new THREE.DirectionalLight(0x6688cc, 2.0);34moonLight.position.set(-40, 80, 30);35scene.add(moonLight);36 37const fillLight = new THREE.DirectionalLight(0x334466, 0.5);38fillLight.position.set(30, 20, -40);39scene.add(fillLight);40 41const uniformDefs = {42  uTime: { value: 0 },43  uWaveHeight: { value: 2.0 },44  uWaveSpeed: { value: 1.0 },45  uColorDeep: { value: new THREE.Color(0x00122a) },46  uColorMid: { value: new THREE.Color(0x004488) },47  uColorShallow: { value: new THREE.Color(0x0066bb) },48  uColorFoam: { value: new THREE.Color(0x88ccff) },49};50 51const vertexShader = `52uniform float uTime;53uniform float uWaveHeight;54uniform float uWaveSpeed;55 56varying float vHeight;57varying vec3 vNormal;58varying vec3 vPosition;59 60void main() {61  vec3 pos = position;62  float t = uTime * uWaveSpeed;63  float x = pos.x;64  float z = pos.z;65 66  float a1 = 1.4, a2 = 0.9, a3 = 0.6, a4 = 1.6, a5 = 0.7;67  float fx1 = 0.04, fx2 = 0.07, fx3 = 0.11, fx4 = 0.02, fx5 = 0.055;68  float fz1 = 0.025, fz2 = -0.05, fz3 = 0.09, fz4 = -0.035, fz5 = 0.045;69  float sp1 = 0.9, sp2 = 0.55, sp3 = 1.3, sp4 = 0.35, sp5 = 0.75;70 71  float p1 = x * fx1 + z * fz1 + t * sp1;72  float p2 = x * fx2 + z * fz2 + t * sp2;73  float p3 = x * fx3 + z * fz3 + t * sp3;74  float p4 = x * fx4 + z * fz4 + t * sp4;75  float p5 = (x + z) * fx5 + t * sp5;76 77  float s1 = sin(p1), c1 = cos(p1);78  float s2 = sin(p2), c2 = cos(p2);79  float s3 = sin(p3), c3 = cos(p3);80  float s4 = sin(p4), c4 = cos(p4);81  float s5 = sin(p5), c5 = cos(p5);82 83  float h = a1 * s1 + a2 * s2 + a3 * s3 + a4 * s4 + a5 * s5;84  h *= uWaveHeight;85 86  float dhdx = (a1 * fx1 * c1 + a2 * fx2 * c2 + a3 * fx3 * c3 + a4 * fx4 * c4 + a5 * fx5 * c5) * uWaveHeight;87  float dhdz = (a1 * fz1 * c1 + a2 * fz2 * c2 + a3 * fz3 * c3 + a4 * fz4 * c4 + a5 * fx5 * c5) * uWaveHeight;88 89  pos.y = h;90 91  vec3 normal = normalize(vec3(-dhdx, 1.0, -dhdz));92 93  vNormal = normal;94  vHeight = h;95  vPosition = pos;96 97  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);98}99`;100 101const fragmentShader = `102uniform vec3 uColorDeep;103uniform vec3 uColorMid;104uniform vec3 uColorShallow;105uniform vec3 uColorFoam;106 107varying float vHeight;108varying vec3 vNormal;109varying vec3 vPosition;110 111void main() {112  vec3 normal = normalize(vNormal);113  vec3 lightDir = normalize(vec3(-0.4, 0.8, 0.3));114  float diff = max(dot(normal, lightDir), 0.0);115 116  float hNorm = clamp(vHeight / 5.0 + 0.5, 0.0, 1.0);117  vec3 color = uColorDeep;118  color = mix(color, uColorMid, smoothstep(0.0, 0.5, hNorm));119  color = mix(color, uColorShallow, smoothstep(0.4, 0.8, hNorm));120 121  float foam = smoothstep(0.65, 1.0, hNorm);122  color = mix(color, uColorFoam, foam * 0.6);123 124  color *= (0.25 + 0.75 * diff);125 126  vec3 viewDir = normalize(cameraPosition - vPosition);127  vec3 halfDir = normalize(lightDir + viewDir);128  float spec = pow(max(dot(normal, halfDir), 0.0), 48.0);129  color += vec3(1.0, 0.95, 0.9) * spec * 0.35;130 131  color += vec3(0.02, 0.04, 0.08);132 133  gl_FragColor = vec4(color, 1.0);134}135`;136 137const oceanMat = new THREE.ShaderMaterial({138  uniforms: uniformDefs,139  vertexShader,140  fragmentShader,141  side: THREE.DoubleSide,142});143 144const oceanGeo = new THREE.PlaneGeometry(200, 200, 200, 200);145oceanGeo.rotateX(-Math.PI / 2);146const ocean = new THREE.Mesh(oceanGeo, oceanMat);147scene.add(ocean);148 149const starCount = 3000;150const starPos = new Float32Array(starCount * 3);151for (let i = 0; i < starCount * 3; i += 3) {152  starPos[i] = (Math.random() - 0.5) * 800;153  starPos[i + 1] = (Math.random() - 0.5) * 400 + 100;154  starPos[i + 2] = (Math.random() - 0.5) * 800;155}156const starGeo = new THREE.BufferGeometry();157starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));158const starMat = new THREE.PointsMaterial({159  color: 0xffffff,160  size: 0.4,161  transparent: true,162  opacity: 0.7,163  sizeAttenuation: true,164});165const stars = new THREE.Points(starGeo, starMat);166scene.add(stars);167 168let elapsed = 0;169let isPaused = false;170let lastTime = performance.now();171 172function animate(now) {173  const dt = Math.min((now - lastTime) / 1000, 0.05);174  lastTime = now;175 176  if (!isPaused) {177    elapsed += dt;178  }179 180  uniformDefs.uTime.value = elapsed;181 182  controls.update();183  renderer.render(scene, camera);184  requestAnimationFrame(animate);185}186 187requestAnimationFrame(animate);188 189window.addEventListener('resize', () => {190  const w = window.innerWidth;191  const h = window.innerHeight;192  camera.aspect = w / h;193  camera.updateProjectionMatrix();194  renderer.setSize(w, h);195});196 197const pauseBtn = document.getElementById('pause-btn');198pauseBtn.addEventListener('click', () => {199  isPaused = !isPaused;200  pauseBtn.textContent = isPaused ? '▶ Play' : '❚❚ Pause';201  pauseBtn.classList.toggle('paused', isPaused);202});203 204const waveHeightInput = document.getElementById('wave-height');205const waveHeightVal = document.getElementById('wave-height-val');206waveHeightInput.addEventListener('input', () => {207  const v = parseFloat(waveHeightInput.value);208  uniformDefs.uWaveHeight.value = v;209  waveHeightVal.textContent = v.toFixed(1);210});211 212const waveSpeedInput = document.getElementById('wave-speed');213const waveSpeedVal = document.getElementById('wave-speed-val');214waveSpeedInput.addEventListener('input', () => {215  const v = parseFloat(waveSpeedInput.value);216  uniformDefs.uWaveSpeed.value = v;217  waveSpeedVal.textContent = v.toFixed(1);218});219

import './styles.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const app = document.querySelector('#app');

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a0a1a);
scene.fog = new THREE.Fog(0x0a0a1a, 80, 250);

const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 500);
camera.position.set(45, 25, 45);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
app.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.maxPolarAngle = Math.PI / 2.15;
controls.minDistance = 10;
controls.maxDistance = 180;
controls.update();

const ambientLight = new THREE.AmbientLight(0x222244, 0.6);
scene.add(ambientLight);

const moonLight = new THREE.DirectionalLight(0x6688cc, 2.0);
moonLight.position.set(-40, 80, 30);
scene.add(moonLight);

const fillLight = new THREE.DirectionalLight(0x334466, 0.5);
fillLight.position.set(30, 20, -40);
scene.add(fillLight);

const uniformDefs = {
  uTime: { value: 0 },
  uWaveHeight: { value: 2.0 },
  uWaveSpeed: { value: 1.0 },
  uColorDeep: { value: new THREE.Color(0x00122a) },
  uColorMid: { value: new THREE.Color(0x004488) },
  uColorShallow: { value: new THREE.Color(0x0066bb) },
  uColorFoam: { value: new THREE.Color(0x88ccff) },
};

const vertexShader = `
uniform float uTime;
uniform float uWaveHeight;
uniform float uWaveSpeed;

varying float vHeight;
varying vec3 vNormal;
varying vec3 vPosition;

void main() {
  vec3 pos = position;
  float t = uTime * uWaveSpeed;
  float x = pos.x;
  float z = pos.z;

float a1 = 1.4, a2 = 0.9, a3 = 0.6, a4 = 1.6, a5 = 0.7;
  float fx1 = 0.04, fx2 = 0.07, fx3 = 0.11, fx4 = 0.02, fx5 = 0.055;
  float fz1 = 0.025, fz2 = -0.05, fz3 = 0.09, fz4 = -0.035, fz5 = 0.045;
  float sp1 = 0.9, sp2 = 0.55, sp3 = 1.3, sp4 = 0.35, sp5 = 0.75;

float p1 = x * fx1 + z * fz1 + t * sp1;
  float p2 = x * fx2 + z * fz2 + t * sp2;
  float p3 = x * fx3 + z * fz3 + t * sp3;
  float p4 = x * fx4 + z * fz4 + t * sp4;
  float p5 = (x + z) * fx5 + t * sp5;

float s1 = sin(p1), c1 = cos(p1);
  float s2 = sin(p2), c2 = cos(p2);
  float s3 = sin(p3), c3 = cos(p3);
  float s4 = sin(p4), c4 = cos(p4);
  float s5 = sin(p5), c5 = cos(p5);

float h = a1 * s1 + a2 * s2 + a3 * s3 + a4 * s4 + a5 * s5;
  h *= uWaveHeight;

float dhdx = (a1 * fx1 * c1 + a2 * fx2 * c2 + a3 * fx3 * c3 + a4 * fx4 * c4 + a5 * fx5 * c5) * uWaveHeight;
  float dhdz = (a1 * fz1 * c1 + a2 * fz2 * c2 + a3 * fz3 * c3 + a4 * fz4 * c4 + a5 * fx5 * c5) * uWaveHeight;

pos.y = h;

vec3 normal = normalize(vec3(-dhdx, 1.0, -dhdz));

vNormal = normal;
  vHeight = h;
  vPosition = pos;

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

const fragmentShader = `
uniform vec3 uColorDeep;
uniform vec3 uColorMid;
uniform vec3 uColorShallow;
uniform vec3 uColorFoam;

varying float vHeight;
varying vec3 vNormal;
varying vec3 vPosition;

void main() {
  vec3 normal = normalize(vNormal);
  vec3 lightDir = normalize(vec3(-0.4, 0.8, 0.3));
  float diff = max(dot(normal, lightDir), 0.0);

float hNorm = clamp(vHeight / 5.0 + 0.5, 0.0, 1.0);
  vec3 color = uColorDeep;
  color = mix(color, uColorMid, smoothstep(0.0, 0.5, hNorm));
  color = mix(color, uColorShallow, smoothstep(0.4, 0.8, hNorm));

float foam = smoothstep(0.65, 1.0, hNorm);
  color = mix(color, uColorFoam, foam * 0.6);

color *= (0.25 + 0.75 * diff);

vec3 viewDir = normalize(cameraPosition - vPosition);
  vec3 halfDir = normalize(lightDir + viewDir);
  float spec = pow(max(dot(normal, halfDir), 0.0), 48.0);
  color += vec3(1.0, 0.95, 0.9) * spec * 0.35;

color += vec3(0.02, 0.04, 0.08);

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

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

const oceanGeo = new THREE.PlaneGeometry(200, 200, 200, 200);
oceanGeo.rotateX(-Math.PI / 2);
const ocean = new THREE.Mesh(oceanGeo, oceanMat);
scene.add(ocean);

const starCount = 3000;
const starPos = new Float32Array(starCount * 3);
for (let i = 0; i < starCount * 3; i += 3) {
  starPos[i] = (Math.random() - 0.5) * 800;
  starPos[i + 1] = (Math.random() - 0.5) * 400 + 100;
  starPos[i + 2] = (Math.random() - 0.5) * 800;
}
const starGeo = new THREE.BufferGeometry();
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
const starMat = new THREE.PointsMaterial({
  color: 0xffffff,
  size: 0.4,
  transparent: true,
  opacity: 0.7,
  sizeAttenuation: true,
});
const stars = new THREE.Points(starGeo, starMat);
scene.add(stars);

let elapsed = 0;
let isPaused = false;
let lastTime = performance.now();

function animate(now) {
  const dt = Math.min((now - lastTime) / 1000, 0.05);
  lastTime = now;

if (!isPaused) {
    elapsed += dt;
  }

uniformDefs.uTime.value = elapsed;

controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

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

const pauseBtn = document.getElementById('pause-btn');
pauseBtn.addEventListener('click', () => {
  isPaused = !isPaused;
  pauseBtn.textContent = isPaused ? '▶ Play' : '❚❚ Pause';
  pauseBtn.classList.toggle('paused', isPaused);
});

const waveHeightInput = document.getElementById('wave-height');
const waveHeightVal = document.getElementById('wave-height-val');
waveHeightInput.addEventListener('input', () => {
  const v = parseFloat(waveHeightInput.value);
  uniformDefs.uWaveHeight.value = v;
  waveHeightVal.textContent = v.toFixed(1);
});

const waveSpeedInput = document.getElementById('wave-speed');
const waveSpeedVal = document.getElementById('wave-speed-val');
waveSpeedInput.addEventListener('input', () => {
  const v = parseFloat(waveSpeedInput.value);
  uniformDefs.uWaveSpeed.value = v;
  waveSpeedVal.textContent = v.toFixed(1);
});

CSS

src/styles.css

1* {2  box-sizing: border-box;3}4 5html,6body {7  width: 100%;8  height: 100%;9  margin: 0;10  padding: 0;11}12 13body {14  font-family: system-ui, -apple-system, sans-serif;15  overflow: hidden;16  background: #000;17}18 19#app {20  width: 100%;21  height: 100%;22}23 24#app canvas {25  display: block;26}27 28#ui-overlay {29  position: fixed;30  inset: 0;31  pointer-events: none;32  z-index: 10;33}34 35#controls {36  position: absolute;37  bottom: 24px;38  left: 50%;39  transform: translateX(-50%);40  display: flex;41  flex-wrap: wrap;42  align-items: center;43  gap: 16px;44  padding: 12px 20px;45  background: rgba(0, 0, 0, 0.55);46  backdrop-filter: blur(8px);47  -webkit-backdrop-filter: blur(8px);48  border-radius: 12px;49  pointer-events: auto;50  border: 1px solid rgba(255, 255, 255, 0.1);51}52 53.ctrl-btn {54  background: rgba(255, 255, 255, 0.12);55  color: #fff;56  border: 1px solid rgba(255, 255, 255, 0.2);57  border-radius: 8px;58  padding: 8px 16px;59  font-size: 14px;60  cursor: pointer;61  font-family: inherit;62  transition: background 0.2s;63  white-space: nowrap;64}65 66.ctrl-btn:hover {67  background: rgba(255, 255, 255, 0.22);68}69 70.ctrl-btn.paused {71  background: rgba(255, 200, 50, 0.25);72  border-color: rgba(255, 200, 50, 0.4);73}74 75.slider-group {76  display: flex;77  align-items: center;78  gap: 8px;79}80 81.slider-group label {82  color: rgba(255, 255, 255, 0.7);83  font-size: 12px;84  font-weight: 500;85  text-transform: uppercase;86  letter-spacing: 0.5px;87}88 89.slider-group input[type="range"] {90  width: 80px;91  height: 4px;92  -webkit-appearance: none;93  appearance: none;94  background: rgba(255, 255, 255, 0.2);95  border-radius: 2px;96  outline: none;97  cursor: pointer;98}99 100.slider-group input[type="range"]::-webkit-slider-thumb {101  -webkit-appearance: none;102  width: 14px;103  height: 14px;104  border-radius: 50%;105  background: #fff;106  border: none;107  cursor: pointer;108}109 110.slider-group input[type="range"]::-moz-range-thumb {111  width: 14px;112  height: 14px;113  border-radius: 50%;114  background: #fff;115  border: none;116  cursor: pointer;117}118 119.slider-group input[type="range"]:focus {120  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);121}122 123.slider-value {124  color: #fff;125  font-size: 12px;126  min-width: 24px;127  text-align: center;128  font-variant-numeric: tabular-nums;129}130 131#model-label {132  position: absolute;133  bottom: 24px;134  right: 24px;135  padding: 6px 14px;136  background: rgba(0, 0, 0, 0.5);137  backdrop-filter: blur(6px);138  -webkit-backdrop-filter: blur(6px);139  border-radius: 20px;140  color: rgba(255, 255, 255, 0.6);141  font-size: 12px;142  font-weight: 500;143  pointer-events: auto;144  border: 1px solid rgba(255, 255, 255, 0.08);145  letter-spacing: 0.3px;146}147 148@media (max-width: 640px) {149  #controls {150    bottom: 16px;151    left: 12px;152    right: 12px;153    transform: none;154    justify-content: center;155    gap: 10px;156    padding: 10px 14px;157    flex-wrap: wrap;158  }159 160  .slider-group input[type="range"] {161    width: 60px;162  }163 164  .ctrl-btn {165    font-size: 12px;166    padding: 6px 12px;167  }168 169  #model-label {170    bottom: 80px;171    right: 12px;172    font-size: 10px;173    padding: 4px 10px;174  }175}176

* {
  box-sizing: border-box;
}

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

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

#app {
  width: 100%;
  height: 100%;
}

#app canvas {
  display: block;
}

#ui-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#controls {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ctrl-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
  white-space: nowrap;
}

.ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.ctrl-btn.paused {
  background: rgba(255, 200, 50, 0.25);
  border-color: rgba(255, 200, 50, 0.4);
}

.slider-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-group label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.slider-group input[type="range"] {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.slider-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

.slider-group input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

.slider-group input[type="range"]:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.slider-value {
  color: #fff;
  font-size: 12px;
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#model-label {
  position: absolute;
  bottom: 24px;
  right: 24px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.3px;
}

@media (max-width: 640px) {
  #controls {
    bottom: 16px;
    left: 12px;
    right: 12px;
    transform: none;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    flex-wrap: wrap;
  }

.slider-group input[type="range"] {
    width: 60px;
  }

.ctrl-btn {
    font-size: 12px;
    padding: 6px 12px;
  }

#model-label {
    bottom: 80px;
    right: 12px;
    font-size: 10px;
    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