@brandonlukas/luminar 0.1.0

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/main.ts

@@ -0,0 +1,570 @@
+import './style.css'
+import {
+  AdditiveBlending,
+  BufferAttribute,
+  BufferGeometry,
+  Color,
+  OrthographicCamera,
+  Points,
+  PointsMaterial,
+  Scene,
+  Vector2,
+  WebGLRenderer,
+} from 'three'
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'
+
+type VectorSample = { x: number; y: number }
+type VectorDatum = { x: number; y: number; dx: number; dy: number }
+type SliderHandle = { input: HTMLInputElement; valueTag: HTMLSpanElement }
+type ColorPreset = { key: string; label: string; rgb: [number, number, number] }
+
+const WORLD_EXTENT = 1.25
+const FLOW_SCALE = 0.85
+const SPEED_TO_GLOW = 2.6
+const JITTER = 0.015
+const FIELD_BORDER_MIN = 0.01
+const FIELD_BORDER_MAX = 0.1
+const COLOR_PRESETS: ColorPreset[] = [
+  { key: 'luminous-violet', label: 'Luminous violet', rgb: [0.6, 0.25, 0.9] }, // current color
+  { key: 'pure-white', label: 'Pure white', rgb: [1, 1, 1] },
+  { key: 'neon-cyan', label: 'Neon cyan', rgb: [0.25, 0.95, 1] },
+  { key: 'electric-lime', label: 'Electric lime', rgb: [0.75, 1, 0.25] },
+  { key: 'solar-flare', label: 'Solar flare', rgb: [1, 0.55, 0.15] },
+  { key: 'aurora-mint', label: 'Aurora mint', rgb: [0.4, 1, 0.85] },
+  { key: 'magenta-nova', label: 'Magenta nova', rgb: [0.95, 0.2, 0.7] },
+  { key: 'glacier-blue', label: 'Glacier blue', rgb: [0.35, 0.75, 1] },
+  { key: 'sunrise-coral', label: 'Sunrise coral', rgb: [1, 0.6, 0.5] },
+  { key: 'ember-gold', label: 'Ember gold', rgb: [1, 0.8, 0.2] },
+]
+const DEFAULT_COLOR_PRESET = 'luminous-violet'
+const defaultParams = {
+  size: 2,
+  bloomStrength: 1.2,
+  bloomRadius: 0.35,
+  lifeMin: 0.5,
+  lifeMax: 1.4,
+  fieldValidDistance: 0.03,
+  speed: 3.0,
+  particleCount: 4200,
+  colorPreset: DEFAULT_COLOR_PRESET,
+}
+const params = { ...defaultParams }
+
+let positions = new Float32Array(params.particleCount * 3)
+let colors = new Float32Array(params.particleCount * 3)
+let lifetimes = new Float32Array(params.particleCount)
+
+const container = document.querySelector<HTMLDivElement>('#app')
+if (!container) throw new Error('Missing #app container')
+
+const app = container
+
+app.innerHTML = ''
+const renderer = new WebGLRenderer({ antialias: false, alpha: true })
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+app.appendChild(renderer.domElement)
+
+const scene = new Scene()
+scene.background = new Color(0x02040a)
+
+const camera = new OrthographicCamera(-1, 1, 1, -1, 0.1, 10)
+camera.position.z = 2
+
+const composer = new EffectComposer(renderer)
+const renderPass = new RenderPass(scene, camera)
+const bloomPass = new UnrealBloomPass(new Vector2(1, 1), params.bloomStrength, 0.82, params.bloomRadius)
+updateBloom()
+composer.addPass(renderPass)
+composer.addPass(bloomPass)
+
+const geometry = new BufferGeometry()
+geometry.setAttribute('position', new BufferAttribute(positions, 3))
+geometry.setAttribute('color', new BufferAttribute(colors, 3))
+
+const material = new PointsMaterial({
+  size: params.size,
+  sizeAttenuation: true,
+  vertexColors: true,
+  transparent: true,
+  opacity: 0.9,
+  blending: AdditiveBlending,
+  depthWrite: false,
+})
+material.onBeforeCompile = (shader) => {
+  // Make points circular with a smooth falloff toward the edges
+  shader.fragmentShader = shader.fragmentShader.replace(
+    'gl_FragColor = vec4( outgoingLight, diffuseColor.a );',
+    `float d = length(gl_PointCoord - 0.5);
+     if (d > 0.5) discard;
+     float alpha = diffuseColor.a * smoothstep(0.5, 0.45, d);
+     gl_FragColor = vec4(outgoingLight, alpha);`,
+  )
+}
+
+const particles = new Points(geometry, material)
+scene.add(particles)
+
+let fieldData: VectorDatum[] | null = null
+let fieldStatusEl: HTMLElement | null = null
+let fieldTransform = { scale: 1, offsetX: 0, offsetY: 0 }
+let fieldDistControlHandle: SliderHandle | null = null
+
+initParticles()
+resize()
+window.addEventListener('resize', resize)
+let lastTime = performance.now()
+animate(0)
+createOverlay()
+createControls()
+reseedLifetimes()
+loadVectorField()
+
+function initParticles() {
+  for (let i = 0; i < params.particleCount; i += 1) {
+    resetParticle(i)
+  }
+  geometry.attributes.position.needsUpdate = true
+  geometry.attributes.color.needsUpdate = true
+}
+
+function resetParticle(i: number) {
+  const i3 = i * 3
+  const palette = getActiveColorPreset()
+
+  // If field data exists, spawn particles near random data points (within valid region)
+  if (fieldData && fieldData.length > 0) {
+    const randomPoint = fieldData[Math.floor(Math.random() * fieldData.length)]
+    const jitterRange = params.fieldValidDistance * 0.3
+    const dataX = randomPoint.x + randomRange(-jitterRange, jitterRange) / fieldTransform.scale
+    const dataY = randomPoint.y + randomRange(-jitterRange, jitterRange) / fieldTransform.scale
+    positions[i3] = dataX * fieldTransform.scale + fieldTransform.offsetX
+    positions[i3 + 1] = dataY * fieldTransform.scale + fieldTransform.offsetY
+  } else {
+    // Fallback: uniform spawning across entire world
+    positions[i3] = randomRange(-WORLD_EXTENT, WORLD_EXTENT)
+    positions[i3 + 1] = randomRange(-WORLD_EXTENT, WORLD_EXTENT)
+  }
+  positions[i3 + 2] = 0
+
+  lifetimes[i] = randomRange(params.lifeMin, params.lifeMax)
+
+  const glow = 0.4 + Math.random() * 0.2
+  applyColor(i3, glow, palette, true)
+}
+
+function sampleField(x: number, y: number, _time: number): VectorSample | null {
+  if (fieldData && fieldData.length > 0) {
+    // Transform particle position to data coordinates
+    const dataX = (x - fieldTransform.offsetX) / fieldTransform.scale
+    const dataY = (y - fieldTransform.offsetY) / fieldTransform.scale
+
+    let nearest = fieldData[0]
+    let bestDist = Number.MAX_VALUE
+    for (let i = 0; i < fieldData.length; i += 1) {
+      const d = fieldData[i]
+      const dx = d.x - dataX
+      const dy = d.y - dataY
+      const dist = dx * dx + dy * dy
+      if (dist < bestDist) {
+        bestDist = dist
+        nearest = d
+      }
+    }
+    const threshold = params.fieldValidDistance / fieldTransform.scale
+    if (Math.sqrt(bestDist) > threshold) {
+      return null
+    }
+    // Scale the vector components by the same factor
+    return { x: nearest.dx * fieldTransform.scale, y: nearest.dy * fieldTransform.scale }
+  }
+
+  // Fallback: uniform rightward flow
+  return { x: 1, y: 0 }
+}
+
+function animate(timestamp: number) {
+  const now = timestamp || performance.now()
+  const dt = Math.min(0.033, (now - lastTime) / 1000)
+  lastTime = now
+  const time = now * 0.001
+  const palette = getActiveColorPreset()
+
+  for (let i = 0; i < params.particleCount; i += 1) {
+    const i3 = i * 3
+    let x = positions[i3]
+    let y = positions[i3 + 1]
+
+    const v = sampleField(x, y, time)
+    if (!v) {
+      resetParticle(i)
+      continue
+    }
+
+    x += (v.x * FLOW_SCALE * params.speed + randomRange(-JITTER, JITTER)) * dt
+    y += (v.y * FLOW_SCALE * params.speed + randomRange(-JITTER, JITTER)) * dt
+
+    const speed = Math.hypot(v.x, v.y)
+    const glow = Math.min(1, speed * SPEED_TO_GLOW)
+
+    applyColor(i3, glow, palette, false)
+
+    lifetimes[i] -= dt
+
+    if (lifetimes[i] <= 0 || Math.abs(x) > WORLD_EXTENT || Math.abs(y) > WORLD_EXTENT) {
+      resetParticle(i)
+    } else {
+      positions[i3] = x
+      positions[i3 + 1] = y
+    }
+  }
+
+  geometry.attributes.position.needsUpdate = true
+  geometry.attributes.color.needsUpdate = true
+
+  composer.render()
+  requestAnimationFrame(animate)
+}
+
+function resize() {
+  const width = window.innerWidth
+  const height = window.innerHeight
+  const aspect = width / height
+  const viewSize = 1.6
+
+  camera.left = -viewSize * aspect
+  camera.right = viewSize * aspect
+  camera.top = viewSize
+  camera.bottom = -viewSize
+  camera.updateProjectionMatrix()
+
+  renderer.setSize(width, height, false)
+  composer.setSize(width, height)
+  bloomPass.setSize(width, height)
+}
+
+function randomRange(min: number, max: number) {
+  return min + Math.random() * (max - min)
+}
+
+function createOverlay() {
+  const hud = document.createElement('div')
+  hud.className = 'hud'
+  hud.innerHTML = `<div class="title">luminar</div><div class="subtitle">2D vector field bloom study</div><div class="status">Field: <span id="field-status">default (built-in)</span></div>`
+  app.appendChild(hud)
+  fieldStatusEl = document.getElementById('field-status')
+}
+
+function createControls() {
+  const panel = document.createElement('div')
+  panel.className = 'controls'
+
+  const header = document.createElement('div')
+  header.className = 'controls__title'
+  header.textContent = 'Controls'
+  panel.appendChild(header)
+
+  const colorControl = addSelect(panel, 'Color', COLOR_PRESETS, params.colorPreset, (key) => {
+    params.colorPreset = key
+  })
+
+  const speedControl = addSlider(panel, 'Speed', 0.1, 6, 0.1, params.speed, (value) => {
+    params.speed = value
+  })
+
+  const advancedToggle = document.createElement('button')
+  advancedToggle.type = 'button'
+  advancedToggle.className = 'controls__button'
+  advancedToggle.textContent = 'Show advanced'
+
+  const advancedSection = document.createElement('div')
+  advancedSection.className = 'controls__advanced'
+  advancedSection.style.display = 'none'
+
+  const sizeControl = addSlider(advancedSection, 'Size', 0.5, 4, 0.1, params.size, (value) => {
+    params.size = value
+    material.size = value
+  })
+
+  const particleCountControl = addSlider(advancedSection, 'Particle count', 100, 8000, 100, params.particleCount, (value) => {
+    params.particleCount = Math.round(value)
+    resizeParticleBuffers()
+  })
+
+  const bloomStrengthControl = addSlider(advancedSection, 'Bloom strength', 0.2, 2.5, 0.05, params.bloomStrength, (value) => {
+    params.bloomStrength = value
+    updateBloom()
+  })
+
+  const bloomRadiusControl = addSlider(advancedSection, 'Bloom radius', 0.0, 1.2, 0.02, params.bloomRadius, (value) => {
+    params.bloomRadius = value
+    updateBloom()
+  })
+
+  let lifeMinControl: SliderHandle
+  let lifeMaxControl: SliderHandle
+
+  lifeMinControl = addSlider(advancedSection, 'Life min (s)', 0.1, 2.0, 0.05, params.lifeMin, (value) => {
+    params.lifeMin = value
+    if (params.lifeMin > params.lifeMax) {
+      params.lifeMax = value
+      syncSlider(lifeMaxControl, params.lifeMax)
+    }
+    reseedLifetimes()
+  })
+
+  lifeMaxControl = addSlider(advancedSection, 'Life max (s)', 0.2, 5.0, 0.05, params.lifeMax, (value) => {
+    params.lifeMax = value
+    if (params.lifeMax < params.lifeMin) {
+      params.lifeMin = value
+      syncSlider(lifeMinControl, params.lifeMin)
+    }
+    reseedLifetimes()
+  })
+
+  const fieldDistControl = addSlider(advancedSection, 'Field border', FIELD_BORDER_MIN, FIELD_BORDER_MAX, 0.01, params.fieldValidDistance, (value) => {
+    params.fieldValidDistance = value
+  })
+  fieldDistControlHandle = fieldDistControl
+
+  advancedToggle.addEventListener('click', () => {
+    const isHidden = advancedSection.style.display === 'none'
+    advancedSection.style.display = isHidden ? 'block' : 'none'
+    advancedToggle.textContent = isHidden ? 'Hide advanced' : 'Show advanced'
+  })
+
+  panel.appendChild(advancedToggle)
+  panel.appendChild(advancedSection)
+
+  const resetBtn = document.createElement('button')
+  resetBtn.type = 'button'
+  resetBtn.className = 'controls__button'
+  resetBtn.textContent = 'Reset to defaults'
+  resetBtn.addEventListener('click', () => {
+    Object.assign(params, defaultParams)
+    material.size = params.size
+    updateBloom()
+    reseedLifetimes()
+    syncSlider(sizeControl, params.size)
+    syncSlider(speedControl, params.speed)
+    syncSlider(particleCountControl, params.particleCount)
+    syncSlider(bloomStrengthControl, params.bloomStrength)
+    syncSlider(bloomRadiusControl, params.bloomRadius)
+    syncSlider(lifeMinControl, params.lifeMin)
+    syncSlider(lifeMaxControl, params.lifeMax)
+    syncSlider(fieldDistControl, params.fieldValidDistance)
+    syncSelect(colorControl, params.colorPreset)
+  })
+  panel.appendChild(resetBtn)
+
+  app.appendChild(panel)
+}
+
+function addSlider(
+  panel: HTMLDivElement,
+  label: string,
+  min: number,
+  max: number,
+  step: number,
+  value: number,
+  onChange: (value: number) => void,
+): SliderHandle {
+  const row = document.createElement('label')
+  row.className = 'controls__row'
+
+  const text = document.createElement('span')
+  text.textContent = label
+
+  const input = document.createElement('input')
+  input.type = 'range'
+  input.min = String(min)
+  input.max = String(max)
+  input.step = String(step)
+  input.value = String(value)
+
+  const valueTag = document.createElement('span')
+  valueTag.className = 'controls__value'
+  valueTag.textContent = formatValue(value, step)
+
+  input.addEventListener('input', (event) => {
+    const next = parseFloat((event.target as HTMLInputElement).value)
+    valueTag.textContent = formatValue(next, step)
+    onChange(next)
+  })
+
+  row.appendChild(text)
+  row.appendChild(input)
+  row.appendChild(valueTag)
+  panel.appendChild(row)
+
+  return { input, valueTag }
+}
+
+function addSelect(
+  panel: HTMLDivElement,
+  label: string,
+  options: ColorPreset[],
+  value: string,
+  onChange: (key: string) => void,
+): HTMLSelectElement {
+  const row = document.createElement('label')
+  row.className = 'controls__row'
+
+  const text = document.createElement('span')
+  text.textContent = label
+
+  const select = document.createElement('select')
+  select.className = 'controls__select'
+  for (const option of options) {
+    const optEl = document.createElement('option')
+    optEl.value = option.key
+    optEl.textContent = option.label
+    select.appendChild(optEl)
+  }
+  select.value = value
+  select.addEventListener('change', (event) => {
+    const next = (event.target as HTMLSelectElement).value
+    onChange(next)
+  })
+
+  row.appendChild(text)
+  row.appendChild(select)
+  panel.appendChild(row)
+
+  return select
+}
+
+function updateBloom() {
+  bloomPass.strength = params.bloomStrength
+  bloomPass.radius = params.bloomRadius
+}
+
+function formatValue(value: number, step: number) {
+  return step >= 1 ? value.toFixed(0) : value.toFixed(2)
+}
+
+function syncSlider(control: { input: HTMLInputElement; valueTag: HTMLSpanElement }, value: number) {
+  control.input.value = String(value)
+  control.valueTag.textContent = formatValue(value, parseFloat(control.input.step))
+}
+
+function syncSelect(select: HTMLSelectElement, value: string) {
+  select.value = value
+}
+
+function getActiveColorPreset(): ColorPreset {
+  return COLOR_PRESETS.find((preset) => preset.key === params.colorPreset) ?? COLOR_PRESETS[0]
+}
+
+function applyColor(i3: number, glow: number, palette: ColorPreset, isSpawn: boolean) {
+  const clampedGlow = Math.min(1, Math.max(0, glow))
+
+  // Preserve legacy look for the default palette
+  if (palette.key === DEFAULT_COLOR_PRESET) {
+    if (isSpawn) {
+      colors[i3] = 0.6 * clampedGlow
+      colors[i3 + 1] = 0.25 * clampedGlow
+      colors[i3 + 2] = 0.9 * clampedGlow
+    } else {
+      colors[i3] = 0.35 + clampedGlow * 0.9
+      colors[i3 + 1] = 0.18 + clampedGlow * 0.45
+      colors[i3 + 2] = 0.6 + clampedGlow * 0.35
+    }
+    return
+  }
+
+  // For other palettes, scale their hue by brightness without white mixing
+  const brightness = isSpawn ? clampedGlow : 0.35 + clampedGlow * 0.65
+  const [r, g, b] = palette.rgb
+  colors[i3] = r * brightness
+  colors[i3 + 1] = g * brightness
+  colors[i3 + 2] = b * brightness
+}
+
+function reseedLifetimes() {
+  for (let i = 0; i < params.particleCount; i += 1) {
+    lifetimes[i] = randomRange(params.lifeMin, params.lifeMax)
+  }
+}
+
+function resizeParticleBuffers() {
+  positions = new Float32Array(params.particleCount * 3)
+  colors = new Float32Array(params.particleCount * 3)
+  lifetimes = new Float32Array(params.particleCount)
+  geometry.setAttribute('position', new BufferAttribute(positions, 3))
+  geometry.setAttribute('color', new BufferAttribute(colors, 3))
+  initParticles()
+}
+
+async function loadVectorField() {
+  try {
+    const res = await fetch('/vector-field.json', { cache: 'no-store' })
+    if (!res.ok) {
+      updateFieldStatus('default (built-in)')
+      return
+    }
+    const data = (await res.json()) as VectorDatum[]
+    if (Array.isArray(data) && data.length > 0) {
+      // Compute bounding box
+      let minX = data[0].x
+      let maxX = data[0].x
+      let minY = data[0].y
+      let maxY = data[0].y
+      for (const d of data) {
+        if (d.x < minX) minX = d.x
+        if (d.x > maxX) maxX = d.x
+        if (d.y < minY) minY = d.y
+        if (d.y > maxY) maxY = d.y
+      }
+      const dataWidth = maxX - minX
+      const dataHeight = maxY - minY
+      const dataSize = Math.max(dataWidth, dataHeight)
+
+      // Normalize to fit within [-WORLD_EXTENT, WORLD_EXTENT]
+      const targetSize = WORLD_EXTENT * 1.8 // leave some margin
+      fieldTransform.scale = dataSize > 0 ? targetSize / dataSize : 1
+      fieldTransform.offsetX = -(minX + maxX) * 0.5 * fieldTransform.scale
+      fieldTransform.offsetY = -(minY + maxY) * 0.5 * fieldTransform.scale
+
+      // Auto-compute field valid distance from average nearest-neighbor spacing
+      let sumDist = 0
+      const sampleSize = Math.min(data.length, 200) // sample subset for efficiency
+      for (let i = 0; i < sampleSize; i += 1) {
+        const pt = data[i]
+        let minDist = Number.MAX_VALUE
+        for (let j = 0; j < data.length; j += 1) {
+          if (i === j) continue
+          const dx = data[j].x - pt.x
+          const dy = data[j].y - pt.y
+          const dist = Math.sqrt(dx * dx + dy * dy)
+          if (dist < minDist) minDist = dist
+        }
+        sumDist += minDist
+      }
+      const avgSpacing = sumDist / sampleSize
+      const autoThreshold = Math.min(
+        FIELD_BORDER_MAX,
+        Math.max(FIELD_BORDER_MIN, avgSpacing * fieldTransform.scale * 0.7),
+      ) // 70% of avg spacing, clamped to UI range
+      params.fieldValidDistance = autoThreshold
+      if (fieldDistControlHandle) {
+        syncSlider(fieldDistControlHandle, params.fieldValidDistance)
+      }
+      console.log('Auto field border:', autoThreshold.toFixed(4), 'avg spacing:', avgSpacing.toFixed(4))
+
+      fieldData = data
+      updateFieldStatus(`loaded ${data.length} vectors (${dataWidth.toFixed(1)}×${dataHeight.toFixed(1)})`)
+      console.log('Field bounds:', { minX, maxX, minY, maxY, scale: fieldTransform.scale })
+    } else {
+      updateFieldStatus('default (empty file)')
+    }
+  } catch (error) {
+    console.error('Failed to load vector field', error)
+    updateFieldStatus('default (load error)')
+  }
+}
+
+function updateFieldStatus(label: string) {
+  if (fieldStatusEl) fieldStatusEl.textContent = label
+}

