Merge branch 'main' into feat/defineModel-support

src/components/code/CliInstallation.vue

@@ -124,7 +124,7 @@ const { command } = defineProps<{
 .code-block {
   border-radius: 15px;
   overflow: hidden;
-  border: 1px solid #142216;
+  border: 1px solid #333;
 }
 
 :deep(.p-accordionpanel) {
@@ -133,19 +133,19 @@ const { command } = defineProps<{
 
 :deep(.p-accordion-header) {
   background: #0b0b0b !important;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   border-radius: 20px !important;
 }
 
 :deep(.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader) {
   background: #0b0b0b !important;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   border-radius: 15px 15px 0 0;
   border-bottom: none !important;
 }
 
 :deep(.p-accordionpanel:not(.p-disabled) > .p-accordionheader) {
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   border-radius: 15px;
   background: #0b0b0b !important;
 }
@@ -171,14 +171,14 @@ const { command } = defineProps<{
 
 :deep(.p-accordion-content) {
   background: #0b0b0b !important;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   border-top: none;
   border-radius: 0 0 15px 15px;
 }
 
 :deep(.p-accordioncontent-content) {
   background: #0b0b0b !important;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   border-radius: 0 0 15px 15px;
   border-top: none !important;
 }

src/components/common/PreviewColor.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="preview-color">
     <span class="color-label">{{ title }}</span>
-    <input :value="color" @input="handleColorChange" type="color" :disabled="props.disabled" class="color-input" />
+    <input :value="color" @input="handleColorChange" type="color" :disabled="disabled" class="color-input" />
   </div>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ title: string; disabled?: boolean }>();
+defineProps<{
+  title?: string;
+  modelValue: string;
+  disabled?: boolean;
+}>();
+
 const color = defineModel<string>();
 
 const handleColorChange = (event: Event) => {
@@ -19,7 +24,6 @@ const handleColorChange = (event: Event) => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 1.5rem;
 }
 
 .color-label {

src/components/common/PropTable.vue

@@ -92,14 +92,14 @@ defineProps<{
 
 :deep(.p-datatable-header) {
   background: #111;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   border-bottom: none;
 }
 
 :deep(.p-datatable-thead > tr > th) {
   background: #111;
-  border-right: 1px solid #142216;
+  border-right: 1px solid #333;
-  border-bottom: 1px solid #142216;
+  border-bottom: 1px solid #333;
   color: #fff;
   font-weight: 600;
   text-transform: capitalize;
@@ -114,8 +114,8 @@ defineProps<{
 
 :deep(.p-datatable-tbody > tr > td) {
   background: #0b0b0b;
-  border-right: 1px solid #142216;
+  border-right: 1px solid #333;
-  border-bottom: 1px solid #142216;
+  border-bottom: 1px solid #333;
   color: #fff;
   padding: 1rem;
   font-size: 14px;

src/components/common/RefreshButton.vue

@@ -18,8 +18,8 @@ defineEmits<{
   top: 0.75rem;
   right: 0.75rem;
   z-index: 2;
-  background-color: #111;
+  background-color: #0b0b0b;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   color: white;
   border-radius: 12px;
   padding: 0.5rem;
@@ -29,11 +29,11 @@ defineEmits<{
 .refresh-button:hover {
   background-color: #222 !important;
   color: #fff !important;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   outline: 1px solid transparent !important;
 }
 
 .refresh-button:active {
-  background-color: #142216;
+  background-color: #0b0b0b;
 }
 </style>

src/components/common/TabbedLayout.vue

@@ -125,8 +125,8 @@ import ContributionSection from './ContributionSection.vue';
 }
 
 :deep(.p-tab[aria-selected='true'] .tab-header) {
-  background: #333333;
+  background: #222;
-  color: #a7ef9e;
+  color: #27ff64;
 }
 
 :deep(.p-tabpanels) {

src/components/landing/Hero/Hero.vue

@@ -31,7 +31,7 @@
         split-type="words"
         :delay="10"
         :duration="1"
-        text="Eighty-plus snippets, ready to be dropped into your Vue projects"
+        text="Sixty-plus snippets, ready to be dropped into your Vue projects"
       />
 
       <router-link to="/text-animations/split-text" class="landing-button">

src/constants/Categories.ts

@@ -88,7 +88,9 @@ export const CATEGORIES = [
       'Squares',
       'Iridescence',
       'Threads',
-      'Grid Motion'
+      'Grid Motion',
+      'Orb',
+      'Ballpit'
     ]
   }
 ];

src/constants/Components.ts

@@ -74,7 +74,9 @@ const backgrounds = {
   'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo.vue'),
   'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue'),
   'shape-blur': () => import('../demo/Backgrounds/ShapeBlurDemo.vue'),
-  'balatro': () => import('../demo/Backgrounds/BalatroDemo.vue')
+  'balatro': () => import('../demo/Backgrounds/BalatroDemo.vue'),
+  'orb': () => import('../demo/Backgrounds/OrbDemo.vue'),
+  'ballpit': () => import('../demo/Backgrounds/BallpitDemo.vue'),
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/ballpitCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/Backgrounds/Ballpit/Ballpit.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const ballpit: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Ballpit`,
+  installation: `npm i three`,
+  usage: `//Component inspired by Kevin Levron:
+//https://x.com/soju22/status/1858925191671271801
+
+<template>
+  <div class="relative w-full h-[500px] overflow-hidden">
+    <Ballpit
+      :count="200"
+      :gravity="0.7"
+      :friction="0.8"
+      :wallBounce="0.95"
+      :followCursor="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Ballpit from "./Ballpit.vue";
+</script>`,
+  code
+};

src/constants/code/Backgrounds/orbCode.ts

@@ -0,0 +1,17 @@
+import code from '@content/Backgrounds/Orb/Orb.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const orb: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Orb`,
+  installation: `npm i ogl`,
+  usage: `<template>
+  <div class="relative w-full h-[600px]">
+    <Orb :hoverIntensity="0.5" :rotateOnHover="true" :hue="0" :forceHoverState="false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Orb from "./Orb.vue";
+</script>`,
+  code
+};

src/content/Backgrounds/Ballpit/Ballpit.vue

@@ -0,0 +1,909 @@
+<script setup lang="ts">
+import { gsap } from 'gsap';
+import { Observer } from 'gsap/Observer';
+import {
+  ACESFilmicToneMapping,
+  AmbientLight,
+  Clock,
+  Color,
+  InstancedMesh,
+  MathUtils,
+  MeshPhysicalMaterial,
+  Object3D,
+  PerspectiveCamera,
+  Plane,
+  PMREMGenerator,
+  PointLight,
+  Raycaster,
+  Scene,
+  ShaderChunk,
+  SphereGeometry,
+  SRGBColorSpace,
+  Vector2,
+  Vector3,
+  WebGLRenderer,
+  type MeshPhysicalMaterialParameters,
+  type WebGLRendererParameters
+} from 'three';
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
+import { defineProps, onMounted, onUnmounted, ref } from 'vue';
+
+gsap.registerPlugin(Observer);
+
+interface MaterialParams extends MeshPhysicalMaterialParameters {
+  metalness?: number;
+  roughness?: number;
+  clearcoat?: number;
+  clearcoatRoughness?: number;
+}
+
+interface Props {
+  className?: string;
+  followCursor?: boolean;
+  count?: number;
+  colors?: number[];
+  ambientColor?: number;
+  ambientIntensity?: number;
+  lightIntensity?: number;
+  materialParams?: MaterialParams;
+  minSize?: number;
+  maxSize?: number;
+  size0?: number;
+  gravity?: number;
+  friction?: number;
+  wallBounce?: number;
+  maxVelocity?: number;
+  maxX?: number;
+  maxY?: number;
+  maxZ?: number;
+  controlSphere0?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  className: '',
+  followCursor: true,
+  count: 200,
+  colors: () => [0, 0, 0],
+  ambientColor: 0xffffff,
+  ambientIntensity: 1,
+  lightIntensity: 200,
+  materialParams: () => ({
+    metalness: 0.5,
+    roughness: 0.5,
+    clearcoat: 1,
+    clearcoatRoughness: 0.15
+  }),
+  minSize: 0.5,
+  maxSize: 1,
+  size0: 1,
+  gravity: 0.5,
+  friction: 0.9975,
+  wallBounce: 0.95,
+  maxVelocity: 0.15,
+  maxX: 5,
+  maxY: 5,
+  maxZ: 2,
+  controlSphere0: false
+});
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const spheresInstanceRef = ref<CreateBallpitReturn | null>(null);
+
+interface PostProcessing {
+  setSize: (width: number, height: number) => void;
+  render: () => void;
+  dispose: () => void;
+}
+
+interface XConfig {
+  canvas?: HTMLCanvasElement;
+  id?: string;
+  rendererOptions?: Partial<WebGLRendererParameters>;
+  size?: 'parent' | { width: number; height: number };
+}
+
+interface SizeData {
+  width: number;
+  height: number;
+  wWidth: number;
+  wHeight: number;
+  ratio: number;
+  pixelRatio: number;
+}
+
+class X {
+  #config: XConfig;
+  #postprocessing: PostProcessing | null = null;
+  #resizeObserver?: ResizeObserver;
+  #intersectionObserver?: IntersectionObserver;
+  #resizeTimer?: number;
+  #animationFrameId: number = 0;
+  #clock: Clock = new Clock();
+  #animationState = { elapsed: 0, delta: 0 };
+  #isAnimating: boolean = false;
+  #isVisible: boolean = false;
+
+  canvas!: HTMLCanvasElement;
+  camera!: PerspectiveCamera;
+  cameraMinAspect?: number;
+  cameraMaxAspect?: number;
+  cameraFov!: number;
+  maxPixelRatio?: number;
+  minPixelRatio?: number;
+  scene!: Scene;
+  renderer!: WebGLRenderer;
+  size: SizeData = {
+    width: 0,
+    height: 0,
+    wWidth: 0,
+    wHeight: 0,
+    ratio: 0,
+    pixelRatio: 0
+  };
+
+  render: () => void = this.#render.bind(this);
+  onBeforeRender: (state: { elapsed: number; delta: number }) => void = () => {};
+  onAfterRender: (state: { elapsed: number; delta: number }) => void = () => {};
+  onAfterResize: (size: SizeData) => void = () => {};
+  isDisposed: boolean = false;
+
+  constructor(config: XConfig) {
+    this.#config = { ...config };
+    this.#initCamera();
+    this.#initScene();
+    this.#initRenderer();
+    this.resize();
+    this.#initObservers();
+  }
+
+  #initCamera() {
+    this.camera = new PerspectiveCamera();
+    this.cameraFov = this.camera.fov;
+  }
+
+  #initScene() {
+    this.scene = new Scene();
+  }
+
+  #initRenderer() {
+    if (this.#config.canvas) {
+      this.canvas = this.#config.canvas;
+    } else if (this.#config.id) {
+      const elem = document.getElementById(this.#config.id);
+      if (elem instanceof HTMLCanvasElement) {
+        this.canvas = elem;
+      } else {
+        console.error('Three: Missing canvas or id parameter');
+      }
+    } else {
+      console.error('Three: Missing canvas or id parameter');
+    }
+    this.canvas!.style.display = 'block';
+    const rendererOptions: WebGLRendererParameters = {
+      canvas: this.canvas,
+      powerPreference: 'high-performance',
+      ...(this.#config.rendererOptions ?? {})
+    };
+    this.renderer = new WebGLRenderer(rendererOptions);
+    this.renderer.outputColorSpace = SRGBColorSpace;
+  }
+
+  #initObservers() {
+    if (!(this.#config.size instanceof Object)) {
+      window.addEventListener('resize', this.#onResize.bind(this));
+      if (this.#config.size === 'parent' && this.canvas.parentNode) {
+        this.#resizeObserver = new ResizeObserver(this.#onResize.bind(this));
+        this.#resizeObserver.observe(this.canvas.parentNode as Element);
+      }
+    }
+    this.#intersectionObserver = new IntersectionObserver(this.#onIntersection.bind(this), {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0
+    });
+    this.#intersectionObserver.observe(this.canvas);
+    document.addEventListener('visibilitychange', this.#onVisibilityChange.bind(this));
+  }
+
+  #onResize() {
+    if (this.#resizeTimer) clearTimeout(this.#resizeTimer);
+    this.#resizeTimer = window.setTimeout(this.resize.bind(this), 100);
+  }
+
+  resize() {
+    let w: number, h: number;
+    if (this.#config.size instanceof Object) {
+      w = this.#config.size.width;
+      h = this.#config.size.height;
+    } else if (this.#config.size === 'parent' && this.canvas.parentNode) {
+      w = (this.canvas.parentNode as HTMLElement).offsetWidth;
+      h = (this.canvas.parentNode as HTMLElement).offsetHeight;
+    } else {
+      w = window.innerWidth;
+      h = window.innerHeight;
+    }
+    this.size.width = w;
+    this.size.height = h;
+    this.size.ratio = w / h;
+    this.#updateCamera();
+    this.#updateRenderer();
+    this.onAfterResize(this.size);
+  }
+
+  #updateCamera() {
+    this.camera.aspect = this.size.width / this.size.height;
+    if (this.camera.isPerspectiveCamera && this.cameraFov) {
+      if (this.cameraMinAspect && this.camera.aspect < this.cameraMinAspect) {
+        this.#adjustFov(this.cameraMinAspect);
+      } else if (this.cameraMaxAspect && this.camera.aspect > this.cameraMaxAspect) {
+        this.#adjustFov(this.cameraMaxAspect);
+      } else {
+        this.camera.fov = this.cameraFov;
+      }
+    }
+    this.camera.updateProjectionMatrix();
+    this.updateWorldSize();
+  }
+
+  #adjustFov(aspect: number) {
+    const tanFov = Math.tan(MathUtils.degToRad(this.cameraFov / 2));
+    const newTan = tanFov / (this.camera.aspect / aspect);
+    this.camera.fov = 2 * MathUtils.radToDeg(Math.atan(newTan));
+  }
+
+  updateWorldSize() {
+    if (this.camera.isPerspectiveCamera) {
+      const fovRad = (this.camera.fov * Math.PI) / 180;
+      this.size.wHeight = 2 * Math.tan(fovRad / 2) * this.camera.position.length();
+      this.size.wWidth = this.size.wHeight * this.camera.aspect;
+    } else {
+      const cam = this.camera as unknown as {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        isOrthographicCamera: boolean;
+      };
+      if (cam.isOrthographicCamera) {
+        this.size.wHeight = cam.top - cam.bottom;
+        this.size.wWidth = cam.right - cam.left;
+      }
+    }
+  }
+
+  #updateRenderer() {
+    this.renderer.setSize(this.size.width, this.size.height);
+    this.#postprocessing?.setSize(this.size.width, this.size.height);
+    let pr = window.devicePixelRatio;
+    if (this.maxPixelRatio && pr > this.maxPixelRatio) {
+      pr = this.maxPixelRatio;
+    } else if (this.minPixelRatio && pr < this.minPixelRatio) {
+      pr = this.minPixelRatio;
+    }
+    this.renderer.setPixelRatio(pr);
+    this.size.pixelRatio = pr;
+  }
+
+  get postprocessing() {
+    return this.#postprocessing;
+  }
+  set postprocessing(value: PostProcessing | null) {
+    this.#postprocessing = value;
+    if (value) {
+      this.render = value.render.bind(value);
+    } else {
+      this.render = this.#render.bind(this);
+    }
+  }
+
+  #onIntersection(entries: IntersectionObserverEntry[]) {
+    this.#isAnimating = entries[0].isIntersecting;
+    if (this.#isAnimating) {
+      this.#startAnimation();
+    } else {
+      this.#stopAnimation();
+    }
+  }
+
+  #onVisibilityChange() {
+    if (this.#isAnimating) {
+      if (document.hidden) {
+        this.#stopAnimation();
+      } else {
+        this.#startAnimation();
+      }
+    }
+  }
+
+  #startAnimation() {
+    if (this.#isVisible) return;
+    const animateFrame = () => {
+      this.#animationFrameId = requestAnimationFrame(animateFrame);
+      this.#animationState.delta = this.#clock.getDelta();
+      this.#animationState.elapsed += this.#animationState.delta;
+      this.onBeforeRender(this.#animationState);
+      this.render();
+      this.onAfterRender(this.#animationState);
+    };
+    this.#isVisible = true;
+    this.#clock.start();
+    animateFrame();
+  }
+
+  #stopAnimation() {
+    if (this.#isVisible) {
+      cancelAnimationFrame(this.#animationFrameId);
+      this.#isVisible = false;
+      this.#clock.stop();
+    }
+  }
+
+  #render() {
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  clear() {
+    this.scene.traverse(obj => {
+      const mesh = obj as unknown as {
+        isMesh?: boolean;
+        material?: {
+          dispose: () => void;
+          [key: string]: unknown;
+        };
+        geometry?: {
+          dispose: () => void;
+        };
+      };
+      if (mesh.isMesh && mesh.material && mesh.geometry) {
+        if (typeof mesh.material === 'object' && mesh.material !== null) {
+          Object.keys(mesh.material).forEach(key => {
+            const matProp = mesh.material![key] as unknown;
+            if (matProp && typeof matProp === 'object' && matProp !== null) {
+              const disposable = matProp as { dispose?: () => void };
+              if (typeof disposable.dispose === 'function') {
+                disposable.dispose();
+              }
+            }
+          });
+          mesh.material.dispose();
+          mesh.geometry.dispose();
+        }
+      }
+    });
+    this.scene.clear();
+  }
+
+  dispose() {
+    this.#onResizeCleanup();
+    this.#stopAnimation();
+    this.clear();
+    this.#postprocessing?.dispose();
+    this.renderer.dispose();
+    this.isDisposed = true;
+  }
+
+  #onResizeCleanup() {
+    window.removeEventListener('resize', this.#onResize.bind(this));
+    this.#resizeObserver?.disconnect();
+    this.#intersectionObserver?.disconnect();
+    document.removeEventListener('visibilitychange', this.#onVisibilityChange.bind(this));
+  }
+}
+
+interface WConfig {
+  count: number;
+  maxX: number;
+  maxY: number;
+  maxZ: number;
+  maxSize: number;
+  minSize: number;
+  size0: number;
+  gravity: number;
+  friction: number;
+  wallBounce: number;
+  maxVelocity: number;
+  controlSphere0?: boolean;
+  followCursor?: boolean;
+}
+
+class W {
+  config: WConfig;
+  positionData: Float32Array;
+  velocityData: Float32Array;
+  sizeData: Float32Array;
+  center: Vector3 = new Vector3();
+
+  constructor(config: WConfig) {
+    this.config = config;
+    this.positionData = new Float32Array(3 * config.count).fill(0);
+    this.velocityData = new Float32Array(3 * config.count).fill(0);
+    this.sizeData = new Float32Array(config.count).fill(1);
+    this.center = new Vector3();
+    this.#initializePositions();
+    this.setSizes();
+  }
+
+  #initializePositions() {
+    const { config, positionData } = this;
+    this.center.toArray(positionData, 0);
+    for (let i = 1; i < config.count; i++) {
+      const idx = 3 * i;
+      positionData[idx] = MathUtils.randFloatSpread(2 * config.maxX);
+      positionData[idx + 1] = MathUtils.randFloatSpread(2 * config.maxY);
+      positionData[idx + 2] = MathUtils.randFloatSpread(2 * config.maxZ);
+    }
+  }
+
+  setSizes() {
+    const { config, sizeData } = this;
+    sizeData[0] = config.size0;
+    for (let i = 1; i < config.count; i++) {
+      sizeData[i] = MathUtils.randFloat(config.minSize, config.maxSize);
+    }
+  }
+
+  update(deltaInfo: { delta: number }) {
+    const { config, center, positionData, sizeData, velocityData } = this;
+    let startIdx = 0;
+    if (config.controlSphere0) {
+      startIdx = 1;
+      const firstVec = new Vector3().fromArray(positionData, 0);
+      firstVec.lerp(center, 0.1).toArray(positionData, 0);
+      new Vector3(0, 0, 0).toArray(velocityData, 0);
+    }
+    for (let idx = startIdx; idx < config.count; idx++) {
+      const base = 3 * idx;
+      const pos = new Vector3().fromArray(positionData, base);
+      const vel = new Vector3().fromArray(velocityData, base);
+      vel.y -= deltaInfo.delta * config.gravity * sizeData[idx];
+      vel.multiplyScalar(config.friction);
+      vel.clampLength(0, config.maxVelocity);
+      pos.add(vel);
+      pos.toArray(positionData, base);
+      vel.toArray(velocityData, base);
+    }
+    for (let idx = startIdx; idx < config.count; idx++) {
+      const base = 3 * idx;
+      const pos = new Vector3().fromArray(positionData, base);
+      const vel = new Vector3().fromArray(velocityData, base);
+      const radius = sizeData[idx];
+      for (let jdx = idx + 1; jdx < config.count; jdx++) {
+        const otherBase = 3 * jdx;
+        const otherPos = new Vector3().fromArray(positionData, otherBase);
+        const otherVel = new Vector3().fromArray(velocityData, otherBase);
+        const diff = new Vector3().copy(otherPos).sub(pos);
+        const dist = diff.length();
+        const sumRadius = radius + sizeData[jdx];
+        if (dist < sumRadius) {
+          const overlap = sumRadius - dist;
+          const correction = diff.normalize().multiplyScalar(0.5 * overlap);
+          const velCorrection = correction.clone().multiplyScalar(Math.max(vel.length(), 1));
+          pos.sub(correction);
+          vel.sub(velCorrection);
+          pos.toArray(positionData, base);
+          vel.toArray(velocityData, base);
+          otherPos.add(correction);
+          otherVel.add(correction.clone().multiplyScalar(Math.max(otherVel.length(), 1)));
+          otherPos.toArray(positionData, otherBase);
+          otherVel.toArray(velocityData, otherBase);
+        }
+      }
+      if (config.controlSphere0) {
+        const diff = new Vector3().copy(new Vector3().fromArray(positionData, 0)).sub(pos);
+        const d = diff.length();
+        const sumRadius0 = radius + sizeData[0];
+        if (d < sumRadius0) {
+          const correction = diff.normalize().multiplyScalar(sumRadius0 - d);
+          const velCorrection = correction.clone().multiplyScalar(Math.max(vel.length(), 2));
+          pos.sub(correction);
+          vel.sub(velCorrection);
+        }
+      }
+      if (Math.abs(pos.x) + radius > config.maxX) {
+        pos.x = Math.sign(pos.x) * (config.maxX - radius);
+        vel.x = -vel.x * config.wallBounce;
+      }
+      if (config.gravity === 0) {
+        if (Math.abs(pos.y) + radius > config.maxY) {
+          pos.y = Math.sign(pos.y) * (config.maxY - radius);
+          vel.y = -vel.y * config.wallBounce;
+        }
+      } else if (pos.y - radius < -config.maxY) {
+        pos.y = -config.maxY + radius;
+        vel.y = -vel.y * config.wallBounce;
+      }
+      const maxBoundary = Math.max(config.maxZ, config.maxSize);
+      if (Math.abs(pos.z) + radius > maxBoundary) {
+        pos.z = Math.sign(pos.z) * (config.maxZ - radius);
+        vel.z = -vel.z * config.wallBounce;
+      }
+      pos.toArray(positionData, base);
+      vel.toArray(velocityData, base);
+    }
+  }
+}
+
+interface ShaderUniforms {
+  [key: string]: { value: number | Vector2 | Vector3 | Color | boolean };
+}
+
+interface ShaderObject {
+  uniforms: ShaderUniforms;
+  fragmentShader: string;
+  vertexShader: string;
+}
+
+interface UniformValue {
+  value: number | Vector2 | Vector3 | Color | boolean;
+}
+
+class Y extends MeshPhysicalMaterial {
+  uniforms: { [key: string]: UniformValue } = {
+    thicknessDistortion: { value: 0.1 },
+    thicknessAmbient: { value: 0 },
+    thicknessAttenuation: { value: 0.1 },
+    thicknessPower: { value: 2 },
+    thicknessScale: { value: 10 }
+  };
+
+  declare defines: { [key: string]: string };
+
+  constructor(params: MaterialParams) {
+    super(params);
+    this.defines = { USE_UV: '' };
+    this.onBeforeCompile = shader => {
+      Object.assign(shader.uniforms, this.uniforms);
+      shader.fragmentShader =
+        `
+        uniform float thicknessPower;
+        uniform float thicknessScale;
+        uniform float thicknessDistortion;
+        uniform float thicknessAmbient;
+        uniform float thicknessAttenuation;
+        ` + shader.fragmentShader;
+      shader.fragmentShader = shader.fragmentShader.replace(
+        'void main() {',
+        `
+        void RE_Direct_Scattering(const in IncidentLight directLight, const in vec2 uv, const in vec3 geometryPosition, const in vec3 geometryNormal, const in vec3 geometryViewDir, const in vec3 geometryClearcoatNormal, inout ReflectedLight reflectedLight) {
+          vec3 scatteringHalf = normalize(directLight.direction + (geometryNormal * thicknessDistortion));
+          float scatteringDot = pow(saturate(dot(geometryViewDir, -scatteringHalf)), thicknessPower) * thicknessScale;
+          #ifdef USE_COLOR
+            vec3 scatteringIllu = (scatteringDot + thicknessAmbient) * vColor;
+          #else
+            vec3 scatteringIllu = (scatteringDot + thicknessAmbient) * diffuse;
+          #endif
+          reflectedLight.directDiffuse += scatteringIllu * thicknessAttenuation * directLight.color;
+        }
+
+        void main() {
+        `
+      );
+      const lightsChunk = ShaderChunk.lights_fragment_begin.replace(
+        /RE_Direct\( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight \);/g,
+        `
+          RE_Direct( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );
+          RE_Direct_Scattering(directLight, vUv, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, reflectedLight);
+        `
+      );
+      shader.fragmentShader = shader.fragmentShader.replace('#include <lights_fragment_begin>', lightsChunk);
+      if (this.onBeforeCompile2) this.onBeforeCompile2(shader);
+    };
+  }
+  onBeforeCompile2?: (shader: ShaderObject) => void;
+}
+
+const XConfig = {
+  count: 200,
+  colors: [0, 0, 0],
+  ambientColor: 0xffffff,
+  ambientIntensity: 1,
+  lightIntensity: 200,
+  materialParams: {
+    metalness: 0.5,
+    roughness: 0.5,
+    clearcoat: 1,
+    clearcoatRoughness: 0.15
+  },
+  minSize: 0.5,
+  maxSize: 1,
+  size0: 1,
+  gravity: 0.5,
+  friction: 0.9975,
+  wallBounce: 0.95,
+  maxVelocity: 0.15,
+  maxX: 5,
+  maxY: 5,
+  maxZ: 2,
+  controlSphere0: false,
+  followCursor: true
+};
+
+const U = new Object3D();
+
+let globalPointerActive = false;
+const pointerPosition = new Vector2();
+
+interface PointerData {
+  position: Vector2;
+  nPosition: Vector2;
+  hover: boolean;
+  onEnter: (data: PointerData) => void;
+  onMove: (data: PointerData) => void;
+  onClick: (data: PointerData) => void;
+  onLeave: (data: PointerData) => void;
+  dispose?: () => void;
+}
+
+const pointerMap = new Map<HTMLElement, PointerData>();
+
+function createPointerData(options: Partial<PointerData> & { domElement: HTMLElement }): PointerData {
+  const defaultData: PointerData = {
+    position: new Vector2(),
+    nPosition: new Vector2(),
+    hover: false,
+    onEnter: () => {},
+    onMove: () => {},
+    onClick: () => {},
+    onLeave: () => {},
+    ...options
+  };
+  if (!pointerMap.has(options.domElement)) {
+    pointerMap.set(options.domElement, defaultData);
+    if (!globalPointerActive) {
+      document.body.addEventListener('pointermove', onPointerMove as EventListener);
+      document.body.addEventListener('pointerleave', onPointerLeave as EventListener);
+      document.body.addEventListener('click', onPointerClick as EventListener);
+      globalPointerActive = true;
+    }
+  }
+  defaultData.dispose = () => {
+    pointerMap.delete(options.domElement);
+    if (pointerMap.size === 0) {
+      document.body.removeEventListener('pointermove', onPointerMove as EventListener);
+      document.body.removeEventListener('pointerleave', onPointerLeave as EventListener);
+      document.body.removeEventListener('click', onPointerClick as EventListener);
+      globalPointerActive = false;
+    }
+  };
+  return defaultData;
+}
+
+function onPointerMove(e: PointerEvent) {
+  pointerPosition.set(e.clientX, e.clientY);
+  for (const [elem, data] of pointerMap) {
+    const rect = elem.getBoundingClientRect();
+    if (isInside(rect)) {
+      updatePointerData(data, rect);
+      if (!data.hover) {
+        data.hover = true;
+        data.onEnter(data);
+      }
+      data.onMove(data);
+    } else if (data.hover) {
+      data.hover = false;
+      data.onLeave(data);
+    }
+  }
+}
+
+function onPointerClick(e: PointerEvent) {
+  pointerPosition.set(e.clientX, e.clientY);
+  for (const [elem, data] of pointerMap) {
+    const rect = elem.getBoundingClientRect();
+    updatePointerData(data, rect);
+    if (isInside(rect)) data.onClick(data);
+  }
+}
+
+function onPointerLeave() {
+  for (const data of pointerMap.values()) {
+    if (data.hover) {
+      data.hover = false;
+      data.onLeave(data);
+    }
+  }
+}
+
+function updatePointerData(data: PointerData, rect: DOMRect) {
+  data.position.set(pointerPosition.x - rect.left, pointerPosition.y - rect.top);
+  data.nPosition.set((data.position.x / rect.width) * 2 - 1, (-data.position.y / rect.height) * 2 + 1);
+}
+
+function isInside(rect: DOMRect) {
+  return (
+    pointerPosition.x >= rect.left &&
+    pointerPosition.x <= rect.left + rect.width &&
+    pointerPosition.y >= rect.top &&
+    pointerPosition.y <= rect.top + rect.height
+  );
+}
+
+class Z extends InstancedMesh {
+  config: typeof XConfig;
+  physics: W;
+  ambientLight: AmbientLight | undefined;
+  light: PointLight | undefined;
+
+  constructor(renderer: WebGLRenderer, params: Partial<typeof XConfig> = {}) {
+    const config = { ...XConfig, ...params };
+    const roomEnv = new RoomEnvironment();
+    const pmrem = new PMREMGenerator(renderer);
+    const envTexture = pmrem.fromScene(roomEnv).texture;
+    const geometry = new SphereGeometry();
+    const material = new Y({ envMap: envTexture, ...config.materialParams });
+    material.envMapRotation.x = -Math.PI / 2;
+    super(geometry, material, config.count);
+    this.config = config;
+    this.physics = new W(config);
+    this.#setupLights();
+    this.setColors(config.colors);
+  }
+
+  #setupLights() {
+    this.ambientLight = new AmbientLight(this.config.ambientColor, this.config.ambientIntensity);
+    this.add(this.ambientLight);
+    this.light = new PointLight(this.config.colors[0], this.config.lightIntensity);
+    this.add(this.light);
+  }
+
+  setColors(colors: number[]) {
+    if (Array.isArray(colors) && colors.length > 1) {
+      const colorUtils = (function (colorsArr: number[]) {
+        let baseColors: number[] = colorsArr;
+        let colorObjects: Color[] = [];
+        baseColors.forEach(col => {
+          colorObjects.push(new Color(col));
+        });
+        return {
+          setColors: (cols: number[]) => {
+            baseColors = cols;
+            colorObjects = [];
+            baseColors.forEach(col => {
+              colorObjects.push(new Color(col));
+            });
+          },
+          getColorAt: (ratio: number, out: Color = new Color()) => {
+            const clamped = Math.max(0, Math.min(1, ratio));
+            const scaled = clamped * (baseColors.length - 1);
+            const idx = Math.floor(scaled);
+            const start = colorObjects[idx];
+            if (idx >= baseColors.length - 1) return start.clone();
+            const alpha = scaled - idx;
+            const end = colorObjects[idx + 1];
+            out.r = start.r + alpha * (end.r - start.r);
+            out.g = start.g + alpha * (end.g - start.g);
+            out.b = start.b + alpha * (end.b - start.b);
+            return out;
+          }
+        };
+      })(colors);
+      for (let idx = 0; idx < this.count; idx++) {
+        this.setColorAt(idx, colorUtils.getColorAt(idx / this.count));
+        if (idx === 0) {
+          this.light!.color.copy(colorUtils.getColorAt(idx / this.count));
+        }
+      }
+
+      if (!this.instanceColor) return;
+      this.instanceColor.needsUpdate = true;
+    }
+  }
+
+  update(deltaInfo: { delta: number }) {
+    this.physics.update(deltaInfo);
+    for (let idx = 0; idx < this.count; idx++) {
+      U.position.fromArray(this.physics.positionData, 3 * idx);
+      if (idx === 0 && this.config.followCursor === false) {
+        U.scale.setScalar(0);
+      } else {
+        U.scale.setScalar(this.physics.sizeData[idx]);
+      }
+      U.updateMatrix();
+      this.setMatrixAt(idx, U.matrix);
+      if (idx === 0) this.light!.position.copy(U.position);
+    }
+    this.instanceMatrix.needsUpdate = true;
+  }
+}
+
+interface CreateBallpitReturn {
+  three: X;
+  spheres: Z;
+  setCount: (count: number) => void;
+  togglePause: () => void;
+  dispose: () => void;
+}
+
+function createBallpit(canvas: HTMLCanvasElement, config: Partial<typeof XConfig> = {}): CreateBallpitReturn {
+  const threeInstance = new X({
+    canvas,
+    size: 'parent',
+    rendererOptions: { antialias: true, alpha: true }
+  });
+  let spheres: Z;
+  threeInstance.renderer.toneMapping = ACESFilmicToneMapping;
+  threeInstance.camera.position.set(0, 0, 20);
+  threeInstance.camera.lookAt(0, 0, 0);
+  threeInstance.cameraMaxAspect = 1.5;
+  threeInstance.resize();
+  initialize(config);
+  const raycaster = new Raycaster();
+  const plane = new Plane(new Vector3(0, 0, 1), 0);
+  const intersectionPoint = new Vector3();
+  let isPaused = false;
+  const pointerData = createPointerData({
+    domElement: canvas,
+    onMove() {
+      raycaster.setFromCamera(pointerData.nPosition, threeInstance.camera);
+      threeInstance.camera.getWorldDirection(plane.normal);
+      raycaster.ray.intersectPlane(plane, intersectionPoint);
+      spheres.physics.center.copy(intersectionPoint);
+      spheres.config.controlSphere0 = true;
+    },
+    onLeave() {
+      spheres.config.controlSphere0 = false;
+    }
+  });
+  function initialize(cfg: Partial<typeof XConfig>) {
+    if (spheres) {
+      threeInstance.clear();
+      threeInstance.scene.remove(spheres);
+    }
+    spheres = new Z(threeInstance.renderer, cfg);
+    threeInstance.scene.add(spheres);
+  }
+  threeInstance.onBeforeRender = deltaInfo => {
+    if (!isPaused) spheres.update(deltaInfo);
+  };
+  threeInstance.onAfterResize = size => {
+    spheres.config.maxX = size.wWidth / 2;
+    spheres.config.maxY = size.wHeight / 2;
+  };
+  return {
+    three: threeInstance,
+    get spheres() {
+      return spheres;
+    },
+    setCount(count: number) {
+      initialize({ ...spheres.config, count });
+    },
+    togglePause() {
+      isPaused = !isPaused;
+    },
+    dispose() {
+      pointerData.dispose?.();
+      threeInstance.dispose();
+    }
+  };
+}
+
+onMounted(() => {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  const { followCursor, ...restProps } = props;
+
+  const safeMaterialParams = {
+    metalness: props.materialParams.metalness ?? 0.5,
+    roughness: props.materialParams.roughness ?? 0.5,
+    clearcoat: props.materialParams.clearcoat ?? 1,
+    clearcoatRoughness: props.materialParams.clearcoatRoughness ?? 0.15
+  };
+
+  spheresInstanceRef.value = createBallpit(canvas, {
+    ...restProps,
+    followCursor,
+    materialParams: safeMaterialParams
+  });
+});
+
+onUnmounted(() => {
+  if (spheresInstanceRef.value) {
+    spheresInstanceRef.value.dispose();
+  }
+});
+</script>
+
+<template>
+  <canvas ref="canvasRef" :class="['w-full', 'h-full', props.className]" />
+</template>

