feat: added <SoftAurora /> background

src/constants/code/Backgrounds/radarCode.ts

@@ -15,7 +15,7 @@ export const radar = createCodeObject(code, 'Backgrounds/Radar', {
         :sweepSpeed="1"
         :sweepWidth="2"
         :sweepLobes="1"
-        color="#9f29ff"
+        color="#27FF64"
         backgroundColor="#000000"
         :falloff="2"
         :brightness="1"

src/constants/code/Backgrounds/softAuroraCode.ts

@@ -0,0 +1,30 @@
+import code from '@content/Backgrounds/SoftAurora/SoftAurora.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const softAurora = createCodeObject(code, 'Backgrounds/SoftAurora', {
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div style="width: 100%; height: 600px; position: relative;">
+    <SoftAurora
+        :speed="0.6"
+        :scale="1.5"
+        :brightness="1"
+        :color1="'#f7f7f7'"
+        :color2="'#27FF64'"
+        :noise-frequency="2.5"
+        :noise-amplitude="1"
+        :band-height="0.5"
+        :band-spread="1"
+        :octave-decay="0.1"
+        :layer-offset="0"
+        :color-speed="1"
+        :enable-mouse-interaction="true"
+        :mouse-influence="0.25"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import SoftAurora from "./SoftAurora.vue";
+</script>`
+});

src/content/Backgrounds/Radar/Radar.vue

@@ -108,7 +108,7 @@ const props = withDefaults(defineProps<RadarProps>(), {
   sweepSpeed: 1.0,
   sweepWidth: 2.0,
   sweepLobes: 1.0,
-  color: '#9f29ff',
+  color: '#27FF64',
   backgroundColor: '#000000',
   falloff: 2.0,
   brightness: 1.0,

src/content/Backgrounds/SoftAurora/SoftAurora.vue

@@ -0,0 +1,306 @@
+<script setup lang="ts">
+import { Mesh, Program, Renderer, Triangle } from 'ogl';
+import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue';
+
+interface SoftAuroraProps {
+  speed?: number;
+  scale?: number;
+  brightness?: number;
+  color1?: string;
+  color2?: string;
+  noiseFrequency?: number;
+  noiseAmplitude?: number;
+  bandHeight?: number;
+  bandSpread?: number;
+  octaveDecay?: number;
+  layerOffset?: number;
+  colorSpeed?: number;
+  enableMouseInteraction?: boolean;
+  mouseInfluence?: number;
+}
+
+function hexToVec3(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  return [parseInt(h.slice(0, 2), 16) / 255, parseInt(h.slice(2, 4), 16) / 255, parseInt(h.slice(4, 6), 16) / 255];
+}
+
+const vertexShader = `
+attribute vec2 uv;
+attribute vec2 position;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0, 1);
+}
+`;
+
+const fragmentShader = `
+precision highp float;
+
+uniform float uTime;
+uniform vec3 uResolution;
+uniform float uSpeed;
+uniform float uScale;
+uniform float uBrightness;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform float uNoiseFreq;
+uniform float uNoiseAmp;
+uniform float uBandHeight;
+uniform float uBandSpread;
+uniform float uOctaveDecay;
+uniform float uLayerOffset;
+uniform float uColorSpeed;
+uniform vec2 uMouse;
+uniform float uMouseInfluence;
+uniform bool uEnableMouse;
+
+#define TAU 6.28318
+
+vec3 gradientHash(vec3 p) {
+  p = vec3(
+    dot(p, vec3(127.1, 311.7, 234.6)),
+    dot(p, vec3(269.5, 183.3, 198.3)),
+    dot(p, vec3(169.5, 283.3, 156.9))
+  );
+  vec3 h = fract(sin(p) * 43758.5453123);
+  float phi = acos(2.0 * h.x - 1.0);
+  float theta = TAU * h.y;
+  return vec3(cos(theta) * sin(phi), sin(theta) * cos(phi), cos(phi));
+}
+
+float quinticSmooth(float t) {
+  float t2 = t * t;
+  float t3 = t * t2;
+  return 6.0 * t3 * t2 - 15.0 * t2 * t2 + 10.0 * t3;
+}
+
+vec3 cosineGradient(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
+  return a + b * cos(TAU * (c * t + d));
+}
+
+float perlin3D(float amplitude, float frequency, float px, float py, float pz) {
+  float x = px * frequency;
+  float y = py * frequency;
+
+  float fx = floor(x); float fy = floor(y); float fz = floor(pz);
+  float cx = ceil(x);  float cy = ceil(y);  float cz = ceil(pz);
+
+  vec3 g000 = gradientHash(vec3(fx, fy, fz));
+  vec3 g100 = gradientHash(vec3(cx, fy, fz));
+  vec3 g010 = gradientHash(vec3(fx, cy, fz));
+  vec3 g110 = gradientHash(vec3(cx, cy, fz));
+  vec3 g001 = gradientHash(vec3(fx, fy, cz));
+  vec3 g101 = gradientHash(vec3(cx, fy, cz));
+  vec3 g011 = gradientHash(vec3(fx, cy, cz));
+  vec3 g111 = gradientHash(vec3(cx, cy, cz));
+
+  float d000 = dot(g000, vec3(x - fx, y - fy, pz - fz));
+  float d100 = dot(g100, vec3(x - cx, y - fy, pz - fz));
+  float d010 = dot(g010, vec3(x - fx, y - cy, pz - fz));
+  float d110 = dot(g110, vec3(x - cx, y - cy, pz - fz));
+  float d001 = dot(g001, vec3(x - fx, y - fy, pz - cz));
+  float d101 = dot(g101, vec3(x - cx, y - fy, pz - cz));
+  float d011 = dot(g011, vec3(x - fx, y - cy, pz - cz));
+  float d111 = dot(g111, vec3(x - cx, y - cy, pz - cz));
+
+  float sx = quinticSmooth(x - fx);
+  float sy = quinticSmooth(y - fy);
+  float sz = quinticSmooth(pz - fz);
+
+  float lx00 = mix(d000, d100, sx);
+  float lx10 = mix(d010, d110, sx);
+  float lx01 = mix(d001, d101, sx);
+  float lx11 = mix(d011, d111, sx);
+
+  float ly0 = mix(lx00, lx10, sy);
+  float ly1 = mix(lx01, lx11, sy);
+
+  return amplitude * mix(ly0, ly1, sz);
+}
+
+float auroraGlow(float t, vec2 shift) {
+  vec2 uv = gl_FragCoord.xy / uResolution.y;
+  uv += shift;
+
+  float noiseVal = 0.0;
+  float freq = uNoiseFreq;
+  float amp = uNoiseAmp;
+  vec2 samplePos = uv * uScale;
+
+  for (float i = 0.0; i < 3.0; i += 1.0) {
+    noiseVal += perlin3D(amp, freq, samplePos.x, samplePos.y, t);
+    amp *= uOctaveDecay;
+    freq *= 2.0;
+  }
+
+  float yBand = uv.y * 10.0 - uBandHeight * 10.0;
+  return 0.3 * max(exp(uBandSpread * (1.0 - 1.1 * abs(noiseVal + yBand))), 0.0);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / uResolution.xy;
+  float t = uSpeed * 0.4 * uTime;
+
+  vec2 shift = vec2(0.0);
+  if (uEnableMouse) {
+    shift = (uMouse - 0.5) * uMouseInfluence;
+  }
+
+  vec3 col = vec3(0.0);
+  col += 0.99 * auroraGlow(t, shift) * cosineGradient(uv.x + uTime * uSpeed * 0.2 * uColorSpeed, vec3(0.5), vec3(0.5), vec3(1.0), vec3(0.3, 0.20, 0.20)) * uColor1;
+  col += 0.99 * auroraGlow(t + uLayerOffset, shift) * cosineGradient(uv.x + uTime * uSpeed * 0.1 * uColorSpeed, vec3(0.5), vec3(0.5), vec3(2.0, 1.0, 0.0), vec3(0.5, 0.20, 0.25)) * uColor2;
+
+  col *= uBrightness;
+  float alpha = clamp(length(col), 0.0, 1.0);
+  gl_FragColor = vec4(col, alpha);
+}
+`;
+
+const props = withDefaults(defineProps<SoftAuroraProps>(), {
+  speed: 0.6,
+  scale: 1.5,
+  brightness: 1.0,
+  color1: '#f7f7f7',
+  color2: '#27FF64',
+  noiseFrequency: 2.5,
+  noiseAmplitude: 1.0,
+  bandHeight: 0.5,
+  bandSpread: 1.0,
+  octaveDecay: 0.1,
+  layerOffset: 0,
+  colorSpeed: 1.0,
+  enableMouseInteraction: true,
+  mouseInfluence: 0.25
+});
+
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+
+let cleanup: (() => void) | null = null;
+const setup = () => {
+  if (!containerRef.value) return;
+  const container = containerRef.value;
+  const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
+  const gl = renderer.gl;
+  gl.clearColor(0, 0, 0, 0);
+
+  const currentMouse = [0.5, 0.5];
+  let targetMouse = [0.5, 0.5];
+
+  function handleMouseMove(e: MouseEvent) {
+    const rect = gl.canvas.getBoundingClientRect();
+    targetMouse = [(e.clientX - rect.left) / rect.width, 1.0 - (e.clientY - rect.top) / rect.height];
+  }
+
+  function handleMouseLeave() {
+    targetMouse = [0.5, 0.5];
+  }
+
+  renderer.setSize(container.offsetWidth, container.offsetHeight);
+
+  const geometry = new Triangle(gl);
+  const program = new Program(gl, {
+    vertex: vertexShader,
+    fragment: fragmentShader,
+    uniforms: {
+      uTime: { value: 0 },
+      uResolution: { value: [gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height] },
+      uSpeed: { value: props.speed },
+      uScale: { value: props.scale },
+      uBrightness: { value: props.brightness },
+      uColor1: { value: hexToVec3(props.color1) },
+      uColor2: { value: hexToVec3(props.color2) },
+      uNoiseFreq: { value: props.noiseFrequency },
+      uNoiseAmp: { value: props.noiseAmplitude },
+      uBandHeight: { value: props.bandHeight },
+      uBandSpread: { value: props.bandSpread },
+      uOctaveDecay: { value: props.octaveDecay },
+      uLayerOffset: { value: props.layerOffset },
+      uColorSpeed: { value: props.colorSpeed },
+      uMouse: { value: new Float32Array([0.5, 0.5]) },
+      uMouseInfluence: { value: props.mouseInfluence },
+      uEnableMouse: { value: props.enableMouseInteraction }
+    }
+  });
+
+  function resize() {
+    renderer.setSize(container.offsetWidth, container.offsetHeight);
+    program.uniforms.uResolution.value = [gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height];
+  }
+  window.addEventListener('resize', resize);
+
+  const mesh = new Mesh(gl, { geometry, program });
+  container.appendChild(gl.canvas);
+
+  if (props.enableMouseInteraction) {
+    gl.canvas.addEventListener('mousemove', handleMouseMove);
+    gl.canvas.addEventListener('mouseleave', handleMouseLeave);
+  }
+
+  let animationFrameId: number;
+
+  function update(time: number) {
+    animationFrameId = requestAnimationFrame(update);
+    program.uniforms.uTime.value = time * 0.001;
+
+    if (props.enableMouseInteraction) {
+      currentMouse[0] += 0.05 * (targetMouse[0] - currentMouse[0]);
+      currentMouse[1] += 0.05 * (targetMouse[1] - currentMouse[1]);
+      program.uniforms.uMouse.value[0] = currentMouse[0];
+      program.uniforms.uMouse.value[1] = currentMouse[1];
+    } else {
+      program.uniforms.uMouse.value[0] = 0.5;
+      program.uniforms.uMouse.value[1] = 0.5;
+    }
+
+    renderer.render({ scene: mesh });
+  }
+  animationFrameId = requestAnimationFrame(update);
+
+  cleanup = () => {
+    cancelAnimationFrame(animationFrameId);
+    window.removeEventListener('resize', resize);
+    if (props.enableMouseInteraction) {
+      gl.canvas.removeEventListener('mousemove', handleMouseMove);
+      gl.canvas.removeEventListener('mouseleave', handleMouseLeave);
+    }
+    container.removeChild(gl.canvas);
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
+  };
+};
+
+onMounted(() => {
+  setup();
+});
+
+onBeforeUnmount(() => {
+  cleanup?.();
+});
+
+watch(
+  () => [
+    props.speed,
+    props.scale,
+    props.brightness,
+    props.color1,
+    props.color2,
+    props.noiseFrequency,
+    props.noiseAmplitude,
+    props.bandHeight,
+    props.bandSpread,
+    props.octaveDecay,
+    props.layerOffset,
+    props.colorSpeed,
+    props.enableMouseInteraction,
+    props.mouseInfluence
+  ],
+  () => {
+    cleanup?.();
+    setup();
+  }
+);
+</script>
+
+<template>
+  <div ref="containerRef" class="w-full h-full" />
+</template>

src/demo/Backgrounds/RadarDemo.vue

@@ -89,7 +89,7 @@ const spokeThickness = ref(0.01);
 const sweepSpeed = ref(1.0);
 const sweepWidth = ref(2.0);
 const sweepLobes = ref(1.0);
-const color = ref('#9f29ff');
+const color = ref('#27FF64');
 const backgroundColor = ref('#000000');
 const falloff = ref(2.0);
 const brightness = ref(1.0);
@@ -154,7 +154,7 @@ const propData = [
   {
     name: 'color',
     type: 'string',
-    default: '"#9f29ff"',
+    default: '"#27FF64"',
     description: 'Primary radar color in HEX format.'
   },
   {

src/demo/Backgrounds/SoftAuroraDemo.vue

@@ -0,0 +1,117 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
+        <SoftAurora
+          :speed="speed"
+          :scale="scale"
+          :brightness="brightness"
+          :color1="color1"
+          :color2="color2"
+          :noise-frequency="noiseFrequency"
+          :noise-amplitude="noiseAmplitude"
+          :band-height="bandHeight"
+          :band-spread="bandSpread"
+          :octave-decay="octaveDecay"
+          :layer-offset="layerOffset"
+          :color-speed="colorSpeed"
+          :enable-mouse-interaction="enableMouseInteraction"
+          :mouse-influence="mouseInfluence"
+        />
+
+        <BackgroundContent pill-text="New Background" headline="A gentle glow to light your way!" />
+      </div>
+
+      <Customize>
+        <div class="flex items-center gap-4 mt-4">
+          <PreviewColor title="Color 1" v-model="color1" />
+          <PreviewColor title="Color 2" v-model="color2" />
+        </div>
+
+        <PreviewSlider title="Speed" :min="0.1" :max="5" :step="0.1" v-model="speed" />
+        <PreviewSlider title="Scale" :min="0.1" :max="3" :step="0.1" v-model="scale" />
+        <PreviewSlider title="Brightness" :min="1" :max="30" :step="1" v-model="brightness" />
+        <PreviewSlider title="Noise Frequency" :min="1" :max="36" :step="1" v-model="noiseFrequency" />
+        <PreviewSlider title="Noise Amplitude" :min="0.01" :max="0.3" :step="0.01" v-model="noiseAmplitude" />
+        <PreviewSlider title="Band Height" :min="0.01" :max="0.2" :step="0.01" v-model="bandHeight" />
+        <PreviewSlider title="Band Spread" :min="0.1" :max="5" :step="0.1" v-model="bandSpread" />
+        <PreviewSlider title="Octave Decay" :min="1" :max="20" :step="1" v-model="octaveDecay" />
+        <PreviewSlider title="Layer Offset" :min="1" :max="6" :step="1" v-model="layerOffset" />
+        <PreviewSlider title="Color Speed" :min="0.1" :max="3" :step="0.1" v-model="colorSpeed" />
+        <PreviewSwitch title="Mouse Interaction" v-model="enableMouseInteraction" />
+        <PreviewSlider
+          v-if="enableMouseInteraction"
+          title="Mouse Influence"
+          :min="0.1"
+          :max="1"
+          :step="0.05"
+          v-model="mouseInfluence"
+        />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="radar" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="radar.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import CliInstallation from '@/components/code/CliInstallation.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
+import Dependencies from '@/components/code/Dependencies.vue';
+import BackgroundContent from '@/components/common/BackgroundContent.vue';
+import Customize from '@/components/common/Customize.vue';
+import PreviewColor from '@/components/common/PreviewColor.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
+import { radar } from '@/constants/code/Backgrounds/radarCode';
+import SoftAurora from '@/content/Backgrounds/SoftAurora/SoftAurora.vue';
+import { ref } from 'vue';
+
+const speed = ref(0.6);
+const scale = ref(1.5);
+const brightness = ref(1.0);
+const color1 = ref('#f7f7f7');
+const color2 = ref('#27FF64');
+const noiseFrequency = ref(2.5);
+const noiseAmplitude = ref(1.0);
+const bandHeight = ref(0.5);
+const bandSpread = ref(1.0);
+const octaveDecay = ref(0.1);
+const layerOffset = ref(0);
+const colorSpeed = ref(1.0);
+const enableMouseInteraction = ref(true);
+const mouseInfluence = ref(0.25);
+
+const propData = [
+  { name: 'speed', type: 'number', default: '0.6', description: 'Overall animation speed multiplier.' },
+  { name: 'scale', type: 'number', default: '1.5', description: 'Scale of the noise pattern.' },
+  { name: 'brightness', type: 'number', default: '1.0', description: 'Overall brightness multiplier.' },
+  { name: 'color1', type: 'string', default: '"#f7f7f7"', description: 'Tint color for the first aurora layer.' },
+  { name: 'color2', type: 'string', default: '"#27FF64"', description: 'Tint color for the second aurora layer.' },
+  { name: 'noiseFrequency', type: 'number', default: '2.5', description: 'Base frequency of the Perlin noise.' },
+  { name: 'noiseAmplitude', type: 'number', default: '1.0', description: 'Base amplitude of the Perlin noise.' },
+  { name: 'bandHeight', type: 'number', default: '0.5', description: 'Vertical position of the aurora band (0-1).' },
+  { name: 'bandSpread', type: 'number', default: '1.0', description: 'Vertical spread of the aurora glow.' },
+  { name: 'octaveDecay', type: 'number', default: '0.1', description: 'Amplitude decay per noise octave.' },
+  { name: 'layerOffset', type: 'number', default: '0', description: 'Time offset between the two aurora layers.' },
+  { name: 'colorSpeed', type: 'number', default: '1.0', description: 'Speed of palette color shifting.' },
+  {
+    name: 'enableMouseInteraction',
+    type: 'boolean',
+    default: 'true',
+    description: 'Enable cursor-reactive aurora offset.'
+  },
+  { name: 'mouseInfluence', type: 'number', default: '0.25', description: 'Strength of the mouse offset effect.' }
+];
+</script>