package/src/style.css

@@ -0,0 +1,136 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap');
+
+:root {
+  font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
+  color: #e8f0ff;
+  background-color: #02040a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: radial-gradient(circle at 20% 20%, rgba(80, 140, 255, 0.12), transparent 35%),
+    radial-gradient(circle at 80% 10%, rgba(180, 100, 255, 0.12), transparent 30%),
+    radial-gradient(circle at 50% 80%, rgba(60, 200, 180, 0.14), transparent 32%),
+    #02040a;
+  overflow: hidden;
+}
+
+#app {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+}
+
+canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  filter: saturate(1.05);
+}
+
+.hud {
+  position: absolute;
+  top: 18px;
+  left: 18px;
+  color: #dfe8ff;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  text-shadow: 0 0 12px rgba(110, 170, 255, 0.3);
+}
+
+.hud .title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.hud .subtitle {
+  font-weight: 400;
+  font-size: 12px;
+  opacity: 0.7;
+  margin-top: 4px;
+  letter-spacing: 0.04em;
+}
+
+.hud .status {
+  font-weight: 400;
+  font-size: 11px;
+  opacity: 0.8;
+  margin-top: 6px;
+  letter-spacing: 0.03em;
+  color: #9fb7ff;
+}
+
+.controls {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 240px;
+  padding: 14px 14px 10px;
+  background: rgba(6, 10, 22, 0.7);
+  border: 1px solid rgba(120, 180, 255, 0.25);
+  border-radius: 12px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(100, 160, 255, 0.12);
+  backdrop-filter: blur(10px);
+  color: #dfe8ff;
+  pointer-events: auto;
+}
+
+.controls__title {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 10px;
+  color: #9fb7ff;
+}
+
+.controls__row {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  margin-bottom: 8px;
+  color: #e8f0ff;
+}
+
+.controls__row input[type='range'] {
+  width: 100%;
+  accent-color: #7cc4ff;
+}
+
+.controls__value {
+  font-variant-numeric: tabular-nums;
+  color: #9fb7ff;
+  min-width: 44px;
+  text-align: right;
+}
+
+.controls__button {
+  width: 100%;
+  margin-top: 6px;
+  padding: 8px 10px;
+  border: 1px solid rgba(120, 180, 255, 0.35);
+  border-radius: 10px;
+  background: linear-gradient(120deg, rgba(120, 180, 255, 0.16), rgba(80, 120, 200, 0.1));
+  color: #dfe8ff;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: border-color 120ms ease, transform 120ms ease, box-shadow 200ms ease;
+}
+
+.controls__button:hover {
+  border-color: rgba(140, 200, 255, 0.7);
+  box-shadow: 0 0 18px rgba(120, 180, 255, 0.25);
+}
+
+.controls__button:active {
+  transform: translateY(1px);
+}