src/content/Backgrounds/Orb/Orb.vue

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { Renderer, Program, Mesh, Triangle, Vec3 } from 'ogl';
+
+interface OrbProps {
+  hue?: number;
+  hoverIntensity?: number;
+  rotateOnHover?: boolean;
+  forceHoverState?: boolean;
+}
+
+const props = withDefaults(defineProps<OrbProps>(), {
+  hue: 0,
+  hoverIntensity: 0.2,
+  rotateOnHover: true,
+  forceHoverState: false
+});
+
+const ctnDom = ref<HTMLDivElement | null>(null);
+
+const vert = /* glsl */ `
+    precision highp float;
+    attribute vec2 position;
+    attribute vec2 uv;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = vec4(position, 0.0, 1.0);
+    }
+  `;
+
+const frag = /* glsl */ `
+    precision highp float;
+
+    uniform float iTime;
+    uniform vec3 iResolution;
+    uniform float hue;
+    uniform float hover;
+    uniform float rot;
+    uniform float hoverIntensity;
+    varying vec2 vUv;
+
+    vec3 rgb2yiq(vec3 c) {
+      float y = dot(c, vec3(0.299, 0.587, 0.114));
+      float i = dot(c, vec3(0.596, -0.274, -0.322));
+      float q = dot(c, vec3(0.211, -0.523, 0.312));
+      return vec3(y, i, q);
+    }
+    
+    vec3 yiq2rgb(vec3 c) {
+      float r = c.x + 0.956 * c.y + 0.621 * c.z;
+      float g = c.x - 0.272 * c.y - 0.647 * c.z;
+      float b = c.x - 1.106 * c.y + 1.703 * c.z;
+      return vec3(r, g, b);
+    }
+    
+    vec3 adjustHue(vec3 color, float hueDeg) {
+      float hueRad = hueDeg * 3.14159265 / 180.0;
+      vec3 yiq = rgb2yiq(color);
+      float cosA = cos(hueRad);
+      float sinA = sin(hueRad);
+      float i = yiq.y * cosA - yiq.z * sinA;
+      float q = yiq.y * sinA + yiq.z * cosA;
+      yiq.y = i;
+      yiq.z = q;
+      return yiq2rgb(yiq);
+    }
+    
+    vec3 hash33(vec3 p3) {
+      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
+      p3 += dot(p3, p3.yxz + 19.19);
+      return -1.0 + 2.0 * fract(vec3(
+        p3.x + p3.y,
+        p3.x + p3.z,
+        p3.y + p3.z
+      ) * p3.zyx);
+    }
+    
+    float snoise3(vec3 p) {
+      const float K1 = 0.333333333;
+      const float K2 = 0.166666667;
+      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
+      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
+      vec3 e = step(vec3(0.0), d0 - d0.yzx);
+      vec3 i1 = e * (1.0 - e.zxy);
+      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
+      vec3 d1 = d0 - (i1 - K2);
+      vec3 d2 = d0 - (i2 - K1);
+      vec3 d3 = d0 - 0.5;
+      vec4 h = max(0.6 - vec4(
+        dot(d0, d0),
+        dot(d1, d1),
+        dot(d2, d2),
+        dot(d3, d3)
+      ), 0.0);
+      vec4 n = h * h * h * h * vec4(
+        dot(d0, hash33(i)),
+        dot(d1, hash33(i + i1)),
+        dot(d2, hash33(i + i2)),
+        dot(d3, hash33(i + 1.0))
+      );
+      return dot(vec4(31.316), n);
+    }
+    
+    vec4 extractAlpha(vec3 colorIn) {
+      float a = max(max(colorIn.r, colorIn.g), colorIn.b);
+      return vec4(colorIn.rgb / (a + 1e-5), a);
+    }
+    
+    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+    const float innerRadius = 0.6;
+    const float noiseScale = 0.65;
+    
+    float light1(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * attenuation);
+    }
+    
+    float light2(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * dist * attenuation);
+    }
+    
+    vec4 draw(vec2 uv) {
+      vec3 color1 = adjustHue(baseColor1, hue);
+      vec3 color2 = adjustHue(baseColor2, hue);
+      vec3 color3 = adjustHue(baseColor3, hue);
+      
+      float ang = atan(uv.y, uv.x);
+      float len = length(uv);
+      float invLen = len > 0.0 ? 1.0 / len : 0.0;
+      
+      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
+      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
+      float d0 = distance(uv, (r0 * invLen) * uv);
+      float v0 = light1(1.0, 10.0, d0);
+      v0 *= smoothstep(r0 * 1.05, r0, len);
+      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
+      
+      float a = iTime * -1.0;
+      vec2 pos = vec2(cos(a), sin(a)) * r0;
+      float d = distance(uv, pos);
+      float v1 = light2(1.5, 5.0, d);
+      v1 *= light1(1.0, 50.0, d0);
+      
+      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
+      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
+      
+      vec3 col = mix(color1, color2, cl);
+      col = mix(color3, col, v0);
+      col = (col + v1) * v2 * v3;
+      col = clamp(col, 0.0, 1.0);
+      
+      return extractAlpha(col);
+    }
+    
+    vec4 mainImage(vec2 fragCoord) {
+      vec2 center = iResolution.xy * 0.5;
+      float size = min(iResolution.x, iResolution.y);
+      vec2 uv = (fragCoord - center) / size * 2.0;
+      
+      float angle = rot;
+      float s = sin(angle);
+      float c = cos(angle);
+      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
+      
+      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+      
+      return draw(uv);
+    }
+    
+    void main() {
+      vec2 fragCoord = vUv * iResolution.xy;
+      vec4 col = mainImage(fragCoord);
+      gl_FragColor = vec4(col.rgb * col.a, col.a);
+    }
+  `;
+
+let cleanupAnimation: (() => void) | null = null;
+
+const setupAnimation = () => {
+  const container = ctnDom.value;
+  if (!container) return;
+
+  const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
+  const gl = renderer.gl;
+  gl.clearColor(0, 0, 0, 0);
+  container.appendChild(gl.canvas);
+
+  const geometry = new Triangle(gl);
+  const program = new Program(gl, {
+    vertex: vert,
+    fragment: frag,
+    uniforms: {
+      iTime: { value: 0 },
+      iResolution: {
+        value: new Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height)
+      },
+      hue: { value: props.hue },
+      hover: { value: 0 },
+      rot: { value: 0 },
+      hoverIntensity: { value: props.hoverIntensity }
+    }
+  });
+
+  const mesh = new Mesh(gl, { geometry, program });
+
+  function resize() {
+    if (!container) return;
+    const dpr = window.devicePixelRatio || 1;
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+    renderer.setSize(width * dpr, height * dpr);
+    gl.canvas.style.width = width + 'px';
+    gl.canvas.style.height = height + 'px';
+    program.uniforms.iResolution.value.set(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height);
+  }
+  window.addEventListener('resize', resize);
+  resize();
+
+  let targetHover = 0;
+  let lastTime = 0;
+  let currentRot = 0;
+  const rotationSpeed = 0.3;
+
+  const handleMouseMove = (e: MouseEvent) => {
+    const rect = container.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const width = rect.width;
+    const height = rect.height;
+    const size = Math.min(width, height);
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const uvX = ((x - centerX) / size) * 2.0;
+    const uvY = ((y - centerY) / size) * 2.0;
+
+    if (Math.sqrt(uvX * uvX + uvY * uvY) < 0.8) {
+      targetHover = 1;
+    } else {
+      targetHover = 0;
+    }
+  };
+
+  const handleMouseLeave = () => {
+    targetHover = 0;
+  };
+
+  container.addEventListener('mousemove', handleMouseMove);
+  container.addEventListener('mouseleave', handleMouseLeave);
+
+  let rafId: number;
+  const update = (t: number) => {
+    rafId = requestAnimationFrame(update);
+    const dt = (t - lastTime) * 0.001;
+    lastTime = t;
+    program.uniforms.iTime.value = t * 0.001;
+    program.uniforms.hue.value = props.hue;
+    program.uniforms.hoverIntensity.value = props.hoverIntensity;
+
+    const effectiveHover = props.forceHoverState ? 1 : targetHover;
+    program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * 0.1;
+
+    if (props.rotateOnHover && effectiveHover > 0.5) {
+      currentRot += dt * rotationSpeed;
+    }
+    program.uniforms.rot.value = currentRot;
+
+    renderer.render({ scene: mesh });
+  };
+  rafId = requestAnimationFrame(update);
+
+  cleanupAnimation = () => {
+    cancelAnimationFrame(rafId);
+    window.removeEventListener('resize', resize);
+    container.removeEventListener('mousemove', handleMouseMove);
+    container.removeEventListener('mouseleave', handleMouseLeave);
+    container.removeChild(gl.canvas);
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
+  };
+};
+
+onMounted(() => {
+  setupAnimation();
+});
+
+onUnmounted(() => {
+  if (cleanupAnimation) {
+    cleanupAnimation();
+    cleanupAnimation = null;
+  }
+});
+
+watch(
+  () => props,
+  () => {
+    if (cleanupAnimation) {
+      cleanupAnimation();
+      cleanupAnimation = null;
+    }
+    setupAnimation();
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div ref="ctnDom" class="w-full h-full" />
+</template>

src/css/base.css

@@ -29,7 +29,7 @@ body {
   aspect-ratio: 1;
   font-weight: 500;
   border-radius: 0.75rem;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   width: 50px;
   position: fixed;
   right: 2.3em;

src/css/category.css

@@ -90,7 +90,7 @@
   position: relative;
   width: 100%;
   background: #0b0b0b;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   padding: 1em;
   margin-top: 1.4rem;
   border-radius: 20px;
@@ -107,7 +107,7 @@
 }
 
 div:has(> .props-table) {
-  border: 1px solid #142216;
+  border: 1px solid #333;
   border-radius: 20px;
 }
 
@@ -127,7 +127,7 @@ div:has(> .props-table) {
 .star-border-demo .inner-content {
   padding: 1em 3em;
   background-color: #0b0b0b !important;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
 }
 
 .custom-bounceCards {
@@ -204,7 +204,7 @@ div:has(> .props-table) {
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   border-radius: 10px;
   font-size: 14px;
   height: 36px;
@@ -214,7 +214,7 @@ div:has(> .props-table) {
 }
 
 .tab-header:hover {
-  background: #142216;
+  background: #222;
 }
 
 .code-example {
@@ -233,7 +233,7 @@ div:has(> .props-table) {
 .code-wrapper {
   position: relative;
   overflow: hidden;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   border-radius: 15px;
 }
 
@@ -268,7 +268,7 @@ div:has(> .props-table) {
   font-size: 14px;
   font-weight: 500;
   background-color: #0b0b0b;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   color: white;
   cursor: pointer;
   z-index: 2;
@@ -291,7 +291,7 @@ div:has(> .props-table) {
   font-style: italic;
   padding: 2rem;
   background: #0b0b0b;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   border-radius: 15px;
 }
 
@@ -344,7 +344,7 @@ div:has(> .props-table) {
   font-size: 0.75rem;
   background: #333333;
   border-radius: 10px;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   color: #fff;
   height: 2.5rem;
   padding: 0 1rem;
@@ -353,7 +353,7 @@ div:has(> .props-table) {
 }
 
 .contribute-button:hover {
-  background: #142216;
+  background: #222;
 }
 
 .contribute-separator {
@@ -364,7 +364,7 @@ div:has(> .props-table) {
 
 .contribute-container {
   background: #0b0b0b;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   border-radius: 20px;
   padding: 46px;
   margin-top: 1.4rem;
@@ -376,7 +376,7 @@ div:has(> .props-table) {
 
 .contribute-button {
   background-color: #0b0b0b !important;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   transition: 0.5s ease;
 }
 
@@ -385,7 +385,7 @@ div:has(> .props-table) {
 }
 
 .contribute-button:hover {
-  background-color: #142216 !important;
+  background-color: #222 !important;
 }
 
 .demo-details {
@@ -395,14 +395,15 @@ div:has(> .props-table) {
   gap: 0.3em;
 }
 
-.demo-details span {
+.dependency-tag {
-  background-color: #111;
+  background-color: #0b0b0b;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   white-space: nowrap;
-  color: #a7ef9e;
+  color: #27ff64;
-  border-radius: 10px;
+  border-radius: 50px;
   font-size: 0.8rem;
-  padding: 0.5em 1em;
+  font-weight: 400;
+  padding: 0.6em 1.2em;
   transition: 0.3s ease;
   user-select: none;
 }
@@ -424,7 +425,7 @@ div:has(> .props-table) {
   margin: 2em auto 2em;
   width: 100%;
   height: 1px;
-  background: linear-gradient(to right, transparent, #142216, transparent);
+  background: linear-gradient(to right, transparent, #333, transparent);
 }
 
 .cli-divider::before {
@@ -509,7 +510,7 @@ div:has(> .props-table) {
 
 .custom-spotlight-card {
   user-select: none;
-  border: 1px solid #142216 !important;
+  border: 1px solid #333 !important;
   width: 350px;
   height: 300px;
 }

src/css/sidebar.css

@@ -55,7 +55,7 @@
 }
 
 .sidebar::-webkit-scrollbar-thumb:hover {
-  background: #142216;
+  background: #222;
 }
 
 .sidebar-logo {
@@ -353,7 +353,7 @@
   padding: 0 0.5rem 0 0.75rem;
   border-radius: 50px;
   background: #0b0b0b;
-  border: 1px solid #142216;
+  border: 1px solid #333;
   font-weight: 600;
   cursor: text;
   user-select: none;
@@ -366,7 +366,7 @@
 }
 
 .search-icon {
-  color: #142216;
+  color: #333;
   font-size: 16px;
 }
 

src/demo/Backgrounds/AuroraDemo.vue

@@ -14,18 +14,14 @@
         </div>
 
         <Customize>
-          <div class="space-y-2">
+          <div class="flex gap-2">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Color Stops</h3>
-
-            <div class="flex gap-4">
             <PreviewColor
-                v-for="(color, index) in colorStops"
+              v-for="(_, index) in colorStops"
               :key="index"
               :title="`Color ${index + 1}`"
               v-model="colorStops[index]"
             />
           </div>
-          </div>
 
           <PreviewSlider title="Amplitude" v-model="amplitude" :min="0" :max="2" :step="0.1" />
 

src/demo/Backgrounds/BalatroDemo.vue

@@ -14,7 +14,7 @@
       </div>
 
       <Customize>
-        <div class="flex gap-4">
+        <div class="flex gap-2">
           <PreviewColor
             v-for="(_, index) in colorStops"
             :key="index"
@@ -23,7 +23,7 @@
           />
         </div>
 
-        <PreviewSlider title="Pixelation" v-model="pixelation" :min="0" :max="2000" :step="10" />
+        <PreviewSlider title="Pixelation" v-model="pixelation" :min="100" :max="2000" :step="10" />
 
         <PreviewSwitch title="Enable Mouse Interaction" v-model="mouseInteractionEnabled" />
 

src/demo/Backgrounds/BallpitDemo.vue

@@ -0,0 +1,220 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative p-0 h-[500px] overflow-hidden demo-container">
+        <RefreshButton @click="forceRerender" />
+        <p class="z-0 absolute font-black text-[#271e37] text-[200px]">Balls.</p>
+        <Ballpit
+          className="relative"
+          :key="key"
+          :count="count"
+          :gravity="gravity"
+          :friction="friction"
+          :wallBounce="wallBounce"
+          :followCursor="followCursor"
+          :colors="colors"
+        />
+      </div>
+
+      <Customize>
+        <PreviewSwitch title="Display Cursor" v-model="followCursor" @update:model-value="forceRerender" />
+
+        <PreviewSlider
+          title="Ball Count"
+          :min="50"
+          :max="500"
+          :step="10"
+          v-model="count"
+          @onChange="
+            (val: number) => {
+              count = val;
+            }
+          "
+        />
+
+        <PreviewSlider
+          title="Gravity"
+          :min="0.1"
+          :max="1"
+          :step="0.1"
+          v-model="gravity"
+          @onChange="
+            (val: number) => {
+              gravity = val;
+            }
+          "
+        />
+
+        <PreviewSlider
+          title="Friction"
+          :min="0.9"
+          :max="1"
+          :step="0.001"
+          v-model="friction"
+          @onChange="
+            (val: number) => {
+              friction = val;
+            }
+          "
+        />
+
+        <PreviewSlider
+          title="Wall Bounce"
+          :min="0.1"
+          :max="1"
+          :step="0.05"
+          v-model="wallBounce"
+          @onChange="
+            (val: number) => {
+              wallBounce = val;
+            }
+          "
+        />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['three']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="ballpit" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="ballpit.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { useForceRerender } from '@/composables/useForceRerender';
+import { ref, watch } from 'vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import RefreshButton from '../../components/common/RefreshButton.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import { ballpit } from '../../constants/code/Backgrounds/ballpitCode';
+import Ballpit from '../../content/Backgrounds/Ballpit/Ballpit.vue';
+
+const { rerenderKey: key, forceRerender } = useForceRerender();
+
+const count = ref(100);
+const gravity = ref(0.5);
+const friction = ref(0.9975);
+const wallBounce = ref(0.95);
+const followCursor = ref(false);
+
+const colors = [0xffffff, 0x000000, 0x27ff64];
+
+watch(
+  [count, gravity, friction, wallBounce, followCursor],
+  () => {
+    forceRerender();
+  },
+  { immediate: true }
+);
+
+const propData = [
+  {
+    name: 'count',
+    type: 'number',
+    default: '200',
+    description: 'Sets the number of balls in the ballpit.'
+  },
+  {
+    name: 'gravity',
+    type: 'number',
+    default: '0.5',
+    description: 'Controls the gravity affecting the balls.'
+  },
+  {
+    name: 'friction',
+    type: 'number',
+    default: '0.9975',
+    description: 'Sets the friction applied to the ball movement.'
+  },
+  {
+    name: 'wallBounce',
+    type: 'number',
+    default: '0.95',
+    description: 'Determines how much balls bounce off walls.'
+  },
+  {
+    name: 'followCursor',
+    type: 'boolean',
+    default: 'true',
+    description: 'Enables or disables the sphere following the cursor.'
+  },
+  {
+    name: 'colors',
+    type: 'array',
+    default: '[0, 0, 0]',
+    description: 'Defines the colors of the balls.'
+  },
+  {
+    name: 'ambientColor',
+    type: 'number',
+    default: '16777215',
+    description: 'Sets the ambient light color.'
+  },
+  {
+    name: 'ambientIntensity',
+    type: 'number',
+    default: '1',
+    description: 'Controls the intensity of ambient light.'
+  },
+  {
+    name: 'lightIntensity',
+    type: 'number',
+    default: '200',
+    description: 'Sets the intensity of the main light source.'
+  },
+  {
+    name: 'minSize',
+    type: 'number',
+    default: '0.5',
+    description: 'Specifies the minimum size of the balls.'
+  },
+  {
+    name: 'maxSize',
+    type: 'number',
+    default: '1',
+    description: 'Specifies the maximum size of the balls.'
+  },
+  {
+    name: 'size0',
+    type: 'number',
+    default: '1',
+    description: 'Initial size value for the cursor ball.'
+  },
+  {
+    name: 'maxVelocity',
+    type: 'number',
+    default: '0.15',
+    description: 'Limits the maximum velocity of the balls.'
+  },
+  {
+    name: 'maxX',
+    type: 'number',
+    default: '5',
+    description: 'Defines the maximum X-coordinate boundary.'
+  },
+  {
+    name: 'maxY',
+    type: 'number',
+    default: '5',
+    description: 'Defines the maximum Y-coordinate boundary.'
+  },
+  {
+    name: 'maxZ',
+    type: 'number',
+    default: '2',
+    description: 'Defines the maximum Z-coordinate boundary.'
+  }
+];
+</script>

src/demo/Backgrounds/OrbDemo.vue

@@ -0,0 +1,126 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative p-0 h-[500px] overflow-hidden demo-container">
+        <Orb
+          :hue="debouncedHue"
+          :hoverIntensity="debouncedHoverIntensity"
+          :rotateOnHover="rotateOnHover"
+          :forceHoverState="forceHoverState"
+        />
+        <p class="z-0 absolute mb-0 font-black text-[clamp(2rem,2vw,6rem)] mix-blend-difference">Hover.</p>
+      </div>
+
+      <Customize>
+        <PreviewSlider
+          title="Hue Shift"
+          :min="0"
+          :max="360"
+          :step="1"
+          v-model="hue"
+          @onChange="
+            (val: number) => {
+              hue = val;
+            }
+          "
+        />
+
+        <PreviewSlider
+          title="Hover Intensity"
+          :min="0"
+          :max="5"
+          :step="0.01"
+          v-model="hoverIntensity"
+          @onChange="
+            (val: number) => {
+              hoverIntensity = val;
+            }
+          "
+        />
+
+        <PreviewSwitch title="Rotate on Hover" v-model="rotateOnHover" @update:model-value="forceRerender" />
+
+        <PreviewSwitch title="Force Hover State" v-model="forceHoverState" @update:model-value="forceRerender" />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="orb" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="orb.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { useForceRerender } from '@/composables/useForceRerender';
+import { ref, watch } from 'vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import Customize from '../../components/common/Customize.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 { orb } from '../../constants/code/Backgrounds/orbCode';
+import Orb from '../../content/Backgrounds/Orb/Orb.vue';
+
+const { forceRerender } = useForceRerender();
+
+const hue = ref(100);
+const hoverIntensity = ref(0.5);
+const rotateOnHover = ref(true);
+const forceHoverState = ref(false);
+
+const debouncedHue = ref(100);
+const debouncedHoverIntensity = ref(0.5);
+
+let hueTimeout: number;
+let hoverIntensityTimeout: number;
+
+watch(hue, newValue => {
+  clearTimeout(hueTimeout);
+  hueTimeout = setTimeout(() => {
+    debouncedHue.value = newValue;
+  }, 300);
+});
+watch(hoverIntensity, newValue => {
+  clearTimeout(hoverIntensityTimeout);
+  hoverIntensityTimeout = setTimeout(() => {
+    debouncedHoverIntensity.value = newValue;
+  }, 300);
+});
+
+const propData = [
+  {
+    name: 'hue',
+    type: 'number',
+    default: '100',
+    description: 'The base hue for the orb (in degrees).'
+  },
+  {
+    name: 'hoverIntensity',
+    type: 'number',
+    default: '0.2',
+    description: 'Controls the intensity of the hover distortion effect.'
+  },
+  {
+    name: 'rotateOnHover',
+    type: 'boolean',
+    default: 'true',
+    description: 'Toggle to enable or disable continuous rotation on hover.'
+  },
+  {
+    name: 'forceHoverState',
+    type: 'boolean',
+    default: 'false',
+    description: 'Force hover animations even when the orb is not actually hovered.'
+  }
+];
+</script>

src/utils/utils.ts

@@ -40,7 +40,7 @@ export const customToastStyles = {
   message: {
     style: {
       borderRadius: '10px',
-      border: '1px solid #142216',
+      border: '1px solid #333',
       backgroundColor: '#0b0b0b'
     }
   },