{"name":"Galaxy","title":"Galaxy","description":"Parallax realistic starfield with pointer interactions.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { Renderer, Program, Mesh, Color, Triangle } from 'ogl';\nimport { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';\n\nconst vertexShader = `\nattribute vec2 uv;\nattribute vec2 position;\n\nvarying vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n  gl_Position = vec4(position, 0, 1);\n}\n`;\n\nconst fragmentShader = `\nprecision highp float;\n\nuniform float uTime;\nuniform vec3 uResolution;\nuniform vec2 uFocal;\nuniform vec2 uRotation;\nuniform float uStarSpeed;\nuniform float uDensity;\nuniform float uHueShift;\nuniform float uSpeed;\nuniform vec2 uMouse;\nuniform float uGlowIntensity;\nuniform float uSaturation;\nuniform bool uMouseRepulsion;\nuniform float uTwinkleIntensity;\nuniform float uRotationSpeed;\nuniform float uRepulsionStrength;\nuniform float uMouseActiveFactor;\nuniform float uAutoCenterRepulsion;\nuniform bool uTransparent;\n\nvarying vec2 vUv;\n\n#define NUM_LAYER 4.0\n#define STAR_COLOR_CUTOFF 0.2\n#define MAT45 mat2(0.7071, -0.7071, 0.7071, 0.7071)\n#define PERIOD 3.0\n\nfloat Hash21(vec2 p) {\n  p = fract(p * vec2(123.34, 456.21));\n  p += dot(p, p + 45.32);\n  return fract(p.x * p.y);\n}\n\nfloat tri(float x) {\n  return abs(fract(x) * 2.0 - 1.0);\n}\n\nfloat tris(float x) {\n  float t = fract(x);\n  return 1.0 - smoothstep(0.0, 1.0, abs(2.0 * t - 1.0));\n}\n\nfloat trisn(float x) {\n  float t = fract(x);\n  return 2.0 * (1.0 - smoothstep(0.0, 1.0, abs(2.0 * t - 1.0))) - 1.0;\n}\n\nvec3 hsv2rgb(vec3 c) {\n  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n\nfloat Star(vec2 uv, float flare) {\n  float d = length(uv);\n  float m = (0.05 * uGlowIntensity) / d;\n  float rays = smoothstep(0.0, 1.0, 1.0 - abs(uv.x * uv.y * 1000.0));\n  m += rays * flare * uGlowIntensity;\n  uv *= MAT45;\n  rays = smoothstep(0.0, 1.0, 1.0 - abs(uv.x * uv.y * 1000.0));\n  m += rays * 0.3 * flare * uGlowIntensity;\n  m *= smoothstep(1.0, 0.2, d);\n  return m;\n}\n\nvec3 StarLayer(vec2 uv) {\n  vec3 col = vec3(0.0);\n\n  vec2 gv = fract(uv) - 0.5; \n  vec2 id = floor(uv);\n\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 offset = vec2(float(x), float(y));\n      vec2 si = id + vec2(float(x), float(y));\n      float seed = Hash21(si);\n      float size = fract(seed * 345.32);\n      float glossLocal = tri(uStarSpeed / (PERIOD * seed + 1.0));\n      float flareSize = smoothstep(0.9, 1.0, size) * glossLocal;\n\n      float red = smoothstep(STAR_COLOR_CUTOFF, 1.0, Hash21(si + 1.0)) + STAR_COLOR_CUTOFF;\n      float blu = smoothstep(STAR_COLOR_CUTOFF, 1.0, Hash21(si + 3.0)) + STAR_COLOR_CUTOFF;\n      float grn = min(red, blu) * seed;\n      vec3 base = vec3(red, grn, blu);\n      \n      float hue = atan(base.g - base.r, base.b - base.r) / (2.0 * 3.14159) + 0.5;\n      hue = fract(hue + uHueShift / 360.0);\n      float sat = length(base - vec3(dot(base, vec3(0.299, 0.587, 0.114)))) * uSaturation;\n      float val = max(max(base.r, base.g), base.b);\n      base = hsv2rgb(vec3(hue, sat, val));\n\n      vec2 pad = vec2(tris(seed * 34.0 + uTime * uSpeed / 10.0), tris(seed * 38.0 + uTime * uSpeed / 30.0)) - 0.5;\n\n      float star = Star(gv - offset - pad, flareSize);\n      vec3 color = base;\n\n      float twinkle = trisn(uTime * uSpeed + seed * 6.2831) * 0.5 + 1.0;\n      twinkle = mix(1.0, twinkle, uTwinkleIntensity);\n      star *= twinkle;\n      \n      col += star * size * color;\n    }\n  }\n\n  return col;\n}\n\nvoid main() {\n  vec2 focalPx = uFocal * uResolution.xy;\n  vec2 uv = (vUv * uResolution.xy - focalPx) / uResolution.y;\n\n  vec2 mouseNorm = uMouse - vec2(0.5);\n  \n  if (uAutoCenterRepulsion > 0.0) {\n    vec2 centerUV = vec2(0.0, 0.0); // Center in UV space\n    float centerDist = length(uv - centerUV);\n    vec2 repulsion = normalize(uv - centerUV) * (uAutoCenterRepulsion / (centerDist + 0.1));\n    uv += repulsion * 0.05;\n  } else if (uMouseRepulsion) {\n    vec2 mousePosUV = (uMouse * uResolution.xy - focalPx) / uResolution.y;\n    float mouseDist = length(uv - mousePosUV);\n    vec2 repulsion = normalize(uv - mousePosUV) * (uRepulsionStrength / (mouseDist + 0.1));\n    uv += repulsion * 0.05 * uMouseActiveFactor;\n  } else {\n    vec2 mouseOffset = mouseNorm * 0.1 * uMouseActiveFactor;\n    uv += mouseOffset;\n  }\n\n  float autoRotAngle = uTime * uRotationSpeed;\n  mat2 autoRot = mat2(cos(autoRotAngle), -sin(autoRotAngle), sin(autoRotAngle), cos(autoRotAngle));\n  uv = autoRot * uv;\n\n  uv = mat2(uRotation.x, -uRotation.y, uRotation.y, uRotation.x) * uv;\n\n  vec3 col = vec3(0.0);\n\n  for (float i = 0.0; i < 1.0; i += 1.0 / NUM_LAYER) {\n    float depth = fract(i + uStarSpeed * uSpeed);\n    float scale = mix(20.0 * uDensity, 0.5 * uDensity, depth);\n    float fade = depth * smoothstep(1.0, 0.9, depth);\n    col += StarLayer(uv * scale + i * 453.32) * fade;\n  }\n\n  if (uTransparent) {\n    float alpha = length(col);\n    alpha = smoothstep(0.0, 0.3, alpha); // Enhance contrast\n    alpha = min(alpha, 1.0); // Clamp to maximum 1.0\n    gl_FragColor = vec4(col, alpha);\n  } else {\n    gl_FragColor = vec4(col, 1.0);\n  }\n}\n`;\n\ninterface GalaxyProps {\n  focal?: [number, number];\n  rotation?: [number, number];\n  starSpeed?: number;\n  density?: number;\n  hueShift?: number;\n  disableAnimation?: boolean;\n  speed?: number;\n  mouseInteraction?: boolean;\n  glowIntensity?: number;\n  saturation?: number;\n  mouseRepulsion?: boolean;\n  twinkleIntensity?: number;\n  rotationSpeed?: number;\n  repulsionStrength?: number;\n  autoCenterRepulsion?: number;\n  transparent?: boolean;\n}\n\nconst props = withDefaults(defineProps<GalaxyProps>(), {\n  focal: () => [0.5, 0.5],\n  rotation: () => [1.0, 0.0],\n  starSpeed: 0.5,\n  density: 1,\n  hueShift: 140,\n  disableAnimation: false,\n  speed: 1.0,\n  mouseInteraction: true,\n  glowIntensity: 0.3,\n  saturation: 0.0,\n  mouseRepulsion: true,\n  twinkleIntensity: 0.3,\n  rotationSpeed: 0.1,\n  repulsionStrength: 2,\n  autoCenterRepulsion: 0,\n  transparent: true\n});\n\nconst ctnDom = useTemplateRef('ctnDom');\nconst targetMousePos = ref({ x: 0.5, y: 0.5 });\nconst smoothMousePos = ref({ x: 0.5, y: 0.5 });\nconst targetMouseActive = ref(0.0);\nconst smoothMouseActive = ref(0.0);\n\nlet cleanup: (() => void) | null = null;\n\nconst setup = () => {\n  if (!ctnDom.value) return;\n  const ctn = ctnDom.value;\n  const renderer = new Renderer({\n    alpha: props.transparent,\n    premultipliedAlpha: false\n  });\n  const gl = renderer.gl;\n\n  if (props.transparent) {\n    gl.enable(gl.BLEND);\n    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);\n    gl.clearColor(0, 0, 0, 0);\n  } else {\n    gl.clearColor(0, 0, 0, 1);\n  }\n\n  let program: Program;\n\n  function resize() {\n    const scale = 1;\n    renderer.setSize(ctn.offsetWidth * scale, ctn.offsetHeight * scale);\n    if (program) {\n      program.uniforms.uResolution.value = new Color(\n        gl.canvas.width,\n        gl.canvas.height,\n        gl.canvas.width / gl.canvas.height\n      );\n    }\n  }\n  window.addEventListener('resize', resize, false);\n  resize();\n\n  const geometry = new Triangle(gl);\n  program = new Program(gl, {\n    vertex: vertexShader,\n    fragment: fragmentShader,\n    uniforms: {\n      uTime: { value: 0 },\n      uResolution: {\n        value: new Color(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height)\n      },\n      uFocal: { value: new Float32Array(props.focal) },\n      uRotation: { value: new Float32Array(props.rotation) },\n      uStarSpeed: { value: props.starSpeed },\n      uDensity: { value: props.density },\n      uHueShift: { value: props.hueShift },\n      uSpeed: { value: props.speed },\n      uMouse: {\n        value: new Float32Array([smoothMousePos.value.x, smoothMousePos.value.y])\n      },\n      uGlowIntensity: { value: props.glowIntensity },\n      uSaturation: { value: props.saturation },\n      uMouseRepulsion: { value: props.mouseRepulsion },\n      uTwinkleIntensity: { value: props.twinkleIntensity },\n      uRotationSpeed: { value: props.rotationSpeed },\n      uRepulsionStrength: { value: props.repulsionStrength },\n      uMouseActiveFactor: { value: 0.0 },\n      uAutoCenterRepulsion: { value: props.autoCenterRepulsion },\n      uTransparent: { value: props.transparent }\n    }\n  });\n\n  const mesh = new Mesh(gl, { geometry, program });\n  let animateId: number;\n\n  function update(t: number) {\n    animateId = requestAnimationFrame(update);\n    if (!props.disableAnimation) {\n      program.uniforms.uTime.value = t * 0.001;\n      program.uniforms.uStarSpeed.value = (t * 0.001 * props.starSpeed) / 10.0;\n    }\n\n    const lerpFactor = 0.05;\n    smoothMousePos.value.x += (targetMousePos.value.x - smoothMousePos.value.x) * lerpFactor;\n    smoothMousePos.value.y += (targetMousePos.value.y - smoothMousePos.value.y) * lerpFactor;\n\n    smoothMouseActive.value += (targetMouseActive.value - smoothMouseActive.value) * lerpFactor;\n\n    program.uniforms.uMouse.value[0] = smoothMousePos.value.x;\n    program.uniforms.uMouse.value[1] = smoothMousePos.value.y;\n    program.uniforms.uMouseActiveFactor.value = smoothMouseActive.value;\n\n    renderer.render({ scene: mesh });\n  }\n  animateId = requestAnimationFrame(update);\n  ctn.appendChild(gl.canvas);\n\n  function handleMouseMove(e: MouseEvent) {\n    const rect = ctn.getBoundingClientRect();\n    const x = (e.clientX - rect.left) / rect.width;\n    const y = 1.0 - (e.clientY - rect.top) / rect.height;\n    targetMousePos.value = { x, y };\n    targetMouseActive.value = 1.0;\n  }\n\n  function handleMouseLeave() {\n    targetMouseActive.value = 0.0;\n  }\n\n  if (props.mouseInteraction) {\n    ctn.addEventListener('mousemove', handleMouseMove);\n    ctn.addEventListener('mouseleave', handleMouseLeave);\n  }\n\n  cleanup = () => {\n    cancelAnimationFrame(animateId);\n    window.removeEventListener('resize', resize);\n    if (props.mouseInteraction) {\n      ctn.removeEventListener('mousemove', handleMouseMove);\n      ctn.removeEventListener('mouseleave', handleMouseLeave);\n    }\n    ctn.removeChild(gl.canvas);\n    gl.getExtension('WEBGL_lose_context')?.loseContext();\n  };\n};\n\nonMounted(() => {\n  cleanup?.();\n  setup();\n});\n\nonUnmounted(() => {\n  cleanup?.();\n});\n\nwatch(\n  () => props,\n  () => {\n    cleanup?.();\n    setup();\n  },\n  { deep: true }\n);\n</script>\n\n<template>\n  <div ref=\"ctnDom\" class=\"relative w-full h-full\" v-bind=\"$attrs\" />\n</template>\n","path":"Galaxy/Galaxy.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"ogl","version":"^1.0.11"}],"devDependencies":[],"categories":["Backgrounds"]}