From 18d561ea6f333c057eff53e33d2c52d01d037287 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Wed, 21 Jan 2026 16:08:55 +0530
Subject: [PATCH] [ FIX ] : ASCIIText Naming & Registry

---
 public/r/ASCIIText.json                       |  2 +-
 public/r/Ballpit.json                         |  2 +-
 public/r/ClickSpark.json                      |  2 +-
 public/r/CountUp.json                         |  2 +-
 public/r/Cubes.json                           |  2 +-
 public/r/DecryptedText.json                   |  2 +-
 public/r/Dock.json                            |  2 +-
 public/r/InfiniteMenu.json                    |  2 +-
 public/r/InfiniteScroll.json                  |  2 +-
 public/r/LetterGlitch.json                    |  2 +-
 public/r/MagicBento.json                      |  2 +-
 public/r/MetallicPaint.json                   |  2 +-
 public/r/PixelBlast.json                      |  2 +-
 public/r/PixelSnow.json                       |  1 +
 public/r/PixelTrail.json                      |  1 +
 public/r/RotatingText.json                    |  2 +-
 public/r/Shuffle.json                         |  1 +
 public/r/StickerPeel.json                     |  2 +-
 public/r/TargetCursor.json                    |  2 +-
 public/r/TextCursor.json                      |  2 +-
 public/r/TrueFocus.json                       |  2 +-
 public/r/registry.json                        | 75 +++++++++++++++++--
 src/constants/Components.ts                   |  2 +-
 src/constants/Information.ts                  |  4 +-
 .../code/TextAnimations/asciiTextCode.ts      |  8 +-
 .../TextAnimations/AsciiText/AsciiText.vue    |  4 +-
 src/demo/TextAnimations/AsciiTextDemo.vue     |  4 +-
 27 files changed, 101 insertions(+), 35 deletions(-)
 create mode 100644 public/r/PixelSnow.json
 create mode 100644 public/r/PixelTrail.json
 create mode 100644 public/r/Shuffle.json

diff --git a/public/r/ASCIIText.json b/public/r/ASCIIText.json
index 40ac23e..85475ce 100644
--- a/public/r/ASCIIText.json
+++ b/public/r/ASCIIText.json
@@ -1 +1 @@
-{"name":"ASCIIText","title":"ASCIIText","description":"Renders text with an animated ASCII background for a retro feel.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<!-- Component ported and enhanced from https://codepen.io/JuanFuentes/pen/eYEeoyE -->\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\nimport * as THREE from 'three';\n\ninterface AsciiTextProps {\n  text?: string;\n  asciiFontSize?: number;\n  textFontSize?: number;\n  textColor?: string;\n  planeBaseHeight?: number;\n  enableWaves?: boolean;\n  className?: string;\n}\n\nconst props = withDefaults(defineProps<AsciiTextProps>(), {\n  text: 'David!',\n  asciiFontSize: 8,\n  textFontSize: 200,\n  textColor: '#fdf9f3',\n  planeBaseHeight: 8,\n  enableWaves: true,\n  className: ''\n});\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n    vUv = uv;\n    float time = uTime * 5.;\n\n    float waveFactor = uEnableWaves;\n\n    vec3 transformed = position;\n\n    transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n    transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n    transformed.z += sin(time + position.x) * waveFactor;\n\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n    float time = uTime;\n    vec2 pos = vUv;\n    \n    float move = sin(time + mouse) * 0.01;\n    float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n    float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n    float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n    float a = texture2D(uTexture, pos).a;\n    gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\n// @ts-expect-error - Adding map function to Math object\nMath.map = function (n: number, start: number, stop: number, start2: number, stop2: number) {\n  return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n};\n\nconst PX_RATIO = typeof window !== 'undefined' ? window.devicePixelRatio : 1;\n\ninterface AsciiFilterOptions {\n  fontSize?: number;\n  fontFamily?: string;\n  charset?: string;\n  invert?: boolean;\n}\n\ninterface CanvasTxtOptions {\n  fontSize?: number;\n  fontFamily?: string;\n  color?: string;\n}\n\nclass AsciiFilter {\n  renderer: THREE.WebGLRenderer;\n  domElement: HTMLDivElement;\n  pre: HTMLPreElement;\n  canvas: HTMLCanvasElement;\n  context: CanvasRenderingContext2D | null;\n  deg: number;\n  invert: boolean;\n  fontSize: number;\n  fontFamily: string;\n  charset: string;\n  width: number = 0;\n  height: number = 0;\n  center: { x: number; y: number } = { x: 0, y: 0 };\n  mouse: { x: number; y: number } = { x: 0, y: 0 };\n  cols: number = 0;\n  rows: number = 0;\n\n  constructor(renderer: THREE.WebGLRenderer, { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {}) {\n    this.renderer = renderer;\n    this.domElement = document.createElement('div');\n    this.domElement.style.position = 'absolute';\n    this.domElement.style.top = '0';\n    this.domElement.style.left = '0';\n    this.domElement.style.width = '100%';\n    this.domElement.style.height = '100%';\n\n    this.pre = document.createElement('pre');\n    this.domElement.appendChild(this.pre);\n\n    this.canvas = document.createElement('canvas');\n    this.context = this.canvas.getContext('2d');\n    this.domElement.appendChild(this.canvas);\n\n    this.deg = 0;\n    this.invert = invert ?? true;\n    this.fontSize = fontSize ?? 12;\n    this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n    this.charset = charset ?? ' .\\'`^\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$';\n\n    if (this.context) {\n      this.context.imageSmoothingEnabled = false;\n    }\n\n    this.onMouseMove = this.onMouseMove.bind(this);\n    document.addEventListener('mousemove', this.onMouseMove);\n  }\n\n  setSize(width: number, height: number) {\n    this.width = width;\n    this.height = height;\n    this.renderer.setSize(width, height);\n    this.reset();\n\n    this.center = { x: width / 2, y: height / 2 };\n    this.mouse = { x: this.center.x, y: this.center.y };\n  }\n\n  reset() {\n    this.context!.font = `${this.fontSize}px ${this.fontFamily}`;\n\n    const testChar = 'M';\n    const charMetrics = this.context!.measureText(testChar);\n    const charWidth = charMetrics.width;\n    const charHeight = this.fontSize;\n\n    this.cols = Math.floor(this.width / charWidth);\n    this.rows = Math.floor(this.height / charHeight);\n\n    this.canvas.width = this.cols;\n    this.canvas.height = this.rows;\n\n    const totalWidth = this.cols * charWidth;\n    const totalHeight = this.rows * charHeight;\n    const offsetX = (this.width - totalWidth) / 2;\n    const offsetY = (this.height - totalHeight) / 2;\n\n    this.pre.style.fontFamily = this.fontFamily;\n    this.pre.style.fontSize = `${this.fontSize}px`;\n    this.pre.style.margin = '0';\n    this.pre.style.padding = '0';\n    this.pre.style.lineHeight = `${this.fontSize}px`;\n    this.pre.style.position = 'absolute';\n    this.pre.style.left = `${offsetX}px`;\n    this.pre.style.top = `${offsetY}px`;\n    this.pre.style.width = `${totalWidth}px`;\n    this.pre.style.height = `${totalHeight}px`;\n    this.pre.style.letterSpacing = '0';\n    this.pre.style.wordSpacing = '0';\n    this.pre.style.whiteSpace = 'pre';\n    this.pre.style.overflow = 'hidden';\n    this.pre.style.zIndex = '9';\n    this.pre.style.backgroundImage = 'radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%)';\n    this.pre.style.backgroundAttachment = 'fixed';\n    this.pre.style.webkitTextFillColor = 'transparent';\n    this.pre.style.webkitBackgroundClip = 'text';\n    this.pre.style.backgroundClip = 'text';\n    this.pre.style.mixBlendMode = 'difference';\n  }\n\n  onMouseMove(e: MouseEvent) {\n    this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n  }\n\n  render(scene: THREE.Scene, camera: THREE.Camera) {\n    this.renderer.render(scene, camera);\n\n    const w = this.canvas.width;\n    const h = this.canvas.height;\n    this.context!.clearRect(0, 0, w, h);\n    if (this.context && w && h) {\n      this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n    }\n\n    this.asciify(this.context!, w, h);\n    this.hue();\n  }\n\n  asciify(ctx: CanvasRenderingContext2D, w: number, h: number) {\n    if (w && h) {\n      const imgData = ctx.getImageData(0, 0, w, h).data;\n      let str = '';\n      for (let y = 0; y < h; y++) {\n        for (let x = 0; x < w; x++) {\n          const i = x * 4 + y * 4 * w;\n          const [r, g, b, a] = [imgData[i], imgData[i + 1], imgData[i + 2], imgData[i + 3]];\n\n          if (a === 0) {\n            str += ' ';\n            continue;\n          }\n\n          const gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n          let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n          if (this.invert) idx = this.charset.length - idx - 1;\n          str += this.charset[idx];\n        }\n        str += '\\n';\n      }\n      this.pre.innerHTML = str;\n    }\n  }\n\n  get dx() {\n    return this.mouse.x - this.center.x;\n  }\n\n  get dy() {\n    return this.mouse.y - this.center.y;\n  }\n\n  hue() {\n    const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n    this.deg += (deg - this.deg) * 0.075;\n    this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n  }\n\n  dispose() {\n    document.removeEventListener('mousemove', this.onMouseMove);\n  }\n}\n\nclass CanvasTxt {\n  canvas: HTMLCanvasElement;\n  context: CanvasRenderingContext2D | null;\n  txt: string;\n  fontSize: number;\n  fontFamily: string;\n  color: string;\n  font: string;\n\n  constructor(txt: string, { fontSize = 200, fontFamily = 'Arial', color = '#fdf9f3' }: CanvasTxtOptions = {}) {\n    this.canvas = document.createElement('canvas');\n    this.context = this.canvas.getContext('2d');\n    this.txt = txt;\n    this.fontSize = fontSize;\n    this.fontFamily = fontFamily;\n    this.color = color;\n    this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n  }\n\n  resize() {\n    if (this.context) {\n      this.context.font = this.font;\n      const metrics = this.context.measureText(this.txt);\n\n      const textWidth = Math.ceil(metrics.width) + 20;\n      const textHeight = Math.ceil(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) + 20;\n\n      this.canvas.width = textWidth;\n      this.canvas.height = textHeight;\n    }\n  }\n\n  render() {\n    if (this.context) {\n      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n      this.context.fillStyle = this.color;\n      this.context.font = this.font;\n\n      const metrics = this.context.measureText(this.txt);\n      const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n      this.context.fillText(this.txt, 10, yPos);\n    }\n  }\n\n  get width() {\n    return this.canvas.width;\n  }\n\n  get height() {\n    return this.canvas.height;\n  }\n\n  get texture() {\n    return this.canvas;\n  }\n}\n\nclass CanvAscii {\n  textString: string;\n  asciiFontSize: number;\n  textFontSize: number;\n  textColor!: string;\n  planeBaseHeight!: number;\n  container!: HTMLElement;\n  width!: number;\n  height!: number;\n  enableWaves!: boolean;\n  camera!: THREE.PerspectiveCamera;\n  scene!: THREE.Scene;\n  mouse: { x: number; y: number } = { x: 0, y: 0 };\n  textCanvas!: CanvasTxt;\n  texture!: THREE.CanvasTexture;\n  geometry!: THREE.PlaneGeometry;\n  material!: THREE.ShaderMaterial;\n  mesh!: THREE.Mesh;\n  renderer!: THREE.WebGLRenderer;\n  filter!: AsciiFilter;\n  center: { x: number; y: number } = { x: 0, y: 0 };\n  animationFrameId: number = 0;\n\n  constructor(\n    {\n      text,\n      asciiFontSize,\n      textFontSize,\n      textColor,\n      planeBaseHeight,\n      enableWaves\n    }: {\n      text: string;\n      asciiFontSize: number;\n      textFontSize: number;\n      textColor: string;\n      planeBaseHeight: number;\n      enableWaves: boolean;\n    },\n    containerElem: HTMLElement,\n    width: number,\n    height: number\n  ) {\n    this.textString = text;\n    this.asciiFontSize = asciiFontSize;\n    this.textFontSize = textFontSize;\n    this.textColor = textColor;\n    this.planeBaseHeight = planeBaseHeight;\n    this.container = containerElem;\n    this.width = width;\n    this.height = height;\n    this.enableWaves = enableWaves;\n\n    this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 1000);\n    this.camera.position.z = 30;\n\n    this.scene = new THREE.Scene();\n\n    this.onMouseMove = this.onMouseMove.bind(this);\n    this.setMesh();\n    this.setRenderer();\n  }\n\n  setMesh() {\n    this.textCanvas = new CanvasTxt(this.textString, {\n      fontSize: this.textFontSize,\n      fontFamily: 'IBM Plex Mono',\n      color: this.textColor\n    });\n    this.textCanvas.resize();\n    this.textCanvas.render();\n\n    this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n    this.texture.minFilter = THREE.NearestFilter;\n\n    const textAspect = this.textCanvas.width / this.textCanvas.height;\n    const baseH = this.planeBaseHeight;\n    const planeW = baseH * textAspect;\n    const planeH = baseH;\n\n    this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n    this.material = new THREE.ShaderMaterial({\n      vertexShader,\n      fragmentShader,\n      transparent: true,\n      uniforms: {\n        uTime: { value: 0 },\n        mouse: { value: 1.0 },\n        uTexture: { value: this.texture },\n        uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 }\n      }\n    });\n\n    this.mesh = new THREE.Mesh(this.geometry, this.material);\n    this.scene.add(this.mesh);\n  }\n\n  setRenderer() {\n    this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n    this.renderer.setPixelRatio(1);\n    this.renderer.setClearColor(0x000000, 0);\n\n    this.filter = new AsciiFilter(this.renderer, {\n      fontFamily: 'IBM Plex Mono',\n      fontSize: this.asciiFontSize,\n      invert: true\n    });\n\n    this.container.appendChild(this.filter.domElement);\n    this.setSize(this.width, this.height);\n\n    this.container.addEventListener('mousemove', this.onMouseMove);\n    this.container.addEventListener('touchmove', this.onMouseMove);\n  }\n\n  setSize(w: number, h: number) {\n    this.width = w;\n    this.height = h;\n\n    this.camera.aspect = w / h;\n    this.camera.updateProjectionMatrix();\n\n    this.filter.setSize(w, h);\n    this.center = { x: w / 2, y: h / 2 };\n  }\n\n  load() {\n    this.animate();\n  }\n\n  onMouseMove(evt: MouseEvent | TouchEvent) {\n    const e = 'touches' in evt ? evt.touches[0] : evt;\n    const bounds = this.container.getBoundingClientRect();\n    const x = e.clientX - bounds.left;\n    const y = e.clientY - bounds.top;\n    this.mouse = { x, y };\n  }\n\n  animate() {\n    const animateFrame = () => {\n      this.animationFrameId = requestAnimationFrame(animateFrame);\n      this.render();\n    };\n    animateFrame();\n  }\n\n  render() {\n    const time = new Date().getTime() * 0.001;\n\n    this.textCanvas.render();\n    this.texture.needsUpdate = true;\n    (this.mesh.material as THREE.ShaderMaterial).uniforms.uTime.value = Math.sin(time);\n\n    this.updateRotation();\n    this.filter.render(this.scene, this.camera);\n  }\n\n  updateRotation() {\n    // @ts-expect-error - Using custom Math.map function\n    const x = Math.map(this.mouse.y, 0, this.height, 0.5, -0.5);\n    // @ts-expect-error - Using custom Math.map function\n    const y = Math.map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n    this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n    this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n  }\n\n  clear() {\n    this.scene.traverse(obj => {\n      if (obj instanceof THREE.Mesh && obj.material && obj.geometry) {\n        if (Array.isArray(obj.material)) {\n          obj.material.forEach(mat => mat.dispose());\n        } else {\n          obj.material.dispose();\n        }\n        obj.geometry.dispose();\n      }\n    });\n    this.scene.clear();\n  }\n\n  dispose() {\n    cancelAnimationFrame(this.animationFrameId);\n    this.filter.dispose();\n    this.container.removeChild(this.filter.domElement);\n    this.container.removeEventListener('mousemove', this.onMouseMove);\n    this.container.removeEventListener('touchmove', this.onMouseMove);\n    this.clear();\n    this.renderer.dispose();\n  }\n}\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nlet asciiRef: CanvAscii | null = null;\n\nconst initializeAscii = () => {\n  if (!containerRef.value) return;\n\n  const { width, height } = containerRef.value.getBoundingClientRect();\n\n  if (width === 0 || height === 0) {\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting && entry.boundingClientRect.width > 0 && entry.boundingClientRect.height > 0) {\n          const { width: w, height: h } = entry.boundingClientRect;\n\n          asciiRef = new CanvAscii(\n            {\n              text: props.text,\n              asciiFontSize: props.asciiFontSize,\n              textFontSize: props.textFontSize,\n              textColor: props.textColor,\n              planeBaseHeight: props.planeBaseHeight,\n              enableWaves: props.enableWaves\n            },\n            containerRef.value!,\n            w,\n            h\n          );\n          asciiRef.load();\n\n          observer.disconnect();\n        }\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(containerRef.value);\n    return;\n  }\n\n  asciiRef = new CanvAscii(\n    {\n      text: props.text,\n      asciiFontSize: props.asciiFontSize,\n      textFontSize: props.textFontSize,\n      textColor: props.textColor,\n      planeBaseHeight: props.planeBaseHeight,\n      enableWaves: props.enableWaves\n    },\n    containerRef.value,\n    width,\n    height\n  );\n  asciiRef.load();\n\n  const ro = new ResizeObserver(entries => {\n    if (!entries[0] || !asciiRef) return;\n    const { width: w, height: h } = entries[0].contentRect;\n    if (w > 0 && h > 0) {\n      asciiRef.setSize(w, h);\n    }\n  });\n  ro.observe(containerRef.value);\n};\n\nonMounted(() => {\n  initializeAscii();\n});\n\nonUnmounted(() => {\n  if (asciiRef) {\n    asciiRef.dispose();\n  }\n});\n\nwatch(\n  () => [\n    props.text,\n    props.asciiFontSize,\n    props.textFontSize,\n    props.textColor,\n    props.planeBaseHeight,\n    props.enableWaves\n  ],\n  () => {\n    if (asciiRef) {\n      asciiRef.dispose();\n    }\n    initializeAscii();\n  }\n);\n</script>\n\n<template>\n  <div ref=\"containerRef\" :class=\"['ascii-text-container', className]\" class=\"absolute inset-0 w-full h-full\" />\n</template>\n\n<style scoped>\n@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');\n\n.ascii-text-container :deep(canvas) {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  image-rendering: optimizeSpeed;\n  image-rendering: -moz-crisp-edges;\n  image-rendering: -o-crisp-edges;\n  image-rendering: -webkit-optimize-contrast;\n  image-rendering: optimize-contrast;\n  image-rendering: crisp-edges;\n  image-rendering: pixelated;\n}\n\n.ascii-text-container :deep(pre) {\n  margin: 0;\n  user-select: none;\n  padding: 0;\n  position: absolute;\n  white-space: pre;\n  overflow: hidden;\n  background-image: radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%);\n  background-attachment: fixed;\n  -webkit-text-fill-color: transparent;\n  -webkit-background-clip: text;\n  background-clip: text;\n  z-index: 9;\n  mix-blend-mode: difference;\n  font-variant-ligatures: none;\n  font-feature-settings: 'liga' 0;\n}\n</style>\n","path":"ASCIIText/AsciiText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"three","version":"^0.178.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
+{"name":"ASCIIText","title":"ASCIIText","description":"Renders text with an animated ASCII background for a retro feel.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<!-- Component ported and enhanced from https://codepen.io/JuanFuentes/pen/eYEeoyE -->\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\nimport * as THREE from 'three';\n\ninterface ASCIITextProps {\n  text?: string;\n  asciiFontSize?: number;\n  textFontSize?: number;\n  textColor?: string;\n  planeBaseHeight?: number;\n  enableWaves?: boolean;\n  className?: string;\n}\n\nconst props = withDefaults(defineProps<ASCIITextProps>(), {\n  text: 'David!',\n  asciiFontSize: 8,\n  textFontSize: 200,\n  textColor: '#fdf9f3',\n  planeBaseHeight: 8,\n  enableWaves: true,\n  className: ''\n});\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n    vUv = uv;\n    float time = uTime * 5.;\n\n    float waveFactor = uEnableWaves;\n\n    vec3 transformed = position;\n\n    transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n    transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n    transformed.z += sin(time + position.x) * waveFactor;\n\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n    float time = uTime;\n    vec2 pos = vUv;\n    \n    float move = sin(time + mouse) * 0.01;\n    float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n    float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n    float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n    float a = texture2D(uTexture, pos).a;\n    gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\n// @ts-expect-error - Adding map function to Math object\nMath.map = function (n: number, start: number, stop: number, start2: number, stop2: number) {\n  return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n};\n\nconst PX_RATIO = typeof window !== 'undefined' ? window.devicePixelRatio : 1;\n\ninterface AsciiFilterOptions {\n  fontSize?: number;\n  fontFamily?: string;\n  charset?: string;\n  invert?: boolean;\n}\n\ninterface CanvasTxtOptions {\n  fontSize?: number;\n  fontFamily?: string;\n  color?: string;\n}\n\nclass AsciiFilter {\n  renderer: THREE.WebGLRenderer;\n  domElement: HTMLDivElement;\n  pre: HTMLPreElement;\n  canvas: HTMLCanvasElement;\n  context: CanvasRenderingContext2D | null;\n  deg: number;\n  invert: boolean;\n  fontSize: number;\n  fontFamily: string;\n  charset: string;\n  width: number = 0;\n  height: number = 0;\n  center: { x: number; y: number } = { x: 0, y: 0 };\n  mouse: { x: number; y: number } = { x: 0, y: 0 };\n  cols: number = 0;\n  rows: number = 0;\n\n  constructor(renderer: THREE.WebGLRenderer, { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {}) {\n    this.renderer = renderer;\n    this.domElement = document.createElement('div');\n    this.domElement.style.position = 'absolute';\n    this.domElement.style.top = '0';\n    this.domElement.style.left = '0';\n    this.domElement.style.width = '100%';\n    this.domElement.style.height = '100%';\n\n    this.pre = document.createElement('pre');\n    this.domElement.appendChild(this.pre);\n\n    this.canvas = document.createElement('canvas');\n    this.context = this.canvas.getContext('2d');\n    this.domElement.appendChild(this.canvas);\n\n    this.deg = 0;\n    this.invert = invert ?? true;\n    this.fontSize = fontSize ?? 12;\n    this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n    this.charset = charset ?? ' .\\'`^\",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$';\n\n    if (this.context) {\n      this.context.imageSmoothingEnabled = false;\n    }\n\n    this.onMouseMove = this.onMouseMove.bind(this);\n    document.addEventListener('mousemove', this.onMouseMove);\n  }\n\n  setSize(width: number, height: number) {\n    this.width = width;\n    this.height = height;\n    this.renderer.setSize(width, height);\n    this.reset();\n\n    this.center = { x: width / 2, y: height / 2 };\n    this.mouse = { x: this.center.x, y: this.center.y };\n  }\n\n  reset() {\n    this.context!.font = `${this.fontSize}px ${this.fontFamily}`;\n\n    const testChar = 'M';\n    const charMetrics = this.context!.measureText(testChar);\n    const charWidth = charMetrics.width;\n    const charHeight = this.fontSize;\n\n    this.cols = Math.floor(this.width / charWidth);\n    this.rows = Math.floor(this.height / charHeight);\n\n    this.canvas.width = this.cols;\n    this.canvas.height = this.rows;\n\n    const totalWidth = this.cols * charWidth;\n    const totalHeight = this.rows * charHeight;\n    const offsetX = (this.width - totalWidth) / 2;\n    const offsetY = (this.height - totalHeight) / 2;\n\n    this.pre.style.fontFamily = this.fontFamily;\n    this.pre.style.fontSize = `${this.fontSize}px`;\n    this.pre.style.margin = '0';\n    this.pre.style.padding = '0';\n    this.pre.style.lineHeight = `${this.fontSize}px`;\n    this.pre.style.position = 'absolute';\n    this.pre.style.left = `${offsetX}px`;\n    this.pre.style.top = `${offsetY}px`;\n    this.pre.style.width = `${totalWidth}px`;\n    this.pre.style.height = `${totalHeight}px`;\n    this.pre.style.letterSpacing = '0';\n    this.pre.style.wordSpacing = '0';\n    this.pre.style.whiteSpace = 'pre';\n    this.pre.style.overflow = 'hidden';\n    this.pre.style.zIndex = '9';\n    this.pre.style.backgroundImage = 'radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%)';\n    this.pre.style.backgroundAttachment = 'fixed';\n    this.pre.style.webkitTextFillColor = 'transparent';\n    this.pre.style.webkitBackgroundClip = 'text';\n    this.pre.style.backgroundClip = 'text';\n    this.pre.style.mixBlendMode = 'difference';\n  }\n\n  onMouseMove(e: MouseEvent) {\n    this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n  }\n\n  render(scene: THREE.Scene, camera: THREE.Camera) {\n    this.renderer.render(scene, camera);\n\n    const w = this.canvas.width;\n    const h = this.canvas.height;\n    this.context!.clearRect(0, 0, w, h);\n    if (this.context && w && h) {\n      this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n    }\n\n    this.asciify(this.context!, w, h);\n    this.hue();\n  }\n\n  asciify(ctx: CanvasRenderingContext2D, w: number, h: number) {\n    if (w && h) {\n      const imgData = ctx.getImageData(0, 0, w, h).data;\n      let str = '';\n      for (let y = 0; y < h; y++) {\n        for (let x = 0; x < w; x++) {\n          const i = x * 4 + y * 4 * w;\n          const [r, g, b, a] = [imgData[i], imgData[i + 1], imgData[i + 2], imgData[i + 3]];\n\n          if (a === 0) {\n            str += ' ';\n            continue;\n          }\n\n          const gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n          let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n          if (this.invert) idx = this.charset.length - idx - 1;\n          str += this.charset[idx];\n        }\n        str += '\\n';\n      }\n      this.pre.innerHTML = str;\n    }\n  }\n\n  get dx() {\n    return this.mouse.x - this.center.x;\n  }\n\n  get dy() {\n    return this.mouse.y - this.center.y;\n  }\n\n  hue() {\n    const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n    this.deg += (deg - this.deg) * 0.075;\n    this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n  }\n\n  dispose() {\n    document.removeEventListener('mousemove', this.onMouseMove);\n  }\n}\n\nclass CanvasTxt {\n  canvas: HTMLCanvasElement;\n  context: CanvasRenderingContext2D | null;\n  txt: string;\n  fontSize: number;\n  fontFamily: string;\n  color: string;\n  font: string;\n\n  constructor(txt: string, { fontSize = 200, fontFamily = 'Arial', color = '#fdf9f3' }: CanvasTxtOptions = {}) {\n    this.canvas = document.createElement('canvas');\n    this.context = this.canvas.getContext('2d');\n    this.txt = txt;\n    this.fontSize = fontSize;\n    this.fontFamily = fontFamily;\n    this.color = color;\n    this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n  }\n\n  resize() {\n    if (this.context) {\n      this.context.font = this.font;\n      const metrics = this.context.measureText(this.txt);\n\n      const textWidth = Math.ceil(metrics.width) + 20;\n      const textHeight = Math.ceil(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) + 20;\n\n      this.canvas.width = textWidth;\n      this.canvas.height = textHeight;\n    }\n  }\n\n  render() {\n    if (this.context) {\n      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n      this.context.fillStyle = this.color;\n      this.context.font = this.font;\n\n      const metrics = this.context.measureText(this.txt);\n      const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n      this.context.fillText(this.txt, 10, yPos);\n    }\n  }\n\n  get width() {\n    return this.canvas.width;\n  }\n\n  get height() {\n    return this.canvas.height;\n  }\n\n  get texture() {\n    return this.canvas;\n  }\n}\n\nclass CanvAscii {\n  textString: string;\n  asciiFontSize: number;\n  textFontSize: number;\n  textColor!: string;\n  planeBaseHeight!: number;\n  container!: HTMLElement;\n  width!: number;\n  height!: number;\n  enableWaves!: boolean;\n  camera!: THREE.PerspectiveCamera;\n  scene!: THREE.Scene;\n  mouse: { x: number; y: number } = { x: 0, y: 0 };\n  textCanvas!: CanvasTxt;\n  texture!: THREE.CanvasTexture;\n  geometry!: THREE.PlaneGeometry;\n  material!: THREE.ShaderMaterial;\n  mesh!: THREE.Mesh;\n  renderer!: THREE.WebGLRenderer;\n  filter!: AsciiFilter;\n  center: { x: number; y: number } = { x: 0, y: 0 };\n  animationFrameId: number = 0;\n\n  constructor(\n    {\n      text,\n      asciiFontSize,\n      textFontSize,\n      textColor,\n      planeBaseHeight,\n      enableWaves\n    }: {\n      text: string;\n      asciiFontSize: number;\n      textFontSize: number;\n      textColor: string;\n      planeBaseHeight: number;\n      enableWaves: boolean;\n    },\n    containerElem: HTMLElement,\n    width: number,\n    height: number\n  ) {\n    this.textString = text;\n    this.asciiFontSize = asciiFontSize;\n    this.textFontSize = textFontSize;\n    this.textColor = textColor;\n    this.planeBaseHeight = planeBaseHeight;\n    this.container = containerElem;\n    this.width = width;\n    this.height = height;\n    this.enableWaves = enableWaves;\n\n    this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 1000);\n    this.camera.position.z = 30;\n\n    this.scene = new THREE.Scene();\n\n    this.onMouseMove = this.onMouseMove.bind(this);\n    this.setMesh();\n    this.setRenderer();\n  }\n\n  setMesh() {\n    this.textCanvas = new CanvasTxt(this.textString, {\n      fontSize: this.textFontSize,\n      fontFamily: 'IBM Plex Mono',\n      color: this.textColor\n    });\n    this.textCanvas.resize();\n    this.textCanvas.render();\n\n    this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n    this.texture.minFilter = THREE.NearestFilter;\n\n    const textAspect = this.textCanvas.width / this.textCanvas.height;\n    const baseH = this.planeBaseHeight;\n    const planeW = baseH * textAspect;\n    const planeH = baseH;\n\n    this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n    this.material = new THREE.ShaderMaterial({\n      vertexShader,\n      fragmentShader,\n      transparent: true,\n      uniforms: {\n        uTime: { value: 0 },\n        mouse: { value: 1.0 },\n        uTexture: { value: this.texture },\n        uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 }\n      }\n    });\n\n    this.mesh = new THREE.Mesh(this.geometry, this.material);\n    this.scene.add(this.mesh);\n  }\n\n  setRenderer() {\n    this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n    this.renderer.setPixelRatio(1);\n    this.renderer.setClearColor(0x000000, 0);\n\n    this.filter = new AsciiFilter(this.renderer, {\n      fontFamily: 'IBM Plex Mono',\n      fontSize: this.asciiFontSize,\n      invert: true\n    });\n\n    this.container.appendChild(this.filter.domElement);\n    this.setSize(this.width, this.height);\n\n    this.container.addEventListener('mousemove', this.onMouseMove);\n    this.container.addEventListener('touchmove', this.onMouseMove);\n  }\n\n  setSize(w: number, h: number) {\n    this.width = w;\n    this.height = h;\n\n    this.camera.aspect = w / h;\n    this.camera.updateProjectionMatrix();\n\n    this.filter.setSize(w, h);\n    this.center = { x: w / 2, y: h / 2 };\n  }\n\n  load() {\n    this.animate();\n  }\n\n  onMouseMove(evt: MouseEvent | TouchEvent) {\n    const e = 'touches' in evt ? evt.touches[0] : evt;\n    const bounds = this.container.getBoundingClientRect();\n    const x = e.clientX - bounds.left;\n    const y = e.clientY - bounds.top;\n    this.mouse = { x, y };\n  }\n\n  animate() {\n    const animateFrame = () => {\n      this.animationFrameId = requestAnimationFrame(animateFrame);\n      this.render();\n    };\n    animateFrame();\n  }\n\n  render() {\n    const time = new Date().getTime() * 0.001;\n\n    this.textCanvas.render();\n    this.texture.needsUpdate = true;\n    (this.mesh.material as THREE.ShaderMaterial).uniforms.uTime.value = Math.sin(time);\n\n    this.updateRotation();\n    this.filter.render(this.scene, this.camera);\n  }\n\n  updateRotation() {\n    // @ts-expect-error - Using custom Math.map function\n    const x = Math.map(this.mouse.y, 0, this.height, 0.5, -0.5);\n    // @ts-expect-error - Using custom Math.map function\n    const y = Math.map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n    this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n    this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n  }\n\n  clear() {\n    this.scene.traverse(obj => {\n      if (obj instanceof THREE.Mesh && obj.material && obj.geometry) {\n        if (Array.isArray(obj.material)) {\n          obj.material.forEach(mat => mat.dispose());\n        } else {\n          obj.material.dispose();\n        }\n        obj.geometry.dispose();\n      }\n    });\n    this.scene.clear();\n  }\n\n  dispose() {\n    cancelAnimationFrame(this.animationFrameId);\n    this.filter.dispose();\n    this.container.removeChild(this.filter.domElement);\n    this.container.removeEventListener('mousemove', this.onMouseMove);\n    this.container.removeEventListener('touchmove', this.onMouseMove);\n    this.clear();\n    this.renderer.dispose();\n  }\n}\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nlet asciiRef: CanvAscii | null = null;\n\nconst initializeAscii = () => {\n  if (!containerRef.value) return;\n\n  const { width, height } = containerRef.value.getBoundingClientRect();\n\n  if (width === 0 || height === 0) {\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting && entry.boundingClientRect.width > 0 && entry.boundingClientRect.height > 0) {\n          const { width: w, height: h } = entry.boundingClientRect;\n\n          asciiRef = new CanvAscii(\n            {\n              text: props.text,\n              asciiFontSize: props.asciiFontSize,\n              textFontSize: props.textFontSize,\n              textColor: props.textColor,\n              planeBaseHeight: props.planeBaseHeight,\n              enableWaves: props.enableWaves\n            },\n            containerRef.value!,\n            w,\n            h\n          );\n          asciiRef.load();\n\n          observer.disconnect();\n        }\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(containerRef.value);\n    return;\n  }\n\n  asciiRef = new CanvAscii(\n    {\n      text: props.text,\n      asciiFontSize: props.asciiFontSize,\n      textFontSize: props.textFontSize,\n      textColor: props.textColor,\n      planeBaseHeight: props.planeBaseHeight,\n      enableWaves: props.enableWaves\n    },\n    containerRef.value,\n    width,\n    height\n  );\n  asciiRef.load();\n\n  const ro = new ResizeObserver(entries => {\n    if (!entries[0] || !asciiRef) return;\n    const { width: w, height: h } = entries[0].contentRect;\n    if (w > 0 && h > 0) {\n      asciiRef.setSize(w, h);\n    }\n  });\n  ro.observe(containerRef.value);\n};\n\nonMounted(() => {\n  initializeAscii();\n});\n\nonUnmounted(() => {\n  if (asciiRef) {\n    asciiRef.dispose();\n  }\n});\n\nwatch(\n  () => [\n    props.text,\n    props.asciiFontSize,\n    props.textFontSize,\n    props.textColor,\n    props.planeBaseHeight,\n    props.enableWaves\n  ],\n  () => {\n    if (asciiRef) {\n      asciiRef.dispose();\n    }\n    initializeAscii();\n  }\n);\n</script>\n\n<template>\n  <div ref=\"containerRef\" :class=\"['ascii-text-container', className]\" class=\"absolute inset-0 w-full h-full\" />\n</template>\n\n<style scoped>\n@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');\n\n.ascii-text-container :deep(canvas) {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  image-rendering: optimizeSpeed;\n  image-rendering: -moz-crisp-edges;\n  image-rendering: -o-crisp-edges;\n  image-rendering: -webkit-optimize-contrast;\n  image-rendering: optimize-contrast;\n  image-rendering: crisp-edges;\n  image-rendering: pixelated;\n}\n\n.ascii-text-container :deep(pre) {\n  margin: 0;\n  user-select: none;\n  padding: 0;\n  position: absolute;\n  white-space: pre;\n  overflow: hidden;\n  background-image: radial-gradient(circle, #ff6188 0%, #fc9867 50%, #ffd866 100%);\n  background-attachment: fixed;\n  -webkit-text-fill-color: transparent;\n  -webkit-background-clip: text;\n  background-clip: text;\n  z-index: 9;\n  mix-blend-mode: difference;\n  font-variant-ligatures: none;\n  font-feature-settings: 'liga' 0;\n}\n</style>\n","path":"ASCIIText/ASCIIText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"three","version":"^0.178.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/Ballpit.json b/public/r/Ballpit.json
index 49698da..2729b9d 100644
--- a/public/r/Ballpit.json
+++ b/public/r/Ballpit.json
@@ -1 +1 @@
-{"name":"Ballpit","title":"Ballpit","description":"Physics ball pit simulation with bouncing colorful spheres.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { gsap } from 'gsap';\nimport { Observer } from 'gsap/Observer';\nimport {\n  ACESFilmicToneMapping,\n  AmbientLight,\n  Clock,\n  Color,\n  InstancedMesh,\n  MathUtils,\n  MeshPhysicalMaterial,\n  Object3D,\n  PerspectiveCamera,\n  Plane,\n  PMREMGenerator,\n  PointLight,\n  Raycaster,\n  Scene,\n  ShaderChunk,\n  SphereGeometry,\n  SRGBColorSpace,\n  Vector2,\n  Vector3,\n  WebGLRenderer,\n  type MeshPhysicalMaterialParameters,\n  type WebGLRendererParameters\n} from 'three';\nimport { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';\nimport { defineProps, onMounted, onUnmounted, useTemplateRef, ref } from 'vue';\n\ngsap.registerPlugin(Observer);\n\ninterface MaterialParams extends MeshPhysicalMaterialParameters {\n  metalness?: number;\n  roughness?: number;\n  clearcoat?: number;\n  clearcoatRoughness?: number;\n}\n\ninterface Props {\n  className?: string;\n  followCursor?: boolean;\n  count?: number;\n  colors?: number[];\n  ambientColor?: number;\n  ambientIntensity?: number;\n  lightIntensity?: number;\n  materialParams?: MaterialParams;\n  minSize?: number;\n  maxSize?: number;\n  size0?: number;\n  gravity?: number;\n  friction?: number;\n  wallBounce?: number;\n  maxVelocity?: number;\n  maxX?: number;\n  maxY?: number;\n  maxZ?: number;\n  controlSphere0?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  className: '',\n  followCursor: true,\n  count: 200,\n  colors: () => [0, 0, 0],\n  ambientColor: 0xffffff,\n  ambientIntensity: 1,\n  lightIntensity: 200,\n  materialParams: () => ({\n    metalness: 0.5,\n    roughness: 0.5,\n    clearcoat: 1,\n    clearcoatRoughness: 0.15\n  }),\n  minSize: 0.5,\n  maxSize: 1,\n  size0: 1,\n  gravity: 0.5,\n  friction: 0.9975,\n  wallBounce: 0.95,\n  maxVelocity: 0.15,\n  maxX: 5,\n  maxY: 5,\n  maxZ: 2,\n  controlSphere0: false\n});\n\nconst canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');\nconst spheresInstanceRef = ref<CreateBallpitReturn | null>(null);\n\ninterface PostProcessing {\n  setSize: (width: number, height: number) => void;\n  render: () => void;\n  dispose: () => void;\n}\n\ninterface XConfig {\n  canvas?: HTMLCanvasElement;\n  id?: string;\n  rendererOptions?: Partial<WebGLRendererParameters>;\n  size?: 'parent' | { width: number; height: number };\n}\n\ninterface SizeData {\n  width: number;\n  height: number;\n  wWidth: number;\n  wHeight: number;\n  ratio: number;\n  pixelRatio: number;\n}\n\nclass X {\n  #config: XConfig;\n  #postprocessing: PostProcessing | null = null;\n  #resizeObserver?: ResizeObserver;\n  #intersectionObserver?: IntersectionObserver;\n  #resizeTimer?: number;\n  #animationFrameId: number = 0;\n  #clock: Clock = new Clock();\n  #animationState = { elapsed: 0, delta: 0 };\n  #isAnimating: boolean = false;\n  #isVisible: boolean = false;\n\n  canvas!: HTMLCanvasElement;\n  camera!: PerspectiveCamera;\n  cameraMinAspect?: number;\n  cameraMaxAspect?: number;\n  cameraFov!: number;\n  maxPixelRatio?: number;\n  minPixelRatio?: number;\n  scene!: Scene;\n  renderer!: WebGLRenderer;\n  size: SizeData = {\n    width: 0,\n    height: 0,\n    wWidth: 0,\n    wHeight: 0,\n    ratio: 0,\n    pixelRatio: 0\n  };\n\n  render: () => void = this.#render.bind(this);\n  onBeforeRender: (state: { elapsed: number; delta: number }) => void = () => {};\n  onAfterRender: (state: { elapsed: number; delta: number }) => void = () => {};\n  onAfterResize: (size: SizeData) => void = () => {};\n  isDisposed: boolean = false;\n\n  constructor(config: XConfig) {\n    this.#config = { ...config };\n    this.#initCamera();\n    this.#initScene();\n    this.#initRenderer();\n    this.resize();\n    this.#initObservers();\n  }\n\n  #initCamera() {\n    this.camera = new PerspectiveCamera();\n    this.cameraFov = this.camera.fov;\n  }\n\n  #initScene() {\n    this.scene = new Scene();\n  }\n\n  #initRenderer() {\n    if (this.#config.canvas) {\n      this.canvas = this.#config.canvas;\n    } else if (this.#config.id) {\n      const elem = document.getElementById(this.#config.id);\n      if (elem instanceof HTMLCanvasElement) {\n        this.canvas = elem;\n      } else {\n        console.error('Three: Missing canvas or id parameter');\n      }\n    } else {\n      console.error('Three: Missing canvas or id parameter');\n    }\n    this.canvas!.style.display = 'block';\n    const rendererOptions: WebGLRendererParameters = {\n      canvas: this.canvas,\n      powerPreference: 'high-performance',\n      ...(this.#config.rendererOptions ?? {})\n    };\n    this.renderer = new WebGLRenderer(rendererOptions);\n    this.renderer.outputColorSpace = SRGBColorSpace;\n  }\n\n  #initObservers() {\n    if (!(this.#config.size instanceof Object)) {\n      window.addEventListener('resize', this.#onResize.bind(this));\n      if (this.#config.size === 'parent' && this.canvas.parentNode) {\n        this.#resizeObserver = new ResizeObserver(this.#onResize.bind(this));\n        this.#resizeObserver.observe(this.canvas.parentNode as Element);\n      }\n    }\n    this.#intersectionObserver = new IntersectionObserver(this.#onIntersection.bind(this), {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0\n    });\n    this.#intersectionObserver.observe(this.canvas);\n    document.addEventListener('visibilitychange', this.#onVisibilityChange.bind(this));\n  }\n\n  #onResize() {\n    if (this.#resizeTimer) clearTimeout(this.#resizeTimer);\n    this.#resizeTimer = window.setTimeout(this.resize.bind(this), 100);\n  }\n\n  resize() {\n    let w: number, h: number;\n    if (this.#config.size instanceof Object) {\n      w = this.#config.size.width;\n      h = this.#config.size.height;\n    } else if (this.#config.size === 'parent' && this.canvas.parentNode) {\n      w = (this.canvas.parentNode as HTMLElement).offsetWidth;\n      h = (this.canvas.parentNode as HTMLElement).offsetHeight;\n    } else {\n      w = window.innerWidth;\n      h = window.innerHeight;\n    }\n    this.size.width = w;\n    this.size.height = h;\n    this.size.ratio = w / h;\n    this.#updateCamera();\n    this.#updateRenderer();\n    this.onAfterResize(this.size);\n  }\n\n  #updateCamera() {\n    this.camera.aspect = this.size.width / this.size.height;\n    if (this.camera.isPerspectiveCamera && this.cameraFov) {\n      if (this.cameraMinAspect && this.camera.aspect < this.cameraMinAspect) {\n        this.#adjustFov(this.cameraMinAspect);\n      } else if (this.cameraMaxAspect && this.camera.aspect > this.cameraMaxAspect) {\n        this.#adjustFov(this.cameraMaxAspect);\n      } else {\n        this.camera.fov = this.cameraFov;\n      }\n    }\n    this.camera.updateProjectionMatrix();\n    this.updateWorldSize();\n  }\n\n  #adjustFov(aspect: number) {\n    const tanFov = Math.tan(MathUtils.degToRad(this.cameraFov / 2));\n    const newTan = tanFov / (this.camera.aspect / aspect);\n    this.camera.fov = 2 * MathUtils.radToDeg(Math.atan(newTan));\n  }\n\n  updateWorldSize() {\n    if (this.camera.isPerspectiveCamera) {\n      const fovRad = (this.camera.fov * Math.PI) / 180;\n      this.size.wHeight = 2 * Math.tan(fovRad / 2) * this.camera.position.length();\n      this.size.wWidth = this.size.wHeight * this.camera.aspect;\n    } else {\n      const cam = this.camera as unknown as {\n        top: number;\n        bottom: number;\n        left: number;\n        right: number;\n        isOrthographicCamera: boolean;\n      };\n      if (cam.isOrthographicCamera) {\n        this.size.wHeight = cam.top - cam.bottom;\n        this.size.wWidth = cam.right - cam.left;\n      }\n    }\n  }\n\n  #updateRenderer() {\n    this.renderer.setSize(this.size.width, this.size.height);\n    this.#postprocessing?.setSize(this.size.width, this.size.height);\n    let pr = window.devicePixelRatio;\n    if (this.maxPixelRatio && pr > this.maxPixelRatio) {\n      pr = this.maxPixelRatio;\n    } else if (this.minPixelRatio && pr < this.minPixelRatio) {\n      pr = this.minPixelRatio;\n    }\n    this.renderer.setPixelRatio(pr);\n    this.size.pixelRatio = pr;\n  }\n\n  get postprocessing() {\n    return this.#postprocessing;\n  }\n  set postprocessing(value: PostProcessing | null) {\n    this.#postprocessing = value;\n    if (value) {\n      this.render = value.render.bind(value);\n    } else {\n      this.render = this.#render.bind(this);\n    }\n  }\n\n  #onIntersection(entries: IntersectionObserverEntry[]) {\n    this.#isAnimating = entries[0].isIntersecting;\n    if (this.#isAnimating) {\n      this.#startAnimation();\n    } else {\n      this.#stopAnimation();\n    }\n  }\n\n  #onVisibilityChange() {\n    if (this.#isAnimating) {\n      if (document.hidden) {\n        this.#stopAnimation();\n      } else {\n        this.#startAnimation();\n      }\n    }\n  }\n\n  #startAnimation() {\n    if (this.#isVisible) return;\n    const animateFrame = () => {\n      this.#animationFrameId = requestAnimationFrame(animateFrame);\n      this.#animationState.delta = this.#clock.getDelta();\n      this.#animationState.elapsed += this.#animationState.delta;\n      this.onBeforeRender(this.#animationState);\n      this.render();\n      this.onAfterRender(this.#animationState);\n    };\n    this.#isVisible = true;\n    this.#clock.start();\n    animateFrame();\n  }\n\n  #stopAnimation() {\n    if (this.#isVisible) {\n      cancelAnimationFrame(this.#animationFrameId);\n      this.#isVisible = false;\n      this.#clock.stop();\n    }\n  }\n\n  #render() {\n    this.renderer.render(this.scene, this.camera);\n  }\n\n  clear() {\n    this.scene.traverse(obj => {\n      const mesh = obj as unknown as {\n        isMesh?: boolean;\n        material?: {\n          dispose: () => void;\n          [key: string]: unknown;\n        };\n        geometry?: {\n          dispose: () => void;\n        };\n      };\n      if (mesh.isMesh && mesh.material && mesh.geometry) {\n        if (typeof mesh.material === 'object' && mesh.material !== null) {\n          Object.keys(mesh.material).forEach(key => {\n            const matProp = mesh.material![key] as unknown;\n            if (matProp && typeof matProp === 'object' && matProp !== null) {\n              const disposable = matProp as { dispose?: () => void };\n              if (typeof disposable.dispose === 'function') {\n                disposable.dispose();\n              }\n            }\n          });\n          mesh.material.dispose();\n          mesh.geometry.dispose();\n        }\n      }\n    });\n    this.scene.clear();\n  }\n\n  dispose() {\n    this.#onResizeCleanup();\n    this.#stopAnimation();\n    this.clear();\n    this.#postprocessing?.dispose();\n    this.renderer.dispose();\n    this.isDisposed = true;\n  }\n\n  #onResizeCleanup() {\n    window.removeEventListener('resize', this.#onResize.bind(this));\n    this.#resizeObserver?.disconnect();\n    this.#intersectionObserver?.disconnect();\n    document.removeEventListener('visibilitychange', this.#onVisibilityChange.bind(this));\n  }\n}\n\ninterface WConfig {\n  count: number;\n  maxX: number;\n  maxY: number;\n  maxZ: number;\n  maxSize: number;\n  minSize: number;\n  size0: number;\n  gravity: number;\n  friction: number;\n  wallBounce: number;\n  maxVelocity: number;\n  controlSphere0?: boolean;\n  followCursor?: boolean;\n}\n\nclass W {\n  config: WConfig;\n  positionData: Float32Array;\n  velocityData: Float32Array;\n  sizeData: Float32Array;\n  center: Vector3 = new Vector3();\n\n  constructor(config: WConfig) {\n    this.config = config;\n    this.positionData = new Float32Array(3 * config.count).fill(0);\n    this.velocityData = new Float32Array(3 * config.count).fill(0);\n    this.sizeData = new Float32Array(config.count).fill(1);\n    this.center = new Vector3();\n    this.#initializePositions();\n    this.setSizes();\n  }\n\n  #initializePositions() {\n    const { config, positionData } = this;\n    this.center.toArray(positionData, 0);\n    for (let i = 1; i < config.count; i++) {\n      const idx = 3 * i;\n      positionData[idx] = MathUtils.randFloatSpread(2 * config.maxX);\n      positionData[idx + 1] = MathUtils.randFloatSpread(2 * config.maxY);\n      positionData[idx + 2] = MathUtils.randFloatSpread(2 * config.maxZ);\n    }\n  }\n\n  setSizes() {\n    const { config, sizeData } = this;\n    sizeData[0] = config.size0;\n    for (let i = 1; i < config.count; i++) {\n      sizeData[i] = MathUtils.randFloat(config.minSize, config.maxSize);\n    }\n  }\n\n  update(deltaInfo: { delta: number }) {\n    const { config, center, positionData, sizeData, velocityData } = this;\n    let startIdx = 0;\n    if (config.controlSphere0) {\n      startIdx = 1;\n      const firstVec = new Vector3().fromArray(positionData, 0);\n      firstVec.lerp(center, 0.1).toArray(positionData, 0);\n      new Vector3(0, 0, 0).toArray(velocityData, 0);\n    }\n    for (let idx = startIdx; idx < config.count; idx++) {\n      const base = 3 * idx;\n      const pos = new Vector3().fromArray(positionData, base);\n      const vel = new Vector3().fromArray(velocityData, base);\n      vel.y -= deltaInfo.delta * config.gravity * sizeData[idx];\n      vel.multiplyScalar(config.friction);\n      vel.clampLength(0, config.maxVelocity);\n      pos.add(vel);\n      pos.toArray(positionData, base);\n      vel.toArray(velocityData, base);\n    }\n    for (let idx = startIdx; idx < config.count; idx++) {\n      const base = 3 * idx;\n      const pos = new Vector3().fromArray(positionData, base);\n      const vel = new Vector3().fromArray(velocityData, base);\n      const radius = sizeData[idx];\n      for (let jdx = idx + 1; jdx < config.count; jdx++) {\n        const otherBase = 3 * jdx;\n        const otherPos = new Vector3().fromArray(positionData, otherBase);\n        const otherVel = new Vector3().fromArray(velocityData, otherBase);\n        const diff = new Vector3().copy(otherPos).sub(pos);\n        const dist = diff.length();\n        const sumRadius = radius + sizeData[jdx];\n        if (dist < sumRadius) {\n          const overlap = sumRadius - dist;\n          const correction = diff.normalize().multiplyScalar(0.5 * overlap);\n          const velCorrection = correction.clone().multiplyScalar(Math.max(vel.length(), 1));\n          pos.sub(correction);\n          vel.sub(velCorrection);\n          pos.toArray(positionData, base);\n          vel.toArray(velocityData, base);\n          otherPos.add(correction);\n          otherVel.add(correction.clone().multiplyScalar(Math.max(otherVel.length(), 1)));\n          otherPos.toArray(positionData, otherBase);\n          otherVel.toArray(velocityData, otherBase);\n        }\n      }\n      if (config.controlSphere0) {\n        const diff = new Vector3().copy(new Vector3().fromArray(positionData, 0)).sub(pos);\n        const d = diff.length();\n        const sumRadius0 = radius + sizeData[0];\n        if (d < sumRadius0) {\n          const correction = diff.normalize().multiplyScalar(sumRadius0 - d);\n          const velCorrection = correction.clone().multiplyScalar(Math.max(vel.length(), 2));\n          pos.sub(correction);\n          vel.sub(velCorrection);\n        }\n      }\n      if (Math.abs(pos.x) + radius > config.maxX) {\n        pos.x = Math.sign(pos.x) * (config.maxX - radius);\n        vel.x = -vel.x * config.wallBounce;\n      }\n      if (config.gravity === 0) {\n        if (Math.abs(pos.y) + radius > config.maxY) {\n          pos.y = Math.sign(pos.y) * (config.maxY - radius);\n          vel.y = -vel.y * config.wallBounce;\n        }\n      } else if (pos.y - radius < -config.maxY) {\n        pos.y = -config.maxY + radius;\n        vel.y = -vel.y * config.wallBounce;\n      }\n      const maxBoundary = Math.max(config.maxZ, config.maxSize);\n      if (Math.abs(pos.z) + radius > maxBoundary) {\n        pos.z = Math.sign(pos.z) * (config.maxZ - radius);\n        vel.z = -vel.z * config.wallBounce;\n      }\n      pos.toArray(positionData, base);\n      vel.toArray(velocityData, base);\n    }\n  }\n}\n\ninterface ShaderUniforms {\n  [key: string]: { value: number | Vector2 | Vector3 | Color | boolean };\n}\n\ninterface ShaderObject {\n  uniforms: ShaderUniforms;\n  fragmentShader: string;\n  vertexShader: string;\n}\n\ninterface UniformValue {\n  value: number | Vector2 | Vector3 | Color | boolean;\n}\n\nclass Y extends MeshPhysicalMaterial {\n  uniforms: { [key: string]: UniformValue } = {\n    thicknessDistortion: { value: 0.1 },\n    thicknessAmbient: { value: 0 },\n    thicknessAttenuation: { value: 0.1 },\n    thicknessPower: { value: 2 },\n    thicknessScale: { value: 10 }\n  };\n\n  declare defines: { [key: string]: string };\n\n  constructor(params: MaterialParams) {\n    super(params);\n    this.defines = { USE_UV: '' };\n    this.onBeforeCompile = shader => {\n      Object.assign(shader.uniforms, this.uniforms);\n      shader.fragmentShader =\n        `\n        uniform float thicknessPower;\n        uniform float thicknessScale;\n        uniform float thicknessDistortion;\n        uniform float thicknessAmbient;\n        uniform float thicknessAttenuation;\n        ` + shader.fragmentShader;\n      shader.fragmentShader = shader.fragmentShader.replace(\n        'void main() {',\n        `\n        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) {\n          vec3 scatteringHalf = normalize(directLight.direction + (geometryNormal * thicknessDistortion));\n          float scatteringDot = pow(saturate(dot(geometryViewDir, -scatteringHalf)), thicknessPower) * thicknessScale;\n          #ifdef USE_COLOR\n            vec3 scatteringIllu = (scatteringDot + thicknessAmbient) * vColor;\n          #else\n            vec3 scatteringIllu = (scatteringDot + thicknessAmbient) * diffuse;\n          #endif\n          reflectedLight.directDiffuse += scatteringIllu * thicknessAttenuation * directLight.color;\n        }\n\n        void main() {\n        `\n      );\n      const lightsChunk = ShaderChunk.lights_fragment_begin.replace(\n        /RE_Direct\\( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight \\);/g,\n        `\n          RE_Direct( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );\n          RE_Direct_Scattering(directLight, vUv, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, reflectedLight);\n        `\n      );\n      shader.fragmentShader = shader.fragmentShader.replace('#include <lights_fragment_begin>', lightsChunk);\n      if (this.onBeforeCompile2) this.onBeforeCompile2(shader);\n    };\n  }\n  onBeforeCompile2?: (shader: ShaderObject) => void;\n}\n\nconst XConfig = {\n  count: 200,\n  colors: [0, 0, 0],\n  ambientColor: 0xffffff,\n  ambientIntensity: 1,\n  lightIntensity: 200,\n  materialParams: {\n    metalness: 0.5,\n    roughness: 0.5,\n    clearcoat: 1,\n    clearcoatRoughness: 0.15\n  },\n  minSize: 0.5,\n  maxSize: 1,\n  size0: 1,\n  gravity: 0.5,\n  friction: 0.9975,\n  wallBounce: 0.95,\n  maxVelocity: 0.15,\n  maxX: 5,\n  maxY: 5,\n  maxZ: 2,\n  controlSphere0: false,\n  followCursor: true\n};\n\nconst U = new Object3D();\n\nlet globalPointerActive = false;\nconst pointerPosition = new Vector2();\n\ninterface PointerData {\n  position: Vector2;\n  nPosition: Vector2;\n  hover: boolean;\n  onEnter: (data: PointerData) => void;\n  onMove: (data: PointerData) => void;\n  onClick: (data: PointerData) => void;\n  onLeave: (data: PointerData) => void;\n  dispose?: () => void;\n}\n\nconst pointerMap = new Map<HTMLElement, PointerData>();\n\nfunction createPointerData(options: Partial<PointerData> & { domElement: HTMLElement }): PointerData {\n  const defaultData: PointerData = {\n    position: new Vector2(),\n    nPosition: new Vector2(),\n    hover: false,\n    onEnter: () => {},\n    onMove: () => {},\n    onClick: () => {},\n    onLeave: () => {},\n    ...options\n  };\n  if (!pointerMap.has(options.domElement)) {\n    pointerMap.set(options.domElement, defaultData);\n    if (!globalPointerActive) {\n      document.body.addEventListener('pointermove', onPointerMove as EventListener);\n      document.body.addEventListener('pointerleave', onPointerLeave as EventListener);\n      document.body.addEventListener('click', onPointerClick as EventListener);\n      globalPointerActive = true;\n    }\n  }\n  defaultData.dispose = () => {\n    pointerMap.delete(options.domElement);\n    if (pointerMap.size === 0) {\n      document.body.removeEventListener('pointermove', onPointerMove as EventListener);\n      document.body.removeEventListener('pointerleave', onPointerLeave as EventListener);\n      document.body.removeEventListener('click', onPointerClick as EventListener);\n      globalPointerActive = false;\n    }\n  };\n  return defaultData;\n}\n\nfunction onPointerMove(e: PointerEvent) {\n  pointerPosition.set(e.clientX, e.clientY);\n  for (const [elem, data] of pointerMap) {\n    const rect = elem.getBoundingClientRect();\n    if (isInside(rect)) {\n      updatePointerData(data, rect);\n      if (!data.hover) {\n        data.hover = true;\n        data.onEnter(data);\n      }\n      data.onMove(data);\n    } else if (data.hover) {\n      data.hover = false;\n      data.onLeave(data);\n    }\n  }\n}\n\nfunction onPointerClick(e: PointerEvent) {\n  pointerPosition.set(e.clientX, e.clientY);\n  for (const [elem, data] of pointerMap) {\n    const rect = elem.getBoundingClientRect();\n    updatePointerData(data, rect);\n    if (isInside(rect)) data.onClick(data);\n  }\n}\n\nfunction onPointerLeave() {\n  for (const data of pointerMap.values()) {\n    if (data.hover) {\n      data.hover = false;\n      data.onLeave(data);\n    }\n  }\n}\n\nfunction updatePointerData(data: PointerData, rect: DOMRect) {\n  data.position.set(pointerPosition.x - rect.left, pointerPosition.y - rect.top);\n  data.nPosition.set((data.position.x / rect.width) * 2 - 1, (-data.position.y / rect.height) * 2 + 1);\n}\n\nfunction isInside(rect: DOMRect) {\n  return (\n    pointerPosition.x >= rect.left &&\n    pointerPosition.x <= rect.left + rect.width &&\n    pointerPosition.y >= rect.top &&\n    pointerPosition.y <= rect.top + rect.height\n  );\n}\n\nclass Z extends InstancedMesh {\n  config: typeof XConfig;\n  physics: W;\n  ambientLight: AmbientLight | undefined;\n  light: PointLight | undefined;\n\n  constructor(renderer: WebGLRenderer, params: Partial<typeof XConfig> = {}) {\n    const config = { ...XConfig, ...params };\n    const roomEnv = new RoomEnvironment();\n    const pmrem = new PMREMGenerator(renderer);\n    const envTexture = pmrem.fromScene(roomEnv).texture;\n    const geometry = new SphereGeometry();\n    const material = new Y({ envMap: envTexture, ...config.materialParams });\n    material.envMapRotation.x = -Math.PI / 2;\n    super(geometry, material, config.count);\n    this.config = config;\n    this.physics = new W(config);\n    this.#setupLights();\n    this.setColors(config.colors);\n  }\n\n  #setupLights() {\n    this.ambientLight = new AmbientLight(this.config.ambientColor, this.config.ambientIntensity);\n    this.add(this.ambientLight);\n    this.light = new PointLight(this.config.colors[0], this.config.lightIntensity);\n    this.add(this.light);\n  }\n\n  setColors(colors: number[]) {\n    if (Array.isArray(colors) && colors.length > 1) {\n      const colorUtils = (function (colorsArr: number[]) {\n        let baseColors: number[] = colorsArr;\n        let colorObjects: Color[] = [];\n        baseColors.forEach(col => {\n          colorObjects.push(new Color(col));\n        });\n        return {\n          setColors: (cols: number[]) => {\n            baseColors = cols;\n            colorObjects = [];\n            baseColors.forEach(col => {\n              colorObjects.push(new Color(col));\n            });\n          },\n          getColorAt: (ratio: number, out: Color = new Color()) => {\n            const clamped = Math.max(0, Math.min(1, ratio));\n            const scaled = clamped * (baseColors.length - 1);\n            const idx = Math.floor(scaled);\n            const start = colorObjects[idx];\n            if (idx >= baseColors.length - 1) return start.clone();\n            const alpha = scaled - idx;\n            const end = colorObjects[idx + 1];\n            out.r = start.r + alpha * (end.r - start.r);\n            out.g = start.g + alpha * (end.g - start.g);\n            out.b = start.b + alpha * (end.b - start.b);\n            return out;\n          }\n        };\n      })(colors);\n      for (let idx = 0; idx < this.count; idx++) {\n        this.setColorAt(idx, colorUtils.getColorAt(idx / this.count));\n        if (idx === 0) {\n          this.light!.color.copy(colorUtils.getColorAt(idx / this.count));\n        }\n      }\n\n      if (!this.instanceColor) return;\n      this.instanceColor.needsUpdate = true;\n    }\n  }\n\n  update(deltaInfo: { delta: number }) {\n    this.physics.update(deltaInfo);\n    for (let idx = 0; idx < this.count; idx++) {\n      U.position.fromArray(this.physics.positionData, 3 * idx);\n      if (idx === 0 && this.config.followCursor === false) {\n        U.scale.setScalar(0);\n      } else {\n        U.scale.setScalar(this.physics.sizeData[idx]);\n      }\n      U.updateMatrix();\n      this.setMatrixAt(idx, U.matrix);\n      if (idx === 0) this.light!.position.copy(U.position);\n    }\n    this.instanceMatrix.needsUpdate = true;\n  }\n}\n\ninterface CreateBallpitReturn {\n  three: X;\n  spheres: Z;\n  setCount: (count: number) => void;\n  togglePause: () => void;\n  dispose: () => void;\n}\n\nfunction createBallpit(canvas: HTMLCanvasElement, config: Partial<typeof XConfig> = {}): CreateBallpitReturn {\n  const threeInstance = new X({\n    canvas,\n    size: 'parent',\n    rendererOptions: { antialias: true, alpha: true }\n  });\n  let spheres: Z;\n  threeInstance.renderer.toneMapping = ACESFilmicToneMapping;\n  threeInstance.camera.position.set(0, 0, 20);\n  threeInstance.camera.lookAt(0, 0, 0);\n  threeInstance.cameraMaxAspect = 1.5;\n  threeInstance.resize();\n  initialize(config);\n  const raycaster = new Raycaster();\n  const plane = new Plane(new Vector3(0, 0, 1), 0);\n  const intersectionPoint = new Vector3();\n  let isPaused = false;\n  const pointerData = createPointerData({\n    domElement: canvas,\n    onMove() {\n      raycaster.setFromCamera(pointerData.nPosition, threeInstance.camera);\n      threeInstance.camera.getWorldDirection(plane.normal);\n      raycaster.ray.intersectPlane(plane, intersectionPoint);\n      spheres.physics.center.copy(intersectionPoint);\n      spheres.config.controlSphere0 = true;\n    },\n    onLeave() {\n      spheres.config.controlSphere0 = false;\n    }\n  });\n  function initialize(cfg: Partial<typeof XConfig>) {\n    if (spheres) {\n      threeInstance.clear();\n      threeInstance.scene.remove(spheres);\n    }\n    spheres = new Z(threeInstance.renderer, cfg);\n    threeInstance.scene.add(spheres);\n  }\n  threeInstance.onBeforeRender = deltaInfo => {\n    if (!isPaused) spheres.update(deltaInfo);\n  };\n  threeInstance.onAfterResize = size => {\n    spheres.config.maxX = size.wWidth / 2;\n    spheres.config.maxY = size.wHeight / 2;\n  };\n  return {\n    three: threeInstance,\n    get spheres() {\n      return spheres;\n    },\n    setCount(count: number) {\n      initialize({ ...spheres.config, count });\n    },\n    togglePause() {\n      isPaused = !isPaused;\n    },\n    dispose() {\n      pointerData.dispose?.();\n      threeInstance.dispose();\n    }\n  };\n}\n\nonMounted(() => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n\n  const { followCursor, ...restProps } = props;\n\n  const safeMaterialParams = {\n    metalness: props.materialParams.metalness ?? 0.5,\n    roughness: props.materialParams.roughness ?? 0.5,\n    clearcoat: props.materialParams.clearcoat ?? 1,\n    clearcoatRoughness: props.materialParams.clearcoatRoughness ?? 0.15\n  };\n\n  spheresInstanceRef.value = createBallpit(canvas, {\n    ...restProps,\n    followCursor,\n    materialParams: safeMaterialParams\n  });\n});\n\nonUnmounted(() => {\n  if (spheresInstanceRef.value) {\n    spheresInstanceRef.value.dispose();\n  }\n});\n</script>\n\n<template>\n  <canvas ref=\"canvasRef\" :class=\"['w-full', 'h-full', props.className]\" />\n</template>\n","path":"Ballpit/Ballpit.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"},{"ecosystem":"js","name":"three","version":"^0.178.0"}],"devDependencies":[],"categories":["Backgrounds"]}
\ No newline at end of file
+{"name":"Ballpit","title":"Ballpit","description":"Physics ball pit simulation with bouncing colorful spheres.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { gsap } from 'gsap';\nimport { Observer } from 'gsap/all';\nimport {\n  ACESFilmicToneMapping,\n  AmbientLight,\n  Clock,\n  Color,\n  InstancedMesh,\n  MathUtils,\n  MeshPhysicalMaterial,\n  Object3D,\n  PerspectiveCamera,\n  Plane,\n  PMREMGenerator,\n  PointLight,\n  Raycaster,\n  Scene,\n  ShaderChunk,\n  SphereGeometry,\n  SRGBColorSpace,\n  Vector2,\n  Vector3,\n  WebGLRenderer,\n  type MeshPhysicalMaterialParameters,\n  type WebGLRendererParameters\n} from 'three';\nimport { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';\nimport { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';\n\ngsap.registerPlugin(Observer);\n\ninterface MaterialParams extends MeshPhysicalMaterialParameters {\n  metalness?: number;\n  roughness?: number;\n  clearcoat?: number;\n  clearcoatRoughness?: number;\n}\n\ninterface Props {\n  className?: string;\n  followCursor?: boolean;\n  count?: number;\n  colors?: number[];\n  ambientColor?: number;\n  ambientIntensity?: number;\n  lightIntensity?: number;\n  materialParams?: MaterialParams;\n  minSize?: number;\n  maxSize?: number;\n  size0?: number;\n  gravity?: number;\n  friction?: number;\n  wallBounce?: number;\n  maxVelocity?: number;\n  maxX?: number;\n  maxY?: number;\n  maxZ?: number;\n  controlSphere0?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  className: '',\n  followCursor: true,\n  count: 200,\n  colors: () => [0, 0, 0],\n  ambientColor: 0xffffff,\n  ambientIntensity: 1,\n  lightIntensity: 200,\n  materialParams: () => ({\n    metalness: 0.5,\n    roughness: 0.5,\n    clearcoat: 1,\n    clearcoatRoughness: 0.15\n  }),\n  minSize: 0.5,\n  maxSize: 1,\n  size0: 1,\n  gravity: 0.5,\n  friction: 0.9975,\n  wallBounce: 0.95,\n  maxVelocity: 0.15,\n  maxX: 5,\n  maxY: 5,\n  maxZ: 2,\n  controlSphere0: false\n});\n\nconst canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');\nconst spheresInstanceRef = ref<CreateBallpitReturn | null>(null);\n\ninterface PostProcessing {\n  setSize: (width: number, height: number) => void;\n  render: () => void;\n  dispose: () => void;\n}\n\ninterface XConfig {\n  canvas?: HTMLCanvasElement;\n  id?: string;\n  rendererOptions?: Partial<WebGLRendererParameters>;\n  size?: 'parent' | { width: number; height: number };\n}\n\ninterface SizeData {\n  width: number;\n  height: number;\n  wWidth: number;\n  wHeight: number;\n  ratio: number;\n  pixelRatio: number;\n}\n\nclass X {\n  #config: XConfig;\n  #postprocessing: PostProcessing | null = null;\n  #resizeObserver?: ResizeObserver;\n  #intersectionObserver?: IntersectionObserver;\n  #resizeTimer?: number;\n  #animationFrameId: number = 0;\n  #clock: Clock = new Clock();\n  #animationState = { elapsed: 0, delta: 0 };\n  #isAnimating: boolean = false;\n  #isVisible: boolean = false;\n\n  canvas!: HTMLCanvasElement;\n  camera!: PerspectiveCamera;\n  cameraMinAspect?: number;\n  cameraMaxAspect?: number;\n  cameraFov!: number;\n  maxPixelRatio?: number;\n  minPixelRatio?: number;\n  scene!: Scene;\n  renderer!: WebGLRenderer;\n  size: SizeData = {\n    width: 0,\n    height: 0,\n    wWidth: 0,\n    wHeight: 0,\n    ratio: 0,\n    pixelRatio: 0\n  };\n\n  render: () => void = this.#render.bind(this);\n  onBeforeRender: (state: { elapsed: number; delta: number }) => void = () => {};\n  onAfterRender: (state: { elapsed: number; delta: number }) => void = () => {};\n  onAfterResize: (size: SizeData) => void = () => {};\n  isDisposed: boolean = false;\n\n  constructor(config: XConfig) {\n    this.#config = { ...config };\n    this.#initCamera();\n    this.#initScene();\n    this.#initRenderer();\n    this.resize();\n    this.#initObservers();\n  }\n\n  #initCamera() {\n    this.camera = new PerspectiveCamera();\n    this.cameraFov = this.camera.fov;\n  }\n\n  #initScene() {\n    this.scene = new Scene();\n  }\n\n  #initRenderer() {\n    if (this.#config.canvas) {\n      this.canvas = this.#config.canvas;\n    } else if (this.#config.id) {\n      const elem = document.getElementById(this.#config.id);\n      if (elem instanceof HTMLCanvasElement) {\n        this.canvas = elem;\n      } else {\n        console.error('Three: Missing canvas or id parameter');\n      }\n    } else {\n      console.error('Three: Missing canvas or id parameter');\n    }\n    this.canvas!.style.display = 'block';\n    const rendererOptions: WebGLRendererParameters = {\n      canvas: this.canvas,\n      powerPreference: 'high-performance',\n      ...(this.#config.rendererOptions ?? {})\n    };\n    this.renderer = new WebGLRenderer(rendererOptions);\n    this.renderer.outputColorSpace = SRGBColorSpace;\n  }\n\n  #initObservers() {\n    if (!(this.#config.size instanceof Object)) {\n      window.addEventListener('resize', this.#onResize.bind(this));\n      if (this.#config.size === 'parent' && this.canvas.parentNode) {\n        this.#resizeObserver = new ResizeObserver(this.#onResize.bind(this));\n        this.#resizeObserver.observe(this.canvas.parentNode as Element);\n      }\n    }\n    this.#intersectionObserver = new IntersectionObserver(this.#onIntersection.bind(this), {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0\n    });\n    this.#intersectionObserver.observe(this.canvas);\n    document.addEventListener('visibilitychange', this.#onVisibilityChange.bind(this));\n  }\n\n  #onResize() {\n    if (this.#resizeTimer) clearTimeout(this.#resizeTimer);\n    this.#resizeTimer = window.setTimeout(this.resize.bind(this), 100);\n  }\n\n  resize() {\n    let w: number, h: number;\n    if (this.#config.size instanceof Object) {\n      w = this.#config.size.width;\n      h = this.#config.size.height;\n    } else if (this.#config.size === 'parent' && this.canvas.parentNode) {\n      w = (this.canvas.parentNode as HTMLElement).offsetWidth;\n      h = (this.canvas.parentNode as HTMLElement).offsetHeight;\n    } else {\n      w = window.innerWidth;\n      h = window.innerHeight;\n    }\n    this.size.width = w;\n    this.size.height = h;\n    this.size.ratio = w / h;\n    this.#updateCamera();\n    this.#updateRenderer();\n    this.onAfterResize(this.size);\n  }\n\n  #updateCamera() {\n    this.camera.aspect = this.size.width / this.size.height;\n    if (this.camera.isPerspectiveCamera && this.cameraFov) {\n      if (this.cameraMinAspect && this.camera.aspect < this.cameraMinAspect) {\n        this.#adjustFov(this.cameraMinAspect);\n      } else if (this.cameraMaxAspect && this.camera.aspect > this.cameraMaxAspect) {\n        this.#adjustFov(this.cameraMaxAspect);\n      } else {\n        this.camera.fov = this.cameraFov;\n      }\n    }\n    this.camera.updateProjectionMatrix();\n    this.updateWorldSize();\n  }\n\n  #adjustFov(aspect: number) {\n    const tanFov = Math.tan(MathUtils.degToRad(this.cameraFov / 2));\n    const newTan = tanFov / (this.camera.aspect / aspect);\n    this.camera.fov = 2 * MathUtils.radToDeg(Math.atan(newTan));\n  }\n\n  updateWorldSize() {\n    if (this.camera.isPerspectiveCamera) {\n      const fovRad = (this.camera.fov * Math.PI) / 180;\n      this.size.wHeight = 2 * Math.tan(fovRad / 2) * this.camera.position.length();\n      this.size.wWidth = this.size.wHeight * this.camera.aspect;\n    } else {\n      const cam = this.camera as unknown as {\n        top: number;\n        bottom: number;\n        left: number;\n        right: number;\n        isOrthographicCamera: boolean;\n      };\n      if (cam.isOrthographicCamera) {\n        this.size.wHeight = cam.top - cam.bottom;\n        this.size.wWidth = cam.right - cam.left;\n      }\n    }\n  }\n\n  #updateRenderer() {\n    this.renderer.setSize(this.size.width, this.size.height);\n    this.#postprocessing?.setSize(this.size.width, this.size.height);\n    let pr = window.devicePixelRatio;\n    if (this.maxPixelRatio && pr > this.maxPixelRatio) {\n      pr = this.maxPixelRatio;\n    } else if (this.minPixelRatio && pr < this.minPixelRatio) {\n      pr = this.minPixelRatio;\n    }\n    this.renderer.setPixelRatio(pr);\n    this.size.pixelRatio = pr;\n  }\n\n  get postprocessing() {\n    return this.#postprocessing;\n  }\n  set postprocessing(value: PostProcessing | null) {\n    this.#postprocessing = value;\n    if (value) {\n      this.render = value.render.bind(value);\n    } else {\n      this.render = this.#render.bind(this);\n    }\n  }\n\n  #onIntersection(entries: IntersectionObserverEntry[]) {\n    this.#isAnimating = entries[0].isIntersecting;\n    if (this.#isAnimating) {\n      this.#startAnimation();\n    } else {\n      this.#stopAnimation();\n    }\n  }\n\n  #onVisibilityChange() {\n    if (this.#isAnimating) {\n      if (document.hidden) {\n        this.#stopAnimation();\n      } else {\n        this.#startAnimation();\n      }\n    }\n  }\n\n  #startAnimation() {\n    if (this.#isVisible) return;\n    const animateFrame = () => {\n      this.#animationFrameId = requestAnimationFrame(animateFrame);\n      this.#animationState.delta = this.#clock.getDelta();\n      this.#animationState.elapsed += this.#animationState.delta;\n      this.onBeforeRender(this.#animationState);\n      this.render();\n      this.onAfterRender(this.#animationState);\n    };\n    this.#isVisible = true;\n    this.#clock.start();\n    animateFrame();\n  }\n\n  #stopAnimation() {\n    if (this.#isVisible) {\n      cancelAnimationFrame(this.#animationFrameId);\n      this.#isVisible = false;\n      this.#clock.stop();\n    }\n  }\n\n  #render() {\n    this.renderer.render(this.scene, this.camera);\n  }\n\n  clear() {\n    this.scene.traverse(obj => {\n      const mesh = obj as unknown as {\n        isMesh?: boolean;\n        material?: {\n          dispose: () => void;\n          [key: string]: unknown;\n        };\n        geometry?: {\n          dispose: () => void;\n        };\n      };\n      if (mesh.isMesh && mesh.material && mesh.geometry) {\n        if (typeof mesh.material === 'object' && mesh.material !== null) {\n          Object.keys(mesh.material).forEach(key => {\n            const matProp = mesh.material![key] as unknown;\n            if (matProp && typeof matProp === 'object' && matProp !== null) {\n              const disposable = matProp as { dispose?: () => void };\n              if (typeof disposable.dispose === 'function') {\n                disposable.dispose();\n              }\n            }\n          });\n          mesh.material.dispose();\n          mesh.geometry.dispose();\n        }\n      }\n    });\n    this.scene.clear();\n  }\n\n  dispose() {\n    this.#onResizeCleanup();\n    this.#stopAnimation();\n    this.clear();\n    this.#postprocessing?.dispose();\n    this.renderer.dispose();\n    this.isDisposed = true;\n  }\n\n  #onResizeCleanup() {\n    window.removeEventListener('resize', this.#onResize.bind(this));\n    this.#resizeObserver?.disconnect();\n    this.#intersectionObserver?.disconnect();\n    document.removeEventListener('visibilitychange', this.#onVisibilityChange.bind(this));\n  }\n}\n\ninterface WConfig {\n  count: number;\n  maxX: number;\n  maxY: number;\n  maxZ: number;\n  maxSize: number;\n  minSize: number;\n  size0: number;\n  gravity: number;\n  friction: number;\n  wallBounce: number;\n  maxVelocity: number;\n  controlSphere0?: boolean;\n  followCursor?: boolean;\n}\n\nclass W {\n  config: WConfig;\n  positionData: Float32Array;\n  velocityData: Float32Array;\n  sizeData: Float32Array;\n  center: Vector3 = new Vector3();\n\n  constructor(config: WConfig) {\n    this.config = config;\n    this.positionData = new Float32Array(3 * config.count).fill(0);\n    this.velocityData = new Float32Array(3 * config.count).fill(0);\n    this.sizeData = new Float32Array(config.count).fill(1);\n    this.center = new Vector3();\n    this.#initializePositions();\n    this.setSizes();\n  }\n\n  #initializePositions() {\n    const { config, positionData } = this;\n    this.center.toArray(positionData, 0);\n    for (let i = 1; i < config.count; i++) {\n      const idx = 3 * i;\n      positionData[idx] = MathUtils.randFloatSpread(2 * config.maxX);\n      positionData[idx + 1] = MathUtils.randFloatSpread(2 * config.maxY);\n      positionData[idx + 2] = MathUtils.randFloatSpread(2 * config.maxZ);\n    }\n  }\n\n  setSizes() {\n    const { config, sizeData } = this;\n    sizeData[0] = config.size0;\n    for (let i = 1; i < config.count; i++) {\n      sizeData[i] = MathUtils.randFloat(config.minSize, config.maxSize);\n    }\n  }\n\n  update(deltaInfo: { delta: number }) {\n    const { config, center, positionData, sizeData, velocityData } = this;\n    let startIdx = 0;\n    if (config.controlSphere0) {\n      startIdx = 1;\n      const firstVec = new Vector3().fromArray(positionData, 0);\n      firstVec.lerp(center, 0.1).toArray(positionData, 0);\n      new Vector3(0, 0, 0).toArray(velocityData, 0);\n    }\n    for (let idx = startIdx; idx < config.count; idx++) {\n      const base = 3 * idx;\n      const pos = new Vector3().fromArray(positionData, base);\n      const vel = new Vector3().fromArray(velocityData, base);\n      vel.y -= deltaInfo.delta * config.gravity * sizeData[idx];\n      vel.multiplyScalar(config.friction);\n      vel.clampLength(0, config.maxVelocity);\n      pos.add(vel);\n      pos.toArray(positionData, base);\n      vel.toArray(velocityData, base);\n    }\n    for (let idx = startIdx; idx < config.count; idx++) {\n      const base = 3 * idx;\n      const pos = new Vector3().fromArray(positionData, base);\n      const vel = new Vector3().fromArray(velocityData, base);\n      const radius = sizeData[idx];\n      for (let jdx = idx + 1; jdx < config.count; jdx++) {\n        const otherBase = 3 * jdx;\n        const otherPos = new Vector3().fromArray(positionData, otherBase);\n        const otherVel = new Vector3().fromArray(velocityData, otherBase);\n        const diff = new Vector3().copy(otherPos).sub(pos);\n        const dist = diff.length();\n        const sumRadius = radius + sizeData[jdx];\n        if (dist < sumRadius) {\n          const overlap = sumRadius - dist;\n          const correction = diff.normalize().multiplyScalar(0.5 * overlap);\n          const velCorrection = correction.clone().multiplyScalar(Math.max(vel.length(), 1));\n          pos.sub(correction);\n          vel.sub(velCorrection);\n          pos.toArray(positionData, base);\n          vel.toArray(velocityData, base);\n          otherPos.add(correction);\n          otherVel.add(correction.clone().multiplyScalar(Math.max(otherVel.length(), 1)));\n          otherPos.toArray(positionData, otherBase);\n          otherVel.toArray(velocityData, otherBase);\n        }\n      }\n      if (config.controlSphere0) {\n        const diff = new Vector3().copy(new Vector3().fromArray(positionData, 0)).sub(pos);\n        const d = diff.length();\n        const sumRadius0 = radius + sizeData[0];\n        if (d < sumRadius0) {\n          const correction = diff.normalize().multiplyScalar(sumRadius0 - d);\n          const velCorrection = correction.clone().multiplyScalar(Math.max(vel.length(), 2));\n          pos.sub(correction);\n          vel.sub(velCorrection);\n        }\n      }\n      if (Math.abs(pos.x) + radius > config.maxX) {\n        pos.x = Math.sign(pos.x) * (config.maxX - radius);\n        vel.x = -vel.x * config.wallBounce;\n      }\n      if (config.gravity === 0) {\n        if (Math.abs(pos.y) + radius > config.maxY) {\n          pos.y = Math.sign(pos.y) * (config.maxY - radius);\n          vel.y = -vel.y * config.wallBounce;\n        }\n      } else if (pos.y - radius < -config.maxY) {\n        pos.y = -config.maxY + radius;\n        vel.y = -vel.y * config.wallBounce;\n      }\n      const maxBoundary = Math.max(config.maxZ, config.maxSize);\n      if (Math.abs(pos.z) + radius > maxBoundary) {\n        pos.z = Math.sign(pos.z) * (config.maxZ - radius);\n        vel.z = -vel.z * config.wallBounce;\n      }\n      pos.toArray(positionData, base);\n      vel.toArray(velocityData, base);\n    }\n  }\n}\n\ninterface ShaderUniforms {\n  [key: string]: { value: number | Vector2 | Vector3 | Color | boolean };\n}\n\ninterface ShaderObject {\n  uniforms: ShaderUniforms;\n  fragmentShader: string;\n  vertexShader: string;\n}\n\ninterface UniformValue {\n  value: number | Vector2 | Vector3 | Color | boolean;\n}\n\nclass Y extends MeshPhysicalMaterial {\n  uniforms: { [key: string]: UniformValue } = {\n    thicknessDistortion: { value: 0.1 },\n    thicknessAmbient: { value: 0 },\n    thicknessAttenuation: { value: 0.1 },\n    thicknessPower: { value: 2 },\n    thicknessScale: { value: 10 }\n  };\n\n  declare defines: { [key: string]: string };\n\n  constructor(params: MaterialParams) {\n    super(params);\n    this.defines = { USE_UV: '' };\n    this.onBeforeCompile = shader => {\n      Object.assign(shader.uniforms, this.uniforms);\n      shader.fragmentShader =\n        `\n        uniform float thicknessPower;\n        uniform float thicknessScale;\n        uniform float thicknessDistortion;\n        uniform float thicknessAmbient;\n        uniform float thicknessAttenuation;\n        ` + shader.fragmentShader;\n      shader.fragmentShader = shader.fragmentShader.replace(\n        'void main() {',\n        `\n        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) {\n          vec3 scatteringHalf = normalize(directLight.direction + (geometryNormal * thicknessDistortion));\n          float scatteringDot = pow(saturate(dot(geometryViewDir, -scatteringHalf)), thicknessPower) * thicknessScale;\n          #ifdef USE_COLOR\n            vec3 scatteringIllu = (scatteringDot + thicknessAmbient) * vColor;\n          #else\n            vec3 scatteringIllu = (scatteringDot + thicknessAmbient) * diffuse;\n          #endif\n          reflectedLight.directDiffuse += scatteringIllu * thicknessAttenuation * directLight.color;\n        }\n\n        void main() {\n        `\n      );\n      const lightsChunk = ShaderChunk.lights_fragment_begin.replace(\n        /RE_Direct\\( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight \\);/g,\n        `\n          RE_Direct( directLight, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );\n          RE_Direct_Scattering(directLight, vUv, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, reflectedLight);\n        `\n      );\n      shader.fragmentShader = shader.fragmentShader.replace('#include <lights_fragment_begin>', lightsChunk);\n      if (this.onBeforeCompile2) this.onBeforeCompile2(shader);\n    };\n  }\n  onBeforeCompile2?: (shader: ShaderObject) => void;\n}\n\nconst XConfig = {\n  count: 200,\n  colors: [0, 0, 0],\n  ambientColor: 0xffffff,\n  ambientIntensity: 1,\n  lightIntensity: 200,\n  materialParams: {\n    metalness: 0.5,\n    roughness: 0.5,\n    clearcoat: 1,\n    clearcoatRoughness: 0.15\n  },\n  minSize: 0.5,\n  maxSize: 1,\n  size0: 1,\n  gravity: 0.5,\n  friction: 0.9975,\n  wallBounce: 0.95,\n  maxVelocity: 0.15,\n  maxX: 5,\n  maxY: 5,\n  maxZ: 2,\n  controlSphere0: false,\n  followCursor: true\n};\n\nconst U = new Object3D();\n\nlet globalPointerActive = false;\nconst pointerPosition = new Vector2();\n\ninterface PointerData {\n  position: Vector2;\n  nPosition: Vector2;\n  hover: boolean;\n  onEnter: (data: PointerData) => void;\n  onMove: (data: PointerData) => void;\n  onClick: (data: PointerData) => void;\n  onLeave: (data: PointerData) => void;\n  dispose?: () => void;\n}\n\nconst pointerMap = new Map<HTMLElement, PointerData>();\n\nfunction createPointerData(options: Partial<PointerData> & { domElement: HTMLElement }): PointerData {\n  const defaultData: PointerData = {\n    position: new Vector2(),\n    nPosition: new Vector2(),\n    hover: false,\n    onEnter: () => {},\n    onMove: () => {},\n    onClick: () => {},\n    onLeave: () => {},\n    ...options\n  };\n  if (!pointerMap.has(options.domElement)) {\n    pointerMap.set(options.domElement, defaultData);\n    if (!globalPointerActive) {\n      document.body.addEventListener('pointermove', onPointerMove as EventListener);\n      document.body.addEventListener('pointerleave', onPointerLeave as EventListener);\n      document.body.addEventListener('click', onPointerClick as EventListener);\n      globalPointerActive = true;\n    }\n  }\n  defaultData.dispose = () => {\n    pointerMap.delete(options.domElement);\n    if (pointerMap.size === 0) {\n      document.body.removeEventListener('pointermove', onPointerMove as EventListener);\n      document.body.removeEventListener('pointerleave', onPointerLeave as EventListener);\n      document.body.removeEventListener('click', onPointerClick as EventListener);\n      globalPointerActive = false;\n    }\n  };\n  return defaultData;\n}\n\nfunction onPointerMove(e: PointerEvent) {\n  pointerPosition.set(e.clientX, e.clientY);\n  for (const [elem, data] of pointerMap) {\n    const rect = elem.getBoundingClientRect();\n    if (isInside(rect)) {\n      updatePointerData(data, rect);\n      if (!data.hover) {\n        data.hover = true;\n        data.onEnter(data);\n      }\n      data.onMove(data);\n    } else if (data.hover) {\n      data.hover = false;\n      data.onLeave(data);\n    }\n  }\n}\n\nfunction onPointerClick(e: PointerEvent) {\n  pointerPosition.set(e.clientX, e.clientY);\n  for (const [elem, data] of pointerMap) {\n    const rect = elem.getBoundingClientRect();\n    updatePointerData(data, rect);\n    if (isInside(rect)) data.onClick(data);\n  }\n}\n\nfunction onPointerLeave() {\n  for (const data of pointerMap.values()) {\n    if (data.hover) {\n      data.hover = false;\n      data.onLeave(data);\n    }\n  }\n}\n\nfunction updatePointerData(data: PointerData, rect: DOMRect) {\n  data.position.set(pointerPosition.x - rect.left, pointerPosition.y - rect.top);\n  data.nPosition.set((data.position.x / rect.width) * 2 - 1, (-data.position.y / rect.height) * 2 + 1);\n}\n\nfunction isInside(rect: DOMRect) {\n  return (\n    pointerPosition.x >= rect.left &&\n    pointerPosition.x <= rect.left + rect.width &&\n    pointerPosition.y >= rect.top &&\n    pointerPosition.y <= rect.top + rect.height\n  );\n}\n\nclass Z extends InstancedMesh {\n  config: typeof XConfig;\n  physics: W;\n  ambientLight: AmbientLight | undefined;\n  light: PointLight | undefined;\n\n  constructor(renderer: WebGLRenderer, params: Partial<typeof XConfig> = {}) {\n    const config = { ...XConfig, ...params };\n    const roomEnv = new RoomEnvironment();\n    const pmrem = new PMREMGenerator(renderer);\n    const envTexture = pmrem.fromScene(roomEnv).texture;\n    const geometry = new SphereGeometry();\n    const material = new Y({ envMap: envTexture, ...config.materialParams });\n    material.envMapRotation.x = -Math.PI / 2;\n    super(geometry, material, config.count);\n    this.config = config;\n    this.physics = new W(config);\n    this.#setupLights();\n    this.setColors(config.colors);\n  }\n\n  #setupLights() {\n    this.ambientLight = new AmbientLight(this.config.ambientColor, this.config.ambientIntensity);\n    this.add(this.ambientLight);\n    this.light = new PointLight(this.config.colors[0], this.config.lightIntensity);\n    this.add(this.light);\n  }\n\n  setColors(colors: number[]) {\n    if (Array.isArray(colors) && colors.length > 1) {\n      const colorUtils = (function (colorsArr: number[]) {\n        let baseColors: number[] = colorsArr;\n        let colorObjects: Color[] = [];\n        baseColors.forEach(col => {\n          colorObjects.push(new Color(col));\n        });\n        return {\n          setColors: (cols: number[]) => {\n            baseColors = cols;\n            colorObjects = [];\n            baseColors.forEach(col => {\n              colorObjects.push(new Color(col));\n            });\n          },\n          getColorAt: (ratio: number, out: Color = new Color()) => {\n            const clamped = Math.max(0, Math.min(1, ratio));\n            const scaled = clamped * (baseColors.length - 1);\n            const idx = Math.floor(scaled);\n            const start = colorObjects[idx];\n            if (idx >= baseColors.length - 1) return start.clone();\n            const alpha = scaled - idx;\n            const end = colorObjects[idx + 1];\n            out.r = start.r + alpha * (end.r - start.r);\n            out.g = start.g + alpha * (end.g - start.g);\n            out.b = start.b + alpha * (end.b - start.b);\n            return out;\n          }\n        };\n      })(colors);\n      for (let idx = 0; idx < this.count; idx++) {\n        this.setColorAt(idx, colorUtils.getColorAt(idx / this.count));\n        if (idx === 0) {\n          this.light!.color.copy(colorUtils.getColorAt(idx / this.count));\n        }\n      }\n\n      if (!this.instanceColor) return;\n      this.instanceColor.needsUpdate = true;\n    }\n  }\n\n  update(deltaInfo: { delta: number }) {\n    this.physics.update(deltaInfo);\n    for (let idx = 0; idx < this.count; idx++) {\n      U.position.fromArray(this.physics.positionData, 3 * idx);\n      if (idx === 0 && this.config.followCursor === false) {\n        U.scale.setScalar(0);\n      } else {\n        U.scale.setScalar(this.physics.sizeData[idx]);\n      }\n      U.updateMatrix();\n      this.setMatrixAt(idx, U.matrix);\n      if (idx === 0) this.light!.position.copy(U.position);\n    }\n    this.instanceMatrix.needsUpdate = true;\n  }\n}\n\ninterface CreateBallpitReturn {\n  three: X;\n  spheres: Z;\n  setCount: (count: number) => void;\n  togglePause: () => void;\n  dispose: () => void;\n}\n\nfunction createBallpit(canvas: HTMLCanvasElement, config: Partial<typeof XConfig> = {}): CreateBallpitReturn {\n  const threeInstance = new X({\n    canvas,\n    size: 'parent',\n    rendererOptions: { antialias: true, alpha: true }\n  });\n  let spheres: Z;\n  threeInstance.renderer.toneMapping = ACESFilmicToneMapping;\n  threeInstance.camera.position.set(0, 0, 20);\n  threeInstance.camera.lookAt(0, 0, 0);\n  threeInstance.cameraMaxAspect = 1.5;\n  threeInstance.resize();\n  initialize(config);\n  const raycaster = new Raycaster();\n  const plane = new Plane(new Vector3(0, 0, 1), 0);\n  const intersectionPoint = new Vector3();\n  let isPaused = false;\n  const pointerData = createPointerData({\n    domElement: canvas,\n    onMove() {\n      raycaster.setFromCamera(pointerData.nPosition, threeInstance.camera);\n      threeInstance.camera.getWorldDirection(plane.normal);\n      raycaster.ray.intersectPlane(plane, intersectionPoint);\n      spheres.physics.center.copy(intersectionPoint);\n      spheres.config.controlSphere0 = true;\n    },\n    onLeave() {\n      spheres.config.controlSphere0 = false;\n    }\n  });\n  function initialize(cfg: Partial<typeof XConfig>) {\n    if (spheres) {\n      threeInstance.clear();\n      threeInstance.scene.remove(spheres);\n    }\n    spheres = new Z(threeInstance.renderer, cfg);\n    threeInstance.scene.add(spheres);\n  }\n  threeInstance.onBeforeRender = deltaInfo => {\n    if (!isPaused) spheres.update(deltaInfo);\n  };\n  threeInstance.onAfterResize = size => {\n    spheres.config.maxX = size.wWidth / 2;\n    spheres.config.maxY = size.wHeight / 2;\n  };\n  return {\n    three: threeInstance,\n    get spheres() {\n      return spheres;\n    },\n    setCount(count: number) {\n      initialize({ ...spheres.config, count });\n    },\n    togglePause() {\n      isPaused = !isPaused;\n    },\n    dispose() {\n      pointerData.dispose?.();\n      threeInstance.dispose();\n    }\n  };\n}\n\nonMounted(() => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n\n  const { followCursor, ...restProps } = props;\n\n  const safeMaterialParams = {\n    metalness: props.materialParams.metalness ?? 0.5,\n    roughness: props.materialParams.roughness ?? 0.5,\n    clearcoat: props.materialParams.clearcoat ?? 1,\n    clearcoatRoughness: props.materialParams.clearcoatRoughness ?? 0.15\n  };\n\n  spheresInstanceRef.value = createBallpit(canvas, {\n    ...restProps,\n    followCursor,\n    materialParams: safeMaterialParams\n  });\n});\n\nonUnmounted(() => {\n  if (spheresInstanceRef.value) {\n    spheresInstanceRef.value.dispose();\n  }\n});\n</script>\n\n<template>\n  <canvas ref=\"canvasRef\" :class=\"['w-full', 'h-full', props.className]\" />\n</template>\n","path":"Ballpit/Ballpit.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"},{"ecosystem":"js","name":"three","version":"^0.178.0"}],"devDependencies":[],"categories":["Backgrounds"]}
\ No newline at end of file
diff --git a/public/r/ClickSpark.json b/public/r/ClickSpark.json
index 2dc37c7..cd8d257 100644
--- a/public/r/ClickSpark.json
+++ b/public/r/ClickSpark.json
@@ -1 +1 @@
-{"name":"ClickSpark","title":"ClickSpark","description":"Creates particle spark bursts at click position.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div ref=\"containerRef\" class=\"relative w-full h-full\" @click=\"handleClick\">\n    <canvas ref=\"canvasRef\" class=\"absolute inset-0 pointer-events-none\" />\n\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, computed, watch, useTemplateRef } from 'vue';\n\ninterface Spark {\n  x: number;\n  y: number;\n  angle: number;\n  startTime: number;\n}\n\ninterface Props {\n  sparkColor?: string;\n  sparkSize?: number;\n  sparkRadius?: number;\n  sparkCount?: number;\n  duration?: number;\n  easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';\n  extraScale?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  sparkColor: '#fff',\n  sparkSize: 10,\n  sparkRadius: 15,\n  sparkCount: 8,\n  duration: 400,\n  easing: 'ease-out',\n  extraScale: 1.0\n});\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');\nconst sparks = ref<Spark[]>([]);\nconst startTimeRef = ref<number | null>(null);\nconst animationId = ref<number | null>(null);\n\nconst easeFunc = computed(() => {\n  return (t: number) => {\n    switch (props.easing) {\n      case 'linear':\n        return t;\n      case 'ease-in':\n        return t * t;\n      case 'ease-in-out':\n        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n      default:\n        return t * (2 - t);\n    }\n  };\n});\n\nconst handleClick = (e: MouseEvent) => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n  const rect = canvas.getBoundingClientRect();\n  const x = e.clientX - rect.left;\n  const y = e.clientY - rect.top;\n\n  const now = performance.now();\n  const newSparks: Spark[] = Array.from({ length: props.sparkCount }, (_, i) => ({\n    x,\n    y,\n    angle: (2 * Math.PI * i) / props.sparkCount,\n    startTime: now\n  }));\n\n  sparks.value.push(...newSparks);\n};\n\nconst draw = (timestamp: number) => {\n  if (!startTimeRef.value) {\n    startTimeRef.value = timestamp;\n  }\n\n  const canvas = canvasRef.value;\n  const ctx = canvas?.getContext('2d');\n  if (!ctx || !canvas) return;\n\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n  sparks.value = sparks.value.filter((spark: Spark) => {\n    const elapsed = timestamp - spark.startTime;\n    if (elapsed >= props.duration) {\n      return false;\n    }\n\n    const progress = elapsed / props.duration;\n    const eased = easeFunc.value(progress);\n\n    const distance = eased * props.sparkRadius * props.extraScale;\n    const lineLength = props.sparkSize * (1 - eased);\n\n    const x1 = spark.x + distance * Math.cos(spark.angle);\n    const y1 = spark.y + distance * Math.sin(spark.angle);\n    const x2 = spark.x + (distance + lineLength) * Math.cos(spark.angle);\n    const y2 = spark.y + (distance + lineLength) * Math.sin(spark.angle);\n\n    ctx.strokeStyle = props.sparkColor;\n    ctx.lineWidth = 2;\n    ctx.beginPath();\n    ctx.moveTo(x1, y1);\n    ctx.lineTo(x2, y2);\n    ctx.stroke();\n\n    return true;\n  });\n\n  animationId.value = requestAnimationFrame(draw);\n};\n\nconst resizeCanvas = () => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n\n  const parent = canvas.parentElement;\n  if (!parent) return;\n\n  const { width, height } = parent.getBoundingClientRect();\n  if (canvas.width !== width || canvas.height !== height) {\n    canvas.width = width;\n    canvas.height = height;\n  }\n};\n\nlet resizeTimeout: number;\n\nconst handleResize = () => {\n  clearTimeout(resizeTimeout);\n  resizeTimeout = setTimeout(resizeCanvas, 100);\n};\n\nlet resizeObserver: ResizeObserver | null = null;\n\nonMounted(() => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n\n  const parent = canvas.parentElement;\n  if (!parent) return;\n\n  resizeObserver = new ResizeObserver(handleResize);\n  resizeObserver.observe(parent);\n\n  resizeCanvas();\n\n  animationId.value = requestAnimationFrame(draw);\n});\n\nonUnmounted(() => {\n  if (resizeObserver) {\n    resizeObserver.disconnect();\n  }\n  clearTimeout(resizeTimeout);\n\n  if (animationId.value) {\n    cancelAnimationFrame(animationId.value);\n  }\n});\n\nwatch(\n  [\n    () => props.sparkColor,\n    () => props.sparkSize,\n    () => props.sparkRadius,\n    () => props.sparkCount,\n    () => props.duration,\n    easeFunc,\n    () => props.extraScale\n  ],\n  () => {\n    if (animationId.value) {\n      cancelAnimationFrame(animationId.value);\n    }\n    animationId.value = requestAnimationFrame(draw);\n  }\n);\n</script>\n","path":"ClickSpark/ClickSpark.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
+{"name":"ClickSpark","title":"ClickSpark","description":"Creates particle spark bursts at click position.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div ref=\"containerRef\" class=\"relative w-full h-full\" @click=\"handleClick\">\n    <canvas ref=\"canvasRef\" class=\"absolute inset-0 pointer-events-none\" />\n\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, computed, watch, useTemplateRef } from 'vue';\n\ninterface Spark {\n  x: number;\n  y: number;\n  angle: number;\n  startTime: number;\n}\n\ninterface Props {\n  sparkColor?: string;\n  sparkSize?: number;\n  sparkRadius?: number;\n  sparkCount?: number;\n  duration?: number;\n  easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';\n  extraScale?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  sparkColor: '#fff',\n  sparkSize: 10,\n  sparkRadius: 15,\n  sparkCount: 8,\n  duration: 400,\n  easing: 'ease-out',\n  extraScale: 1.0\n});\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');\nconst sparks = ref<Spark[]>([]);\nconst startTimeRef = ref<number | null>(null);\nconst animationId = ref<number | null>(null);\n\nconst easeFunc = computed(() => {\n  return (t: number) => {\n    switch (props.easing) {\n      case 'linear':\n        return t;\n      case 'ease-in':\n        return t * t;\n      case 'ease-in-out':\n        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n      default:\n        return t * (2 - t);\n    }\n  };\n});\n\nconst handleClick = (e: MouseEvent) => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n  const rect = canvas.getBoundingClientRect();\n  const x = e.clientX - rect.left;\n  const y = e.clientY - rect.top;\n\n  const now = performance.now();\n  const newSparks: Spark[] = Array.from({ length: props.sparkCount }, (_, i) => ({\n    x,\n    y,\n    angle: (2 * Math.PI * i) / props.sparkCount,\n    startTime: now\n  }));\n\n  sparks.value.push(...newSparks);\n};\n\nconst draw = (timestamp: number) => {\n  if (!startTimeRef.value) {\n    startTimeRef.value = timestamp;\n  }\n\n  const canvas = canvasRef.value;\n  const ctx = canvas?.getContext('2d');\n  if (!ctx || !canvas) return;\n\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n  sparks.value = sparks.value.filter((spark: Spark) => {\n    const elapsed = timestamp - spark.startTime;\n    if (elapsed >= props.duration) {\n      return false;\n    }\n\n    const progress = elapsed / props.duration;\n    const eased = easeFunc.value(progress);\n\n    const distance = eased * props.sparkRadius * props.extraScale;\n    const lineLength = props.sparkSize * (1 - eased);\n\n    const x1 = spark.x + distance * Math.cos(spark.angle);\n    const y1 = spark.y + distance * Math.sin(spark.angle);\n    const x2 = spark.x + (distance + lineLength) * Math.cos(spark.angle);\n    const y2 = spark.y + (distance + lineLength) * Math.sin(spark.angle);\n\n    ctx.strokeStyle = props.sparkColor;\n    ctx.lineWidth = 2;\n    ctx.beginPath();\n    ctx.moveTo(x1, y1);\n    ctx.lineTo(x2, y2);\n    ctx.stroke();\n\n    return true;\n  });\n\n  animationId.value = requestAnimationFrame(draw);\n};\n\nconst resizeCanvas = () => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n\n  const parent = canvas.parentElement;\n  if (!parent) return;\n\n  const { width, height } = parent.getBoundingClientRect();\n  if (canvas.width !== width || canvas.height !== height) {\n    canvas.width = width;\n    canvas.height = height;\n  }\n};\n\nlet resizeTimeout: ReturnType<typeof setTimeout>;\n\nconst handleResize = () => {\n  clearTimeout(resizeTimeout);\n  resizeTimeout = setTimeout(resizeCanvas, 100);\n};\n\nlet resizeObserver: ResizeObserver | null = null;\n\nonMounted(() => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n\n  const parent = canvas.parentElement;\n  if (!parent) return;\n\n  resizeObserver = new ResizeObserver(handleResize);\n  resizeObserver.observe(parent);\n\n  resizeCanvas();\n\n  animationId.value = requestAnimationFrame(draw);\n});\n\nonUnmounted(() => {\n  if (resizeObserver) {\n    resizeObserver.disconnect();\n  }\n  clearTimeout(resizeTimeout);\n\n  if (animationId.value) {\n    cancelAnimationFrame(animationId.value);\n  }\n});\n\nwatch(\n  [\n    () => props.sparkColor,\n    () => props.sparkSize,\n    () => props.sparkRadius,\n    () => props.sparkCount,\n    () => props.duration,\n    easeFunc,\n    () => props.extraScale\n  ],\n  () => {\n    if (animationId.value) {\n      cancelAnimationFrame(animationId.value);\n    }\n    animationId.value = requestAnimationFrame(draw);\n  }\n);\n</script>\n","path":"ClickSpark/ClickSpark.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
diff --git a/public/r/CountUp.json b/public/r/CountUp.json
index 8613b2c..d724da3 100644
--- a/public/r/CountUp.json
+++ b/public/r/CountUp.json
@@ -1 +1 @@
-{"name":"CountUp","title":"CountUp","description":"Animated number counter supporting formatting and decimals.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <span ref=\"elementRef\" :class=\"className\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, computed, useTemplateRef } from 'vue';\n\ninterface Props {\n  to: number;\n  from?: number;\n  direction?: 'up' | 'down';\n  delay?: number;\n  duration?: number;\n  className?: string;\n  startWhen?: boolean;\n  separator?: string;\n  onStart?: () => void;\n  onEnd?: () => void;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  from: 0,\n  direction: 'up',\n  delay: 0,\n  duration: 2,\n  className: '',\n  startWhen: true,\n  separator: ''\n});\n\nconst elementRef = useTemplateRef<HTMLSpanElement>('elementRef');\nconst currentValue = ref(props.direction === 'down' ? props.to : props.from);\nconst isInView = ref(false);\nconst animationId = ref<number | null>(null);\nconst hasStarted = ref(false);\n\nlet intersectionObserver: IntersectionObserver | null = null;\n\nconst damping = computed(() => 20 + 40 * (1 / props.duration));\nconst stiffness = computed(() => 100 * (1 / props.duration));\n\nlet velocity = 0;\nlet startTime = 0;\n\nconst formatNumber = (value: number) => {\n  const options = {\n    useGrouping: !!props.separator,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0\n  };\n\n  const formattedNumber = Intl.NumberFormat('en-US', options).format(Number(value.toFixed(0)));\n\n  return props.separator ? formattedNumber.replace(/,/g, props.separator) : formattedNumber;\n};\n\nconst updateDisplay = () => {\n  if (elementRef.value) {\n    elementRef.value.textContent = formatNumber(currentValue.value);\n  }\n};\n\nconst springAnimation = (timestamp: number) => {\n  if (!startTime) startTime = timestamp;\n\n  const target = props.direction === 'down' ? props.from : props.to;\n  const current = currentValue.value;\n\n  const displacement = target - current;\n  const springForce = displacement * stiffness.value;\n  const dampingForce = velocity * damping.value;\n  const acceleration = springForce - dampingForce;\n\n  velocity += acceleration * 0.016; // Assuming 60fps\n  currentValue.value += velocity * 0.016;\n\n  updateDisplay();\n\n  if (Math.abs(displacement) > 0.01 || Math.abs(velocity) > 0.01) {\n    animationId.value = requestAnimationFrame(springAnimation);\n  } else {\n    currentValue.value = target;\n    updateDisplay();\n    animationId.value = null;\n\n    if (props.onEnd) {\n      props.onEnd();\n    }\n  }\n};\n\nconst startAnimation = () => {\n  if (hasStarted.value || !isInView.value || !props.startWhen) return;\n\n  hasStarted.value = true;\n\n  if (props.onStart) {\n    props.onStart();\n  }\n\n  setTimeout(() => {\n    startTime = 0;\n    velocity = 0;\n    animationId.value = requestAnimationFrame(springAnimation);\n  }, props.delay * 1000);\n};\n\nconst setupIntersectionObserver = () => {\n  if (!elementRef.value) return;\n\n  intersectionObserver = new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting && !isInView.value) {\n        isInView.value = true;\n        startAnimation();\n      }\n    },\n    {\n      threshold: 0,\n      rootMargin: '0px'\n    }\n  );\n\n  intersectionObserver.observe(elementRef.value);\n};\n\nconst cleanup = () => {\n  if (animationId.value) {\n    cancelAnimationFrame(animationId.value);\n    animationId.value = null;\n  }\n\n  if (intersectionObserver) {\n    intersectionObserver.disconnect();\n    intersectionObserver = null;\n  }\n};\n\nwatch(\n  [() => props.from, () => props.to, () => props.direction],\n  () => {\n    currentValue.value = props.direction === 'down' ? props.to : props.from;\n    updateDisplay();\n    hasStarted.value = false;\n  },\n  { immediate: true }\n);\n\nwatch(\n  () => props.startWhen,\n  () => {\n    if (props.startWhen && isInView.value && !hasStarted.value) {\n      startAnimation();\n    }\n  }\n);\n\nonMounted(() => {\n  updateDisplay();\n  setupIntersectionObserver();\n});\n\nonUnmounted(() => {\n  cleanup();\n});\n</script>\n","path":"CountUp/CountUp.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
+{"name":"CountUp","title":"CountUp","description":"Animated number counter supporting formatting and decimals.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <span ref=\"elementRef\" :class=\"className\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, computed, useTemplateRef } from 'vue';\n\ninterface Props {\n  to: number;\n  from?: number;\n  direction?: 'up' | 'down';\n  delay?: number;\n  duration?: number;\n  className?: string;\n  startWhen?: boolean;\n  separator?: string;\n  onStart?: () => void;\n  onEnd?: () => void;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  from: 0,\n  direction: 'up',\n  delay: 0,\n  duration: 2,\n  className: '',\n  startWhen: true,\n  separator: ''\n});\n\nconst elementRef = useTemplateRef<HTMLSpanElement>('elementRef');\nconst currentValue = ref(props.direction === 'down' ? props.to : props.from);\nconst isInView = ref(false);\nconst animationId = ref<number | null>(null);\nconst hasStarted = ref(false);\n\nlet intersectionObserver: IntersectionObserver | null = null;\n\nconst damping = computed(() => 20 + 40 * (1 / props.duration));\nconst stiffness = computed(() => 100 * (1 / props.duration));\n\nlet velocity = 0;\nlet startTime = 0;\n\nconst formatNumber = (value: number) => {\n  const options = {\n    useGrouping: !!props.separator,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0\n  };\n\n  const formattedNumber = Intl.NumberFormat('en-US', options).format(Number(value.toFixed(0)));\n\n  return props.separator ? formattedNumber.replace(/,/g, props.separator) : formattedNumber;\n};\n\nconst updateDisplay = () => {\n  if (elementRef.value) {\n    elementRef.value.textContent = formatNumber(currentValue.value);\n  }\n};\n\nconst springAnimation = (timestamp: number) => {\n  if (!startTime) startTime = timestamp;\n\n  const target = props.direction === 'down' ? props.from : props.to;\n  const current = currentValue.value;\n\n  const displacement = target - current;\n  const springForce = displacement * stiffness.value;\n  const dampingForce = velocity * damping.value;\n  const acceleration = springForce - dampingForce;\n\n  velocity += acceleration * 0.016; // Assuming 60fps\n  currentValue.value += velocity * 0.016;\n\n  updateDisplay();\n\n  if (Math.abs(displacement) > 0.01 || Math.abs(velocity) > 0.01) {\n    animationId.value = requestAnimationFrame(springAnimation);\n  } else {\n    currentValue.value = target;\n    updateDisplay();\n    animationId.value = null;\n\n    if (props.onEnd) {\n      props.onEnd();\n    }\n  }\n};\n\nconst startAnimation = () => {\n  if (hasStarted.value || !isInView.value || !props.startWhen) return;\n\n  hasStarted.value = true;\n\n  if (props.onStart) {\n    props.onStart();\n  }\n\n  setTimeout(() => {\n    startTime = 0;\n    velocity = 0;\n    animationId.value = requestAnimationFrame(springAnimation);\n  }, props.delay * 1000);\n};\n\nconst setupIntersectionObserver = () => {\n  if (!elementRef.value) return;\n\n  intersectionObserver = new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting && !isInView.value) {\n        isInView.value = true;\n        startAnimation();\n      }\n    },\n    {\n      threshold: 0,\n      rootMargin: '0px'\n    }\n  );\n\n  intersectionObserver.observe(elementRef.value);\n};\n\nconst cleanup = () => {\n  if (animationId.value) {\n    cancelAnimationFrame(animationId.value);\n    animationId.value = null;\n  }\n\n  if (intersectionObserver) {\n    intersectionObserver.disconnect();\n    intersectionObserver = null;\n  }\n};\n\nwatch(\n  [() => props.from, () => props.to, () => props.direction],\n  () => {\n    currentValue.value = props.direction === 'down' ? props.to : props.from;\n    updateDisplay();\n    hasStarted.value = false;\n  },\n  { immediate: true }\n);\n\nwatch(\n  () => props.startWhen,\n  () => {\n    if (props.startWhen && isInView.value && !hasStarted.value) {\n      startAnimation();\n    }\n  }\n);\n\nonMounted(() => {\n  updateDisplay();\n  setupIntersectionObserver();\n});\n\nonUnmounted(() => {\n  cleanup();\n});\n</script>\n","path":"CountUp/CountUp.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/Cubes.json b/public/r/Cubes.json
index 5580e70..712b304 100644
--- a/public/r/Cubes.json
+++ b/public/r/Cubes.json
@@ -1 +1 @@
-{"name":"Cubes","title":"Cubes","description":"3D rotating cube cluster. Supports auto-rotation or hover interaction.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div class=\"relative w-1/2 max-md:w-11/12 aspect-square\" :style=\"wrapperStyle\">\n    <div ref=\"sceneRef\" class=\"grid w-full h-full\" :style=\"sceneStyle\">\n      <template v-for=\"(_, r) in cells\" :key=\"`row-${r}`\">\n        <div\n          v-for=\"(__, c) in cells\"\n          :key=\"`${r}-${c}`\"\n          class=\"cube relative w-full h-full aspect-square [transform-style:preserve-3d]\"\n          :data-row=\"r\"\n          :data-col=\"c\"\n        >\n          <span class=\"absolute pointer-events-none -inset-9\" />\n\n          <div\n            class=\"cube-face absolute inset-0 flex items-center justify-center\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'translateY(-50%) rotateX(90deg)'\n            }\"\n          />\n\n          <div\n            class=\"cube-face absolute inset-0 flex items-center justify-center\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'translateY(50%) rotateX(-90deg)'\n            }\"\n          />\n\n          <div\n            class=\"cube-face absolute inset-0 flex items-center justify-center\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'translateX(-50%) rotateY(-90deg)'\n            }\"\n          />\n\n          <div\n            class=\"cube-face absolute inset-0 flex items-center justify-center\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'translateX(50%) rotateY(90deg)'\n            }\"\n          />\n\n          <div\n            class=\"cube-face absolute inset-0 flex items-center justify-center\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'rotateY(-90deg) translateX(50%) rotateY(90deg)'\n            }\"\n          />\n\n          <div\n            class=\"cube-face absolute inset-0 flex items-center justify-center\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'rotateY(90deg) translateX(-50%) rotateY(-90deg)'\n            }\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, withDefaults, useTemplateRef } from 'vue';\nimport gsap from 'gsap';\n\ninterface Gap {\n  row: number;\n  col: number;\n}\n\ninterface Duration {\n  enter: number;\n  leave: number;\n}\n\ninterface Props {\n  gridSize?: number;\n  cubeSize?: number;\n  maxAngle?: number;\n  radius?: number;\n  easing?: gsap.EaseString;\n  duration?: Duration;\n  cellGap?: number | Gap;\n  borderStyle?: string;\n  faceColor?: string;\n  shadow?: boolean | string;\n  autoAnimate?: boolean;\n  rippleOnClick?: boolean;\n  rippleColor?: string;\n  rippleSpeed?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  gridSize: 10,\n  maxAngle: 45,\n  radius: 3,\n  easing: 'power3.out',\n  duration: () => ({ enter: 0.3, leave: 0.6 }),\n  borderStyle: '1px solid #fff',\n  faceColor: '#0b0b0b',\n  shadow: false,\n  autoAnimate: true,\n  rippleOnClick: true,\n  rippleColor: '#fff',\n  rippleSpeed: 2\n});\n\nconst sceneRef = useTemplateRef<HTMLDivElement>('sceneRef');\nconst rafRef = ref<number | null>(null);\nconst idleTimerRef = ref<number | null>(null);\nconst userActiveRef = ref(false);\nconst simPosRef = ref<{ x: number; y: number }>({ x: 0, y: 0 });\nconst simTargetRef = ref<{ x: number; y: number }>({ x: 0, y: 0 });\nconst simRAFRef = ref<number | null>(null);\n\nconst colGap = computed(() => {\n  return typeof props.cellGap === 'number'\n    ? `${props.cellGap}px`\n    : (props.cellGap as Gap)?.col !== undefined\n      ? `${(props.cellGap as Gap).col}px`\n      : '5%';\n});\n\nconst rowGap = computed(() => {\n  return typeof props.cellGap === 'number'\n    ? `${props.cellGap}px`\n    : (props.cellGap as Gap)?.row !== undefined\n      ? `${(props.cellGap as Gap).row}px`\n      : '5%';\n});\n\nconst enterDur = computed(() => props.duration.enter);\nconst leaveDur = computed(() => props.duration.leave);\n\nconst cells = computed(() => Array.from({ length: props.gridSize }));\n\nconst sceneStyle = computed(() => ({\n  gridTemplateColumns: props.cubeSize\n    ? `repeat(${props.gridSize}, ${props.cubeSize}px)`\n    : `repeat(${props.gridSize}, 1fr)`,\n  gridTemplateRows: props.cubeSize\n    ? `repeat(${props.gridSize}, ${props.cubeSize}px)`\n    : `repeat(${props.gridSize}, 1fr)`,\n  columnGap: colGap.value,\n  rowGap: rowGap.value,\n  perspective: '99999999px',\n  gridAutoRows: '1fr'\n}));\n\nconst wrapperStyle = computed(() => ({\n  '--cube-face-border': props.borderStyle,\n  '--cube-face-bg': props.faceColor,\n  '--cube-face-shadow': props.shadow === true ? '0 0 6px rgba(0,0,0,.5)' : props.shadow || 'none',\n  ...(props.cubeSize\n    ? {\n        width: `${props.gridSize * props.cubeSize}px`,\n        height: `${props.gridSize * props.cubeSize}px`\n      }\n    : {})\n}));\n\nconst tiltAt = (rowCenter: number, colCenter: number) => {\n  if (!sceneRef.value) return;\n\n  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach(cube => {\n    const r = +cube.dataset.row!;\n    const c = +cube.dataset.col!;\n    const dist = Math.hypot(r - rowCenter, c - colCenter);\n\n    if (dist <= props.radius) {\n      const pct = 1 - dist / props.radius;\n      const angle = pct * props.maxAngle;\n      gsap.to(cube, {\n        duration: enterDur.value,\n        ease: props.easing,\n        overwrite: true,\n        rotateX: -angle,\n        rotateY: angle\n      });\n    } else {\n      gsap.to(cube, {\n        duration: leaveDur.value,\n        ease: 'power3.out',\n        overwrite: true,\n        rotateX: 0,\n        rotateY: 0\n      });\n    }\n  });\n};\n\nconst onPointerMove = (e: PointerEvent) => {\n  userActiveRef.value = true;\n  if (idleTimerRef.value) clearTimeout(idleTimerRef.value);\n\n  const rect = sceneRef.value!.getBoundingClientRect();\n  const cellW = rect.width / props.gridSize;\n  const cellH = rect.height / props.gridSize;\n  const colCenter = (e.clientX - rect.left) / cellW;\n  const rowCenter = (e.clientY - rect.top) / cellH;\n\n  if (rafRef.value) cancelAnimationFrame(rafRef.value);\n  rafRef.value = requestAnimationFrame(() => tiltAt(rowCenter, colCenter));\n\n  idleTimerRef.value = setTimeout(() => {\n    userActiveRef.value = false;\n  }, 3000);\n};\n\nconst resetAll = () => {\n  if (!sceneRef.value) return;\n  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach(cube =>\n    gsap.to(cube, {\n      duration: leaveDur.value,\n      rotateX: 0,\n      rotateY: 0,\n      ease: 'power3.out'\n    })\n  );\n};\n\nconst onClick = (e: MouseEvent) => {\n  if (!props.rippleOnClick || !sceneRef.value) return;\n\n  const rect = sceneRef.value.getBoundingClientRect();\n  const cellW = rect.width / props.gridSize;\n  const cellH = rect.height / props.gridSize;\n  const colHit = Math.floor((e.clientX - rect.left) / cellW);\n  const rowHit = Math.floor((e.clientY - rect.top) / cellH);\n\n  const baseRingDelay = 0.15;\n  const baseAnimDur = 0.3;\n  const baseHold = 0.6;\n\n  const spreadDelay = baseRingDelay / props.rippleSpeed;\n  const animDuration = baseAnimDur / props.rippleSpeed;\n  const holdTime = baseHold / props.rippleSpeed;\n\n  const rings: Record<number, HTMLDivElement[]> = {};\n  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach(cube => {\n    const r = +cube.dataset.row!;\n    const c = +cube.dataset.col!;\n    const dist = Math.hypot(r - rowHit, c - colHit);\n    const ring = Math.round(dist);\n    if (!rings[ring]) rings[ring] = [];\n    rings[ring].push(cube);\n  });\n\n  Object.keys(rings)\n    .map(Number)\n    .sort((a, b) => a - b)\n    .forEach(ring => {\n      const delay = ring * spreadDelay;\n      const faces = rings[ring].flatMap(cube => Array.from(cube.querySelectorAll<HTMLElement>('.cube-face')));\n\n      gsap.to(faces, {\n        backgroundColor: props.rippleColor,\n        duration: animDuration,\n        delay,\n        ease: 'power3.out'\n      });\n      gsap.to(faces, {\n        backgroundColor: props.faceColor,\n        duration: animDuration,\n        delay: delay + animDuration + holdTime,\n        ease: 'power3.out'\n      });\n    });\n};\n\nconst startAutoAnimation = () => {\n  if (!props.autoAnimate || !sceneRef.value) return;\n\n  simPosRef.value = {\n    x: Math.random() * props.gridSize,\n    y: Math.random() * props.gridSize\n  };\n  simTargetRef.value = {\n    x: Math.random() * props.gridSize,\n    y: Math.random() * props.gridSize\n  };\n\n  const speed = 0.02;\n  const loop = () => {\n    if (!userActiveRef.value) {\n      const pos = simPosRef.value;\n      const tgt = simTargetRef.value;\n      pos.x += (tgt.x - pos.x) * speed;\n      pos.y += (tgt.y - pos.y) * speed;\n      tiltAt(pos.y, pos.x);\n\n      if (Math.hypot(pos.x - tgt.x, pos.y - tgt.y) < 0.1) {\n        simTargetRef.value = {\n          x: Math.random() * props.gridSize,\n          y: Math.random() * props.gridSize\n        };\n      }\n    }\n    simRAFRef.value = requestAnimationFrame(loop);\n  };\n  simRAFRef.value = requestAnimationFrame(loop);\n};\n\nonMounted(() => {\n  const el = sceneRef.value;\n  if (!el) return;\n\n  el.addEventListener('pointermove', onPointerMove);\n  el.addEventListener('pointerleave', resetAll);\n  el.addEventListener('click', onClick);\n\n  startAutoAnimation();\n});\n\nonUnmounted(() => {\n  const el = sceneRef.value;\n  if (el) {\n    el.removeEventListener('pointermove', onPointerMove);\n    el.removeEventListener('pointerleave', resetAll);\n    el.removeEventListener('click', onClick);\n  }\n\n  if (rafRef.value !== null) cancelAnimationFrame(rafRef.value);\n  if (idleTimerRef.value !== null) clearTimeout(idleTimerRef.value);\n  if (simRAFRef.value !== null) cancelAnimationFrame(simRAFRef.value);\n});\n</script>\n","path":"Cubes/Cubes.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
+{"name":"Cubes","title":"Cubes","description":"3D rotating cube cluster. Supports auto-rotation or hover interaction.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div class=\"relative w-1/2 max-md:w-11/12 aspect-square\" :style=\"wrapperStyle\">\n    <div ref=\"sceneRef\" class=\"grid w-full h-full\" :style=\"sceneStyle\">\n      <template v-for=\"(_, r) in cells\" :key=\"`row-${r}`\">\n        <div\n          v-for=\"(__, c) in cells\"\n          :key=\"`${r}-${c}`\"\n          class=\"relative w-full h-full aspect-square transform-3d cube\"\n          :data-row=\"r\"\n          :data-col=\"c\"\n        >\n          <span class=\"absolute -inset-9 pointer-events-none\" />\n\n          <div\n            class=\"absolute inset-0 flex justify-center items-center cube-face\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'translateY(-50%) rotateX(90deg)'\n            }\"\n          />\n\n          <div\n            class=\"absolute inset-0 flex justify-center items-center cube-face\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'translateY(50%) rotateX(-90deg)'\n            }\"\n          />\n\n          <div\n            class=\"absolute inset-0 flex justify-center items-center cube-face\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'translateX(-50%) rotateY(-90deg)'\n            }\"\n          />\n\n          <div\n            class=\"absolute inset-0 flex justify-center items-center cube-face\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'translateX(50%) rotateY(90deg)'\n            }\"\n          />\n\n          <div\n            class=\"absolute inset-0 flex justify-center items-center cube-face\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'rotateY(-90deg) translateX(50%) rotateY(90deg)'\n            }\"\n          />\n\n          <div\n            class=\"absolute inset-0 flex justify-center items-center cube-face\"\n            :style=\"{\n              background: 'var(--cube-face-bg)',\n              border: 'var(--cube-face-border)',\n              boxShadow: 'var(--cube-face-shadow)',\n              transform: 'rotateY(90deg) translateX(-50%) rotateY(-90deg)'\n            }\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport gsap from 'gsap';\n\ninterface Gap {\n  row: number;\n  col: number;\n}\n\ninterface Duration {\n  enter: number;\n  leave: number;\n}\n\ninterface Props {\n  gridSize?: number;\n  cubeSize?: number;\n  maxAngle?: number;\n  radius?: number;\n  easing?: gsap.EaseString;\n  duration?: Duration;\n  cellGap?: number | Gap;\n  borderStyle?: string;\n  faceColor?: string;\n  shadow?: boolean | string;\n  autoAnimate?: boolean;\n  rippleOnClick?: boolean;\n  rippleColor?: string;\n  rippleSpeed?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  gridSize: 10,\n  maxAngle: 45,\n  radius: 3,\n  easing: 'power3.out',\n  duration: () => ({ enter: 0.3, leave: 0.6 }),\n  borderStyle: '1px solid #fff',\n  faceColor: '#0b0b0b',\n  shadow: false,\n  autoAnimate: true,\n  rippleOnClick: true,\n  rippleColor: '#fff',\n  rippleSpeed: 2\n});\n\nconst sceneRef = useTemplateRef<HTMLDivElement>('sceneRef');\nconst rafRef = ref<number | null>(null);\nconst idleTimerRef = ref<ReturnType<typeof setTimeout> | null>(null);\nconst userActiveRef = ref(false);\nconst simPosRef = ref<{ x: number; y: number }>({ x: 0, y: 0 });\nconst simTargetRef = ref<{ x: number; y: number }>({ x: 0, y: 0 });\nconst simRAFRef = ref<number | null>(null);\n\nconst colGap = computed(() => {\n  return typeof props.cellGap === 'number'\n    ? `${props.cellGap}px`\n    : (props.cellGap as Gap)?.col !== undefined\n      ? `${(props.cellGap as Gap).col}px`\n      : '5%';\n});\n\nconst rowGap = computed(() => {\n  return typeof props.cellGap === 'number'\n    ? `${props.cellGap}px`\n    : (props.cellGap as Gap)?.row !== undefined\n      ? `${(props.cellGap as Gap).row}px`\n      : '5%';\n});\n\nconst enterDur = computed(() => props.duration.enter);\nconst leaveDur = computed(() => props.duration.leave);\n\nconst cells = computed(() => Array.from({ length: props.gridSize }));\n\nconst sceneStyle = computed(() => ({\n  gridTemplateColumns: props.cubeSize\n    ? `repeat(${props.gridSize}, ${props.cubeSize}px)`\n    : `repeat(${props.gridSize}, 1fr)`,\n  gridTemplateRows: props.cubeSize\n    ? `repeat(${props.gridSize}, ${props.cubeSize}px)`\n    : `repeat(${props.gridSize}, 1fr)`,\n  columnGap: colGap.value,\n  rowGap: rowGap.value,\n  perspective: '99999999px',\n  gridAutoRows: '1fr'\n}));\n\nconst wrapperStyle = computed(() => ({\n  '--cube-face-border': props.borderStyle,\n  '--cube-face-bg': props.faceColor,\n  '--cube-face-shadow': props.shadow === true ? '0 0 6px rgba(0,0,0,.5)' : props.shadow || 'none',\n  ...(props.cubeSize\n    ? {\n        width: `${props.gridSize * props.cubeSize}px`,\n        height: `${props.gridSize * props.cubeSize}px`\n      }\n    : {})\n}));\n\nconst tiltAt = (rowCenter: number, colCenter: number) => {\n  if (!sceneRef.value) return;\n\n  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach(cube => {\n    const r = +cube.dataset.row!;\n    const c = +cube.dataset.col!;\n    const dist = Math.hypot(r - rowCenter, c - colCenter);\n\n    if (dist <= props.radius) {\n      const pct = 1 - dist / props.radius;\n      const angle = pct * props.maxAngle;\n      gsap.to(cube, {\n        duration: enterDur.value,\n        ease: props.easing,\n        overwrite: true,\n        rotateX: -angle,\n        rotateY: angle\n      });\n    } else {\n      gsap.to(cube, {\n        duration: leaveDur.value,\n        ease: 'power3.out',\n        overwrite: true,\n        rotateX: 0,\n        rotateY: 0\n      });\n    }\n  });\n};\n\nconst onPointerMove = (e: PointerEvent) => {\n  userActiveRef.value = true;\n  if (idleTimerRef.value) clearTimeout(idleTimerRef.value);\n\n  const rect = sceneRef.value!.getBoundingClientRect();\n  const cellW = rect.width / props.gridSize;\n  const cellH = rect.height / props.gridSize;\n  const colCenter = (e.clientX - rect.left) / cellW;\n  const rowCenter = (e.clientY - rect.top) / cellH;\n\n  if (rafRef.value) cancelAnimationFrame(rafRef.value);\n  rafRef.value = requestAnimationFrame(() => tiltAt(rowCenter, colCenter));\n\n  idleTimerRef.value = setTimeout(() => {\n    userActiveRef.value = false;\n  }, 3000);\n};\n\nconst resetAll = () => {\n  if (!sceneRef.value) return;\n  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach(cube =>\n    gsap.to(cube, {\n      duration: leaveDur.value,\n      rotateX: 0,\n      rotateY: 0,\n      ease: 'power3.out'\n    })\n  );\n};\n\nconst onClick = (e: MouseEvent) => {\n  if (!props.rippleOnClick || !sceneRef.value) return;\n\n  const rect = sceneRef.value.getBoundingClientRect();\n  const cellW = rect.width / props.gridSize;\n  const cellH = rect.height / props.gridSize;\n  const colHit = Math.floor((e.clientX - rect.left) / cellW);\n  const rowHit = Math.floor((e.clientY - rect.top) / cellH);\n\n  const baseRingDelay = 0.15;\n  const baseAnimDur = 0.3;\n  const baseHold = 0.6;\n\n  const spreadDelay = baseRingDelay / props.rippleSpeed;\n  const animDuration = baseAnimDur / props.rippleSpeed;\n  const holdTime = baseHold / props.rippleSpeed;\n\n  const rings: Record<number, HTMLDivElement[]> = {};\n  sceneRef.value.querySelectorAll<HTMLDivElement>('.cube').forEach(cube => {\n    const r = +cube.dataset.row!;\n    const c = +cube.dataset.col!;\n    const dist = Math.hypot(r - rowHit, c - colHit);\n    const ring = Math.round(dist);\n    if (!rings[ring]) rings[ring] = [];\n    rings[ring].push(cube);\n  });\n\n  Object.keys(rings)\n    .map(Number)\n    .sort((a, b) => a - b)\n    .forEach(ring => {\n      const delay = ring * spreadDelay;\n      const faces = rings[ring].flatMap(cube => Array.from(cube.querySelectorAll<HTMLElement>('.cube-face')));\n\n      gsap.to(faces, {\n        backgroundColor: props.rippleColor,\n        duration: animDuration,\n        delay,\n        ease: 'power3.out'\n      });\n      gsap.to(faces, {\n        backgroundColor: props.faceColor,\n        duration: animDuration,\n        delay: delay + animDuration + holdTime,\n        ease: 'power3.out'\n      });\n    });\n};\n\nconst startAutoAnimation = () => {\n  if (!props.autoAnimate || !sceneRef.value) return;\n\n  simPosRef.value = {\n    x: Math.random() * props.gridSize,\n    y: Math.random() * props.gridSize\n  };\n  simTargetRef.value = {\n    x: Math.random() * props.gridSize,\n    y: Math.random() * props.gridSize\n  };\n\n  const speed = 0.02;\n  const loop = () => {\n    if (!userActiveRef.value) {\n      const pos = simPosRef.value;\n      const tgt = simTargetRef.value;\n      pos.x += (tgt.x - pos.x) * speed;\n      pos.y += (tgt.y - pos.y) * speed;\n      tiltAt(pos.y, pos.x);\n\n      if (Math.hypot(pos.x - tgt.x, pos.y - tgt.y) < 0.1) {\n        simTargetRef.value = {\n          x: Math.random() * props.gridSize,\n          y: Math.random() * props.gridSize\n        };\n      }\n    }\n    simRAFRef.value = requestAnimationFrame(loop);\n  };\n  simRAFRef.value = requestAnimationFrame(loop);\n};\n\nonMounted(() => {\n  const el = sceneRef.value;\n  if (!el) return;\n\n  el.addEventListener('pointermove', onPointerMove);\n  el.addEventListener('pointerleave', resetAll);\n  el.addEventListener('click', onClick);\n\n  startAutoAnimation();\n});\n\nonUnmounted(() => {\n  const el = sceneRef.value;\n  if (el) {\n    el.removeEventListener('pointermove', onPointerMove);\n    el.removeEventListener('pointerleave', resetAll);\n    el.removeEventListener('click', onClick);\n  }\n\n  if (rafRef.value !== null) cancelAnimationFrame(rafRef.value);\n  if (idleTimerRef.value !== null) clearTimeout(idleTimerRef.value);\n  if (simRAFRef.value !== null) cancelAnimationFrame(simRAFRef.value);\n});\n</script>\n","path":"Cubes/Cubes.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
diff --git a/public/r/DecryptedText.json b/public/r/DecryptedText.json
index 6eef904..a97fd02 100644
--- a/public/r/DecryptedText.json
+++ b/public/r/DecryptedText.json
@@ -1 +1 @@
-{"name":"DecryptedText","title":"DecryptedText","description":"Hacker-style decryption cycling random glyphs until resolving to real text.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';\n\ninterface DecryptedTextProps {\n  text: string;\n  speed?: number;\n  maxIterations?: number;\n  sequential?: boolean;\n  revealDirection?: 'start' | 'end' | 'center';\n  useOriginalCharsOnly?: boolean;\n  characters?: string;\n  className?: string;\n  encryptedClassName?: string;\n  parentClassName?: string;\n  animateOn?: 'view' | 'hover';\n}\n\nconst props = withDefaults(defineProps<DecryptedTextProps>(), {\n  text: '',\n  speed: 50,\n  maxIterations: 10,\n  sequential: false,\n  revealDirection: 'start',\n  useOriginalCharsOnly: false,\n  characters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+',\n  className: '',\n  parentClassName: '',\n  encryptedClassName: '',\n  animateOn: 'hover'\n});\n\nconst emit = defineEmits<{\n  animationComplete: [];\n}>();\n\nconst containerRef = useTemplateRef<HTMLSpanElement>('containerRef');\nconst displayText = ref(props.text);\nconst isHovering = ref(false);\nconst isScrambling = ref(false);\nconst revealedIndices = ref(new Set<number>());\nconst hasAnimated = ref(false);\n\nlet interval: number | null = null;\nlet intersectionObserver: IntersectionObserver | null = null;\n\nwatch(\n  [\n    () => isHovering.value,\n    () => props.text,\n    () => props.speed,\n    () => props.maxIterations,\n    () => props.sequential,\n    () => props.revealDirection,\n    () => props.characters,\n    () => props.useOriginalCharsOnly\n  ],\n  () => {\n    let currentIteration = 0;\n\n    const getNextIndex = (revealedSet: Set<number>): number => {\n      const textLength = props.text.length;\n      switch (props.revealDirection) {\n        case 'start':\n          return revealedSet.size;\n        case 'end':\n          return textLength - 1 - revealedSet.size;\n        case 'center': {\n          const middle = Math.floor(textLength / 2);\n          const offset = Math.floor(revealedSet.size / 2);\n          const nextIndex = revealedSet.size % 2 === 0 ? middle + offset : middle - offset - 1;\n\n          if (nextIndex >= 0 && nextIndex < textLength && !revealedSet.has(nextIndex)) {\n            return nextIndex;\n          }\n          for (let i = 0; i < textLength; i++) {\n            if (!revealedSet.has(i)) return i;\n          }\n          return 0;\n        }\n        default:\n          return revealedSet.size;\n      }\n    };\n\n    const availableChars = props.useOriginalCharsOnly\n      ? Array.from(new Set(props.text.split(''))).filter(char => char !== ' ')\n      : props.characters.split('');\n\n    const shuffleText = (originalText: string, currentRevealed: Set<number>): string => {\n      if (props.useOriginalCharsOnly) {\n        const positions = originalText.split('').map((char, i) => ({\n          char,\n          isSpace: char === ' ',\n          index: i,\n          isRevealed: currentRevealed.has(i)\n        }));\n\n        const nonSpaceChars = positions.filter(p => !p.isSpace && !p.isRevealed).map(p => p.char);\n\n        for (let i = nonSpaceChars.length - 1; i > 0; i--) {\n          const j = Math.floor(Math.random() * (i + 1));\n          [nonSpaceChars[i], nonSpaceChars[j]] = [nonSpaceChars[j], nonSpaceChars[i]];\n        }\n\n        let charIndex = 0;\n        return positions\n          .map(p => {\n            if (p.isSpace) return ' ';\n            if (p.isRevealed) return originalText[p.index];\n            return nonSpaceChars[charIndex++];\n          })\n          .join('');\n      } else {\n        return originalText\n          .split('')\n          .map((char, i) => {\n            if (char === ' ') return ' ';\n            if (currentRevealed.has(i)) return originalText[i];\n            return availableChars[Math.floor(Math.random() * availableChars.length)];\n          })\n          .join('');\n      }\n    };\n\n    if (interval) {\n      clearInterval(interval);\n      interval = null;\n    }\n\n    if (isHovering.value) {\n      isScrambling.value = true;\n      interval = setInterval(() => {\n        if (props.sequential) {\n          if (revealedIndices.value.size < props.text.length) {\n            const nextIndex = getNextIndex(revealedIndices.value);\n            const newRevealed = new Set(revealedIndices.value);\n            newRevealed.add(nextIndex);\n            revealedIndices.value = newRevealed;\n            displayText.value = shuffleText(props.text, newRevealed);\n          } else {\n            clearInterval(interval!);\n            interval = null;\n            isScrambling.value = false;\n            emit('animationComplete');\n          }\n        } else {\n          displayText.value = shuffleText(props.text, revealedIndices.value);\n          currentIteration++;\n          if (currentIteration >= props.maxIterations) {\n            clearInterval(interval!);\n            interval = null;\n            isScrambling.value = false;\n            displayText.value = props.text;\n            emit('animationComplete');\n          }\n        }\n      }, props.speed);\n    } else {\n      displayText.value = props.text;\n      revealedIndices.value = new Set();\n      isScrambling.value = false;\n    }\n  }\n);\n\nconst handleMouseEnter = () => {\n  if (props.animateOn === 'hover') {\n    isHovering.value = true;\n  }\n};\n\nconst handleMouseLeave = () => {\n  if (props.animateOn === 'hover') {\n    isHovering.value = false;\n  }\n};\n\nonMounted(async () => {\n  if (props.animateOn === 'view') {\n    await nextTick();\n\n    const observerCallback = (entries: IntersectionObserverEntry[]) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting && !hasAnimated.value) {\n          isHovering.value = true;\n          hasAnimated.value = true;\n        }\n      });\n    };\n\n    const observerOptions = {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0.1\n    };\n\n    intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);\n    if (containerRef.value) {\n      intersectionObserver.observe(containerRef.value);\n    }\n  }\n});\n\nonUnmounted(() => {\n  if (interval) {\n    clearInterval(interval);\n  }\n  if (intersectionObserver && containerRef.value) {\n    intersectionObserver.unobserve(containerRef.value);\n  }\n});\n</script>\n\n<template>\n  <span\n    ref=\"containerRef\"\n    :class=\"`inline-block whitespace-pre-wrap ${props.parentClassName}`\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <span class=\"sr-only\">{{ displayText }}</span>\n\n    <span aria-hidden=\"true\">\n      <span\n        v-for=\"(char, index) in displayText.split('')\"\n        :key=\"index\"\n        :class=\"revealedIndices.has(index) || !isScrambling || !isHovering ? props.className : props.encryptedClassName\"\n      >\n        {{ char }}\n      </span>\n    </span>\n  </span>\n</template>\n","path":"DecryptedText/DecryptedText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
+{"name":"DecryptedText","title":"DecryptedText","description":"Hacker-style decryption cycling random glyphs until resolving to real text.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';\n\ninterface DecryptedTextProps {\n  text: string;\n  speed?: number;\n  maxIterations?: number;\n  sequential?: boolean;\n  revealDirection?: 'start' | 'end' | 'center';\n  useOriginalCharsOnly?: boolean;\n  characters?: string;\n  className?: string;\n  encryptedClassName?: string;\n  parentClassName?: string;\n  animateOn?: 'view' | 'hover';\n}\n\nconst props = withDefaults(defineProps<DecryptedTextProps>(), {\n  text: '',\n  speed: 50,\n  maxIterations: 10,\n  sequential: false,\n  revealDirection: 'start',\n  useOriginalCharsOnly: false,\n  characters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+',\n  className: '',\n  parentClassName: '',\n  encryptedClassName: '',\n  animateOn: 'hover'\n});\n\nconst emit = defineEmits<{\n  animationComplete: [];\n}>();\n\nconst containerRef = useTemplateRef<HTMLSpanElement>('containerRef');\nconst displayText = ref(props.text);\nconst isHovering = ref(false);\nconst isScrambling = ref(false);\nconst revealedIndices = ref(new Set<number>());\nconst hasAnimated = ref(false);\n\nlet interval: ReturnType<typeof setInterval> | null = null;\nlet intersectionObserver: IntersectionObserver | null = null;\n\nwatch(\n  [\n    () => isHovering.value,\n    () => props.text,\n    () => props.speed,\n    () => props.maxIterations,\n    () => props.sequential,\n    () => props.revealDirection,\n    () => props.characters,\n    () => props.useOriginalCharsOnly\n  ],\n  () => {\n    let currentIteration = 0;\n\n    const getNextIndex = (revealedSet: Set<number>): number => {\n      const textLength = props.text.length;\n      switch (props.revealDirection) {\n        case 'start':\n          return revealedSet.size;\n        case 'end':\n          return textLength - 1 - revealedSet.size;\n        case 'center': {\n          const middle = Math.floor(textLength / 2);\n          const offset = Math.floor(revealedSet.size / 2);\n          const nextIndex = revealedSet.size % 2 === 0 ? middle + offset : middle - offset - 1;\n\n          if (nextIndex >= 0 && nextIndex < textLength && !revealedSet.has(nextIndex)) {\n            return nextIndex;\n          }\n          for (let i = 0; i < textLength; i++) {\n            if (!revealedSet.has(i)) return i;\n          }\n          return 0;\n        }\n        default:\n          return revealedSet.size;\n      }\n    };\n\n    const availableChars = props.useOriginalCharsOnly\n      ? Array.from(new Set(props.text.split(''))).filter(char => char !== ' ')\n      : props.characters.split('');\n\n    const shuffleText = (originalText: string, currentRevealed: Set<number>): string => {\n      if (props.useOriginalCharsOnly) {\n        const positions = originalText.split('').map((char, i) => ({\n          char,\n          isSpace: char === ' ',\n          index: i,\n          isRevealed: currentRevealed.has(i)\n        }));\n\n        const nonSpaceChars = positions.filter(p => !p.isSpace && !p.isRevealed).map(p => p.char);\n\n        for (let i = nonSpaceChars.length - 1; i > 0; i--) {\n          const j = Math.floor(Math.random() * (i + 1));\n          [nonSpaceChars[i], nonSpaceChars[j]] = [nonSpaceChars[j], nonSpaceChars[i]];\n        }\n\n        let charIndex = 0;\n        return positions\n          .map(p => {\n            if (p.isSpace) return ' ';\n            if (p.isRevealed) return originalText[p.index];\n            return nonSpaceChars[charIndex++];\n          })\n          .join('');\n      } else {\n        return originalText\n          .split('')\n          .map((char, i) => {\n            if (char === ' ') return ' ';\n            if (currentRevealed.has(i)) return originalText[i];\n            return availableChars[Math.floor(Math.random() * availableChars.length)];\n          })\n          .join('');\n      }\n    };\n\n    if (interval) {\n      clearInterval(interval);\n      interval = null;\n    }\n\n    if (isHovering.value) {\n      isScrambling.value = true;\n      interval = setInterval(() => {\n        if (props.sequential) {\n          if (revealedIndices.value.size < props.text.length) {\n            const nextIndex = getNextIndex(revealedIndices.value);\n            const newRevealed = new Set(revealedIndices.value);\n            newRevealed.add(nextIndex);\n            revealedIndices.value = newRevealed;\n            displayText.value = shuffleText(props.text, newRevealed);\n          } else {\n            clearInterval(interval!);\n            interval = null;\n            isScrambling.value = false;\n            emit('animationComplete');\n          }\n        } else {\n          displayText.value = shuffleText(props.text, revealedIndices.value);\n          currentIteration++;\n          if (currentIteration >= props.maxIterations) {\n            clearInterval(interval!);\n            interval = null;\n            isScrambling.value = false;\n            displayText.value = props.text;\n            emit('animationComplete');\n          }\n        }\n      }, props.speed);\n    } else {\n      displayText.value = props.text;\n      revealedIndices.value = new Set();\n      isScrambling.value = false;\n    }\n  }\n);\n\nconst handleMouseEnter = () => {\n  if (props.animateOn === 'hover') {\n    isHovering.value = true;\n  }\n};\n\nconst handleMouseLeave = () => {\n  if (props.animateOn === 'hover') {\n    isHovering.value = false;\n  }\n};\n\nonMounted(async () => {\n  if (props.animateOn === 'view') {\n    await nextTick();\n\n    const observerCallback = (entries: IntersectionObserverEntry[]) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting && !hasAnimated.value) {\n          isHovering.value = true;\n          hasAnimated.value = true;\n        }\n      });\n    };\n\n    const observerOptions = {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0.1\n    };\n\n    intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);\n    if (containerRef.value) {\n      intersectionObserver.observe(containerRef.value);\n    }\n  }\n});\n\nonUnmounted(() => {\n  if (interval) {\n    clearInterval(interval);\n  }\n  if (intersectionObserver && containerRef.value) {\n    intersectionObserver.unobserve(containerRef.value);\n  }\n});\n</script>\n\n<template>\n  <span\n    ref=\"containerRef\"\n    :class=\"`inline-block whitespace-pre-wrap ${props.parentClassName}`\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <span class=\"sr-only\">{{ displayText }}</span>\n\n    <span aria-hidden=\"true\">\n      <span\n        v-for=\"(char, index) in displayText.split('')\"\n        :key=\"index\"\n        :class=\"revealedIndices.has(index) || !isScrambling || !isHovering ? props.className : props.encryptedClassName\"\n      >\n        {{ char }}\n      </span>\n    </span>\n  </span>\n</template>\n","path":"DecryptedText/DecryptedText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/Dock.json b/public/r/Dock.json
index e9d6c8b..665b660 100644
--- a/public/r/Dock.json
+++ b/public/r/Dock.json
@@ -1 +1 @@
-{"name":"Dock","title":"Dock","description":"macOS style magnifying dock with proximity scaling of icons.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, defineComponent, h } from 'vue';\nimport { useMotionValue, useSpring, useTransform, type SpringOptions } from 'motion-v';\n\nexport type DockItemData = {\n  icon: unknown;\n  label: unknown;\n  onClick: () => void;\n  className?: string;\n};\n\nexport type DockProps = {\n  items: DockItemData[];\n  className?: string;\n  distance?: number;\n  panelHeight?: number;\n  baseItemSize?: number;\n  dockHeight?: number;\n  magnification?: number;\n  spring?: SpringOptions;\n};\n\nconst props = withDefaults(defineProps<DockProps>(), {\n  className: '',\n  distance: 200,\n  panelHeight: 64,\n  baseItemSize: 50,\n  dockHeight: 256,\n  magnification: 70,\n  spring: () => ({ mass: 0.1, stiffness: 150, damping: 12 })\n});\n\nconst mouseX = useMotionValue(Infinity);\nconst isHovered = useMotionValue(0);\nconst currentHeight = ref(props.panelHeight);\n\nconst maxHeight = computed(() => Math.max(props.dockHeight, props.magnification + props.magnification / 2 + 4));\n\nconst heightRow = useTransform(isHovered, [0, 1], [props.panelHeight, maxHeight.value]);\nconst height = useSpring(heightRow, props.spring);\n\nlet unsubscribeHeight: (() => void) | null = null;\n\nonMounted(() => {\n  unsubscribeHeight = height.on('change', (latest: number) => {\n    currentHeight.value = latest;\n  });\n});\n\nonUnmounted(() => {\n  if (unsubscribeHeight) {\n    unsubscribeHeight();\n  }\n});\n\nconst handleMouseMove = (event: MouseEvent) => {\n  isHovered.set(1);\n  mouseX.set(event.pageX);\n};\n\nconst handleMouseLeave = () => {\n  isHovered.set(0);\n  mouseX.set(Infinity);\n};\n</script>\n\n<template>\n  <div :style=\"{ height: currentHeight + 'px', scrollbarWidth: 'none' }\" class=\"mx-2 flex max-w-full items-center\">\n    <div\n      @mousemove=\"handleMouseMove\"\n      @mouseleave=\"handleMouseLeave\"\n      :class=\"`${props.className} absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-end w-fit gap-4 rounded-2xl border-neutral-700 border-2 pb-2 px-4`\"\n      :style=\"{ height: props.panelHeight + 'px' }\"\n      role=\"toolbar\"\n      aria-=\"Application dock\"\n    >\n      <DockItem\n        v-for=\"(item, index) in props.items\"\n        :key=\"index\"\n        :onClick=\"item.onClick\"\n        :className=\"item.className\"\n        :mouseX=\"mouseX\"\n        :spring=\"props.spring\"\n        :distance=\"props.distance\"\n        :magnification=\"props.magnification\"\n        :baseItemSize=\"props.baseItemSize\"\n        :item=\"item\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nconst DockItem = defineComponent({\n  name: 'DockItem',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    },\n    onClick: {\n      type: Function,\n      default: () => {}\n    },\n    mouseX: {\n      type: Object as () => ReturnType<typeof useMotionValue<number>>,\n      required: true\n    },\n    spring: {\n      type: Object as () => SpringOptions,\n      required: true\n    },\n    distance: {\n      type: Number,\n      required: true\n    },\n    baseItemSize: {\n      type: Number,\n      required: true\n    },\n    magnification: {\n      type: Number,\n      required: true\n    },\n    item: {\n      type: Object as () => DockItemData,\n      required: true\n    }\n  },\n  setup(props) {\n    const itemRef = ref<HTMLDivElement>();\n    const isHovered = useMotionValue(0);\n    const currentSize = ref(props.baseItemSize);\n\n    const mouseDistance = useTransform(props.mouseX, (val: number) => {\n      const rect = itemRef.value?.getBoundingClientRect() ?? {\n        x: 0,\n        width: props.baseItemSize\n      };\n      return val - rect.x - props.baseItemSize / 2;\n    });\n\n    const targetSize = useTransform(\n      mouseDistance,\n      [-props.distance, 0, props.distance],\n      [props.baseItemSize, props.magnification, props.baseItemSize]\n    );\n    const size = useSpring(targetSize, props.spring);\n\n    let unsubscribeSize: (() => void) | null = null;\n\n    onMounted(() => {\n      unsubscribeSize = size.on('change', (latest: number) => {\n        currentSize.value = latest;\n      });\n    });\n\n    onUnmounted(() => {\n      if (unsubscribeSize) {\n        unsubscribeSize();\n      }\n    });\n\n    const handleHoverStart = () => isHovered.set(1);\n    const handleHoverEnd = () => isHovered.set(0);\n    const handleFocus = () => isHovered.set(1);\n    const handleBlur = () => isHovered.set(0);\n\n    return {\n      itemRef,\n      size,\n      currentSize,\n      isHovered,\n      handleHoverStart,\n      handleHoverEnd,\n      handleFocus,\n      handleBlur\n    };\n  },\n  render() {\n    const icon = typeof this.item.icon === 'function' ? this.item.icon() : this.item.icon;\n    const label = typeof this.item.label === 'function' ? this.item.label() : this.item.label;\n\n    return h(\n      'div',\n      {\n        ref: 'itemRef',\n        style: {\n          width: this.currentSize + 'px',\n          height: this.currentSize + 'px'\n        },\n        onMouseenter: this.handleHoverStart,\n        onMouseleave: this.handleHoverEnd,\n        onFocus: this.handleFocus,\n        onBlur: this.handleBlur,\n        onClick: this.onClick,\n        class: `relative cursor-pointer inline-flex items-center justify-center rounded-full bg-[#111] border-neutral-700 border-2 shadow-md ${this.className}`,\n        tabindex: 0,\n        role: 'button',\n        'aria-haspopup': 'true'\n      },\n      [\n        h(DockIcon, {}, () => [icon]),\n        h(DockLabel, { isHovered: this.isHovered }, () => [typeof label === 'string' ? label : label])\n      ]\n    );\n  }\n});\n\nconst DockLabel = defineComponent({\n  name: 'DockLabel',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    },\n    isHovered: {\n      type: Object as () => ReturnType<typeof useMotionValue<number>>,\n      required: true\n    }\n  },\n  setup(props) {\n    const isVisible = ref(false);\n\n    let unsubscribe: (() => void) | null = null;\n\n    onMounted(() => {\n      unsubscribe = props.isHovered.on('change', (latest: number) => {\n        isVisible.value = latest === 1;\n      });\n    });\n\n    onUnmounted(() => {\n      if (unsubscribe) {\n        unsubscribe();\n      }\n    });\n\n    return {\n      isVisible\n    };\n  },\n  render() {\n    return h(\n      'div',\n      {\n        class: `${this.className} absolute -top-8 left-1/2 w-fit whitespace-pre rounded-md border border-neutral-700 bg-[#111] px-2 py-0.5 text-xs text-white transition-all duration-200`,\n        role: 'tooltip',\n        style: {\n          transform: 'translateX(-50%)',\n          opacity: this.isVisible ? 1 : 0,\n          visibility: this.isVisible ? 'visible' : 'hidden'\n        }\n      },\n      this.$slots.default?.()\n    );\n  }\n});\n\nconst DockIcon = defineComponent({\n  name: 'DockIcon',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    }\n  },\n  render() {\n    return h(\n      'div',\n      {\n        class: `flex items-center justify-center ${this.className}`\n      },\n      this.$slots.default?.()\n    );\n  }\n});\n\nexport default defineComponent({\n  name: 'Dock',\n  components: {\n    DockItem\n  }\n});\n</script>\n","path":"Dock/Dock.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
+{"name":"Dock","title":"Dock","description":"macOS style magnifying dock with proximity scaling of icons.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, defineComponent, h } from 'vue';\nimport { useMotionValue, useSpring, useTransform } from 'motion-v';\n\nexport type SpringOptions = NonNullable<Parameters<typeof useSpring>[1]>;\n\nexport type DockItemData = {\n  icon: unknown;\n  label: unknown;\n  onClick: () => void;\n  className?: string;\n};\n\nexport type DockProps = {\n  items: DockItemData[];\n  className?: string;\n  distance?: number;\n  panelHeight?: number;\n  baseItemSize?: number;\n  dockHeight?: number;\n  magnification?: number;\n  spring?: SpringOptions;\n};\n\nconst props = withDefaults(defineProps<DockProps>(), {\n  className: '',\n  distance: 200,\n  panelHeight: 64,\n  baseItemSize: 50,\n  dockHeight: 256,\n  magnification: 70,\n  spring: () => ({ mass: 0.1, stiffness: 150, damping: 12 })\n});\n\nconst mouseX = useMotionValue(Infinity);\nconst isHovered = useMotionValue(0);\nconst currentHeight = ref(props.panelHeight);\n\nconst maxHeight = computed(() => Math.max(props.dockHeight, props.magnification + props.magnification / 2 + 4));\n\nconst heightRow = useTransform(isHovered, [0, 1], [props.panelHeight, maxHeight.value]);\nconst height = useSpring(heightRow, props.spring);\n\nlet unsubscribeHeight: (() => void) | null = null;\n\nonMounted(() => {\n  unsubscribeHeight = height.on('change', (latest: number) => {\n    currentHeight.value = latest;\n  });\n});\n\nonUnmounted(() => {\n  if (unsubscribeHeight) {\n    unsubscribeHeight();\n  }\n});\n\nconst handleMouseMove = (event: MouseEvent) => {\n  isHovered.set(1);\n  mouseX.set(event.pageX);\n};\n\nconst handleMouseLeave = () => {\n  isHovered.set(0);\n  mouseX.set(Infinity);\n};\n</script>\n\n<template>\n  <div :style=\"{ height: currentHeight + 'px', scrollbarWidth: 'none' }\" class=\"flex items-center mx-2 max-w-full\">\n    <div\n      @mousemove=\"handleMouseMove\"\n      @mouseleave=\"handleMouseLeave\"\n      :class=\"`${props.className} absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-end w-fit gap-4 rounded-2xl border-neutral-700 border-2 pb-2 px-4`\"\n      :style=\"{ height: props.panelHeight + 'px' }\"\n      role=\"toolbar\"\n      aria-=\"Application dock\"\n    >\n      <DockItem\n        v-for=\"(item, index) in props.items\"\n        :key=\"index\"\n        :onClick=\"item.onClick\"\n        :className=\"item.className\"\n        :mouseX=\"mouseX\"\n        :spring=\"props.spring\"\n        :distance=\"props.distance\"\n        :magnification=\"props.magnification\"\n        :baseItemSize=\"props.baseItemSize\"\n        :item=\"item\"\n      />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nconst DockItem = defineComponent({\n  name: 'DockItem',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    },\n    onClick: {\n      type: Function,\n      default: () => {}\n    },\n    mouseX: {\n      type: Object as () => ReturnType<typeof useMotionValue<number>>,\n      required: true\n    },\n    spring: {\n      type: Object as () => SpringOptions,\n      required: true\n    },\n    distance: {\n      type: Number,\n      required: true\n    },\n    baseItemSize: {\n      type: Number,\n      required: true\n    },\n    magnification: {\n      type: Number,\n      required: true\n    },\n    item: {\n      type: Object as () => DockItemData,\n      required: true\n    }\n  },\n  setup(props) {\n    const itemRef = ref<HTMLDivElement>();\n    const isHovered = useMotionValue(0);\n    const currentSize = ref(props.baseItemSize);\n\n    const mouseDistance = useTransform(props.mouseX, (val: number) => {\n      const rect = itemRef.value?.getBoundingClientRect() ?? {\n        x: 0,\n        width: props.baseItemSize\n      };\n      return val - rect.x - props.baseItemSize / 2;\n    });\n\n    const targetSize = useTransform(\n      mouseDistance,\n      [-props.distance, 0, props.distance],\n      [props.baseItemSize, props.magnification, props.baseItemSize]\n    );\n    const size = useSpring(targetSize, props.spring);\n\n    let unsubscribeSize: (() => void) | null = null;\n\n    onMounted(() => {\n      unsubscribeSize = size.on('change', (latest: number) => {\n        currentSize.value = latest;\n      });\n    });\n\n    onUnmounted(() => {\n      if (unsubscribeSize) {\n        unsubscribeSize();\n      }\n    });\n\n    const handleHoverStart = () => isHovered.set(1);\n    const handleHoverEnd = () => isHovered.set(0);\n    const handleFocus = () => isHovered.set(1);\n    const handleBlur = () => isHovered.set(0);\n\n    return {\n      itemRef,\n      size,\n      currentSize,\n      isHovered,\n      handleHoverStart,\n      handleHoverEnd,\n      handleFocus,\n      handleBlur\n    };\n  },\n  render() {\n    const icon = typeof this.item.icon === 'function' ? this.item.icon() : this.item.icon;\n    const label = typeof this.item.label === 'function' ? this.item.label() : this.item.label;\n\n    return h(\n      'div',\n      {\n        ref: 'itemRef',\n        style: {\n          width: this.currentSize + 'px',\n          height: this.currentSize + 'px'\n        },\n        onMouseenter: this.handleHoverStart,\n        onMouseleave: this.handleHoverEnd,\n        onFocus: this.handleFocus,\n        onBlur: this.handleBlur,\n        onClick: this.onClick,\n        class: `relative cursor-pointer inline-flex items-center justify-center rounded-full bg-[#111] border-neutral-700 border-2 shadow-md ${this.className}`,\n        tabindex: 0,\n        role: 'button',\n        'aria-haspopup': 'true'\n      },\n      [\n        h(DockIcon, {}, () => [icon]),\n        h(DockLabel, { isHovered: this.isHovered }, () => [typeof label === 'string' ? label : label])\n      ]\n    );\n  }\n});\n\nconst DockLabel = defineComponent({\n  name: 'DockLabel',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    },\n    isHovered: {\n      type: Object as () => ReturnType<typeof useMotionValue<number>>,\n      required: true\n    }\n  },\n  setup(props) {\n    const isVisible = ref(false);\n\n    let unsubscribe: (() => void) | null = null;\n\n    onMounted(() => {\n      unsubscribe = props.isHovered.on('change', (latest: number) => {\n        isVisible.value = latest === 1;\n      });\n    });\n\n    onUnmounted(() => {\n      if (unsubscribe) {\n        unsubscribe();\n      }\n    });\n\n    return {\n      isVisible\n    };\n  },\n  render() {\n    return h(\n      'div',\n      {\n        class: `${this.className} absolute -top-8 left-1/2 w-fit whitespace-pre rounded-md border border-neutral-700 bg-[#111] px-2 py-0.5 text-xs text-white transition-all duration-200`,\n        role: 'tooltip',\n        style: {\n          transform: 'translateX(-50%)',\n          opacity: this.isVisible ? 1 : 0,\n          visibility: this.isVisible ? 'visible' : 'hidden'\n        }\n      },\n      this.$slots.default?.()\n    );\n  }\n});\n\nconst DockIcon = defineComponent({\n  name: 'DockIcon',\n  props: {\n    className: {\n      type: String,\n      default: ''\n    }\n  },\n  render() {\n    return h(\n      'div',\n      {\n        class: `flex items-center justify-center ${this.className}`\n      },\n      this.$slots.default?.()\n    );\n  }\n});\n\nexport default defineComponent({\n  name: 'Dock',\n  components: {\n    DockItem\n  }\n});\n</script>\n","path":"Dock/Dock.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
diff --git a/public/r/InfiniteMenu.json b/public/r/InfiniteMenu.json
index 4a39bdb..12c27b2 100644
--- a/public/r/InfiniteMenu.json
+++ b/public/r/InfiniteMenu.json
@@ -1 +1 @@
-{"name":"InfiniteMenu","title":"InfiniteMenu","description":"Horizontally looping menu effect that scrolls endlessly with seamless wrap.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport { mat4, quat, vec2, vec3 } from 'gl-matrix';\n\ntype InfiniteMenuItem = {\n  image: string;\n  link?: string;\n  title?: string;\n  description?: string;\n};\n\ntype InfiniteMenuProps = {\n  items?: InfiniteMenuItem[];\n};\n\nconst DEFAULT_ITEMS: InfiniteMenuItem[] = [\n  {\n    image: 'https://picsum.photos/900/900?grayscale',\n    link: 'https://google.com/',\n    title: '',\n    description: ''\n  }\n];\n\nconst props = defineProps<InfiniteMenuProps>();\n\n// Refs\nconst canvasRef = ref<HTMLCanvasElement>();\nconst activeItem = ref<InfiniteMenuItem | null>(null);\nconst isMoving = ref(false);\nconst resolvedItems = computed(() => (props.items?.length ? props.items : DEFAULT_ITEMS));\n\n// WebGL variables\nlet animationId: number | null = null;\nlet infiniteMenu: InfiniteGridMenu | null = null;\n\n// Shader sources\nconst discVertShaderSource = `#version 300 es\n\nuniform mat4 uWorldMatrix;\nuniform mat4 uViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform vec3 uCameraPosition;\nuniform vec4 uRotationAxisVelocity;\n\nin vec3 aModelPosition;\nin vec3 aModelNormal;\nin vec2 aModelUvs;\nin mat4 aInstanceMatrix;\n\nout vec2 vUvs;\nout float vAlpha;\nflat out int vInstanceId;\n\n#define PI 3.141593\n\nvoid main() {\n    vec4 worldPosition = uWorldMatrix * aInstanceMatrix * vec4(aModelPosition, 1.);\n\n    vec3 centerPos = (uWorldMatrix * aInstanceMatrix * vec4(0., 0., 0., 1.)).xyz;\n    float radius = length(centerPos.xyz);\n\n    if (gl_VertexID > 0) {\n        vec3 rotationAxis = uRotationAxisVelocity.xyz;\n        float rotationVelocity = min(.15, uRotationAxisVelocity.w * 15.);\n        vec3 stretchDir = normalize(cross(centerPos, rotationAxis));\n        vec3 relativeVertexPos = normalize(worldPosition.xyz - centerPos);\n        float strength = dot(stretchDir, relativeVertexPos);\n        float invAbsStrength = min(0., abs(strength) - 1.);\n        strength = rotationVelocity * sign(strength) * abs(invAbsStrength * invAbsStrength * invAbsStrength + 1.);\n        worldPosition.xyz += stretchDir * strength;\n    }\n\n    worldPosition.xyz = radius * normalize(worldPosition.xyz);\n\n    gl_Position = uProjectionMatrix * uViewMatrix * worldPosition;\n\n    vAlpha = smoothstep(0.5, 1., normalize(worldPosition.xyz).z) * .9 + .1;\n    vUvs = aModelUvs;\n    vInstanceId = gl_InstanceID;\n}\n`;\n\nconst discFragShaderSource = `#version 300 es\nprecision highp float;\n\nuniform sampler2D uTex;\nuniform int uItemCount;\nuniform int uAtlasSize;\n\nout vec4 outColor;\n\nin vec2 vUvs;\nin float vAlpha;\nflat in int vInstanceId;\n\nvoid main() {\n    int itemIndex = vInstanceId % uItemCount;\n    int cellsPerRow = uAtlasSize;\n    int cellX = itemIndex % cellsPerRow;\n    int cellY = itemIndex / cellsPerRow;\n    vec2 cellSize = vec2(1.0) / vec2(float(cellsPerRow));\n    vec2 cellOffset = vec2(float(cellX), float(cellY)) * cellSize;\n\n    ivec2 texSize = textureSize(uTex, 0);\n    float imageAspect = float(texSize.x) / float(texSize.y);\n    float containerAspect = 1.0;\n\n    float scale = max(imageAspect / containerAspect,\n                     containerAspect / imageAspect);\n\n    vec2 st = vec2(vUvs.x, 1.0 - vUvs.y);\n    st = (st - 0.5) * scale + 0.5;\n\n    st = clamp(st, 0.0, 1.0);\n\n    st = st * cellSize + cellOffset;\n\n    outColor = texture(uTex, st);\n    outColor.a *= vAlpha;\n}\n`;\n\nclass Face {\n  constructor(\n    public a: number,\n    public b: number,\n    public c: number\n  ) {}\n}\n\nclass Vertex {\n  position: vec3;\n  normal: vec3;\n  uv: vec2;\n\n  constructor(x: number, y: number, z: number) {\n    this.position = vec3.fromValues(x, y, z);\n    this.normal = vec3.create();\n    this.uv = vec2.create();\n  }\n}\n\nclass Geometry {\n  vertices: Vertex[] = [];\n  faces: Face[] = [];\n\n  addVertex(...args: number[]): this {\n    for (let i = 0; i < args.length; i += 3) {\n      this.vertices.push(new Vertex(args[i], args[i + 1], args[i + 2]));\n    }\n    return this;\n  }\n\n  addFace(...args: number[]): this {\n    for (let i = 0; i < args.length; i += 3) {\n      this.faces.push(new Face(args[i], args[i + 1], args[i + 2]));\n    }\n    return this;\n  }\n\n  get lastVertex(): Vertex {\n    return this.vertices[this.vertices.length - 1];\n  }\n\n  subdivide(divisions = 1): this {\n    const midPointCache: Record<string, number> = {};\n    let f = this.faces;\n\n    for (let div = 0; div < divisions; ++div) {\n      const newFaces = new Array(f.length * 4);\n\n      f.forEach((face, ndx) => {\n        const mAB = this.getMidPoint(face.a, face.b, midPointCache);\n        const mBC = this.getMidPoint(face.b, face.c, midPointCache);\n        const mCA = this.getMidPoint(face.c, face.a, midPointCache);\n\n        const i = ndx * 4;\n        newFaces[i + 0] = new Face(face.a, mAB, mCA);\n        newFaces[i + 1] = new Face(face.b, mBC, mAB);\n        newFaces[i + 2] = new Face(face.c, mCA, mBC);\n        newFaces[i + 3] = new Face(mAB, mBC, mCA);\n      });\n\n      f = newFaces;\n    }\n\n    this.faces = f;\n    return this;\n  }\n\n  spherize(radius = 1): this {\n    this.vertices.forEach(vertex => {\n      vec3.normalize(vertex.normal, vertex.position);\n      vec3.scale(vertex.position, vertex.normal, radius);\n    });\n    return this;\n  }\n\n  get data() {\n    return {\n      vertices: this.vertexData,\n      indices: this.indexData,\n      normals: this.normalData,\n      uvs: this.uvData\n    };\n  }\n\n  get vertexData(): Float32Array {\n    return new Float32Array(this.vertices.flatMap(v => Array.from(v.position)));\n  }\n\n  get normalData(): Float32Array {\n    return new Float32Array(this.vertices.flatMap(v => Array.from(v.normal)));\n  }\n\n  get uvData(): Float32Array {\n    return new Float32Array(this.vertices.flatMap(v => Array.from(v.uv)));\n  }\n\n  get indexData(): Uint16Array {\n    return new Uint16Array(this.faces.flatMap(f => [f.a, f.b, f.c]));\n  }\n\n  getMidPoint(ndxA: number, ndxB: number, cache: Record<string, number>): number {\n    const cacheKey = ndxA < ndxB ? `k_${ndxB}_${ndxA}` : `k_${ndxA}_${ndxB}`;\n    if (Object.prototype.hasOwnProperty.call(cache, cacheKey)) {\n      return cache[cacheKey];\n    }\n    const a = this.vertices[ndxA].position;\n    const b = this.vertices[ndxB].position;\n    const ndx = this.vertices.length;\n    cache[cacheKey] = ndx;\n    this.addVertex((a[0] + b[0]) * 0.5, (a[1] + b[1]) * 0.5, (a[2] + b[2]) * 0.5);\n    return ndx;\n  }\n}\n\nclass IcosahedronGeometry extends Geometry {\n  constructor() {\n    super();\n    const t = Math.sqrt(5) * 0.5 + 0.5;\n    this.addVertex(\n      -1,\n      t,\n      0,\n      1,\n      t,\n      0,\n      -1,\n      -t,\n      0,\n      1,\n      -t,\n      0,\n      0,\n      -1,\n      t,\n      0,\n      1,\n      t,\n      0,\n      -1,\n      -t,\n      0,\n      1,\n      -t,\n      t,\n      0,\n      -1,\n      t,\n      0,\n      1,\n      -t,\n      0,\n      -1,\n      -t,\n      0,\n      1\n    ).addFace(\n      0,\n      11,\n      5,\n      0,\n      5,\n      1,\n      0,\n      1,\n      7,\n      0,\n      7,\n      10,\n      0,\n      10,\n      11,\n      1,\n      5,\n      9,\n      5,\n      11,\n      4,\n      11,\n      10,\n      2,\n      10,\n      7,\n      6,\n      7,\n      1,\n      8,\n      3,\n      9,\n      4,\n      3,\n      4,\n      2,\n      3,\n      2,\n      6,\n      3,\n      6,\n      8,\n      3,\n      8,\n      9,\n      4,\n      9,\n      5,\n      2,\n      4,\n      11,\n      6,\n      2,\n      10,\n      8,\n      6,\n      7,\n      9,\n      8,\n      1\n    );\n  }\n}\n\nclass DiscGeometry extends Geometry {\n  constructor(steps = 4, radius = 1) {\n    super();\n    steps = Math.max(4, steps);\n\n    const alpha = (2 * Math.PI) / steps;\n\n    this.addVertex(0, 0, 0);\n    this.lastVertex.uv[0] = 0.5;\n    this.lastVertex.uv[1] = 0.5;\n\n    for (let i = 0; i < steps; ++i) {\n      const x = Math.cos(alpha * i);\n      const y = Math.sin(alpha * i);\n      this.addVertex(radius * x, radius * y, 0);\n      this.lastVertex.uv[0] = x * 0.5 + 0.5;\n      this.lastVertex.uv[1] = y * 0.5 + 0.5;\n\n      if (i > 0) {\n        this.addFace(0, i, i + 1);\n      }\n    }\n    this.addFace(0, steps, 1);\n  }\n}\n\nfunction createShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader | null {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);\n\n  if (success) {\n    return shader;\n  }\n\n  console.error(gl.getShaderInfoLog(shader));\n  gl.deleteShader(shader);\n  return null;\n}\n\nfunction createProgram(\n  gl: WebGL2RenderingContext,\n  shaderSources: string[],\n  transformFeedbackVaryings?: string[],\n  attribLocations?: Record<string, number>\n): WebGLProgram | null {\n  const program = gl.createProgram();\n  if (!program) return null;\n\n  [gl.VERTEX_SHADER, gl.FRAGMENT_SHADER].forEach((type, ndx) => {\n    const shader = createShader(gl, type, shaderSources[ndx]);\n    if (shader) gl.attachShader(program, shader);\n  });\n\n  if (transformFeedbackVaryings) {\n    gl.transformFeedbackVaryings(program, transformFeedbackVaryings, gl.SEPARATE_ATTRIBS);\n  }\n\n  if (attribLocations) {\n    for (const attrib in attribLocations) {\n      gl.bindAttribLocation(program, attribLocations[attrib], attrib);\n    }\n  }\n\n  gl.linkProgram(program);\n  const success = gl.getProgramParameter(program, gl.LINK_STATUS);\n\n  if (success) {\n    return program;\n  }\n\n  console.error(gl.getProgramInfoLog(program));\n  gl.deleteProgram(program);\n  return null;\n}\n\nfunction makeVertexArray(\n  gl: WebGL2RenderingContext,\n  bufLocNumElmPairs: [WebGLBuffer, number, number][],\n  indices?: Uint16Array\n): WebGLVertexArrayObject | null {\n  const va = gl.createVertexArray();\n  if (!va) return null;\n\n  gl.bindVertexArray(va);\n\n  for (const [buffer, loc, numElem] of bufLocNumElmPairs) {\n    if (loc === -1) continue;\n    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n    gl.enableVertexAttribArray(loc);\n    gl.vertexAttribPointer(loc, numElem, gl.FLOAT, false, 0, 0);\n  }\n\n  if (indices) {\n    const indexBuffer = gl.createBuffer();\n    if (indexBuffer) {\n      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);\n      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);\n    }\n  }\n\n  gl.bindVertexArray(null);\n  return va;\n}\n\nfunction resizeCanvasToDisplaySize(canvas: HTMLCanvasElement): boolean {\n  const dpr = Math.min(2, window.devicePixelRatio || 1);\n  const displayWidth = Math.round(canvas.clientWidth * dpr);\n  const displayHeight = Math.round(canvas.clientHeight * dpr);\n  const needResize = canvas.width !== displayWidth || canvas.height !== displayHeight;\n  if (needResize) {\n    canvas.width = displayWidth;\n    canvas.height = displayHeight;\n  }\n  return needResize;\n}\n\nfunction makeBuffer(\n  gl: WebGL2RenderingContext,\n  sizeOrData: number | ArrayBuffer | ArrayBufferView,\n  usage: number\n): WebGLBuffer | null {\n  const buf = gl.createBuffer();\n  if (!buf) return null;\n\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n  if (typeof sizeOrData === 'number') {\n    gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);\n  } else {\n    gl.bufferData(gl.ARRAY_BUFFER, sizeOrData as AllowSharedBufferSource, usage);\n  }\n  gl.bindBuffer(gl.ARRAY_BUFFER, null);\n  return buf;\n}\n\nfunction createAndSetupTexture(\n  gl: WebGL2RenderingContext,\n  minFilter: number,\n  magFilter: number,\n  wrapS: number,\n  wrapT: number\n): WebGLTexture | null {\n  const texture = gl.createTexture();\n  if (!texture) return null;\n\n  gl.bindTexture(gl.TEXTURE_2D, texture);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapS);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrapT);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);\n  return texture;\n}\n\nclass ArcballControl {\n  isPointerDown = false;\n  orientation = quat.create();\n  pointerRotation = quat.create();\n  rotationVelocity = 0;\n  rotationAxis = vec3.fromValues(1, 0, 0);\n  snapDirection = vec3.fromValues(0, 0, -1);\n  snapTargetDirection?: vec3;\n  EPSILON = 0.1;\n  IDENTITY_QUAT = quat.create();\n\n  private pointerPos = vec2.create();\n  private previousPointerPos = vec2.create();\n  private _rotationVelocity = 0;\n  private _combinedQuat = quat.create();\n\n  constructor(\n    private canvas: HTMLCanvasElement,\n    private updateCallback?: (deltaTime: number) => void\n  ) {\n    this.setupEventListeners();\n  }\n\n  private setupEventListeners() {\n    this.canvas.addEventListener('pointerdown', e => {\n      vec2.set(this.pointerPos, e.clientX, e.clientY);\n      vec2.copy(this.previousPointerPos, this.pointerPos);\n      this.isPointerDown = true;\n    });\n\n    this.canvas.addEventListener('pointerup', () => {\n      this.isPointerDown = false;\n    });\n\n    this.canvas.addEventListener('pointerleave', () => {\n      this.isPointerDown = false;\n    });\n\n    this.canvas.addEventListener('pointermove', e => {\n      if (this.isPointerDown) {\n        vec2.set(this.pointerPos, e.clientX, e.clientY);\n      }\n    });\n\n    this.canvas.style.touchAction = 'none';\n  }\n\n  update(deltaTime: number, targetFrameDuration = 16) {\n    const timeScale = deltaTime / targetFrameDuration + 0.00001;\n    let angleFactor = timeScale;\n    const snapRotation = quat.create();\n\n    if (this.isPointerDown) {\n      const INTENSITY = 0.3 * timeScale;\n      const ANGLE_AMPLIFICATION = 5 / timeScale;\n\n      const midPointerPos = vec2.sub(vec2.create(), this.pointerPos, this.previousPointerPos);\n      vec2.scale(midPointerPos, midPointerPos, INTENSITY);\n\n      if (vec2.sqrLen(midPointerPos) > this.EPSILON) {\n        vec2.add(midPointerPos, this.previousPointerPos, midPointerPos);\n\n        const p = this.project(midPointerPos);\n        const q = this.project(this.previousPointerPos);\n        const a = vec3.normalize(vec3.create(), p);\n        const b = vec3.normalize(vec3.create(), q);\n\n        vec2.copy(this.previousPointerPos, midPointerPos);\n\n        angleFactor *= ANGLE_AMPLIFICATION;\n\n        this.quatFromVectors(a, b, this.pointerRotation, angleFactor);\n      } else {\n        quat.slerp(this.pointerRotation, this.pointerRotation, this.IDENTITY_QUAT, INTENSITY);\n      }\n    } else {\n      const INTENSITY = 0.1 * timeScale;\n      quat.slerp(this.pointerRotation, this.pointerRotation, this.IDENTITY_QUAT, INTENSITY);\n\n      if (this.snapTargetDirection) {\n        const SNAPPING_INTENSITY = 0.2;\n        const a = this.snapTargetDirection;\n        const b = this.snapDirection;\n        const sqrDist = vec3.squaredDistance(a, b);\n        const distanceFactor = Math.max(0.1, 1 - sqrDist * 10);\n        angleFactor *= SNAPPING_INTENSITY * distanceFactor;\n        this.quatFromVectors(a, b, snapRotation, angleFactor);\n      }\n    }\n\n    const combinedQuat = quat.multiply(quat.create(), snapRotation, this.pointerRotation);\n    this.orientation = quat.multiply(quat.create(), combinedQuat, this.orientation);\n    quat.normalize(this.orientation, this.orientation);\n\n    const RA_INTENSITY = 0.8 * timeScale;\n    quat.slerp(this._combinedQuat, this._combinedQuat, combinedQuat, RA_INTENSITY);\n    quat.normalize(this._combinedQuat, this._combinedQuat);\n\n    const rad = Math.acos(this._combinedQuat[3]) * 2.0;\n    const s = Math.sin(rad / 2.0);\n    let rv = 0;\n    if (s > 0.000001) {\n      rv = rad / (2 * Math.PI);\n      this.rotationAxis[0] = this._combinedQuat[0] / s;\n      this.rotationAxis[1] = this._combinedQuat[1] / s;\n      this.rotationAxis[2] = this._combinedQuat[2] / s;\n    }\n\n    const RV_INTENSITY = 0.5 * timeScale;\n    this._rotationVelocity += (rv - this._rotationVelocity) * RV_INTENSITY;\n    this.rotationVelocity = this._rotationVelocity / timeScale;\n\n    this.updateCallback?.(deltaTime);\n  }\n\n  quatFromVectors(a: vec3, b: vec3, out: quat, angleFactor = 1) {\n    const axis = vec3.cross(vec3.create(), a, b);\n    vec3.normalize(axis, axis);\n    const d = Math.max(-1, Math.min(1, vec3.dot(a, b)));\n    const angle = Math.acos(d) * angleFactor;\n    quat.setAxisAngle(out, axis, angle);\n    return { q: out, axis, angle };\n  }\n\n  private project(pos: vec2): vec3 {\n    const r = 2;\n    const w = this.canvas.clientWidth;\n    const h = this.canvas.clientHeight;\n    const s = Math.max(w, h) - 1;\n\n    const x = (2 * pos[0] - w - 1) / s;\n    const y = (2 * pos[1] - h - 1) / s;\n    let z = 0;\n    const xySq = x * x + y * y;\n    const rSq = r * r;\n\n    if (xySq <= rSq / 2.0) {\n      z = Math.sqrt(rSq - xySq);\n    } else {\n      z = rSq / Math.sqrt(xySq);\n    }\n    return vec3.fromValues(-x, y, z);\n  }\n}\n\nclass InfiniteGridMenu {\n  private TARGET_FRAME_DURATION = 1000 / 60;\n  private SPHERE_RADIUS = 2;\n  private time = 0;\n  private deltaTime = 0;\n  private deltaFrames = 0;\n  private frames = 0;\n\n  private camera = {\n    matrix: mat4.create(),\n    near: 0.1,\n    far: 40,\n    fov: Math.PI / 4,\n    aspect: 1,\n    position: vec3.fromValues(0, 0, 3),\n    up: vec3.fromValues(0, 1, 0),\n    matrices: {\n      view: mat4.create(),\n      projection: mat4.create(),\n      inversProjection: mat4.create()\n    }\n  };\n\n  private nearestVertexIndex: number | null = null;\n  private smoothRotationVelocity = 0;\n  private scaleFactor = 1.0;\n  private movementActive = false;\n\n  private discProgram: WebGLProgram | null = null;\n  private discLocations: Record<string, WebGLUniformLocation | number | null> = {};\n  private discGeo!: DiscGeometry;\n  private discBuffers: Record<string, Float32Array | Uint16Array> = {};\n  private discVAO: WebGLVertexArrayObject | null = null;\n  private icoGeo!: IcosahedronGeometry;\n  private instancePositions: vec3[] = [];\n  private DISC_INSTANCE_COUNT = 0;\n  private discInstances: {\n    matricesArray: Float32Array;\n    matrices: Float32Array[];\n    buffer: WebGLBuffer | null;\n  } = {\n    matricesArray: new Float32Array(0),\n    matrices: [],\n    buffer: null\n  };\n  private worldMatrix = mat4.create();\n  private tex: WebGLTexture | null = null;\n  private atlasSize = 0;\n  private control!: ArcballControl;\n  private viewportSize!: vec2;\n\n  constructor(\n    private canvas: HTMLCanvasElement,\n    private items: InfiniteMenuItem[],\n    private onActiveItemChange: (index: number) => void,\n    private onMovementChange: (isMoving: boolean) => void,\n    private onInit?: (menu: InfiniteGridMenu) => void\n  ) {\n    this.init();\n  }\n\n  private init() {\n    this.gl = this.canvas.getContext('webgl2', { antialias: true, alpha: false }) as WebGL2RenderingContext;\n    if (!this.gl) {\n      throw new Error('No WebGL 2 context!');\n    }\n\n    this.viewportSize = vec2.fromValues(this.canvas.clientWidth, this.canvas.clientHeight);\n\n    this.discProgram = createProgram(this.gl, [discVertShaderSource, discFragShaderSource], undefined, {\n      aModelPosition: 0,\n      aModelNormal: 1,\n      aModelUvs: 2,\n      aInstanceMatrix: 3\n    });\n\n    if (!this.discProgram) {\n      throw new Error('Failed to create shader program');\n    }\n\n    this.discLocations = {\n      aModelPosition: this.gl.getAttribLocation(this.discProgram, 'aModelPosition'),\n      aModelUvs: this.gl.getAttribLocation(this.discProgram, 'aModelUvs'),\n      aInstanceMatrix: this.gl.getAttribLocation(this.discProgram, 'aInstanceMatrix'),\n      uWorldMatrix: this.gl.getUniformLocation(this.discProgram, 'uWorldMatrix'),\n      uViewMatrix: this.gl.getUniformLocation(this.discProgram, 'uViewMatrix'),\n      uProjectionMatrix: this.gl.getUniformLocation(this.discProgram, 'uProjectionMatrix'),\n      uCameraPosition: this.gl.getUniformLocation(this.discProgram, 'uCameraPosition'),\n      uRotationAxisVelocity: this.gl.getUniformLocation(this.discProgram, 'uRotationAxisVelocity'),\n      uTex: this.gl.getUniformLocation(this.discProgram, 'uTex'),\n      uItemCount: this.gl.getUniformLocation(this.discProgram, 'uItemCount'),\n      uAtlasSize: this.gl.getUniformLocation(this.discProgram, 'uAtlasSize'),\n      uFrames: this.gl.getUniformLocation(this.discProgram, 'uFrames'),\n      uScaleFactor: this.gl.getUniformLocation(this.discProgram, 'uScaleFactor')\n    };\n\n    this.discGeo = new DiscGeometry(56, 1);\n    this.discBuffers = this.discGeo.data;\n    this.discVAO = makeVertexArray(\n      this.gl,\n      [\n        [\n          makeBuffer(this.gl, this.discBuffers.vertices, this.gl.STATIC_DRAW)!,\n          this.discLocations.aModelPosition as number,\n          3\n        ],\n        [makeBuffer(this.gl, this.discBuffers.uvs, this.gl.STATIC_DRAW)!, this.discLocations.aModelUvs as number, 2]\n      ],\n      this.discBuffers.indices as Uint16Array\n    );\n\n    this.icoGeo = new IcosahedronGeometry();\n    this.icoGeo.subdivide(1).spherize(this.SPHERE_RADIUS);\n    this.instancePositions = this.icoGeo.vertices.map(v => v.position);\n    this.DISC_INSTANCE_COUNT = this.icoGeo.vertices.length;\n    this.initDiscInstances(this.DISC_INSTANCE_COUNT);\n\n    this.initTexture();\n\n    this.control = new ArcballControl(this.canvas, deltaTime => this.onControlUpdate(deltaTime));\n\n    this.updateCameraMatrix();\n    this.updateProjectionMatrix();\n    this.resize();\n\n    this.onInit?.(this);\n  }\n\n  private initTexture() {\n    if (!this.gl) return;\n\n    this.tex = createAndSetupTexture(\n      this.gl,\n      this.gl.LINEAR,\n      this.gl.LINEAR,\n      this.gl.CLAMP_TO_EDGE,\n      this.gl.CLAMP_TO_EDGE\n    );\n    if (!this.tex) return;\n\n    const itemCount = Math.max(1, this.items.length);\n    this.atlasSize = Math.ceil(Math.sqrt(itemCount));\n    const canvas = document.createElement('canvas');\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n\n    const cellSize = 512;\n    canvas.width = this.atlasSize * cellSize;\n    canvas.height = this.atlasSize * cellSize;\n\n    Promise.all(\n      this.items.map(\n        item =>\n          new Promise<HTMLImageElement>(resolve => {\n            const img = new Image();\n            img.crossOrigin = 'anonymous';\n            img.onload = () => resolve(img);\n            img.onerror = () => resolve(img); // Continue even if image fails\n            img.src = item.image;\n          })\n      )\n    ).then(images => {\n      images.forEach((img, i) => {\n        const x = (i % this.atlasSize) * cellSize;\n        const y = Math.floor(i / this.atlasSize) * cellSize;\n        try {\n          ctx.drawImage(img, x, y, cellSize, cellSize);\n        } catch {\n          // Skip failed images\n        }\n      });\n\n      if (this.gl && this.tex) {\n        this.gl.bindTexture(this.gl.TEXTURE_2D, this.tex);\n        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, canvas);\n        this.gl.generateMipmap(this.gl.TEXTURE_2D);\n      }\n    });\n  }\n\n  private initDiscInstances(count: number) {\n    if (!this.gl) return;\n\n    this.discInstances = {\n      matricesArray: new Float32Array(count * 16),\n      matrices: [] as Float32Array[],\n      buffer: this.gl.createBuffer()\n    };\n\n    for (let i = 0; i < count; ++i) {\n      const instanceMatrixArray = new Float32Array(this.discInstances.matricesArray.buffer, i * 16 * 4, 16);\n      instanceMatrixArray.set(mat4.create());\n      this.discInstances.matrices.push(instanceMatrixArray);\n    }\n\n    this.gl.bindVertexArray(this.discVAO);\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.discInstances.buffer);\n    this.gl.bufferData(this.gl.ARRAY_BUFFER, this.discInstances.matricesArray.byteLength, this.gl.DYNAMIC_DRAW);\n\n    const mat4AttribSlotCount = 4;\n    const bytesPerMatrix = 16 * 4;\n    for (let j = 0; j < mat4AttribSlotCount; ++j) {\n      const loc = (this.discLocations.aInstanceMatrix as number) + j;\n      this.gl.enableVertexAttribArray(loc);\n      this.gl.vertexAttribPointer(loc, 4, this.gl.FLOAT, false, bytesPerMatrix, j * 4 * 4);\n      this.gl.vertexAttribDivisor(loc, 1);\n    }\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n    this.gl.bindVertexArray(null);\n  }\n\n  run(time = 0) {\n    this.deltaTime = Math.min(32, time - this.time);\n    this.time = time;\n    this.deltaFrames = this.deltaTime / this.TARGET_FRAME_DURATION;\n    this.frames += this.deltaFrames;\n\n    this.animate();\n    this.render();\n\n    animationId = requestAnimationFrame(t => this.run(t));\n  }\n\n  resize() {\n    this.viewportSize = vec2.set(this.viewportSize || vec2.create(), this.canvas.clientWidth, this.canvas.clientHeight);\n\n    if (!this.gl) return;\n\n    const needsResize = resizeCanvasToDisplaySize(this.canvas);\n    if (needsResize) {\n      this.gl.viewport(0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);\n    }\n\n    this.updateProjectionMatrix();\n  }\n\n  private animate() {\n    if (!this.gl) return;\n\n    this.control.update(this.deltaTime, this.TARGET_FRAME_DURATION);\n\n    const positions = this.instancePositions.map(p => vec3.transformQuat(vec3.create(), p, this.control.orientation));\n    const scale = 0.25;\n    const SCALE_INTENSITY = 0.6;\n\n    positions.forEach((p, ndx) => {\n      const s = (Math.abs(p[2]) / this.SPHERE_RADIUS) * SCALE_INTENSITY + (1 - SCALE_INTENSITY);\n      const finalScale = s * scale;\n      const matrix = mat4.create();\n      mat4.multiply(matrix, matrix, mat4.fromTranslation(mat4.create(), vec3.negate(vec3.create(), p)));\n      mat4.multiply(matrix, matrix, mat4.targetTo(mat4.create(), [0, 0, 0], p, [0, 1, 0]));\n      mat4.multiply(matrix, matrix, mat4.fromScaling(mat4.create(), [finalScale, finalScale, finalScale]));\n      mat4.multiply(matrix, matrix, mat4.fromTranslation(mat4.create(), [0, 0, -this.SPHERE_RADIUS]));\n\n      mat4.copy(this.discInstances.matrices[ndx], matrix);\n    });\n\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.discInstances.buffer);\n    this.gl.bufferSubData(this.gl.ARRAY_BUFFER, 0, this.discInstances.matricesArray);\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n\n    this.smoothRotationVelocity = this.control.rotationVelocity;\n  }\n\n  private render() {\n    if (!this.gl) return;\n\n    this.gl.useProgram(this.discProgram);\n\n    this.gl.enable(this.gl.CULL_FACE);\n    this.gl.enable(this.gl.DEPTH_TEST);\n    this.gl.enable(this.gl.BLEND);\n    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);\n\n    this.gl.clearColor(0, 0, 0, 0);\n    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);\n\n    this.gl.uniformMatrix4fv(this.discLocations.uWorldMatrix, false, this.worldMatrix);\n    this.gl.uniformMatrix4fv(this.discLocations.uViewMatrix, false, this.camera.matrices.view);\n    this.gl.uniformMatrix4fv(this.discLocations.uProjectionMatrix, false, this.camera.matrices.projection);\n    this.gl.uniform3f(\n      this.discLocations.uCameraPosition,\n      this.camera.position[0],\n      this.camera.position[1],\n      this.camera.position[2]\n    );\n    this.gl.uniform4f(\n      this.discLocations.uRotationAxisVelocity,\n      this.control.rotationAxis[0],\n      this.control.rotationAxis[1],\n      this.control.rotationAxis[2],\n      this.smoothRotationVelocity * 1.1\n    );\n\n    const itemCountLocation = this.discLocations.uItemCount as WebGLUniformLocation | null;\n    if (itemCountLocation !== null) {\n      this.gl.uniform1i(itemCountLocation, this.items.length);\n    }\n\n    const atlasSizeLocation = this.discLocations.uAtlasSize as WebGLUniformLocation | null;\n    if (atlasSizeLocation !== null) {\n      this.gl.uniform1i(atlasSizeLocation, this.atlasSize);\n    }\n\n    const framesLocation = this.discLocations.uFrames as WebGLUniformLocation | null;\n    if (framesLocation !== null) {\n      this.gl.uniform1f(framesLocation, this.frames);\n    }\n\n    const scaleFactorLocation = this.discLocations.uScaleFactor as WebGLUniformLocation | null;\n    if (scaleFactorLocation !== null) {\n      this.gl.uniform1f(scaleFactorLocation, this.scaleFactor);\n    }\n\n    const textureLocation = this.discLocations.uTex as WebGLUniformLocation | null;\n    if (textureLocation !== null) {\n      this.gl.uniform1i(textureLocation, 0);\n    }\n    this.gl.activeTexture(this.gl.TEXTURE0);\n    this.gl.bindTexture(this.gl.TEXTURE_2D, this.tex);\n\n    this.gl.bindVertexArray(this.discVAO);\n    this.gl.drawElementsInstanced(\n      this.gl.TRIANGLES,\n      this.discBuffers.indices.length,\n      this.gl.UNSIGNED_SHORT,\n      0,\n      this.DISC_INSTANCE_COUNT\n    );\n  }\n\n  private updateCameraMatrix() {\n    mat4.targetTo(this.camera.matrix, this.camera.position, [0, 0, 0], this.camera.up);\n    mat4.invert(this.camera.matrices.view, this.camera.matrix);\n  }\n\n  private updateProjectionMatrix() {\n    if (!this.gl) return;\n\n    this.camera.aspect = this.gl.canvas.width / this.gl.canvas.height;\n    const height = this.SPHERE_RADIUS * 0.35;\n    const distance = this.camera.position[2];\n    if (this.camera.aspect > 1) {\n      this.camera.fov = 2 * Math.atan(height / distance);\n    } else {\n      this.camera.fov = 2 * Math.atan(height / this.camera.aspect / distance);\n    }\n    mat4.perspective(\n      this.camera.matrices.projection,\n      this.camera.fov,\n      this.camera.aspect,\n      this.camera.near,\n      this.camera.far\n    );\n    mat4.invert(this.camera.matrices.inversProjection, this.camera.matrices.projection);\n  }\n\n  private onControlUpdate(deltaTime: number) {\n    const timeScale = deltaTime / this.TARGET_FRAME_DURATION + 0.0001;\n    let damping = 5 / timeScale;\n    let cameraTargetZ = 3;\n\n    const isMoving = this.control.isPointerDown || Math.abs(this.smoothRotationVelocity) > 0.01;\n\n    if (isMoving !== this.movementActive) {\n      this.movementActive = isMoving;\n      this.onMovementChange(isMoving);\n    }\n\n    if (!this.control.isPointerDown) {\n      const nearestVertexIndex = this.findNearestVertexIndex();\n      const itemIndex = nearestVertexIndex % Math.max(1, this.items.length);\n      this.onActiveItemChange(itemIndex);\n      const snapDirection = vec3.normalize(vec3.create(), this.getVertexWorldPosition(nearestVertexIndex));\n      this.control.snapTargetDirection = snapDirection;\n    } else {\n      cameraTargetZ += this.control.rotationVelocity * 80 + 2.5;\n      damping = 7 / timeScale;\n    }\n\n    this.camera.position[2] += (cameraTargetZ - this.camera.position[2]) / damping;\n    this.updateCameraMatrix();\n  }\n\n  private findNearestVertexIndex(): number {\n    const n = this.control.snapDirection;\n    const inversOrientation = quat.conjugate(quat.create(), this.control.orientation);\n    const nt = vec3.transformQuat(vec3.create(), n, inversOrientation);\n\n    let maxD = -1;\n    let nearestVertexIndex = 0;\n    for (let i = 0; i < this.instancePositions.length; ++i) {\n      const d = vec3.dot(nt, this.instancePositions[i]);\n      if (d > maxD) {\n        maxD = d;\n        nearestVertexIndex = i;\n      }\n    }\n    return nearestVertexIndex;\n  }\n\n  private getVertexWorldPosition(index: number): vec3 {\n    const nearestVertexPos = this.instancePositions[index];\n    return vec3.transformQuat(vec3.create(), nearestVertexPos, this.control.orientation);\n  }\n\n  destroy() {\n    if (animationId) {\n      cancelAnimationFrame(animationId);\n      animationId = null;\n    }\n  }\n\n  private gl: WebGL2RenderingContext | null = null;\n}\n\n// Event handlers\nconst handleActiveItem = (index: number) => {\n  const items = resolvedItems.value;\n  if (!items.length) return;\n  const itemIndex = index % items.length;\n  activeItem.value = items[itemIndex];\n};\n\nconst handleButtonClick = () => {\n  if (!activeItem.value?.link) return;\n  if (activeItem.value.link.startsWith('http')) {\n    window.open(activeItem.value.link, '_blank');\n  } else {\n    console.log('Internal route:', activeItem.value.link);\n  }\n};\n\n// Lifecycle\nonMounted(() => {\n  if (!canvasRef.value) return;\n\n  try {\n    infiniteMenu = new InfiniteGridMenu(\n      canvasRef.value,\n      resolvedItems.value,\n      handleActiveItem,\n      moving => {\n        isMoving.value = moving;\n      },\n      menu => menu.run()\n    );\n\n    const handleResize = () => {\n      infiniteMenu?.resize();\n    };\n\n    window.addEventListener('resize', handleResize);\n    handleResize();\n\n    // Cleanup function stored for unmount\n    onBeforeUnmount(() => {\n      window.removeEventListener('resize', handleResize);\n      infiniteMenu?.destroy();\n    });\n  } catch (error) {\n    console.error('Failed to initialize InfiniteMenu:', error);\n  }\n});\n\nwatch(\n  () => props.items,\n  () => {\n    // Reinitialize on items change\n    if (infiniteMenu && canvasRef.value) {\n      infiniteMenu.destroy();\n      infiniteMenu = new InfiniteGridMenu(\n        canvasRef.value,\n        resolvedItems.value,\n        handleActiveItem,\n        moving => {\n          isMoving.value = moving;\n        },\n        menu => menu.run()\n      );\n    }\n  },\n  { deep: true }\n);\n</script>\n\n<template>\n  <div class=\"relative w-full h-full\">\n    <canvas ref=\"canvasRef\" class=\"w-full h-full cursor-grab active:cursor-grabbing outline-none overflow-hidden\" />\n\n    <template v-if=\"activeItem\">\n      <h2\n        :class=\"[\n          'select-none absolute font-black text-6xl top-1/2 text-white transition-all duration-500 ease-in-out hidden xl:block',\n          isMoving\n            ? 'pointer-events-none opacity-0 transition-all duration-100 ease-in-out'\n            : 'opacity-100 pointer-events-auto'\n        ]\"\n        :style=\"{\n          left: '1.6em',\n          transform: 'translate(20%, -50%)'\n        }\"\n      >\n        {{ activeItem.title }}\n      </h2>\n\n      <p\n        :class=\"[\n          'select-none absolute top-1/2 text-2xl text-white/80 transition-all ease-in-out hidden xl:block',\n          isMoving ? 'pointer-events-none opacity-0 duration-100' : 'opacity-100 pointer-events-auto duration-500'\n        ]\"\n        :style=\"{\n          right: '1%',\n          maxWidth: '10ch',\n          transform: isMoving ? 'translate(-60%, -50%)' : 'translate(-90%, -50%)'\n        }\"\n      >\n        {{ activeItem.description }}\n      </p>\n\n      <div\n        @click=\"handleButtonClick\"\n        :class=\"[\n          'absolute left-1/2 z-10 grid place-items-center bg-purple-600 rounded-full cursor-pointer border-4 border-black transition-all ease-in-out',\n          isMoving ? 'pointer-events-none opacity-0 duration-100' : 'opacity-100 pointer-events-auto duration-500'\n        ]\"\n        :style=\"{\n          width: '60px',\n          height: '60px',\n          bottom: isMoving ? '-80px' : '61px',\n          transform: isMoving ? 'translateX(-50%) scale(0)' : 'translateX(-50%) scale(1)'\n        }\"\n      >\n        <p class=\"select-none relative text-white text-2xl\" :style=\"{ top: '2px' }\">&#x2197;</p>\n      </div>\n    </template>\n  </div>\n</template>\n","path":"InfiniteMenu/InfiniteMenu.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gl-matrix","version":"^3.4.3"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
+{"name":"InfiniteMenu","title":"InfiniteMenu","description":"Horizontally looping menu effect that scrolls endlessly with seamless wrap.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport { mat4, quat, vec2, vec3 } from 'gl-matrix';\n\ntype InfiniteMenuItem = {\n  image: string;\n  link?: string;\n  title?: string;\n  description?: string;\n};\n\ntype InfiniteMenuProps = {\n  items?: InfiniteMenuItem[];\n  scale?: number;\n};\n\nconst DEFAULT_ITEMS: InfiniteMenuItem[] = [\n  {\n    image: 'https://picsum.photos/900/900?grayscale',\n    link: 'https://google.com/',\n    title: '',\n    description: ''\n  }\n];\n\nconst props = withDefaults(defineProps<InfiniteMenuProps>(), {\n  scale: 1.0\n});\n\n// Refs\nconst canvasRef = ref<HTMLCanvasElement>();\nconst activeItem = ref<InfiniteMenuItem | null>(null);\nconst isMoving = ref(false);\nconst resolvedItems = computed(() => (props.items?.length ? props.items : DEFAULT_ITEMS));\n\n// WebGL variables\nlet animationId: number | null = null;\nlet infiniteMenu: InfiniteGridMenu | null = null;\n\n// Shader sources\nconst discVertShaderSource = `#version 300 es\n\nuniform mat4 uWorldMatrix;\nuniform mat4 uViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform vec3 uCameraPosition;\nuniform vec4 uRotationAxisVelocity;\n\nin vec3 aModelPosition;\nin vec3 aModelNormal;\nin vec2 aModelUvs;\nin mat4 aInstanceMatrix;\n\nout vec2 vUvs;\nout float vAlpha;\nflat out int vInstanceId;\n\n#define PI 3.141593\n\nvoid main() {\n    vec4 worldPosition = uWorldMatrix * aInstanceMatrix * vec4(aModelPosition, 1.);\n\n    vec3 centerPos = (uWorldMatrix * aInstanceMatrix * vec4(0., 0., 0., 1.)).xyz;\n    float radius = length(centerPos.xyz);\n\n    if (gl_VertexID > 0) {\n        vec3 rotationAxis = uRotationAxisVelocity.xyz;\n        float rotationVelocity = min(.15, uRotationAxisVelocity.w * 15.);\n        vec3 stretchDir = normalize(cross(centerPos, rotationAxis));\n        vec3 relativeVertexPos = normalize(worldPosition.xyz - centerPos);\n        float strength = dot(stretchDir, relativeVertexPos);\n        float invAbsStrength = min(0., abs(strength) - 1.);\n        strength = rotationVelocity * sign(strength) * abs(invAbsStrength * invAbsStrength * invAbsStrength + 1.);\n        worldPosition.xyz += stretchDir * strength;\n    }\n\n    worldPosition.xyz = radius * normalize(worldPosition.xyz);\n\n    gl_Position = uProjectionMatrix * uViewMatrix * worldPosition;\n\n    vAlpha = smoothstep(0.5, 1., normalize(worldPosition.xyz).z) * .9 + .1;\n    vUvs = aModelUvs;\n    vInstanceId = gl_InstanceID;\n}\n`;\n\nconst discFragShaderSource = `#version 300 es\nprecision highp float;\n\nuniform sampler2D uTex;\nuniform int uItemCount;\nuniform int uAtlasSize;\n\nout vec4 outColor;\n\nin vec2 vUvs;\nin float vAlpha;\nflat in int vInstanceId;\n\nvoid main() {\n    int itemIndex = vInstanceId % uItemCount;\n    int cellsPerRow = uAtlasSize;\n    int cellX = itemIndex % cellsPerRow;\n    int cellY = itemIndex / cellsPerRow;\n    vec2 cellSize = vec2(1.0) / vec2(float(cellsPerRow));\n    vec2 cellOffset = vec2(float(cellX), float(cellY)) * cellSize;\n\n    ivec2 texSize = textureSize(uTex, 0);\n    float imageAspect = float(texSize.x) / float(texSize.y);\n    float containerAspect = 1.0;\n\n    float scale = max(imageAspect / containerAspect,\n                     containerAspect / imageAspect);\n\n    vec2 st = vec2(vUvs.x, 1.0 - vUvs.y);\n    st = (st - 0.5) * scale + 0.5;\n\n    st = clamp(st, 0.0, 1.0);\n\n    st = st * cellSize + cellOffset;\n\n    outColor = texture(uTex, st);\n    outColor.a *= vAlpha;\n}\n`;\n\nclass Face {\n  constructor(\n    public a: number,\n    public b: number,\n    public c: number\n  ) {}\n}\n\nclass Vertex {\n  position: vec3;\n  normal: vec3;\n  uv: vec2;\n\n  constructor(x: number, y: number, z: number) {\n    this.position = vec3.fromValues(x, y, z);\n    this.normal = vec3.create();\n    this.uv = vec2.create();\n  }\n}\n\nclass Geometry {\n  vertices: Vertex[] = [];\n  faces: Face[] = [];\n\n  addVertex(...args: number[]): this {\n    for (let i = 0; i < args.length; i += 3) {\n      this.vertices.push(new Vertex(args[i], args[i + 1], args[i + 2]));\n    }\n    return this;\n  }\n\n  addFace(...args: number[]): this {\n    for (let i = 0; i < args.length; i += 3) {\n      this.faces.push(new Face(args[i], args[i + 1], args[i + 2]));\n    }\n    return this;\n  }\n\n  get lastVertex(): Vertex {\n    return this.vertices[this.vertices.length - 1];\n  }\n\n  subdivide(divisions = 1): this {\n    const midPointCache: Record<string, number> = {};\n    let f = this.faces;\n\n    for (let div = 0; div < divisions; ++div) {\n      const newFaces = new Array(f.length * 4);\n\n      f.forEach((face, ndx) => {\n        const mAB = this.getMidPoint(face.a, face.b, midPointCache);\n        const mBC = this.getMidPoint(face.b, face.c, midPointCache);\n        const mCA = this.getMidPoint(face.c, face.a, midPointCache);\n\n        const i = ndx * 4;\n        newFaces[i + 0] = new Face(face.a, mAB, mCA);\n        newFaces[i + 1] = new Face(face.b, mBC, mAB);\n        newFaces[i + 2] = new Face(face.c, mCA, mBC);\n        newFaces[i + 3] = new Face(mAB, mBC, mCA);\n      });\n\n      f = newFaces;\n    }\n\n    this.faces = f;\n    return this;\n  }\n\n  spherize(radius = 1): this {\n    this.vertices.forEach(vertex => {\n      vec3.normalize(vertex.normal, vertex.position);\n      vec3.scale(vertex.position, vertex.normal, radius);\n    });\n    return this;\n  }\n\n  get data() {\n    return {\n      vertices: this.vertexData,\n      indices: this.indexData,\n      normals: this.normalData,\n      uvs: this.uvData\n    };\n  }\n\n  get vertexData(): Float32Array {\n    return new Float32Array(this.vertices.flatMap(v => Array.from(v.position)));\n  }\n\n  get normalData(): Float32Array {\n    return new Float32Array(this.vertices.flatMap(v => Array.from(v.normal)));\n  }\n\n  get uvData(): Float32Array {\n    return new Float32Array(this.vertices.flatMap(v => Array.from(v.uv)));\n  }\n\n  get indexData(): Uint16Array {\n    return new Uint16Array(this.faces.flatMap(f => [f.a, f.b, f.c]));\n  }\n\n  getMidPoint(ndxA: number, ndxB: number, cache: Record<string, number>): number {\n    const cacheKey = ndxA < ndxB ? `k_${ndxB}_${ndxA}` : `k_${ndxA}_${ndxB}`;\n    if (Object.prototype.hasOwnProperty.call(cache, cacheKey)) {\n      return cache[cacheKey];\n    }\n    const a = this.vertices[ndxA].position;\n    const b = this.vertices[ndxB].position;\n    const ndx = this.vertices.length;\n    cache[cacheKey] = ndx;\n    this.addVertex((a[0] + b[0]) * 0.5, (a[1] + b[1]) * 0.5, (a[2] + b[2]) * 0.5);\n    return ndx;\n  }\n}\n\nclass IcosahedronGeometry extends Geometry {\n  constructor() {\n    super();\n    const t = Math.sqrt(5) * 0.5 + 0.5;\n    this.addVertex(\n      -1,\n      t,\n      0,\n      1,\n      t,\n      0,\n      -1,\n      -t,\n      0,\n      1,\n      -t,\n      0,\n      0,\n      -1,\n      t,\n      0,\n      1,\n      t,\n      0,\n      -1,\n      -t,\n      0,\n      1,\n      -t,\n      t,\n      0,\n      -1,\n      t,\n      0,\n      1,\n      -t,\n      0,\n      -1,\n      -t,\n      0,\n      1\n    ).addFace(\n      0,\n      11,\n      5,\n      0,\n      5,\n      1,\n      0,\n      1,\n      7,\n      0,\n      7,\n      10,\n      0,\n      10,\n      11,\n      1,\n      5,\n      9,\n      5,\n      11,\n      4,\n      11,\n      10,\n      2,\n      10,\n      7,\n      6,\n      7,\n      1,\n      8,\n      3,\n      9,\n      4,\n      3,\n      4,\n      2,\n      3,\n      2,\n      6,\n      3,\n      6,\n      8,\n      3,\n      8,\n      9,\n      4,\n      9,\n      5,\n      2,\n      4,\n      11,\n      6,\n      2,\n      10,\n      8,\n      6,\n      7,\n      9,\n      8,\n      1\n    );\n  }\n}\n\nclass DiscGeometry extends Geometry {\n  constructor(steps = 4, radius = 1) {\n    super();\n    steps = Math.max(4, steps);\n\n    const alpha = (2 * Math.PI) / steps;\n\n    this.addVertex(0, 0, 0);\n    this.lastVertex.uv[0] = 0.5;\n    this.lastVertex.uv[1] = 0.5;\n\n    for (let i = 0; i < steps; ++i) {\n      const x = Math.cos(alpha * i);\n      const y = Math.sin(alpha * i);\n      this.addVertex(radius * x, radius * y, 0);\n      this.lastVertex.uv[0] = x * 0.5 + 0.5;\n      this.lastVertex.uv[1] = y * 0.5 + 0.5;\n\n      if (i > 0) {\n        this.addFace(0, i, i + 1);\n      }\n    }\n    this.addFace(0, steps, 1);\n  }\n}\n\nfunction createShader(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader | null {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);\n\n  if (success) {\n    return shader;\n  }\n\n  console.error(gl.getShaderInfoLog(shader));\n  gl.deleteShader(shader);\n  return null;\n}\n\nfunction createProgram(\n  gl: WebGL2RenderingContext,\n  shaderSources: string[],\n  transformFeedbackVaryings?: string[],\n  attribLocations?: Record<string, number>\n): WebGLProgram | null {\n  const program = gl.createProgram();\n  if (!program) return null;\n\n  [gl.VERTEX_SHADER, gl.FRAGMENT_SHADER].forEach((type, ndx) => {\n    const shader = createShader(gl, type, shaderSources[ndx]);\n    if (shader) gl.attachShader(program, shader);\n  });\n\n  if (transformFeedbackVaryings) {\n    gl.transformFeedbackVaryings(program, transformFeedbackVaryings, gl.SEPARATE_ATTRIBS);\n  }\n\n  if (attribLocations) {\n    for (const attrib in attribLocations) {\n      gl.bindAttribLocation(program, attribLocations[attrib], attrib);\n    }\n  }\n\n  gl.linkProgram(program);\n  const success = gl.getProgramParameter(program, gl.LINK_STATUS);\n\n  if (success) {\n    return program;\n  }\n\n  console.error(gl.getProgramInfoLog(program));\n  gl.deleteProgram(program);\n  return null;\n}\n\nfunction makeVertexArray(\n  gl: WebGL2RenderingContext,\n  bufLocNumElmPairs: [WebGLBuffer, number, number][],\n  indices?: Uint16Array\n): WebGLVertexArrayObject | null {\n  const va = gl.createVertexArray();\n  if (!va) return null;\n\n  gl.bindVertexArray(va);\n\n  for (const [buffer, loc, numElem] of bufLocNumElmPairs) {\n    if (loc === -1) continue;\n    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n    gl.enableVertexAttribArray(loc);\n    gl.vertexAttribPointer(loc, numElem, gl.FLOAT, false, 0, 0);\n  }\n\n  if (indices) {\n    const indexBuffer = gl.createBuffer();\n    if (indexBuffer) {\n      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);\n      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);\n    }\n  }\n\n  gl.bindVertexArray(null);\n  return va;\n}\n\nfunction resizeCanvasToDisplaySize(canvas: HTMLCanvasElement): boolean {\n  const dpr = Math.min(2, window.devicePixelRatio || 1);\n  const displayWidth = Math.round(canvas.clientWidth * dpr);\n  const displayHeight = Math.round(canvas.clientHeight * dpr);\n  const needResize = canvas.width !== displayWidth || canvas.height !== displayHeight;\n  if (needResize) {\n    canvas.width = displayWidth;\n    canvas.height = displayHeight;\n  }\n  return needResize;\n}\n\nfunction makeBuffer(\n  gl: WebGL2RenderingContext,\n  sizeOrData: number | ArrayBuffer | ArrayBufferView,\n  usage: number\n): WebGLBuffer | null {\n  const buf = gl.createBuffer();\n  if (!buf) return null;\n\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n  if (typeof sizeOrData === 'number') {\n    gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);\n  } else if (sizeOrData instanceof ArrayBuffer) {\n    gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);\n  } else {\n    gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);\n  }\n  gl.bindBuffer(gl.ARRAY_BUFFER, null);\n  return buf;\n}\n\nfunction createAndSetupTexture(\n  gl: WebGL2RenderingContext,\n  minFilter: number,\n  magFilter: number,\n  wrapS: number,\n  wrapT: number\n): WebGLTexture | null {\n  const texture = gl.createTexture();\n  if (!texture) return null;\n\n  gl.bindTexture(gl.TEXTURE_2D, texture);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapS);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrapT);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);\n  return texture;\n}\n\nclass ArcballControl {\n  isPointerDown = false;\n  orientation = quat.create();\n  pointerRotation = quat.create();\n  rotationVelocity = 0;\n  rotationAxis = vec3.fromValues(1, 0, 0);\n  snapDirection = vec3.fromValues(0, 0, -1);\n  snapTargetDirection?: vec3;\n  EPSILON = 0.1;\n  IDENTITY_QUAT = quat.create();\n\n  private pointerPos = vec2.create();\n  private previousPointerPos = vec2.create();\n  private _rotationVelocity = 0;\n  private _combinedQuat = quat.create();\n\n  constructor(\n    private canvas: HTMLCanvasElement,\n    private updateCallback?: (deltaTime: number) => void\n  ) {\n    this.setupEventListeners();\n  }\n\n  private setupEventListeners() {\n    this.canvas.addEventListener('pointerdown', e => {\n      vec2.set(this.pointerPos, e.clientX, e.clientY);\n      vec2.copy(this.previousPointerPos, this.pointerPos);\n      this.isPointerDown = true;\n    });\n\n    this.canvas.addEventListener('pointerup', () => {\n      this.isPointerDown = false;\n    });\n\n    this.canvas.addEventListener('pointerleave', () => {\n      this.isPointerDown = false;\n    });\n\n    this.canvas.addEventListener('pointermove', e => {\n      if (this.isPointerDown) {\n        vec2.set(this.pointerPos, e.clientX, e.clientY);\n      }\n    });\n\n    this.canvas.style.touchAction = 'none';\n  }\n\n  update(deltaTime: number, targetFrameDuration = 16) {\n    const timeScale = deltaTime / targetFrameDuration + 0.00001;\n    let angleFactor = timeScale;\n    const snapRotation = quat.create();\n\n    if (this.isPointerDown) {\n      const INTENSITY = 0.3 * timeScale;\n      const ANGLE_AMPLIFICATION = 5 / timeScale;\n\n      const midPointerPos = vec2.sub(vec2.create(), this.pointerPos, this.previousPointerPos);\n      vec2.scale(midPointerPos, midPointerPos, INTENSITY);\n\n      if (vec2.sqrLen(midPointerPos) > this.EPSILON) {\n        vec2.add(midPointerPos, this.previousPointerPos, midPointerPos);\n\n        const p = this.project(midPointerPos);\n        const q = this.project(this.previousPointerPos);\n        const a = vec3.normalize(vec3.create(), p);\n        const b = vec3.normalize(vec3.create(), q);\n\n        vec2.copy(this.previousPointerPos, midPointerPos);\n\n        angleFactor *= ANGLE_AMPLIFICATION;\n\n        this.quatFromVectors(a, b, this.pointerRotation, angleFactor);\n      } else {\n        quat.slerp(this.pointerRotation, this.pointerRotation, this.IDENTITY_QUAT, INTENSITY);\n      }\n    } else {\n      const INTENSITY = 0.1 * timeScale;\n      quat.slerp(this.pointerRotation, this.pointerRotation, this.IDENTITY_QUAT, INTENSITY);\n\n      if (this.snapTargetDirection) {\n        const SNAPPING_INTENSITY = 0.2;\n        const a = this.snapTargetDirection;\n        const b = this.snapDirection;\n        const sqrDist = vec3.squaredDistance(a, b);\n        const distanceFactor = Math.max(0.1, 1 - sqrDist * 10);\n        angleFactor *= SNAPPING_INTENSITY * distanceFactor;\n        this.quatFromVectors(a, b, snapRotation, angleFactor);\n      }\n    }\n\n    const combinedQuat = quat.multiply(quat.create(), snapRotation, this.pointerRotation);\n    this.orientation = quat.multiply(quat.create(), combinedQuat, this.orientation);\n    quat.normalize(this.orientation, this.orientation);\n\n    const RA_INTENSITY = 0.8 * timeScale;\n    quat.slerp(this._combinedQuat, this._combinedQuat, combinedQuat, RA_INTENSITY);\n    quat.normalize(this._combinedQuat, this._combinedQuat);\n\n    const rad = Math.acos(this._combinedQuat[3]) * 2.0;\n    const s = Math.sin(rad / 2.0);\n    let rv = 0;\n    if (s > 0.000001) {\n      rv = rad / (2 * Math.PI);\n      this.rotationAxis[0] = this._combinedQuat[0] / s;\n      this.rotationAxis[1] = this._combinedQuat[1] / s;\n      this.rotationAxis[2] = this._combinedQuat[2] / s;\n    }\n\n    const RV_INTENSITY = 0.5 * timeScale;\n    this._rotationVelocity += (rv - this._rotationVelocity) * RV_INTENSITY;\n    this.rotationVelocity = this._rotationVelocity / timeScale;\n\n    this.updateCallback?.(deltaTime);\n  }\n\n  quatFromVectors(a: vec3, b: vec3, out: quat, angleFactor = 1) {\n    const axis = vec3.cross(vec3.create(), a, b);\n    vec3.normalize(axis, axis);\n    const d = Math.max(-1, Math.min(1, vec3.dot(a, b)));\n    const angle = Math.acos(d) * angleFactor;\n    quat.setAxisAngle(out, axis, angle);\n    return { q: out, axis, angle };\n  }\n\n  private project(pos: vec2): vec3 {\n    const r = 2;\n    const w = this.canvas.clientWidth;\n    const h = this.canvas.clientHeight;\n    const s = Math.max(w, h) - 1;\n\n    const x = (2 * pos[0] - w - 1) / s;\n    const y = (2 * pos[1] - h - 1) / s;\n    let z = 0;\n    const xySq = x * x + y * y;\n    const rSq = r * r;\n\n    if (xySq <= rSq / 2.0) {\n      z = Math.sqrt(rSq - xySq);\n    } else {\n      z = rSq / Math.sqrt(xySq);\n    }\n    return vec3.fromValues(-x, y, z);\n  }\n}\n\nclass InfiniteGridMenu {\n  private TARGET_FRAME_DURATION = 1000 / 60;\n  private SPHERE_RADIUS = 2;\n  private time = 0;\n  private deltaTime = 0;\n  private deltaFrames = 0;\n  private frames = 0;\n\n  private camera = {\n    matrix: mat4.create(),\n    near: 0.1,\n    far: 40,\n    fov: Math.PI / 4,\n    aspect: 1,\n    position: vec3.fromValues(0, 0, 3),\n    up: vec3.fromValues(0, 1, 0),\n    matrices: {\n      view: mat4.create(),\n      projection: mat4.create(),\n      inversProjection: mat4.create()\n    }\n  };\n\n  private nearestVertexIndex: number | null = null;\n  private smoothRotationVelocity = 0;\n  private scaleFactor = 1.0;\n  private movementActive = false;\n\n  private discProgram: WebGLProgram | null = null;\n  private discLocations: Record<string, WebGLUniformLocation | number | null> = {};\n  private discGeo!: DiscGeometry;\n  private discBuffers: Record<string, Float32Array | Uint16Array> = {};\n  private discVAO: WebGLVertexArrayObject | null = null;\n  private icoGeo!: IcosahedronGeometry;\n  private instancePositions: vec3[] = [];\n  private DISC_INSTANCE_COUNT = 0;\n  private discInstances: {\n    matricesArray: Float32Array;\n    matrices: Float32Array[];\n    buffer: WebGLBuffer | null;\n  } = {\n    matricesArray: new Float32Array(0),\n    matrices: [],\n    buffer: null\n  };\n  private worldMatrix = mat4.create();\n  private tex: WebGLTexture | null = null;\n  private atlasSize = 0;\n  private control!: ArcballControl;\n  private viewportSize!: vec2;\n\n  constructor(\n    private canvas: HTMLCanvasElement,\n    private items: InfiniteMenuItem[],\n    private onActiveItemChange: (index: number) => void,\n    private onMovementChange: (isMoving: boolean) => void,\n    private onInit?: (menu: InfiniteGridMenu) => void,\n    scale: number = 3.0\n  ) {\n    this.scaleFactor = scale;\n    this.camera.position[2] = scale;\n    this.init();\n  }\n\n  private init() {\n    this.gl = this.canvas.getContext('webgl2', { antialias: true, alpha: false }) as WebGL2RenderingContext;\n    if (!this.gl) {\n      throw new Error('No WebGL 2 context!');\n    }\n\n    this.viewportSize = vec2.fromValues(this.canvas.clientWidth, this.canvas.clientHeight);\n\n    this.discProgram = createProgram(this.gl, [discVertShaderSource, discFragShaderSource], undefined, {\n      aModelPosition: 0,\n      aModelNormal: 1,\n      aModelUvs: 2,\n      aInstanceMatrix: 3\n    });\n\n    if (!this.discProgram) {\n      throw new Error('Failed to create shader program');\n    }\n\n    this.discLocations = {\n      aModelPosition: this.gl.getAttribLocation(this.discProgram, 'aModelPosition'),\n      aModelUvs: this.gl.getAttribLocation(this.discProgram, 'aModelUvs'),\n      aInstanceMatrix: this.gl.getAttribLocation(this.discProgram, 'aInstanceMatrix'),\n      uWorldMatrix: this.gl.getUniformLocation(this.discProgram, 'uWorldMatrix'),\n      uViewMatrix: this.gl.getUniformLocation(this.discProgram, 'uViewMatrix'),\n      uProjectionMatrix: this.gl.getUniformLocation(this.discProgram, 'uProjectionMatrix'),\n      uCameraPosition: this.gl.getUniformLocation(this.discProgram, 'uCameraPosition'),\n      uRotationAxisVelocity: this.gl.getUniformLocation(this.discProgram, 'uRotationAxisVelocity'),\n      uTex: this.gl.getUniformLocation(this.discProgram, 'uTex'),\n      uItemCount: this.gl.getUniformLocation(this.discProgram, 'uItemCount'),\n      uAtlasSize: this.gl.getUniformLocation(this.discProgram, 'uAtlasSize'),\n      uFrames: this.gl.getUniformLocation(this.discProgram, 'uFrames'),\n      uScaleFactor: this.gl.getUniformLocation(this.discProgram, 'uScaleFactor')\n    };\n\n    this.discGeo = new DiscGeometry(56, 1);\n    this.discBuffers = this.discGeo.data;\n    this.discVAO = makeVertexArray(\n      this.gl,\n      [\n        [\n          makeBuffer(this.gl, this.discBuffers.vertices, this.gl.STATIC_DRAW)!,\n          this.discLocations.aModelPosition as number,\n          3\n        ],\n        [makeBuffer(this.gl, this.discBuffers.uvs, this.gl.STATIC_DRAW)!, this.discLocations.aModelUvs as number, 2]\n      ],\n      this.discBuffers.indices as Uint16Array\n    );\n\n    this.icoGeo = new IcosahedronGeometry();\n    this.icoGeo.subdivide(1).spherize(this.SPHERE_RADIUS);\n    this.instancePositions = this.icoGeo.vertices.map(v => v.position);\n    this.DISC_INSTANCE_COUNT = this.icoGeo.vertices.length;\n    this.initDiscInstances(this.DISC_INSTANCE_COUNT);\n\n    this.initTexture();\n\n    this.control = new ArcballControl(this.canvas, deltaTime => this.onControlUpdate(deltaTime));\n\n    this.updateCameraMatrix();\n    this.updateProjectionMatrix();\n    this.resize();\n\n    this.onInit?.(this);\n  }\n\n  private initTexture() {\n    if (!this.gl) return;\n\n    this.tex = createAndSetupTexture(\n      this.gl,\n      this.gl.LINEAR,\n      this.gl.LINEAR,\n      this.gl.CLAMP_TO_EDGE,\n      this.gl.CLAMP_TO_EDGE\n    );\n    if (!this.tex) return;\n\n    const itemCount = Math.max(1, this.items.length);\n    this.atlasSize = Math.ceil(Math.sqrt(itemCount));\n    const canvas = document.createElement('canvas');\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n\n    const cellSize = 512;\n    canvas.width = this.atlasSize * cellSize;\n    canvas.height = this.atlasSize * cellSize;\n\n    Promise.all(\n      this.items.map(\n        item =>\n          new Promise<HTMLImageElement>(resolve => {\n            const img = new Image();\n            img.crossOrigin = 'anonymous';\n            img.onload = () => resolve(img);\n            img.onerror = () => resolve(img); // Continue even if image fails\n            img.src = item.image;\n          })\n      )\n    ).then(images => {\n      images.forEach((img, i) => {\n        const x = (i % this.atlasSize) * cellSize;\n        const y = Math.floor(i / this.atlasSize) * cellSize;\n        try {\n          ctx.drawImage(img, x, y, cellSize, cellSize);\n        } catch {\n          // Skip failed images\n        }\n      });\n\n      if (this.gl && this.tex) {\n        this.gl.bindTexture(this.gl.TEXTURE_2D, this.tex);\n        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, canvas);\n        this.gl.generateMipmap(this.gl.TEXTURE_2D);\n      }\n    });\n  }\n\n  private initDiscInstances(count: number) {\n    if (!this.gl) return;\n\n    this.discInstances = {\n      matricesArray: new Float32Array(count * 16),\n      matrices: [] as Float32Array[],\n      buffer: this.gl.createBuffer()\n    };\n\n    for (let i = 0; i < count; ++i) {\n      const instanceMatrixArray = new Float32Array(this.discInstances.matricesArray.buffer, i * 16 * 4, 16);\n      instanceMatrixArray.set(mat4.create());\n      this.discInstances.matrices.push(instanceMatrixArray);\n    }\n\n    this.gl.bindVertexArray(this.discVAO);\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.discInstances.buffer);\n    this.gl.bufferData(this.gl.ARRAY_BUFFER, this.discInstances.matricesArray.byteLength, this.gl.DYNAMIC_DRAW);\n\n    const mat4AttribSlotCount = 4;\n    const bytesPerMatrix = 16 * 4;\n    for (let j = 0; j < mat4AttribSlotCount; ++j) {\n      const loc = (this.discLocations.aInstanceMatrix as number) + j;\n      this.gl.enableVertexAttribArray(loc);\n      this.gl.vertexAttribPointer(loc, 4, this.gl.FLOAT, false, bytesPerMatrix, j * 4 * 4);\n      this.gl.vertexAttribDivisor(loc, 1);\n    }\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n    this.gl.bindVertexArray(null);\n  }\n\n  run(time = 0) {\n    this.deltaTime = Math.min(32, time - this.time);\n    this.time = time;\n    this.deltaFrames = this.deltaTime / this.TARGET_FRAME_DURATION;\n    this.frames += this.deltaFrames;\n\n    this.animate();\n    this.render();\n\n    animationId = requestAnimationFrame(t => this.run(t));\n  }\n\n  resize() {\n    this.viewportSize = vec2.set(this.viewportSize || vec2.create(), this.canvas.clientWidth, this.canvas.clientHeight);\n\n    if (!this.gl) return;\n\n    const needsResize = resizeCanvasToDisplaySize(this.canvas);\n    if (needsResize) {\n      this.gl.viewport(0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);\n    }\n\n    this.updateProjectionMatrix();\n  }\n\n  private animate() {\n    if (!this.gl) return;\n\n    this.control.update(this.deltaTime, this.TARGET_FRAME_DURATION);\n\n    const positions = this.instancePositions.map(p => vec3.transformQuat(vec3.create(), p, this.control.orientation));\n    const scale = 0.25;\n    const SCALE_INTENSITY = 0.6;\n\n    positions.forEach((p, ndx) => {\n      const s = (Math.abs(p[2]) / this.SPHERE_RADIUS) * SCALE_INTENSITY + (1 - SCALE_INTENSITY);\n      const finalScale = s * scale;\n      const matrix = mat4.create();\n      mat4.multiply(matrix, matrix, mat4.fromTranslation(mat4.create(), vec3.negate(vec3.create(), p)));\n      mat4.multiply(matrix, matrix, mat4.targetTo(mat4.create(), [0, 0, 0], p, [0, 1, 0]));\n      mat4.multiply(matrix, matrix, mat4.fromScaling(mat4.create(), [finalScale, finalScale, finalScale]));\n      mat4.multiply(matrix, matrix, mat4.fromTranslation(mat4.create(), [0, 0, -this.SPHERE_RADIUS]));\n\n      mat4.copy(this.discInstances.matrices[ndx], matrix);\n    });\n\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.discInstances.buffer);\n    this.gl.bufferSubData(this.gl.ARRAY_BUFFER, 0, this.discInstances.matricesArray);\n    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);\n\n    this.smoothRotationVelocity = this.control.rotationVelocity;\n  }\n\n  private render() {\n    if (!this.gl) return;\n\n    this.gl.useProgram(this.discProgram);\n\n    this.gl.enable(this.gl.CULL_FACE);\n    this.gl.enable(this.gl.DEPTH_TEST);\n    this.gl.enable(this.gl.BLEND);\n    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);\n\n    this.gl.clearColor(0, 0, 0, 0);\n    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);\n\n    this.gl.uniformMatrix4fv(this.discLocations.uWorldMatrix, false, this.worldMatrix);\n    this.gl.uniformMatrix4fv(this.discLocations.uViewMatrix, false, this.camera.matrices.view);\n    this.gl.uniformMatrix4fv(this.discLocations.uProjectionMatrix, false, this.camera.matrices.projection);\n    this.gl.uniform3f(\n      this.discLocations.uCameraPosition,\n      this.camera.position[0],\n      this.camera.position[1],\n      this.camera.position[2]\n    );\n    this.gl.uniform4f(\n      this.discLocations.uRotationAxisVelocity,\n      this.control.rotationAxis[0],\n      this.control.rotationAxis[1],\n      this.control.rotationAxis[2],\n      this.smoothRotationVelocity * 1.1\n    );\n\n    const itemCountLocation = this.discLocations.uItemCount as WebGLUniformLocation | null;\n    if (itemCountLocation !== null) {\n      this.gl.uniform1i(itemCountLocation, this.items.length);\n    }\n\n    const atlasSizeLocation = this.discLocations.uAtlasSize as WebGLUniformLocation | null;\n    if (atlasSizeLocation !== null) {\n      this.gl.uniform1i(atlasSizeLocation, this.atlasSize);\n    }\n\n    const framesLocation = this.discLocations.uFrames as WebGLUniformLocation | null;\n    if (framesLocation !== null) {\n      this.gl.uniform1f(framesLocation, this.frames);\n    }\n\n    const scaleFactorLocation = this.discLocations.uScaleFactor as WebGLUniformLocation | null;\n    if (scaleFactorLocation !== null) {\n      this.gl.uniform1f(scaleFactorLocation, this.scaleFactor);\n    }\n\n    const textureLocation = this.discLocations.uTex as WebGLUniformLocation | null;\n    if (textureLocation !== null) {\n      this.gl.uniform1i(textureLocation, 0);\n    }\n    this.gl.activeTexture(this.gl.TEXTURE0);\n    this.gl.bindTexture(this.gl.TEXTURE_2D, this.tex);\n\n    this.gl.bindVertexArray(this.discVAO);\n    this.gl.drawElementsInstanced(\n      this.gl.TRIANGLES,\n      this.discBuffers.indices.length,\n      this.gl.UNSIGNED_SHORT,\n      0,\n      this.DISC_INSTANCE_COUNT\n    );\n  }\n\n  private updateCameraMatrix() {\n    mat4.targetTo(this.camera.matrix, this.camera.position, [0, 0, 0], this.camera.up);\n    mat4.invert(this.camera.matrices.view, this.camera.matrix);\n  }\n\n  private updateProjectionMatrix() {\n    if (!this.gl) return;\n\n    this.camera.aspect = this.gl.canvas.width / this.gl.canvas.height;\n    const height = this.SPHERE_RADIUS * 0.35;\n    const distance = this.camera.position[2];\n    if (this.camera.aspect > 1) {\n      this.camera.fov = 2 * Math.atan(height / distance);\n    } else {\n      this.camera.fov = 2 * Math.atan(height / this.camera.aspect / distance);\n    }\n    mat4.perspective(\n      this.camera.matrices.projection,\n      this.camera.fov,\n      this.camera.aspect,\n      this.camera.near,\n      this.camera.far\n    );\n    mat4.invert(this.camera.matrices.inversProjection, this.camera.matrices.projection);\n  }\n\n  private onControlUpdate(deltaTime: number) {\n    const timeScale = deltaTime / this.TARGET_FRAME_DURATION + 0.0001;\n    let damping = 5 / timeScale;\n    let cameraTargetZ = 3;\n\n    const isMoving = this.control.isPointerDown || Math.abs(this.smoothRotationVelocity) > 0.01;\n\n    if (isMoving !== this.movementActive) {\n      this.movementActive = isMoving;\n      this.onMovementChange(isMoving);\n    }\n\n    if (!this.control.isPointerDown) {\n      const nearestVertexIndex = this.findNearestVertexIndex();\n      const itemIndex = nearestVertexIndex % Math.max(1, this.items.length);\n      this.onActiveItemChange(itemIndex);\n      const snapDirection = vec3.normalize(vec3.create(), this.getVertexWorldPosition(nearestVertexIndex));\n      this.control.snapTargetDirection = snapDirection;\n    } else {\n      cameraTargetZ += this.control.rotationVelocity * 80 + 2.5;\n      damping = 7 / timeScale;\n    }\n\n    this.camera.position[2] += (cameraTargetZ - this.camera.position[2]) / damping;\n    this.updateCameraMatrix();\n  }\n\n  private findNearestVertexIndex(): number {\n    const n = this.control.snapDirection;\n    const inversOrientation = quat.conjugate(quat.create(), this.control.orientation);\n    const nt = vec3.transformQuat(vec3.create(), n, inversOrientation);\n\n    let maxD = -1;\n    let nearestVertexIndex = 0;\n    for (let i = 0; i < this.instancePositions.length; ++i) {\n      const d = vec3.dot(nt, this.instancePositions[i]);\n      if (d > maxD) {\n        maxD = d;\n        nearestVertexIndex = i;\n      }\n    }\n    return nearestVertexIndex;\n  }\n\n  private getVertexWorldPosition(index: number): vec3 {\n    const nearestVertexPos = this.instancePositions[index];\n    return vec3.transformQuat(vec3.create(), nearestVertexPos, this.control.orientation);\n  }\n\n  destroy() {\n    if (animationId) {\n      cancelAnimationFrame(animationId);\n      animationId = null;\n    }\n  }\n\n  private gl: WebGL2RenderingContext | null = null;\n}\n\n// Event handlers\nconst handleActiveItem = (index: number) => {\n  const items = resolvedItems.value;\n  if (!items.length) return;\n  const itemIndex = index % items.length;\n  activeItem.value = items[itemIndex];\n};\n\nconst handleButtonClick = () => {\n  if (!activeItem.value?.link) return;\n  if (activeItem.value.link.startsWith('http')) {\n    window.open(activeItem.value.link, '_blank');\n  } else {\n    console.log('Internal route:', activeItem.value.link);\n  }\n};\n\n// Lifecycle\nonMounted(() => {\n  if (!canvasRef.value) return;\n\n  try {\n    infiniteMenu = new InfiniteGridMenu(\n      canvasRef.value,\n      resolvedItems.value,\n      handleActiveItem,\n      moving => {\n        isMoving.value = moving;\n      },\n      menu => menu.run()\n    );\n\n    const handleResize = () => {\n      infiniteMenu?.resize();\n    };\n\n    window.addEventListener('resize', handleResize);\n    handleResize();\n\n    // Cleanup function stored for unmount\n    onBeforeUnmount(() => {\n      window.removeEventListener('resize', handleResize);\n      infiniteMenu?.destroy();\n    });\n  } catch (error) {\n    console.error('Failed to initialize InfiniteMenu:', error);\n  }\n});\n\nwatch(\n  () => props.items,\n  () => {\n    // Reinitialize on items change\n    if (infiniteMenu && canvasRef.value) {\n      infiniteMenu.destroy();\n      infiniteMenu = new InfiniteGridMenu(\n        canvasRef.value,\n        resolvedItems.value,\n        handleActiveItem,\n        moving => {\n          isMoving.value = moving;\n        },\n        menu => menu.run()\n      );\n    }\n  },\n  { deep: true }\n);\n\nwatch(\n  () => props.scale,\n  () => {\n    if (infiniteMenu && canvasRef.value) {\n      infiniteMenu.destroy();\n      infiniteMenu = new InfiniteGridMenu(\n        canvasRef.value,\n        resolvedItems.value,\n        handleActiveItem,\n        moving => {\n          isMoving.value = moving;\n        },\n        menu => menu.run(),\n\n        props.scale\n      );\n    }\n  }\n);\n</script>\n\n<template>\n  <div class=\"relative w-full h-full\">\n    <canvas ref=\"canvasRef\" class=\"outline-none w-full h-full overflow-hidden cursor-grab active:cursor-grabbing\" />\n\n    <template v-if=\"activeItem\">\n      <h2\n        :class=\"[\n          'select-none absolute font-black text-6xl top-1/2 text-white transition-all duration-500 ease-in-out hidden xl:block',\n          isMoving\n            ? 'pointer-events-none opacity-0 transition-all duration-100 ease-in-out'\n            : 'opacity-100 pointer-events-auto'\n        ]\"\n        :style=\"{\n          left: '1.6em',\n          transform: 'translate(20%, -50%)'\n        }\"\n      >\n        {{ activeItem.title }}\n      </h2>\n\n      <p\n        :class=\"[\n          'select-none absolute top-1/2 text-2xl text-white/80 transition-all ease-in-out hidden xl:block',\n          isMoving ? 'pointer-events-none opacity-0 duration-100' : 'opacity-100 pointer-events-auto duration-500'\n        ]\"\n        :style=\"{\n          right: '1%',\n          maxWidth: '10ch',\n          transform: isMoving ? 'translate(-60%, -50%)' : 'translate(-90%, -50%)'\n        }\"\n      >\n        {{ activeItem.description }}\n      </p>\n\n      <div\n        @click=\"handleButtonClick\"\n        :class=\"[\n          'absolute left-1/2 z-10 grid place-items-center bg-purple-600 rounded-full cursor-pointer border-4 border-black transition-all ease-in-out',\n          isMoving ? 'pointer-events-none opacity-0 duration-100' : 'opacity-100 pointer-events-auto duration-500'\n        ]\"\n        :style=\"{\n          width: '60px',\n          height: '60px',\n          bottom: isMoving ? '-80px' : '61px',\n          transform: isMoving ? 'translateX(-50%) scale(0)' : 'translateX(-50%) scale(1)'\n        }\"\n      >\n        <p class=\"relative text-white text-2xl select-none\" :style=\"{ top: '2px' }\">&#x2197;</p>\n      </div>\n    </template>\n  </div>\n</template>\n","path":"InfiniteMenu/InfiniteMenu.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gl-matrix","version":"^3.4.3"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
diff --git a/public/r/InfiniteScroll.json b/public/r/InfiniteScroll.json
index 5978840..3ec3df3 100644
--- a/public/r/InfiniteScroll.json
+++ b/public/r/InfiniteScroll.json
@@ -1 +1 @@
-{"name":"InfiniteScroll","title":"InfiniteScroll","description":"Infinite scrolling container auto-loads content near viewport end.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div class=\"w-full\">\n    <div\n      class=\"infinite-scroll-wrapper relative flex items-center justify-center w-full overflow-hidden\"\n      ref=\"wrapperRef\"\n      :style=\"{\n        maxHeight: maxHeight,\n        overscrollBehavior: 'none'\n      }\"\n    >\n      <div\n        class=\"infinite-scroll-container flex flex-col px-4 cursor-grab\"\n        ref=\"containerRef\"\n        :style=\"{\n          transform: getTiltTransform(),\n          width: width,\n          overscrollBehavior: 'contain',\n          transformOrigin: 'center center',\n          transformStyle: 'preserve-3d'\n        }\"\n      >\n        <div\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          class=\"infinite-scroll-item rounded-2xl flex items-center justify-center p-4 text-xl font-semibold text-center border-2 border-white select-none box-border relative\"\n          :style=\"{\n            height: itemMinHeight + 'px',\n            marginTop: negativeMargin\n          }\"\n        >\n          <component :is=\"item.content\" v-if=\"typeof item.content === 'object'\" />\n\n          <template v-else>{{ item.content }}</template>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\nimport { gsap } from 'gsap';\nimport { Observer } from 'gsap/Observer';\n\ngsap.registerPlugin(Observer);\n\ninterface InfiniteScrollItem {\n  content: string | object;\n}\n\ninterface Props {\n  width?: string;\n  maxHeight?: string;\n  negativeMargin?: string;\n  items?: InfiniteScrollItem[];\n  itemMinHeight?: number;\n  isTilted?: boolean;\n  tiltDirection?: 'left' | 'right';\n  autoplay?: boolean;\n  autoplaySpeed?: number;\n  autoplayDirection?: 'down' | 'up';\n  pauseOnHover?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  width: '30rem',\n  maxHeight: '100%',\n  negativeMargin: '-0.5em',\n  items: () => [],\n  itemMinHeight: 150,\n  isTilted: false,\n  tiltDirection: 'left',\n  autoplay: false,\n  autoplaySpeed: 0.5,\n  autoplayDirection: 'down',\n  pauseOnHover: false\n});\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nlet observer: Observer | null = null;\nlet rafId: number | null = null;\nlet velocity = 0;\nlet stopTicker: (() => void) | null = null;\nlet startTicker: (() => void) | null = null;\n\nconst getTiltTransform = (): string => {\n  if (!props.isTilted) return 'none';\n  return props.tiltDirection === 'left'\n    ? 'rotateX(20deg) rotateZ(-20deg) skewX(20deg)'\n    : 'rotateX(20deg) rotateZ(20deg) skewX(-20deg)';\n};\n\nconst initializeScroll = () => {\n  const container = containerRef.value;\n  if (!container) return;\n  if (props.items.length === 0) return;\n\n  const divItems = gsap.utils.toArray<HTMLDivElement>(container.children);\n  if (!divItems.length) return;\n\n  const firstItem = divItems[0];\n  const itemStyle = getComputedStyle(firstItem);\n  const itemHeight = firstItem.offsetHeight;\n  const itemMarginTop = parseFloat(itemStyle.marginTop) || 0;\n  const totalItemHeight = itemHeight + itemMarginTop;\n  const totalHeight = itemHeight * props.items.length + itemMarginTop * (props.items.length - 1);\n\n  const wrapFn = gsap.utils.wrap(-totalHeight, totalHeight);\n\n  divItems.forEach((child, i) => {\n    const y = i * totalItemHeight;\n    gsap.set(child, { y });\n  });\n\n  observer = Observer.create({\n    target: container,\n    type: 'wheel,touch,pointer',\n    preventDefault: true,\n    onPress: ({ target }) => {\n      (target as HTMLElement).style.cursor = 'grabbing';\n    },\n    onRelease: ({ target }) => {\n      (target as HTMLElement).style.cursor = 'grab';\n      if (Math.abs(velocity) > 0.1) {\n        const momentum = velocity * 0.8;\n        divItems.forEach(child => {\n          gsap.to(child, {\n            duration: 1.5,\n            ease: 'power2.out',\n            y: `+=${momentum}`,\n            modifiers: {\n              y: gsap.utils.unitize(wrapFn)\n            }\n          });\n        });\n      }\n      velocity = 0;\n    },\n    onChange: ({ deltaY, isDragging, event }) => {\n      const d = event.type === 'wheel' ? -deltaY : deltaY;\n      const distance = isDragging ? d * 5 : d * 1.5;\n\n      velocity = distance * 0.5;\n\n      divItems.forEach(child => {\n        gsap.to(child, {\n          duration: isDragging ? 0.3 : 1.2,\n          ease: isDragging ? 'power1.out' : 'power3.out',\n          y: `+=${distance}`,\n          modifiers: {\n            y: gsap.utils.unitize(wrapFn)\n          }\n        });\n      });\n    }\n  });\n\n  if (props.autoplay) {\n    const directionFactor = props.autoplayDirection === 'down' ? 1 : -1;\n    const speedPerFrame = props.autoplaySpeed * directionFactor;\n\n    const tick = () => {\n      divItems.forEach(child => {\n        gsap.set(child, {\n          y: `+=${speedPerFrame}`,\n          modifiers: {\n            y: gsap.utils.unitize(wrapFn)\n          }\n        });\n      });\n      rafId = requestAnimationFrame(tick);\n    };\n\n    rafId = requestAnimationFrame(tick);\n\n    if (props.pauseOnHover) {\n      stopTicker = () => rafId && cancelAnimationFrame(rafId);\n      startTicker = () => {\n        rafId = requestAnimationFrame(tick);\n      };\n\n      container.addEventListener('mouseenter', stopTicker);\n      container.addEventListener('mouseleave', startTicker);\n    }\n  }\n};\n\nconst cleanup = () => {\n  if (observer) {\n    observer.kill();\n    observer = null;\n  }\n  if (rafId) {\n    cancelAnimationFrame(rafId);\n    rafId = null;\n  }\n\n  velocity = 0;\n\n  const container = containerRef.value;\n  if (container && props.pauseOnHover && stopTicker && startTicker) {\n    container.removeEventListener('mouseenter', stopTicker);\n    container.removeEventListener('mouseleave', startTicker);\n  }\n\n  stopTicker = null;\n  startTicker = null;\n};\n\nonMounted(() => {\n  initializeScroll();\n});\n\nonUnmounted(() => {\n  cleanup();\n});\n\nwatch(\n  [\n    () => props.items,\n    () => props.autoplay,\n    () => props.autoplaySpeed,\n    () => props.autoplayDirection,\n    () => props.pauseOnHover,\n    () => props.isTilted,\n    () => props.tiltDirection,\n    () => props.negativeMargin\n  ],\n  () => {\n    cleanup();\n    setTimeout(() => {\n      initializeScroll();\n    }, 0);\n  }\n);\n</script>\n\n<style scoped>\n.infinite-scroll-wrapper::before,\n.infinite-scroll-wrapper::after {\n  content: '';\n  position: absolute;\n  background: linear-gradient(var(--dir, to bottom), #0b0b0b, transparent);\n  height: 25%;\n  width: 100%;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.infinite-scroll-wrapper::before {\n  top: 0;\n}\n\n.infinite-scroll-wrapper::after {\n  --dir: to top;\n  bottom: 0;\n}\n\n.infinite-scroll-container {\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  -ms-backface-visibility: hidden;\n}\n\n.infinite-scroll-item {\n  --accent-color: #ffffff;\n  border-color: var(--accent-color);\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  -ms-backface-visibility: hidden;\n  transform: translateZ(0);\n}\n</style>\n","path":"InfiniteScroll/InfiniteScroll.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
+{"name":"InfiniteScroll","title":"InfiniteScroll","description":"Infinite scrolling container auto-loads content near viewport end.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div class=\"w-full\">\n    <div\n      class=\"relative flex justify-center items-center w-full overflow-hidden infinite-scroll-wrapper\"\n      ref=\"wrapperRef\"\n      :style=\"{\n        maxHeight: maxHeight,\n        overscrollBehavior: 'none'\n      }\"\n    >\n      <div\n        class=\"flex flex-col px-4 infinite-scroll-container cursor-grab\"\n        ref=\"containerRef\"\n        :style=\"{\n          transform: getTiltTransform(),\n          width: width,\n          overscrollBehavior: 'contain',\n          transformOrigin: 'center center',\n          transformStyle: 'preserve-3d'\n        }\"\n      >\n        <div\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          class=\"box-border relative flex justify-center items-center p-4 border-2 border-white rounded-2xl font-semibold text-xl text-center infinite-scroll-item select-none\"\n          :style=\"{\n            height: itemMinHeight + 'px',\n            marginTop: negativeMargin\n          }\"\n        >\n          <component :is=\"item.content\" v-if=\"typeof item.content === 'object'\" />\n\n          <template v-else>{{ item.content }}</template>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { gsap } from 'gsap';\nimport { Observer } from 'gsap/all';\nimport { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';\n\ngsap.registerPlugin(Observer);\n\ninterface InfiniteScrollItem {\n  content: string | object;\n}\n\ninterface Props {\n  width?: string;\n  maxHeight?: string;\n  negativeMargin?: string;\n  items?: InfiniteScrollItem[];\n  itemMinHeight?: number;\n  isTilted?: boolean;\n  tiltDirection?: 'left' | 'right';\n  autoplay?: boolean;\n  autoplaySpeed?: number;\n  autoplayDirection?: 'down' | 'up';\n  pauseOnHover?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  width: '30rem',\n  maxHeight: '100%',\n  negativeMargin: '-0.5em',\n  items: () => [],\n  itemMinHeight: 150,\n  isTilted: false,\n  tiltDirection: 'left',\n  autoplay: false,\n  autoplaySpeed: 0.5,\n  autoplayDirection: 'down',\n  pauseOnHover: false\n});\n\nconst wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nlet observer: Observer | null = null;\nlet rafId: number | null = null;\nlet velocity = 0;\nlet stopTicker: (() => void) | null = null;\nlet startTicker: (() => void) | null = null;\n\nconst getTiltTransform = (): string => {\n  if (!props.isTilted) return 'none';\n  return props.tiltDirection === 'left'\n    ? 'rotateX(20deg) rotateZ(-20deg) skewX(20deg)'\n    : 'rotateX(20deg) rotateZ(20deg) skewX(-20deg)';\n};\n\nconst initializeScroll = () => {\n  const container = containerRef.value;\n  if (!container) return;\n  if (props.items.length === 0) return;\n\n  const divItems = gsap.utils.toArray<HTMLDivElement>(container.children);\n  if (!divItems.length) return;\n\n  const firstItem = divItems[0];\n  const itemStyle = getComputedStyle(firstItem);\n  const itemHeight = firstItem.offsetHeight;\n  const itemMarginTop = parseFloat(itemStyle.marginTop) || 0;\n  const totalItemHeight = itemHeight + itemMarginTop;\n  const totalHeight = itemHeight * props.items.length + itemMarginTop * (props.items.length - 1);\n\n  const wrapFn = gsap.utils.wrap(-totalHeight, totalHeight);\n\n  divItems.forEach((child, i) => {\n    const y = i * totalItemHeight;\n    gsap.set(child, { y });\n  });\n\n  observer = Observer.create({\n    target: container,\n    type: 'wheel,touch,pointer',\n    preventDefault: true,\n    onPress: ({ target }) => {\n      (target as HTMLElement).style.cursor = 'grabbing';\n    },\n    onRelease: ({ target }) => {\n      (target as HTMLElement).style.cursor = 'grab';\n      if (Math.abs(velocity) > 0.1) {\n        const momentum = velocity * 0.8;\n        divItems.forEach(child => {\n          gsap.to(child, {\n            duration: 1.5,\n            ease: 'power2.out',\n            y: `+=${momentum}`,\n            modifiers: {\n              y: gsap.utils.unitize(wrapFn)\n            }\n          });\n        });\n      }\n      velocity = 0;\n    },\n    onChange: ({ deltaY, isDragging, event }) => {\n      const d = event.type === 'wheel' ? -deltaY : deltaY;\n      const distance = isDragging ? d * 5 : d * 1.5;\n\n      velocity = distance * 0.5;\n\n      divItems.forEach(child => {\n        gsap.to(child, {\n          duration: isDragging ? 0.3 : 1.2,\n          ease: isDragging ? 'power1.out' : 'power3.out',\n          y: `+=${distance}`,\n          modifiers: {\n            y: gsap.utils.unitize(wrapFn)\n          }\n        });\n      });\n    }\n  });\n\n  if (props.autoplay) {\n    const directionFactor = props.autoplayDirection === 'down' ? 1 : -1;\n    const speedPerFrame = props.autoplaySpeed * directionFactor;\n\n    const tick = () => {\n      divItems.forEach(child => {\n        gsap.set(child, {\n          y: `+=${speedPerFrame}`,\n          modifiers: {\n            y: gsap.utils.unitize(wrapFn)\n          }\n        });\n      });\n      rafId = requestAnimationFrame(tick);\n    };\n\n    rafId = requestAnimationFrame(tick);\n\n    if (props.pauseOnHover) {\n      stopTicker = () => rafId && cancelAnimationFrame(rafId);\n      startTicker = () => {\n        rafId = requestAnimationFrame(tick);\n      };\n\n      container.addEventListener('mouseenter', stopTicker);\n      container.addEventListener('mouseleave', startTicker);\n    }\n  }\n};\n\nconst cleanup = () => {\n  if (observer) {\n    observer.kill();\n    observer = null;\n  }\n  if (rafId) {\n    cancelAnimationFrame(rafId);\n    rafId = null;\n  }\n\n  velocity = 0;\n\n  const container = containerRef.value;\n  if (container && props.pauseOnHover && stopTicker && startTicker) {\n    container.removeEventListener('mouseenter', stopTicker);\n    container.removeEventListener('mouseleave', startTicker);\n  }\n\n  stopTicker = null;\n  startTicker = null;\n};\n\nonMounted(() => {\n  initializeScroll();\n});\n\nonUnmounted(() => {\n  cleanup();\n});\n\nwatch(\n  [\n    () => props.items,\n    () => props.autoplay,\n    () => props.autoplaySpeed,\n    () => props.autoplayDirection,\n    () => props.pauseOnHover,\n    () => props.isTilted,\n    () => props.tiltDirection,\n    () => props.negativeMargin\n  ],\n  () => {\n    cleanup();\n    setTimeout(() => {\n      initializeScroll();\n    }, 0);\n  }\n);\n</script>\n\n<style scoped>\n.infinite-scroll-wrapper::before,\n.infinite-scroll-wrapper::after {\n  content: '';\n  position: absolute;\n  background: linear-gradient(var(--dir, to bottom), #0b0b0b, transparent);\n  height: 25%;\n  width: 100%;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.infinite-scroll-wrapper::before {\n  top: 0;\n}\n\n.infinite-scroll-wrapper::after {\n  --dir: to top;\n  bottom: 0;\n}\n\n.infinite-scroll-container {\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  -ms-backface-visibility: hidden;\n}\n\n.infinite-scroll-item {\n  --accent-color: #ffffff;\n  border-color: var(--accent-color);\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  -moz-backface-visibility: hidden;\n  -ms-backface-visibility: hidden;\n  transform: translateZ(0);\n}\n</style>\n","path":"InfiniteScroll/InfiniteScroll.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
diff --git a/public/r/LetterGlitch.json b/public/r/LetterGlitch.json
index 1fd5c8f..c24a7b4 100644
--- a/public/r/LetterGlitch.json
+++ b/public/r/LetterGlitch.json
@@ -1 +1 @@
-{"name":"LetterGlitch","title":"LetterGlitch","description":"Matrix style letter animation.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div class=\"relative overflow-hidden\">\n    <canvas ref=\"canvasRef\" class=\"absolute top-0 left-0 w-full h-full\" />\n\n    <div\n      v-if=\"outerVignette\"\n      class=\"absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0)_60%,_rgba(0,0,0,1)_100%)]\"\n    />\n\n    <div\n      v-if=\"centerVignette\"\n      class=\"absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0.8)_0%,_rgba(0,0,0,0)_60%)]\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\n\ninterface Props {\n  glitchColors?: string[];\n  glitchSpeed?: number;\n  centerVignette?: boolean;\n  outerVignette?: boolean;\n  smooth?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  glitchColors: () => ['#2b4539', '#61dca3', '#61b3dc'],\n  glitchSpeed: 50,\n  centerVignette: false,\n  outerVignette: false,\n  smooth: true\n});\n\nconst canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');\nconst animationRef = ref<number | null>(null);\nconst letters = ref<\n  {\n    char: string;\n    color: string;\n    targetColor: string;\n    colorProgress: number;\n  }[]\n>([]);\nconst grid = ref({ columns: 0, rows: 0 });\nconst context = ref<CanvasRenderingContext2D | null>(null);\nconst lastGlitchTime = ref(Date.now());\n\nconst fontSize = 16;\nconst charWidth = 10;\nconst charHeight = 20;\n\nconst lettersAndSymbols = [\n  'A',\n  'B',\n  'C',\n  'D',\n  'E',\n  'F',\n  'G',\n  'H',\n  'I',\n  'J',\n  'K',\n  'L',\n  'M',\n  'N',\n  'O',\n  'P',\n  'Q',\n  'R',\n  'S',\n  'T',\n  'U',\n  'V',\n  'W',\n  'X',\n  'Y',\n  'Z',\n  '!',\n  '@',\n  '#',\n  '$',\n  '&',\n  '*',\n  '(',\n  ')',\n  '-',\n  '_',\n  '+',\n  '=',\n  '/',\n  '[',\n  ']',\n  '{',\n  '}',\n  ';',\n  ':',\n  '<',\n  '>',\n  ',',\n  '0',\n  '1',\n  '2',\n  '3',\n  '4',\n  '5',\n  '6',\n  '7',\n  '8',\n  '9'\n];\n\nconst getRandomChar = () => {\n  return lettersAndSymbols[Math.floor(Math.random() * lettersAndSymbols.length)];\n};\n\nconst getRandomColor = () => {\n  return props.glitchColors[Math.floor(Math.random() * props.glitchColors.length)];\n};\n\nconst hexToRgb = (hex: string) => {\n  const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n  hex = hex.replace(shorthandRegex, (m, r, g, b) => {\n    return r + r + g + g + b + b;\n  });\n\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n  return result\n    ? {\n        r: parseInt(result[1], 16),\n        g: parseInt(result[2], 16),\n        b: parseInt(result[3], 16)\n      }\n    : null;\n};\n\nconst interpolateColor = (\n  start: { r: number; g: number; b: number },\n  end: { r: number; g: number; b: number },\n  factor: number\n) => {\n  const result = {\n    r: Math.round(start.r + (end.r - start.r) * factor),\n    g: Math.round(start.g + (end.g - start.g) * factor),\n    b: Math.round(start.b + (end.b - start.b) * factor)\n  };\n  return `rgb(${result.r}, ${result.g}, ${result.b})`;\n};\n\nconst calculateGrid = (width: number, height: number) => {\n  const columns = Math.ceil(width / charWidth);\n  const rows = Math.ceil(height / charHeight);\n  return { columns, rows };\n};\n\nconst initializeLetters = (columns: number, rows: number) => {\n  grid.value = { columns, rows };\n  const totalLetters = columns * rows;\n  letters.value = Array.from({ length: totalLetters }, () => ({\n    char: getRandomChar(),\n    color: getRandomColor(),\n    targetColor: getRandomColor(),\n    colorProgress: 1\n  }));\n};\n\nconst resizeCanvas = () => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n  const parent = canvas.parentElement;\n  if (!parent) return;\n\n  const dpr = window.devicePixelRatio || 1;\n\n  const parentWidth = parent.parentElement?.offsetWidth || parent.offsetWidth || window.innerWidth;\n  const parentHeight = parent.parentElement?.offsetHeight || parent.offsetHeight || window.innerHeight;\n\n  const width = Math.max(parentWidth, 300);\n  const height = Math.max(parentHeight, 300);\n\n  canvas.width = width * dpr;\n  canvas.height = height * dpr;\n\n  canvas.style.width = `${width}px`;\n  canvas.style.height = `${height}px`;\n\n  if (context.value) {\n    context.value.setTransform(dpr, 0, 0, dpr, 0, 0);\n  }\n\n  const { columns, rows } = calculateGrid(width, height);\n  initializeLetters(columns, rows);\n  drawLetters();\n};\n\nconst drawLetters = () => {\n  if (!context.value || letters.value.length === 0) return;\n  const ctx = context.value;\n  const { width, height } = canvasRef.value!.getBoundingClientRect();\n  ctx.clearRect(0, 0, width, height);\n  ctx.font = `${fontSize}px monospace`;\n  ctx.textBaseline = 'top';\n\n  letters.value.forEach((letter, index) => {\n    const x = (index % grid.value.columns) * charWidth;\n    const y = Math.floor(index / grid.value.columns) * charHeight;\n    ctx.fillStyle = letter.color;\n    ctx.fillText(letter.char, x, y);\n  });\n};\n\nconst updateLetters = () => {\n  if (!letters.value || letters.value.length === 0) return;\n\n  const updateCount = Math.max(1, Math.floor(letters.value.length * 0.05));\n\n  for (let i = 0; i < updateCount; i++) {\n    const index = Math.floor(Math.random() * letters.value.length);\n    if (!letters.value[index]) continue;\n\n    letters.value[index].char = getRandomChar();\n    letters.value[index].targetColor = getRandomColor();\n\n    if (!props.smooth) {\n      letters.value[index].color = letters.value[index].targetColor;\n      letters.value[index].colorProgress = 1;\n    } else {\n      letters.value[index].colorProgress = 0;\n    }\n  }\n};\n\nconst handleSmoothTransitions = () => {\n  let needsRedraw = false;\n  letters.value.forEach(letter => {\n    if (letter.colorProgress < 1) {\n      letter.colorProgress += 0.05;\n      if (letter.colorProgress > 1) letter.colorProgress = 1;\n\n      const startRgb = hexToRgb(letter.color);\n      const endRgb = hexToRgb(letter.targetColor);\n      if (startRgb && endRgb) {\n        letter.color = interpolateColor(startRgb, endRgb, letter.colorProgress);\n        needsRedraw = true;\n      }\n    }\n  });\n\n  if (needsRedraw) {\n    drawLetters();\n  }\n};\n\nconst animate = () => {\n  const now = Date.now();\n  if (now - lastGlitchTime.value >= props.glitchSpeed) {\n    updateLetters();\n    drawLetters();\n    lastGlitchTime.value = now;\n  }\n\n  if (props.smooth) {\n    handleSmoothTransitions();\n  }\n\n  animationRef.value = requestAnimationFrame(animate);\n};\n\nlet resizeTimeout: number;\n\nconst handleResize = () => {\n  clearTimeout(resizeTimeout);\n  resizeTimeout = setTimeout(() => {\n    if (animationRef.value) {\n      cancelAnimationFrame(animationRef.value);\n    }\n    resizeCanvas();\n    animate();\n  }, 100);\n};\n\nonMounted(() => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n\n  context.value = canvas.getContext('2d');\n  resizeCanvas();\n  animate();\n\n  window.addEventListener('resize', handleResize);\n});\n\nonUnmounted(() => {\n  if (animationRef.value) {\n    cancelAnimationFrame(animationRef.value);\n  }\n  window.removeEventListener('resize', handleResize);\n});\n\nwatch([() => props.glitchSpeed, () => props.smooth], () => {\n  if (animationRef.value) {\n    cancelAnimationFrame(animationRef.value);\n  }\n  animate();\n});\n</script>\n\n<style scoped>\ndiv {\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n}\n\n:deep(canvas) {\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n}\n</style>\n","path":"LetterGlitch/LetterGlitch.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Backgrounds"]}
\ No newline at end of file
+{"name":"LetterGlitch","title":"LetterGlitch","description":"Matrix style letter animation.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div class=\"relative overflow-hidden\">\n    <canvas ref=\"canvasRef\" class=\"top-0 left-0 absolute w-full h-full\" />\n\n    <div\n      v-if=\"outerVignette\"\n      class=\"top-0 left-0 absolute bg-[radial-gradient(circle,rgba(0,0,0,0)_60%,rgba(0,0,0,1)_100%)] w-full h-full pointer-events-none\"\n    />\n\n    <div\n      v-if=\"centerVignette\"\n      class=\"top-0 left-0 absolute bg-[radial-gradient(circle,rgba(0,0,0,0.8)_0%,rgba(0,0,0,0)_60%)] w-full h-full pointer-events-none\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\n\ninterface Props {\n  glitchColors?: string[];\n  glitchSpeed?: number;\n  centerVignette?: boolean;\n  outerVignette?: boolean;\n  smooth?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  glitchColors: () => ['#2b4539', '#61dca3', '#61b3dc'],\n  glitchSpeed: 50,\n  centerVignette: false,\n  outerVignette: false,\n  smooth: true\n});\n\nconst canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');\nconst animationRef = ref<number | null>(null);\nconst letters = ref<\n  {\n    char: string;\n    color: string;\n    targetColor: string;\n    colorProgress: number;\n  }[]\n>([]);\nconst grid = ref({ columns: 0, rows: 0 });\nconst context = ref<CanvasRenderingContext2D | null>(null);\nconst lastGlitchTime = ref(Date.now());\n\nconst fontSize = 16;\nconst charWidth = 10;\nconst charHeight = 20;\n\nconst lettersAndSymbols = [\n  'A',\n  'B',\n  'C',\n  'D',\n  'E',\n  'F',\n  'G',\n  'H',\n  'I',\n  'J',\n  'K',\n  'L',\n  'M',\n  'N',\n  'O',\n  'P',\n  'Q',\n  'R',\n  'S',\n  'T',\n  'U',\n  'V',\n  'W',\n  'X',\n  'Y',\n  'Z',\n  '!',\n  '@',\n  '#',\n  '$',\n  '&',\n  '*',\n  '(',\n  ')',\n  '-',\n  '_',\n  '+',\n  '=',\n  '/',\n  '[',\n  ']',\n  '{',\n  '}',\n  ';',\n  ':',\n  '<',\n  '>',\n  ',',\n  '0',\n  '1',\n  '2',\n  '3',\n  '4',\n  '5',\n  '6',\n  '7',\n  '8',\n  '9'\n];\n\nconst getRandomChar = () => {\n  return lettersAndSymbols[Math.floor(Math.random() * lettersAndSymbols.length)];\n};\n\nconst getRandomColor = () => {\n  return props.glitchColors[Math.floor(Math.random() * props.glitchColors.length)];\n};\n\nconst hexToRgb = (hex: string) => {\n  const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n  hex = hex.replace(shorthandRegex, (m, r, g, b) => {\n    return r + r + g + g + b + b;\n  });\n\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n  return result\n    ? {\n        r: parseInt(result[1], 16),\n        g: parseInt(result[2], 16),\n        b: parseInt(result[3], 16)\n      }\n    : null;\n};\n\nconst interpolateColor = (\n  start: { r: number; g: number; b: number },\n  end: { r: number; g: number; b: number },\n  factor: number\n) => {\n  const result = {\n    r: Math.round(start.r + (end.r - start.r) * factor),\n    g: Math.round(start.g + (end.g - start.g) * factor),\n    b: Math.round(start.b + (end.b - start.b) * factor)\n  };\n  return `rgb(${result.r}, ${result.g}, ${result.b})`;\n};\n\nconst calculateGrid = (width: number, height: number) => {\n  const columns = Math.ceil(width / charWidth);\n  const rows = Math.ceil(height / charHeight);\n  return { columns, rows };\n};\n\nconst initializeLetters = (columns: number, rows: number) => {\n  grid.value = { columns, rows };\n  const totalLetters = columns * rows;\n  letters.value = Array.from({ length: totalLetters }, () => ({\n    char: getRandomChar(),\n    color: getRandomColor(),\n    targetColor: getRandomColor(),\n    colorProgress: 1\n  }));\n};\n\nconst resizeCanvas = () => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n  const parent = canvas.parentElement;\n  if (!parent) return;\n\n  const dpr = window.devicePixelRatio || 1;\n\n  const parentWidth = parent.parentElement?.offsetWidth || parent.offsetWidth || window.innerWidth;\n  const parentHeight = parent.parentElement?.offsetHeight || parent.offsetHeight || window.innerHeight;\n\n  const width = Math.max(parentWidth, 300);\n  const height = Math.max(parentHeight, 300);\n\n  canvas.width = width * dpr;\n  canvas.height = height * dpr;\n\n  canvas.style.width = `${width}px`;\n  canvas.style.height = `${height}px`;\n\n  if (context.value) {\n    context.value.setTransform(dpr, 0, 0, dpr, 0, 0);\n  }\n\n  const { columns, rows } = calculateGrid(width, height);\n  initializeLetters(columns, rows);\n  drawLetters();\n};\n\nconst drawLetters = () => {\n  if (!context.value || letters.value.length === 0) return;\n  const ctx = context.value;\n  const { width, height } = canvasRef.value!.getBoundingClientRect();\n  ctx.clearRect(0, 0, width, height);\n  ctx.font = `${fontSize}px monospace`;\n  ctx.textBaseline = 'top';\n\n  letters.value.forEach((letter, index) => {\n    const x = (index % grid.value.columns) * charWidth;\n    const y = Math.floor(index / grid.value.columns) * charHeight;\n    ctx.fillStyle = letter.color;\n    ctx.fillText(letter.char, x, y);\n  });\n};\n\nconst updateLetters = () => {\n  if (!letters.value || letters.value.length === 0) return;\n\n  const updateCount = Math.max(1, Math.floor(letters.value.length * 0.05));\n\n  for (let i = 0; i < updateCount; i++) {\n    const index = Math.floor(Math.random() * letters.value.length);\n    if (!letters.value[index]) continue;\n\n    letters.value[index].char = getRandomChar();\n    letters.value[index].targetColor = getRandomColor();\n\n    if (!props.smooth) {\n      letters.value[index].color = letters.value[index].targetColor;\n      letters.value[index].colorProgress = 1;\n    } else {\n      letters.value[index].colorProgress = 0;\n    }\n  }\n};\n\nconst handleSmoothTransitions = () => {\n  let needsRedraw = false;\n  letters.value.forEach(letter => {\n    if (letter.colorProgress < 1) {\n      letter.colorProgress += 0.05;\n      if (letter.colorProgress > 1) letter.colorProgress = 1;\n\n      const startRgb = hexToRgb(letter.color);\n      const endRgb = hexToRgb(letter.targetColor);\n      if (startRgb && endRgb) {\n        letter.color = interpolateColor(startRgb, endRgb, letter.colorProgress);\n        needsRedraw = true;\n      }\n    }\n  });\n\n  if (needsRedraw) {\n    drawLetters();\n  }\n};\n\nconst animate = () => {\n  const now = Date.now();\n  if (now - lastGlitchTime.value >= props.glitchSpeed) {\n    updateLetters();\n    drawLetters();\n    lastGlitchTime.value = now;\n  }\n\n  if (props.smooth) {\n    handleSmoothTransitions();\n  }\n\n  animationRef.value = requestAnimationFrame(animate);\n};\n\nlet resizeTimeout: ReturnType<typeof setTimeout>;\n\nconst handleResize = () => {\n  clearTimeout(resizeTimeout);\n  resizeTimeout = setTimeout(() => {\n    if (animationRef.value) {\n      cancelAnimationFrame(animationRef.value);\n    }\n    resizeCanvas();\n    animate();\n  }, 100);\n};\n\nonMounted(() => {\n  const canvas = canvasRef.value;\n  if (!canvas) return;\n\n  context.value = canvas.getContext('2d');\n  resizeCanvas();\n  animate();\n\n  window.addEventListener('resize', handleResize);\n});\n\nonUnmounted(() => {\n  if (animationRef.value) {\n    cancelAnimationFrame(animationRef.value);\n  }\n  window.removeEventListener('resize', handleResize);\n});\n\nwatch([() => props.glitchSpeed, () => props.smooth], () => {\n  if (animationRef.value) {\n    cancelAnimationFrame(animationRef.value);\n  }\n  animate();\n});\n</script>\n\n<style scoped>\ndiv {\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n}\n\n:deep(canvas) {\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n}\n</style>\n","path":"LetterGlitch/LetterGlitch.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Backgrounds"]}
\ No newline at end of file
diff --git a/public/r/MagicBento.json b/public/r/MagicBento.json
index 8e1d2b6..ff98ca5 100644
--- a/public/r/MagicBento.json
+++ b/public/r/MagicBento.json
@@ -1 +1 @@
-{"name":"MagicBento","title":"MagicBento","description":"Interactive bento grid tiles expand + animate with various options.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { gsap } from 'gsap';\nimport { computed, defineComponent, nextTick, onMounted, onUnmounted, ref, watch, type PropType } from 'vue';\n\ninterface BentoCardProps {\n  color?: string;\n  title?: string;\n  description?: string;\n  label?: string;\n  textAutoHide?: boolean;\n  disableAnimations?: boolean;\n}\n\ninterface BentoProps {\n  textAutoHide?: boolean;\n  enableStars?: boolean;\n  enableSpotlight?: boolean;\n  enableBorderGlow?: boolean;\n  disableAnimations?: boolean;\n  spotlightRadius?: number;\n  particleCount?: number;\n  enableTilt?: boolean;\n  glowColor?: string;\n  clickEffect?: boolean;\n  enableMagnetism?: boolean;\n}\n\nconst DEFAULT_PARTICLE_COUNT = 12;\nconst DEFAULT_SPOTLIGHT_RADIUS = 300;\nconst DEFAULT_GLOW_COLOR = '0, 200, 83';\nconst MOBILE_BREAKPOINT = 768;\n\nconst cardData: BentoCardProps[] = [\n  {\n    color: '#000C00',\n    title: 'Analytics',\n    description: 'Track user behavior',\n    label: 'Insights'\n  },\n  {\n    color: '#000C00',\n    title: 'Dashboard',\n    description: 'Centralized data view',\n    label: 'Overview'\n  },\n  {\n    color: '#000C00',\n    title: 'Collaboration',\n    description: 'Work together seamlessly',\n    label: 'Teamwork'\n  },\n  {\n    color: '#000C00',\n    title: 'Automation',\n    description: 'Streamline workflows',\n    label: 'Efficiency'\n  },\n  {\n    color: '#000C00',\n    title: 'Integration',\n    description: 'Connect favorite tools',\n    label: 'Connectivity'\n  },\n  {\n    color: '#000C00',\n    title: 'Security',\n    description: 'Enterprise-grade protection',\n    label: 'Protection'\n  }\n];\n\nconst createParticleElement = (x: number, y: number, color: string = DEFAULT_GLOW_COLOR): HTMLDivElement => {\n  const el = document.createElement('div');\n  el.className = 'particle';\n  el.style.cssText = `\n    position: absolute;\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background: rgba(${color}, 1);\n    box-shadow: 0 0 6px rgba(${color}, 0.6);\n    pointer-events: none;\n    z-index: 100;\n    left: ${x}px;\n    top: ${y}px;\n  `;\n  return el;\n};\n\nconst calculateSpotlightValues = (radius: number) => ({\n  proximity: radius * 0.5,\n  fadeDistance: radius * 0.75\n});\n\nconst updateCardGlowProperties = (card: HTMLElement, mouseX: number, mouseY: number, glow: number, radius: number) => {\n  const rect = card.getBoundingClientRect();\n  const relativeX = ((mouseX - rect.left) / rect.width) * 100;\n  const relativeY = ((mouseY - rect.top) / rect.height) * 100;\n\n  card.style.setProperty('--glow-x', `${relativeX}%`);\n  card.style.setProperty('--glow-y', `${relativeY}%`);\n  card.style.setProperty('--glow-intensity', glow.toString());\n  card.style.setProperty('--glow-radius', `${radius}px`);\n};\n\nconst ParticleCard = defineComponent({\n  name: 'ParticleCard',\n  props: {\n    disableAnimations: { type: Boolean, default: false },\n    particleCount: { type: Number, default: DEFAULT_PARTICLE_COUNT },\n    glowColor: { type: String, default: DEFAULT_GLOW_COLOR },\n    enableTilt: { type: Boolean, default: true },\n    clickEffect: { type: Boolean, default: false },\n    enableMagnetism: { type: Boolean, default: false }\n  },\n  setup(props) {\n    const cardRef = ref<HTMLDivElement | null>(null);\n    const particlesRef = ref<HTMLDivElement[]>([]);\n    const timeoutsRef = ref<number[]>([]);\n    const isHoveredRef = ref(false);\n    const memoizedParticles = ref<HTMLDivElement[]>([]);\n    const particlesInitialized = ref(false);\n    const magnetismAnimationRef = ref<gsap.core.Tween | null>(null);\n\n    const initializeParticles = () => {\n      if (particlesInitialized.value || !cardRef.value) return;\n\n      const { width, height } = cardRef.value.getBoundingClientRect();\n      memoizedParticles.value = Array.from({ length: props.particleCount }, () =>\n        createParticleElement(Math.random() * width, Math.random() * height, props.glowColor)\n      );\n      particlesInitialized.value = true;\n    };\n\n    const clearAllParticles = () => {\n      timeoutsRef.value.forEach(clearTimeout);\n      timeoutsRef.value = [];\n      magnetismAnimationRef.value?.kill();\n\n      particlesRef.value.forEach(particle => {\n        gsap.to(particle, {\n          scale: 0,\n          opacity: 0,\n          duration: 0.3,\n          ease: 'back.in(1.7)',\n          onComplete: () => {\n            particle.parentNode?.removeChild(particle);\n          }\n        });\n      });\n      particlesRef.value = [];\n    };\n\n    const animateParticles = () => {\n      if (!cardRef.value || !isHoveredRef.value) return;\n\n      if (!particlesInitialized.value) {\n        initializeParticles();\n      }\n\n      memoizedParticles.value.forEach((particle, index) => {\n        const timeoutId = setTimeout(() => {\n          if (!isHoveredRef.value || !cardRef.value) return;\n\n          const clone = particle.cloneNode(true) as HTMLDivElement;\n          cardRef.value.appendChild(clone);\n          particlesRef.value.push(clone);\n\n          gsap.fromTo(clone, { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.3, ease: 'back.out(1.7)' });\n\n          gsap.to(clone, {\n            x: (Math.random() - 0.5) * 100,\n            y: (Math.random() - 0.5) * 100,\n            rotation: Math.random() * 360,\n            duration: 2 + Math.random() * 2,\n            ease: 'none',\n            repeat: -1,\n            yoyo: true\n          });\n\n          gsap.to(clone, {\n            opacity: 0.3,\n            duration: 1.5,\n            ease: 'power2.inOut',\n            repeat: -1,\n            yoyo: true\n          });\n        }, index * 100);\n\n        timeoutsRef.value.push(timeoutId);\n      });\n    };\n\n    let cleanupEventListeners: (() => void) | null = null;\n    const setupEventListeners = () => {\n      if (props.disableAnimations || !cardRef.value) return;\n\n      const element = cardRef.value;\n\n      const handleMouseEnter = () => {\n        isHoveredRef.value = true;\n        animateParticles();\n\n        gsap.to(element, { y: -2, duration: 0.3, ease: 'power2.out' });\n\n        if (props.enableTilt) {\n          gsap.to(element, {\n            rotateX: 5,\n            rotateY: 5,\n            duration: 0.3,\n            ease: 'power2.out',\n            transformPerspective: 1000\n          });\n        }\n      };\n\n      const handleMouseLeave = () => {\n        isHoveredRef.value = false;\n        clearAllParticles();\n\n        if (props.enableTilt) {\n          gsap.to(element, {\n            rotateX: 0,\n            rotateY: 0,\n            y: 0,\n            duration: 0.3,\n            ease: 'power2.out'\n          });\n        }\n\n        if (props.enableMagnetism) {\n          gsap.to(element, {\n            x: 0,\n            y: 0,\n            duration: 0.3,\n            ease: 'power2.out'\n          });\n        }\n      };\n\n      const handleMouseMove = (e: MouseEvent) => {\n        if (!props.enableTilt && !props.enableMagnetism) return;\n\n        const rect = element.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        const centerX = rect.width / 2;\n        const centerY = rect.height / 2;\n\n        if (props.enableTilt) {\n          const rotateX = ((y - centerY) / centerY) * -10;\n          const rotateY = ((x - centerX) / centerX) * 10;\n\n          gsap.to(element, {\n            rotateX,\n            rotateY,\n            duration: 0.1,\n            ease: 'power2.out',\n            transformPerspective: 1000\n          });\n        }\n\n        if (props.enableMagnetism) {\n          const magnetX = (x - centerX) * 0.05;\n          const magnetY = (y - centerY) * 0.05;\n\n          magnetismAnimationRef.value = gsap.to(element, {\n            x: magnetX,\n            y: magnetY,\n            duration: 0.3,\n            ease: 'power2.out'\n          });\n        }\n      };\n\n      const handleClick = (e: MouseEvent) => {\n        if (!props.clickEffect) return;\n\n        const rect = element.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n\n        const maxDistance = Math.max(\n          Math.hypot(x, y),\n          Math.hypot(x - rect.width, y),\n          Math.hypot(x, y - rect.height),\n          Math.hypot(x - rect.width, y - rect.height)\n        );\n\n        const ripple = document.createElement('div');\n        ripple.style.cssText = `\n          position: absolute;\n          width: ${maxDistance * 2}px;\n          height: ${maxDistance * 2}px;\n          border-radius: 50%;\n          background: radial-gradient(circle, rgba(${props.glowColor}, 0.4) 0%, rgba(${props.glowColor}, 0.2) 30%, transparent 70%);\n          left: ${x - maxDistance}px;\n          top: ${y - maxDistance}px;\n          pointer-events: none;\n          z-index: 1000;\n        `;\n\n        element.appendChild(ripple);\n\n        gsap.fromTo(\n          ripple,\n          {\n            scale: 0,\n            opacity: 1\n          },\n          {\n            scale: 1,\n            opacity: 0,\n            duration: 0.8,\n            ease: 'power2.out',\n            onComplete: () => ripple.remove()\n          }\n        );\n      };\n\n      element.addEventListener('mouseenter', handleMouseEnter);\n      element.addEventListener('mouseleave', handleMouseLeave);\n      element.addEventListener('mousemove', handleMouseMove);\n      element.addEventListener('click', handleClick);\n\n      cleanupEventListeners = () => {\n        isHoveredRef.value = false;\n        element.removeEventListener('mouseenter', handleMouseEnter);\n        element.removeEventListener('mouseleave', handleMouseLeave);\n        element.removeEventListener('mousemove', handleMouseMove);\n        element.removeEventListener('click', handleClick);\n        clearAllParticles();\n      };\n    };\n\n    onMounted(() => {\n      nextTick(() => {\n        setupEventListeners();\n      });\n    });\n\n    onUnmounted(() => {\n      cleanupEventListeners?.();\n    });\n\n    watch(\n      () => [\n        animateParticles,\n        clearAllParticles,\n        props.disableAnimations,\n        props.enableTilt,\n        props.enableMagnetism,\n        props.clickEffect,\n        props.glowColor\n      ],\n      () => {\n        cleanupEventListeners?.();\n        setupEventListeners();\n      },\n      { deep: true }\n    );\n\n    return {\n      cardRef\n    };\n  },\n  template: `\n    <div\n      ref=\"cardRef\"\n      class=\"relative overflow-hidden\"\n      :style=\"{ position: 'relative', overflow: 'hidden' }\"\n    >\n      <slot />\n    </div>\n  `\n});\n\nconst GlobalSpotlight = defineComponent({\n  name: 'GlobalSpotlight',\n  props: {\n    gridRef: { type: [Object, null] as PropType<HTMLDivElement | null>, required: true },\n    disableAnimations: { type: Boolean, default: false },\n    enabled: { type: Boolean, default: true },\n    spotlightRadius: { type: Number, default: DEFAULT_SPOTLIGHT_RADIUS },\n    glowColor: { type: String, default: DEFAULT_GLOW_COLOR }\n  },\n  setup(props) {\n    const spotlightRef = ref<HTMLDivElement | null>(null);\n    const isInsideSection = ref(false);\n\n    let cleanupEventListeners: (() => void) | null = null;\n    const setupEventListeners = () => {\n      if (props.disableAnimations || !props.gridRef || !props.enabled) return;\n\n      const spotlight = document.createElement('div');\n      spotlight.className = 'global-spotlight';\n      spotlight.style.cssText = `\n        position: fixed;\n        width: 800px;\n        height: 800px;\n        border-radius: 50%;\n        pointer-events: none;\n        background: radial-gradient(circle,\n          rgba(${props.glowColor}, 0.15) 0%,\n          rgba(${props.glowColor}, 0.08) 15%,\n          rgba(${props.glowColor}, 0.04) 25%,\n          rgba(${props.glowColor}, 0.02) 40%,\n          rgba(${props.glowColor}, 0.01) 65%,\n          transparent 70%\n        );\n        z-index: 200;\n        opacity: 0;\n        transform: translate(-50%, -50%);\n        mix-blend-mode: screen;\n      `;\n      document.body.appendChild(spotlight);\n      spotlightRef.value = spotlight;\n\n      const handleMouseMove = (e: MouseEvent) => {\n        if (!spotlightRef.value || !props.gridRef) return;\n\n        const section = props.gridRef.closest('.bento-section');\n        const rect = section?.getBoundingClientRect();\n        const mouseInside =\n          rect &&\n          e.clientX >= rect.left &&\n          e.clientX <= rect.right &&\n          e.clientY >= rect.top &&\n          e.clientY <= rect.bottom;\n\n        isInsideSection.value = mouseInside || false;\n        const cards = props.gridRef.querySelectorAll('.card') as NodeListOf<HTMLDivElement>;\n\n        if (!mouseInside) {\n          gsap.to(spotlightRef.value, {\n            opacity: 0,\n            duration: 0.3,\n            ease: 'power2.out'\n          });\n          cards.forEach(card => {\n            card.style.setProperty('--glow-intensity', '0');\n          });\n          return;\n        }\n\n        const { proximity, fadeDistance } = calculateSpotlightValues(props.spotlightRadius);\n        let minDistance = Infinity;\n\n        cards.forEach(card => {\n          const cardRect = card.getBoundingClientRect();\n          const centerX = cardRect.left + cardRect.width / 2;\n          const centerY = cardRect.top + cardRect.height / 2;\n          const distance =\n            Math.hypot(e.clientX - centerX, e.clientY - centerY) - Math.max(cardRect.width, cardRect.height) / 2;\n          const effectiveDistance = Math.max(0, distance);\n\n          minDistance = Math.min(minDistance, effectiveDistance);\n\n          let glowIntensity = 0;\n          if (effectiveDistance <= proximity) {\n            glowIntensity = 1;\n          } else if (effectiveDistance <= fadeDistance) {\n            glowIntensity = (fadeDistance - effectiveDistance) / (fadeDistance - proximity);\n          }\n\n          updateCardGlowProperties(card, e.clientX, e.clientY, glowIntensity, props.spotlightRadius);\n        });\n\n        gsap.to(spotlightRef.value, {\n          left: e.clientX,\n          top: e.clientY,\n          duration: 0.1,\n          ease: 'power2.out'\n        });\n\n        const targetOpacity =\n          minDistance <= proximity\n            ? 0.8\n            : minDistance <= fadeDistance\n              ? ((fadeDistance - minDistance) / (fadeDistance - proximity)) * 0.8\n              : 0;\n\n        gsap.to(spotlightRef.value, {\n          opacity: targetOpacity,\n          duration: targetOpacity > 0 ? 0.2 : 0.5,\n          ease: 'power2.out'\n        });\n      };\n\n      const handleMouseLeave = () => {\n        isInsideSection.value = false;\n        (props.gridRef?.querySelectorAll('.card') as NodeListOf<HTMLDivElement>).forEach(card => {\n          card.style.setProperty('--glow-intensity', '0');\n        });\n        if (spotlightRef.value) {\n          gsap.to(spotlightRef.value, {\n            opacity: 0,\n            duration: 0.3,\n            ease: 'power2.out'\n          });\n        }\n      };\n\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseleave', handleMouseLeave);\n\n      cleanupEventListeners = () => {\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseleave', handleMouseLeave);\n        spotlightRef.value?.parentNode?.removeChild(spotlightRef.value);\n      };\n    };\n\n    onMounted(() => {\n      nextTick(() => {\n        setupEventListeners();\n      });\n    });\n\n    onUnmounted(() => {\n      cleanupEventListeners?.();\n      cleanupEventListeners = null;\n    });\n\n    watch(\n      () => props,\n      () => {\n        if (props.gridRef) {\n          cleanupEventListeners?.();\n          setupEventListeners();\n        }\n      },\n      { deep: true }\n    );\n  },\n  template: `<div></div>`\n});\n\nconst BentoCardGrid = defineComponent({\n  name: 'BentoCardGrid',\n  props: {\n    gridRef: {\n      type: Function as PropType<(el: HTMLDivElement | null) => void>,\n      required: true\n    }\n  },\n  template: `\n    <div\n      class=\"relative gap-2 grid p-3 select-none bento-section\"\n      :style=\"{ fontSize: 'clamp(1rem, 0.9rem + 0.5vw, 1.5rem)' }\"\n      :ref=\"gridRef\"\n    >\n      <slot />\n    </div>\n  `\n});\n\nconst useMobileDetection = () => {\n  const isMobile = ref(false);\n\n  const checkMobile = () => {\n    isMobile.value = window.innerWidth <= MOBILE_BREAKPOINT;\n  };\n\n  onMounted(() => {\n    checkMobile();\n    window.addEventListener('resize', checkMobile);\n\n    onUnmounted(() => {\n      window.removeEventListener('resize', checkMobile);\n    });\n  });\n\n  return isMobile;\n};\n\nconst props = withDefaults(defineProps<BentoProps>(), {\n  textAutoHide: true,\n  enableStars: true,\n  enableSpotlight: true,\n  enableBorderGlow: true,\n  disableAnimations: false,\n  spotlightRadius: DEFAULT_SPOTLIGHT_RADIUS,\n  particleCount: DEFAULT_PARTICLE_COUNT,\n  enableTilt: false,\n  glowColor: DEFAULT_GLOW_COLOR,\n  clickEffect: true,\n  enableMagnetism: true\n});\n\nconst gridRef = ref<HTMLDivElement | null>(null);\nconst isMobile = useMobileDetection();\nconst cardElements = ref<HTMLDivElement[]>([]);\n\nconst shouldDisableAnimations = computed(() => props.disableAnimations || isMobile.value);\nconst baseClassName = computed(() => {\n  return `card flex flex-col justify-between relative aspect-[4/3] min-h-[200px] w-full max-w-full p-5 rounded-[20px] border border-solid font-light overflow-hidden transition-[box-shadow] duration-300 ease-in-out hover:shadow-[0_8px_25px_rgba(0,0,0,0.15)] ${\n    props.enableBorderGlow ? 'card--border-glow' : ''\n  }`;\n});\nconst getCardStyle = (card: BentoCardProps) => ({\n  backgroundColor: card.color || 'var(--background-dark)',\n  borderColor: 'var(--border-color)',\n  color: 'var(--white)',\n  '--glow-x': '50%',\n  '--glow-y': '50%',\n  '--glow-intensity': '0',\n  '--glow-radius': '200px'\n});\n\nconst setupCardRef = (el: HTMLDivElement | null, index: number) => {\n  if (!el) return;\n  cardElements.value[index] = el;\n\n  const handleMouseEnter = () => {\n    if (shouldDisableAnimations.value) return;\n    gsap.to(el, { y: -2, duration: 0.3, ease: 'power2.out' });\n  };\n\n  const handleMouseMove = (e: MouseEvent) => {\n    if (shouldDisableAnimations.value) return;\n\n    const rect = el.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n    const centerX = rect.width / 2;\n    const centerY = rect.height / 2;\n\n    if (props.enableTilt) {\n      const rotateX = ((y - centerY) / centerY) * -10;\n      const rotateY = ((x - centerX) / centerX) * 10;\n\n      gsap.to(el, {\n        rotateX,\n        rotateY,\n        duration: 0.1,\n        ease: 'power2.out',\n        transformPerspective: 1000\n      });\n    }\n\n    if (props.enableMagnetism) {\n      const magnetX = (x - centerX) * 0.05;\n      const magnetY = (y - centerY) * 0.05;\n\n      gsap.to(el, {\n        x: magnetX,\n        y: magnetY,\n        duration: 0.3,\n        ease: 'power2.out'\n      });\n    }\n  };\n\n  const handleMouseLeave = () => {\n    if (shouldDisableAnimations.value) return;\n\n    if (props.enableTilt) {\n      gsap.to(el, {\n        rotateX: 0,\n        rotateY: 0,\n        duration: 0.3,\n        ease: 'power2.out'\n      });\n    }\n\n    if (props.enableMagnetism) {\n      gsap.to(el, {\n        x: 0,\n        y: 0,\n        duration: 0.3,\n        ease: 'power2.out'\n      });\n    } else {\n      gsap.to(el, { y: 0, duration: 0.3, ease: 'power2.out' });\n    }\n  };\n\n  const handleClick = (e: MouseEvent) => {\n    if (!props.clickEffect || shouldDisableAnimations.value) return;\n\n    const rect = el.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n\n    const maxDistance = Math.max(\n      Math.hypot(x, y),\n      Math.hypot(x - rect.width, y),\n      Math.hypot(x, y - rect.height),\n      Math.hypot(x - rect.width, y - rect.height)\n    );\n\n    const ripple = document.createElement('div');\n    ripple.style.cssText = `\n          position: absolute;\n          width: ${maxDistance * 2}px;\n          height: ${maxDistance * 2}px;\n          border-radius: 50%;\n          background: radial-gradient(circle, rgba(${props.glowColor}, 0.4) 0%, rgba(${props.glowColor}, 0.2) 30%, transparent 70%);\n          left: ${x - maxDistance}px;\n          top: ${y - maxDistance}px;\n          pointer-events: none;\n          z-index: 1000;\n        `;\n\n    el.appendChild(ripple);\n\n    gsap.fromTo(\n      ripple,\n      {\n        scale: 0,\n        opacity: 1\n      },\n      {\n        scale: 1,\n        opacity: 0,\n        duration: 0.8,\n        ease: 'power2.out',\n        onComplete: () => ripple.remove()\n      }\n    );\n  };\n\n  el.addEventListener('mouseenter', handleMouseEnter);\n  el.addEventListener('mousemove', handleMouseMove);\n  el.addEventListener('mouseleave', handleMouseLeave);\n  el.addEventListener('click', handleClick);\n};\n</script>\n\n<template>\n  <GlobalSpotlight\n    v-if=\"enableSpotlight\"\n    :grid-ref=\"gridRef\"\n    :disable-animations=\"shouldDisableAnimations\"\n    :enabled=\"enableSpotlight\"\n    :spotlight-radius=\"spotlightRadius\"\n    :glow-color=\"glowColor\"\n  />\n\n  <BentoCardGrid\n    :grid-ref=\"\n      (el: HTMLDivElement | null) => {\n        gridRef = el;\n      }\n    \"\n  >\n    <div class=\"gap-2 grid card-responsive\">\n      <template v-for=\"(card, index) in cardData\" :key=\"index\">\n        <ParticleCard\n          v-if=\"enableStars\"\n          :class=\"baseClassName\"\n          :style=\"getCardStyle(card)\"\n          :disable-animations=\"shouldDisableAnimations\"\n          :particle-count=\"particleCount\"\n          :glow-color=\"glowColor\"\n          :enable-tilt=\"enableTilt\"\n          :click-effect=\"clickEffect\"\n          :enable-magnetism=\"enableMagnetism\"\n        >\n          <div class=\"relative flex justify-between gap-3 text-white card__header\">\n            <span class=\"text-base card__label\">{{ card.label }}</span>\n          </div>\n          <div class=\"relative flex flex-col text-white card__content\">\n            <h3 :class=\"`card__title font-normal text-base m-0 mb-1 ${textAutoHide ? 'text-clamp-1' : ''}`\">\n              {{ card.title }}\n            </h3>\n            <p :class=\"`card__description text-xs leading-5 opacity-90 ${textAutoHide ? 'text-clamp-2' : ''}`\">\n              {{ card.description }}\n            </p>\n          </div>\n        </ParticleCard>\n\n        <div\n          v-else\n          :class=\"baseClassName\"\n          :style=\"getCardStyle(card)\"\n          :ref=\"el => setupCardRef(el as HTMLDivElement, index)\"\n        >\n          <div class=\"relative flex justify-between gap-3 text-white card__header\">\n            <span class=\"text-base card__label\">{{ card.label }}</span>\n          </div>\n          <div class=\"relative flex flex-col text-white card__content\">\n            <h3 :class=\"`card__title font-normal text-base m-0 mb-1 ${textAutoHide ? 'text-clamp-1' : ''}`\">\n              {{ card.title }}\n            </h3>\n            <p :class=\"`card__description text-xs leading-5 opacity-90 ${textAutoHide ? 'text-clamp-2' : ''}`\">\n              {{ card.description }}\n            </p>\n          </div>\n        </div>\n      </template>\n    </div>\n  </BentoCardGrid>\n</template>\n\n<style>\n.bento-section {\n  --glow-x: 50%;\n  --glow-y: 50%;\n  --glow-intensity: 0;\n  --glow-radius: 200px;\n  --glow-color: v-bind(glowColor);\n  --border-color: #333;\n  --background-dark: #060010;\n  --white: hsl(0, 0%, 100%);\n}\n\n.card-responsive {\n  grid-template-columns: 1fr;\n  width: 90%;\n  margin: 0 auto;\n  padding: 0.5rem;\n}\n\n@media (min-width: 600px) {\n  .card-responsive {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (min-width: 1024px) {\n  .card-responsive {\n    grid-template-columns: repeat(4, 1fr);\n  }\n\n  .card-responsive .card:nth-child(3) {\n    grid-column: span 2;\n    grid-row: span 2;\n  }\n\n  .card-responsive .card:nth-child(4) {\n    grid-column: 1 / span 2;\n    grid-row: 2 / span 2;\n  }\n\n  .card-responsive .card:nth-child(6) {\n    grid-column: 4;\n    grid-row: 3;\n  }\n}\n\n.card--border-glow::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  padding: 6px;\n  background: radial-gradient(\n    var(--glow-radius) circle at var(--glow-x) var(--glow-y),\n    rgba(v-bind(glowColor), calc(var(--glow-intensity) * 0.8)) 0%,\n    rgba(v-bind(glowColor), calc(var(--glow-intensity) * 0.4)) 30%,\n    transparent 60%\n  );\n  border-radius: inherit;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  mask-composite: subtract;\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  pointer-events: none;\n  transition: opacity 0.3s ease;\n  z-index: 1;\n}\n\n.card--border-glow:hover::after {\n  opacity: 1;\n}\n\n.card--border-glow:hover {\n  box-shadow:\n    0 4px 20px rgba(46, 24, 78, 0.4),\n    0 0 30px rgba(v-bind(glowColor), 0.2);\n}\n\n.particle::before {\n  content: '';\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  right: -2px;\n  bottom: -2px;\n  background: rgba(v-bind(glowColor), 0.2);\n  border-radius: 50%;\n  z-index: -1;\n}\n\n.particle-container:hover {\n  box-shadow:\n    0 4px 20px rgba(46, 24, 78, 0.2),\n    0 0 30px rgba(v-bind(glowColor), 0.2);\n}\n\n.text-clamp-1 {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.text-clamp-2 {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n@media (max-width: 599px) {\n  .card-responsive {\n    grid-template-columns: 1fr;\n    width: 90%;\n    margin: 0 auto;\n    padding: 0.5rem;\n  }\n\n  .card-responsive .card {\n    width: 100%;\n    min-height: 180px;\n  }\n}\n</style>\n","path":"MagicBento/MagicBento.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
+{"name":"MagicBento","title":"MagicBento","description":"Interactive bento grid tiles expand + animate with various options.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { gsap } from 'gsap';\nimport { computed, defineComponent, nextTick, onMounted, onUnmounted, ref, watch, type PropType } from 'vue';\n\ninterface BentoCardProps {\n  color?: string;\n  title?: string;\n  description?: string;\n  label?: string;\n  textAutoHide?: boolean;\n  disableAnimations?: boolean;\n}\n\ninterface BentoProps {\n  textAutoHide?: boolean;\n  enableStars?: boolean;\n  enableSpotlight?: boolean;\n  enableBorderGlow?: boolean;\n  disableAnimations?: boolean;\n  spotlightRadius?: number;\n  particleCount?: number;\n  enableTilt?: boolean;\n  glowColor?: string;\n  clickEffect?: boolean;\n  enableMagnetism?: boolean;\n}\n\nconst DEFAULT_PARTICLE_COUNT = 12;\nconst DEFAULT_SPOTLIGHT_RADIUS = 300;\nconst DEFAULT_GLOW_COLOR = '0, 200, 83';\nconst MOBILE_BREAKPOINT = 768;\n\nconst cardData: BentoCardProps[] = [\n  {\n    color: '#000C00',\n    title: 'Analytics',\n    description: 'Track user behavior',\n    label: 'Insights'\n  },\n  {\n    color: '#000C00',\n    title: 'Dashboard',\n    description: 'Centralized data view',\n    label: 'Overview'\n  },\n  {\n    color: '#000C00',\n    title: 'Collaboration',\n    description: 'Work together seamlessly',\n    label: 'Teamwork'\n  },\n  {\n    color: '#000C00',\n    title: 'Automation',\n    description: 'Streamline workflows',\n    label: 'Efficiency'\n  },\n  {\n    color: '#000C00',\n    title: 'Integration',\n    description: 'Connect favorite tools',\n    label: 'Connectivity'\n  },\n  {\n    color: '#000C00',\n    title: 'Security',\n    description: 'Enterprise-grade protection',\n    label: 'Protection'\n  }\n];\n\nconst createParticleElement = (x: number, y: number, color: string = DEFAULT_GLOW_COLOR): HTMLDivElement => {\n  const el = document.createElement('div');\n  el.className = 'particle';\n  el.style.cssText = `\n    position: absolute;\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background: rgba(${color}, 1);\n    box-shadow: 0 0 6px rgba(${color}, 0.6);\n    pointer-events: none;\n    z-index: 100;\n    left: ${x}px;\n    top: ${y}px;\n  `;\n  return el;\n};\n\nconst calculateSpotlightValues = (radius: number) => ({\n  proximity: radius * 0.5,\n  fadeDistance: radius * 0.75\n});\n\nconst updateCardGlowProperties = (card: HTMLElement, mouseX: number, mouseY: number, glow: number, radius: number) => {\n  const rect = card.getBoundingClientRect();\n  const relativeX = ((mouseX - rect.left) / rect.width) * 100;\n  const relativeY = ((mouseY - rect.top) / rect.height) * 100;\n\n  card.style.setProperty('--glow-x', `${relativeX}%`);\n  card.style.setProperty('--glow-y', `${relativeY}%`);\n  card.style.setProperty('--glow-intensity', glow.toString());\n  card.style.setProperty('--glow-radius', `${radius}px`);\n};\n\nconst ParticleCard = defineComponent({\n  name: 'ParticleCard',\n  props: {\n    disableAnimations: { type: Boolean, default: false },\n    particleCount: { type: Number, default: DEFAULT_PARTICLE_COUNT },\n    glowColor: { type: String, default: DEFAULT_GLOW_COLOR },\n    enableTilt: { type: Boolean, default: true },\n    clickEffect: { type: Boolean, default: false },\n    enableMagnetism: { type: Boolean, default: false }\n  },\n  setup(props) {\n    const cardRef = ref<HTMLDivElement | null>(null);\n    const particlesRef = ref<HTMLDivElement[]>([]);\n    const timeoutsRef = ref<ReturnType<typeof setTimeout>[]>([]);\n    const isHoveredRef = ref(false);\n    const memoizedParticles = ref<HTMLDivElement[]>([]);\n    const particlesInitialized = ref(false);\n    const magnetismAnimationRef = ref<gsap.core.Tween | null>(null);\n\n    const initializeParticles = () => {\n      if (particlesInitialized.value || !cardRef.value) return;\n\n      const { width, height } = cardRef.value.getBoundingClientRect();\n      memoizedParticles.value = Array.from({ length: props.particleCount }, () =>\n        createParticleElement(Math.random() * width, Math.random() * height, props.glowColor)\n      );\n      particlesInitialized.value = true;\n    };\n\n    const clearAllParticles = () => {\n      timeoutsRef.value.forEach(clearTimeout);\n      timeoutsRef.value = [];\n      magnetismAnimationRef.value?.kill();\n\n      particlesRef.value.forEach(particle => {\n        gsap.to(particle, {\n          scale: 0,\n          opacity: 0,\n          duration: 0.3,\n          ease: 'back.in(1.7)',\n          onComplete: () => {\n            particle.parentNode?.removeChild(particle);\n          }\n        });\n      });\n      particlesRef.value = [];\n    };\n\n    const animateParticles = () => {\n      if (!cardRef.value || !isHoveredRef.value) return;\n\n      if (!particlesInitialized.value) {\n        initializeParticles();\n      }\n\n      memoizedParticles.value.forEach((particle, index) => {\n        const timeoutId = setTimeout(() => {\n          if (!isHoveredRef.value || !cardRef.value) return;\n\n          const clone = particle.cloneNode(true) as HTMLDivElement;\n          cardRef.value.appendChild(clone);\n          particlesRef.value.push(clone);\n\n          gsap.fromTo(clone, { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.3, ease: 'back.out(1.7)' });\n\n          gsap.to(clone, {\n            x: (Math.random() - 0.5) * 100,\n            y: (Math.random() - 0.5) * 100,\n            rotation: Math.random() * 360,\n            duration: 2 + Math.random() * 2,\n            ease: 'none',\n            repeat: -1,\n            yoyo: true\n          });\n\n          gsap.to(clone, {\n            opacity: 0.3,\n            duration: 1.5,\n            ease: 'power2.inOut',\n            repeat: -1,\n            yoyo: true\n          });\n        }, index * 100);\n\n        timeoutsRef.value.push(timeoutId);\n      });\n    };\n\n    let cleanupEventListeners: (() => void) | null = null;\n    const setupEventListeners = () => {\n      if (props.disableAnimations || !cardRef.value) return;\n\n      const element = cardRef.value;\n\n      const handleMouseEnter = () => {\n        isHoveredRef.value = true;\n        animateParticles();\n\n        gsap.to(element, { y: -2, duration: 0.3, ease: 'power2.out' });\n\n        if (props.enableTilt) {\n          gsap.to(element, {\n            rotateX: 5,\n            rotateY: 5,\n            duration: 0.3,\n            ease: 'power2.out',\n            transformPerspective: 1000\n          });\n        }\n      };\n\n      const handleMouseLeave = () => {\n        isHoveredRef.value = false;\n        clearAllParticles();\n\n        if (props.enableTilt) {\n          gsap.to(element, {\n            rotateX: 0,\n            rotateY: 0,\n            y: 0,\n            duration: 0.3,\n            ease: 'power2.out'\n          });\n        }\n\n        if (props.enableMagnetism) {\n          gsap.to(element, {\n            x: 0,\n            y: 0,\n            duration: 0.3,\n            ease: 'power2.out'\n          });\n        }\n      };\n\n      const handleMouseMove = (e: MouseEvent) => {\n        if (!props.enableTilt && !props.enableMagnetism) return;\n\n        const rect = element.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        const centerX = rect.width / 2;\n        const centerY = rect.height / 2;\n\n        if (props.enableTilt) {\n          const rotateX = ((y - centerY) / centerY) * -10;\n          const rotateY = ((x - centerX) / centerX) * 10;\n\n          gsap.to(element, {\n            rotateX,\n            rotateY,\n            duration: 0.1,\n            ease: 'power2.out',\n            transformPerspective: 1000\n          });\n        }\n\n        if (props.enableMagnetism) {\n          const magnetX = (x - centerX) * 0.05;\n          const magnetY = (y - centerY) * 0.05;\n\n          magnetismAnimationRef.value = gsap.to(element, {\n            x: magnetX,\n            y: magnetY,\n            duration: 0.3,\n            ease: 'power2.out'\n          });\n        }\n      };\n\n      const handleClick = (e: MouseEvent) => {\n        if (!props.clickEffect) return;\n\n        const rect = element.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n\n        const maxDistance = Math.max(\n          Math.hypot(x, y),\n          Math.hypot(x - rect.width, y),\n          Math.hypot(x, y - rect.height),\n          Math.hypot(x - rect.width, y - rect.height)\n        );\n\n        const ripple = document.createElement('div');\n        ripple.style.cssText = `\n          position: absolute;\n          width: ${maxDistance * 2}px;\n          height: ${maxDistance * 2}px;\n          border-radius: 50%;\n          background: radial-gradient(circle, rgba(${props.glowColor}, 0.4) 0%, rgba(${props.glowColor}, 0.2) 30%, transparent 70%);\n          left: ${x - maxDistance}px;\n          top: ${y - maxDistance}px;\n          pointer-events: none;\n          z-index: 1000;\n        `;\n\n        element.appendChild(ripple);\n\n        gsap.fromTo(\n          ripple,\n          {\n            scale: 0,\n            opacity: 1\n          },\n          {\n            scale: 1,\n            opacity: 0,\n            duration: 0.8,\n            ease: 'power2.out',\n            onComplete: () => ripple.remove()\n          }\n        );\n      };\n\n      element.addEventListener('mouseenter', handleMouseEnter);\n      element.addEventListener('mouseleave', handleMouseLeave);\n      element.addEventListener('mousemove', handleMouseMove);\n      element.addEventListener('click', handleClick);\n\n      cleanupEventListeners = () => {\n        isHoveredRef.value = false;\n        element.removeEventListener('mouseenter', handleMouseEnter);\n        element.removeEventListener('mouseleave', handleMouseLeave);\n        element.removeEventListener('mousemove', handleMouseMove);\n        element.removeEventListener('click', handleClick);\n        clearAllParticles();\n      };\n    };\n\n    onMounted(() => {\n      nextTick(() => {\n        setupEventListeners();\n      });\n    });\n\n    onUnmounted(() => {\n      cleanupEventListeners?.();\n    });\n\n    watch(\n      () => [\n        animateParticles,\n        clearAllParticles,\n        props.disableAnimations,\n        props.enableTilt,\n        props.enableMagnetism,\n        props.clickEffect,\n        props.glowColor\n      ],\n      () => {\n        cleanupEventListeners?.();\n        setupEventListeners();\n      },\n      { deep: true }\n    );\n\n    return {\n      cardRef\n    };\n  },\n  template: `\n    <div\n      ref=\"cardRef\"\n      class=\"relative overflow-hidden\"\n      :style=\"{ position: 'relative', overflow: 'hidden' }\"\n    >\n      <slot />\n    </div>\n  `\n});\n\nconst GlobalSpotlight = defineComponent({\n  name: 'GlobalSpotlight',\n  props: {\n    gridRef: { type: [Object, null] as PropType<HTMLDivElement | null>, required: true },\n    disableAnimations: { type: Boolean, default: false },\n    enabled: { type: Boolean, default: true },\n    spotlightRadius: { type: Number, default: DEFAULT_SPOTLIGHT_RADIUS },\n    glowColor: { type: String, default: DEFAULT_GLOW_COLOR }\n  },\n  setup(props) {\n    const spotlightRef = ref<HTMLDivElement | null>(null);\n    const isInsideSection = ref(false);\n\n    let cleanupEventListeners: (() => void) | null = null;\n    const setupEventListeners = () => {\n      if (props.disableAnimations || !props.gridRef || !props.enabled) return;\n\n      const spotlight = document.createElement('div');\n      spotlight.className = 'global-spotlight';\n      spotlight.style.cssText = `\n        position: fixed;\n        width: 800px;\n        height: 800px;\n        border-radius: 50%;\n        pointer-events: none;\n        background: radial-gradient(circle,\n          rgba(${props.glowColor}, 0.15) 0%,\n          rgba(${props.glowColor}, 0.08) 15%,\n          rgba(${props.glowColor}, 0.04) 25%,\n          rgba(${props.glowColor}, 0.02) 40%,\n          rgba(${props.glowColor}, 0.01) 65%,\n          transparent 70%\n        );\n        z-index: 200;\n        opacity: 0;\n        transform: translate(-50%, -50%);\n        mix-blend-mode: screen;\n      `;\n      document.body.appendChild(spotlight);\n      spotlightRef.value = spotlight;\n\n      const handleMouseMove = (e: MouseEvent) => {\n        if (!spotlightRef.value || !props.gridRef) return;\n\n        const section = props.gridRef.closest('.bento-section');\n        const rect = section?.getBoundingClientRect();\n        const mouseInside =\n          rect &&\n          e.clientX >= rect.left &&\n          e.clientX <= rect.right &&\n          e.clientY >= rect.top &&\n          e.clientY <= rect.bottom;\n\n        isInsideSection.value = mouseInside || false;\n        const cards = props.gridRef.querySelectorAll('.card') as NodeListOf<HTMLDivElement>;\n\n        if (!mouseInside) {\n          gsap.to(spotlightRef.value, {\n            opacity: 0,\n            duration: 0.3,\n            ease: 'power2.out'\n          });\n          cards.forEach(card => {\n            card.style.setProperty('--glow-intensity', '0');\n          });\n          return;\n        }\n\n        const { proximity, fadeDistance } = calculateSpotlightValues(props.spotlightRadius);\n        let minDistance = Infinity;\n\n        cards.forEach(card => {\n          const cardRect = card.getBoundingClientRect();\n          const centerX = cardRect.left + cardRect.width / 2;\n          const centerY = cardRect.top + cardRect.height / 2;\n          const distance =\n            Math.hypot(e.clientX - centerX, e.clientY - centerY) - Math.max(cardRect.width, cardRect.height) / 2;\n          const effectiveDistance = Math.max(0, distance);\n\n          minDistance = Math.min(minDistance, effectiveDistance);\n\n          let glowIntensity = 0;\n          if (effectiveDistance <= proximity) {\n            glowIntensity = 1;\n          } else if (effectiveDistance <= fadeDistance) {\n            glowIntensity = (fadeDistance - effectiveDistance) / (fadeDistance - proximity);\n          }\n\n          updateCardGlowProperties(card, e.clientX, e.clientY, glowIntensity, props.spotlightRadius);\n        });\n\n        gsap.to(spotlightRef.value, {\n          left: e.clientX,\n          top: e.clientY,\n          duration: 0.1,\n          ease: 'power2.out'\n        });\n\n        const targetOpacity =\n          minDistance <= proximity\n            ? 0.8\n            : minDistance <= fadeDistance\n              ? ((fadeDistance - minDistance) / (fadeDistance - proximity)) * 0.8\n              : 0;\n\n        gsap.to(spotlightRef.value, {\n          opacity: targetOpacity,\n          duration: targetOpacity > 0 ? 0.2 : 0.5,\n          ease: 'power2.out'\n        });\n      };\n\n      const handleMouseLeave = () => {\n        isInsideSection.value = false;\n        (props.gridRef?.querySelectorAll('.card') as NodeListOf<HTMLDivElement>).forEach(card => {\n          card.style.setProperty('--glow-intensity', '0');\n        });\n        if (spotlightRef.value) {\n          gsap.to(spotlightRef.value, {\n            opacity: 0,\n            duration: 0.3,\n            ease: 'power2.out'\n          });\n        }\n      };\n\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseleave', handleMouseLeave);\n\n      cleanupEventListeners = () => {\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseleave', handleMouseLeave);\n        spotlightRef.value?.parentNode?.removeChild(spotlightRef.value);\n      };\n    };\n\n    onMounted(() => {\n      nextTick(() => {\n        setupEventListeners();\n      });\n    });\n\n    onUnmounted(() => {\n      cleanupEventListeners?.();\n      cleanupEventListeners = null;\n    });\n\n    watch(\n      () => props,\n      () => {\n        if (props.gridRef) {\n          cleanupEventListeners?.();\n          setupEventListeners();\n        }\n      },\n      { deep: true }\n    );\n  },\n  template: `<div></div>`\n});\n\nconst BentoCardGrid = defineComponent({\n  name: 'BentoCardGrid',\n  props: {\n    gridRef: {\n      type: Function as PropType<(el: HTMLDivElement | null) => void>,\n      required: true\n    }\n  },\n  template: `\n    <div\n      class=\"relative gap-2 grid p-3 select-none bento-section\"\n      :style=\"{ fontSize: 'clamp(1rem, 0.9rem + 0.5vw, 1.5rem)' }\"\n      :ref=\"gridRef\"\n    >\n      <slot />\n    </div>\n  `\n});\n\nconst useMobileDetection = () => {\n  const isMobile = ref(false);\n\n  const checkMobile = () => {\n    isMobile.value = window.innerWidth <= MOBILE_BREAKPOINT;\n  };\n\n  onMounted(() => {\n    checkMobile();\n    window.addEventListener('resize', checkMobile);\n\n    onUnmounted(() => {\n      window.removeEventListener('resize', checkMobile);\n    });\n  });\n\n  return isMobile;\n};\n\nconst props = withDefaults(defineProps<BentoProps>(), {\n  textAutoHide: true,\n  enableStars: true,\n  enableSpotlight: true,\n  enableBorderGlow: true,\n  disableAnimations: false,\n  spotlightRadius: DEFAULT_SPOTLIGHT_RADIUS,\n  particleCount: DEFAULT_PARTICLE_COUNT,\n  enableTilt: false,\n  glowColor: DEFAULT_GLOW_COLOR,\n  clickEffect: true,\n  enableMagnetism: true\n});\n\nconst gridRef = ref<HTMLDivElement | null>(null);\nconst isMobile = useMobileDetection();\nconst cardElements = ref<HTMLDivElement[]>([]);\n\nconst shouldDisableAnimations = computed(() => props.disableAnimations || isMobile.value);\nconst baseClassName = computed(() => {\n  return `card flex flex-col justify-between relative aspect-[4/3] min-h-[200px] w-full max-w-full p-5 rounded-[20px] border border-solid font-light overflow-hidden transition-[box-shadow] duration-300 ease-in-out hover:shadow-[0_8px_25px_rgba(0,0,0,0.15)] ${\n    props.enableBorderGlow ? 'card--border-glow' : ''\n  }`;\n});\nconst getCardStyle = (card: BentoCardProps) => ({\n  backgroundColor: card.color || 'var(--background-dark)',\n  borderColor: 'var(--border-color)',\n  color: 'var(--white)',\n  '--glow-x': '50%',\n  '--glow-y': '50%',\n  '--glow-intensity': '0',\n  '--glow-radius': '200px'\n});\n\nconst setupCardRef = (el: HTMLDivElement | null, index: number) => {\n  if (!el) return;\n  cardElements.value[index] = el;\n\n  const handleMouseEnter = () => {\n    if (shouldDisableAnimations.value) return;\n    gsap.to(el, { y: -2, duration: 0.3, ease: 'power2.out' });\n  };\n\n  const handleMouseMove = (e: MouseEvent) => {\n    if (shouldDisableAnimations.value) return;\n\n    const rect = el.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n    const centerX = rect.width / 2;\n    const centerY = rect.height / 2;\n\n    if (props.enableTilt) {\n      const rotateX = ((y - centerY) / centerY) * -10;\n      const rotateY = ((x - centerX) / centerX) * 10;\n\n      gsap.to(el, {\n        rotateX,\n        rotateY,\n        duration: 0.1,\n        ease: 'power2.out',\n        transformPerspective: 1000\n      });\n    }\n\n    if (props.enableMagnetism) {\n      const magnetX = (x - centerX) * 0.05;\n      const magnetY = (y - centerY) * 0.05;\n\n      gsap.to(el, {\n        x: magnetX,\n        y: magnetY,\n        duration: 0.3,\n        ease: 'power2.out'\n      });\n    }\n  };\n\n  const handleMouseLeave = () => {\n    if (shouldDisableAnimations.value) return;\n\n    if (props.enableTilt) {\n      gsap.to(el, {\n        rotateX: 0,\n        rotateY: 0,\n        duration: 0.3,\n        ease: 'power2.out'\n      });\n    }\n\n    if (props.enableMagnetism) {\n      gsap.to(el, {\n        x: 0,\n        y: 0,\n        duration: 0.3,\n        ease: 'power2.out'\n      });\n    } else {\n      gsap.to(el, { y: 0, duration: 0.3, ease: 'power2.out' });\n    }\n  };\n\n  const handleClick = (e: MouseEvent) => {\n    if (!props.clickEffect || shouldDisableAnimations.value) return;\n\n    const rect = el.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n\n    const maxDistance = Math.max(\n      Math.hypot(x, y),\n      Math.hypot(x - rect.width, y),\n      Math.hypot(x, y - rect.height),\n      Math.hypot(x - rect.width, y - rect.height)\n    );\n\n    const ripple = document.createElement('div');\n    ripple.style.cssText = `\n          position: absolute;\n          width: ${maxDistance * 2}px;\n          height: ${maxDistance * 2}px;\n          border-radius: 50%;\n          background: radial-gradient(circle, rgba(${props.glowColor}, 0.4) 0%, rgba(${props.glowColor}, 0.2) 30%, transparent 70%);\n          left: ${x - maxDistance}px;\n          top: ${y - maxDistance}px;\n          pointer-events: none;\n          z-index: 1000;\n        `;\n\n    el.appendChild(ripple);\n\n    gsap.fromTo(\n      ripple,\n      {\n        scale: 0,\n        opacity: 1\n      },\n      {\n        scale: 1,\n        opacity: 0,\n        duration: 0.8,\n        ease: 'power2.out',\n        onComplete: () => ripple.remove()\n      }\n    );\n  };\n\n  el.addEventListener('mouseenter', handleMouseEnter);\n  el.addEventListener('mousemove', handleMouseMove);\n  el.addEventListener('mouseleave', handleMouseLeave);\n  el.addEventListener('click', handleClick);\n};\n</script>\n\n<template>\n  <GlobalSpotlight\n    v-if=\"enableSpotlight\"\n    :grid-ref=\"gridRef\"\n    :disable-animations=\"shouldDisableAnimations\"\n    :enabled=\"enableSpotlight\"\n    :spotlight-radius=\"spotlightRadius\"\n    :glow-color=\"glowColor\"\n  />\n\n  <BentoCardGrid\n    :grid-ref=\"\n      (el: HTMLDivElement | null) => {\n        gridRef = el;\n      }\n    \"\n  >\n    <div class=\"gap-2 grid card-responsive\">\n      <template v-for=\"(card, index) in cardData\" :key=\"index\">\n        <ParticleCard\n          v-if=\"enableStars\"\n          :class=\"baseClassName\"\n          :style=\"getCardStyle(card)\"\n          :disable-animations=\"shouldDisableAnimations\"\n          :particle-count=\"particleCount\"\n          :glow-color=\"glowColor\"\n          :enable-tilt=\"enableTilt\"\n          :click-effect=\"clickEffect\"\n          :enable-magnetism=\"enableMagnetism\"\n        >\n          <div class=\"relative flex justify-between gap-3 text-white card__header\">\n            <span class=\"text-base card__label\">{{ card.label }}</span>\n          </div>\n          <div class=\"relative flex flex-col text-white card__content\">\n            <h3 :class=\"`card__title font-normal text-base m-0 mb-1 ${textAutoHide ? 'text-clamp-1' : ''}`\">\n              {{ card.title }}\n            </h3>\n            <p :class=\"`card__description text-xs leading-5 opacity-90 ${textAutoHide ? 'text-clamp-2' : ''}`\">\n              {{ card.description }}\n            </p>\n          </div>\n        </ParticleCard>\n\n        <div\n          v-else\n          :class=\"baseClassName\"\n          :style=\"getCardStyle(card)\"\n          :ref=\"el => setupCardRef(el as HTMLDivElement, index)\"\n        >\n          <div class=\"relative flex justify-between gap-3 text-white card__header\">\n            <span class=\"text-base card__label\">{{ card.label }}</span>\n          </div>\n          <div class=\"relative flex flex-col text-white card__content\">\n            <h3 :class=\"`card__title font-normal text-base m-0 mb-1 ${textAutoHide ? 'text-clamp-1' : ''}`\">\n              {{ card.title }}\n            </h3>\n            <p :class=\"`card__description text-xs leading-5 opacity-90 ${textAutoHide ? 'text-clamp-2' : ''}`\">\n              {{ card.description }}\n            </p>\n          </div>\n        </div>\n      </template>\n    </div>\n  </BentoCardGrid>\n</template>\n\n<style>\n.bento-section {\n  --glow-x: 50%;\n  --glow-y: 50%;\n  --glow-intensity: 0;\n  --glow-radius: 200px;\n  --glow-color: v-bind(glowColor);\n  --border-color: #333;\n  --background-dark: #060010;\n  --white: hsl(0, 0%, 100%);\n}\n\n.card-responsive {\n  grid-template-columns: 1fr;\n  width: 90%;\n  margin: 0 auto;\n  padding: 0.5rem;\n}\n\n@media (min-width: 600px) {\n  .card-responsive {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (min-width: 1024px) {\n  .card-responsive {\n    grid-template-columns: repeat(4, 1fr);\n  }\n\n  .card-responsive .card:nth-child(3) {\n    grid-column: span 2;\n    grid-row: span 2;\n  }\n\n  .card-responsive .card:nth-child(4) {\n    grid-column: 1 / span 2;\n    grid-row: 2 / span 2;\n  }\n\n  .card-responsive .card:nth-child(6) {\n    grid-column: 4;\n    grid-row: 3;\n  }\n}\n\n.card--border-glow::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  padding: 6px;\n  background: radial-gradient(\n    var(--glow-radius) circle at var(--glow-x) var(--glow-y),\n    rgba(v-bind(glowColor), calc(var(--glow-intensity) * 0.8)) 0%,\n    rgba(v-bind(glowColor), calc(var(--glow-intensity) * 0.4)) 30%,\n    transparent 60%\n  );\n  border-radius: inherit;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  mask-composite: subtract;\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  pointer-events: none;\n  transition: opacity 0.3s ease;\n  z-index: 1;\n}\n\n.card--border-glow:hover::after {\n  opacity: 1;\n}\n\n.card--border-glow:hover {\n  box-shadow:\n    0 4px 20px rgba(46, 24, 78, 0.4),\n    0 0 30px rgba(v-bind(glowColor), 0.2);\n}\n\n.particle::before {\n  content: '';\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  right: -2px;\n  bottom: -2px;\n  background: rgba(v-bind(glowColor), 0.2);\n  border-radius: 50%;\n  z-index: -1;\n}\n\n.particle-container:hover {\n  box-shadow:\n    0 4px 20px rgba(46, 24, 78, 0.2),\n    0 0 30px rgba(v-bind(glowColor), 0.2);\n}\n\n.text-clamp-1 {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.text-clamp-2 {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n@media (max-width: 599px) {\n  .card-responsive {\n    grid-template-columns: 1fr;\n    width: 90%;\n    margin: 0 auto;\n    padding: 0.5rem;\n  }\n\n  .card-responsive .card {\n    width: 100%;\n    min-height: 180px;\n  }\n}\n</style>\n","path":"MagicBento/MagicBento.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["Components"]}
\ No newline at end of file
diff --git a/public/r/MetallicPaint.json b/public/r/MetallicPaint.json
index 89dca36..fb447f1 100644
--- a/public/r/MetallicPaint.json
+++ b/public/r/MetallicPaint.json
@@ -1 +1 @@
-{"name":"MetallicPaint","title":"MetallicPaint","description":"Liquid metallic paint shader which can be applied to SVG elements.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <canvas ref=\"canvasRef\" class=\"block w-full h-full object-contain\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';\n\ninterface ShaderParams {\n  patternScale: number;\n  refraction: number;\n  edge: number;\n  patternBlur: number;\n  liquid: number;\n  speed: number;\n}\n\ninterface Props {\n  imageData: ImageData;\n  params?: ShaderParams;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  params: () => ({\n    patternScale: 2,\n    refraction: 0.015,\n    edge: 1,\n    patternBlur: 0.005,\n    liquid: 0.07,\n    speed: 0.3\n  })\n});\n\nconst canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');\nconst gl = ref<WebGL2RenderingContext | null>(null);\nconst uniforms = ref<Record<string, WebGLUniformLocation>>({});\nconst totalAnimationTime = ref(0);\nconst lastRenderTime = ref(0);\nconst animationId = ref<number>();\n\nconst vertexShaderSource = `#version 300 es\nprecision mediump float;\n\nin vec2 a_position;\nout vec2 vUv;\n\nvoid main() {\n    vUv = .5 * (a_position + 1.);\n    gl_Position = vec4(a_position, 0.0, 1.0);\n}`;\n\nconst liquidFragSource = `#version 300 es\nprecision mediump float;\n\nin vec2 vUv;\nout vec4 fragColor;\n\nuniform sampler2D u_image_texture;\nuniform float u_time;\nuniform float u_ratio;\nuniform float u_img_ratio;\nuniform float u_patternScale;\nuniform float u_refraction;\nuniform float u_edge;\nuniform float u_patternBlur;\nuniform float u_liquid;\n\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n\nvec3 mod289(vec3 x) { return x - floor(x * (1. / 289.)) * 289.; }\nvec2 mod289(vec2 x) { return x - floor(x * (1. / 289.)) * 289.; }\nvec3 permute(vec3 x) { return mod289(((x*34.)+1.)*x); }\nfloat snoise(vec2 v) {\n    const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);\n    vec2 i = floor(v + dot(v, C.yy));\n    vec2 x0 = v - i + dot(i, C.xx);\n    vec2 i1;\n    i1 = (x0.x > x0.y) ? vec2(1., 0.) : vec2(0., 1.);\n    vec4 x12 = x0.xyxy + C.xxzz;\n    x12.xy -= i1;\n    i = mod289(i);\n    vec3 p = permute(permute(i.y + vec3(0., i1.y, 1.)) + i.x + vec3(0., i1.x, 1.));\n    vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.);\n    m = m*m;\n    m = m*m;\n    vec3 x = 2. * fract(p * C.www) - 1.;\n    vec3 h = abs(x) - 0.5;\n    vec3 ox = floor(x + 0.5);\n    vec3 a0 = x - ox;\n    m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n    vec3 g;\n    g.x = a0.x * x0.x + h.x * x0.y;\n    g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n    return 130. * dot(m, g);\n}\n\nvec2 get_img_uv() {\n    vec2 img_uv = vUv;\n    img_uv -= .5;\n    if (u_ratio > u_img_ratio) {\n        img_uv.x = img_uv.x * u_ratio / u_img_ratio;\n    } else {\n        img_uv.y = img_uv.y * u_img_ratio / u_ratio;\n    }\n    float scale_factor = 1.;\n    img_uv *= scale_factor;\n    img_uv += .5;\n    img_uv.y = 1. - img_uv.y;\n    return img_uv;\n}\nvec2 rotate(vec2 uv, float th) {\n    return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\nfloat get_color_channel(float c1, float c2, float stripe_p, vec3 w, float extra_blur, float b) {\n    float ch = c2;\n    float border = 0.;\n    float blur = u_patternBlur + extra_blur;\n    ch = mix(ch, c1, smoothstep(.0, blur, stripe_p));\n    border = w[0];\n    ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n    b = smoothstep(.2, .8, b);\n    border = w[0] + .4 * (1. - b) * w[1];\n    ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n    border = w[0] + .5 * (1. - b) * w[1];\n    ch = mix(ch, c2, smoothstep(border - blur, border + blur, stripe_p));\n    border = w[0] + w[1];\n    ch = mix(ch, c1, smoothstep(border - blur, border + blur, stripe_p));\n    float gradient_t = (stripe_p - w[0] - w[1]) / w[2];\n    float gradient = mix(c1, c2, smoothstep(0., 1., gradient_t));\n    ch = mix(ch, gradient, smoothstep(border - blur, border + blur, stripe_p));\n    return ch;\n}\nfloat get_img_frame_alpha(vec2 uv, float img_frame_width) {\n    float img_frame_alpha = smoothstep(0., img_frame_width, uv.x) * smoothstep(1., 1. - img_frame_width, uv.x);\n    img_frame_alpha *= smoothstep(0., img_frame_width, uv.y) * smoothstep(1., 1. - img_frame_width, uv.y);\n    return img_frame_alpha;\n}\nvoid main() {\n    vec2 uv = vUv;\n    uv.y = 1. - uv.y;\n    uv.x *= u_ratio;\n    float diagonal = uv.x - uv.y;\n    float t = .001 * u_time;\n    vec2 img_uv = get_img_uv();\n    vec4 img = texture(u_image_texture, img_uv);\n    vec3 color = vec3(0.);\n    float opacity = 1.;\n    vec3 color1 = vec3(.98, 0.98, 1.);\n    vec3 color2 = vec3(.1, .1, .1 + .1 * smoothstep(.7, 1.3, uv.x + uv.y));\n    float edge = img.r;\n    vec2 grad_uv = uv;\n    grad_uv -= .5;\n    float dist = length(grad_uv + vec2(0., .2 * diagonal));\n    grad_uv = rotate(grad_uv, (.25 - .2 * diagonal) * PI);\n    float bulge = pow(1.8 * dist, 1.2);\n    bulge = 1. - bulge;\n    bulge *= pow(uv.y, .3);\n    float cycle_width = u_patternScale;\n    float thin_strip_1_ratio = .12 / cycle_width * (1. - .4 * bulge);\n    float thin_strip_2_ratio = .07 / cycle_width * (1. + .4 * bulge);\n    float wide_strip_ratio = (1. - thin_strip_1_ratio - thin_strip_2_ratio);\n    float thin_strip_1_width = cycle_width * thin_strip_1_ratio;\n    float thin_strip_2_width = cycle_width * thin_strip_2_ratio;\n    opacity = 1. - smoothstep(.9 - .5 * u_edge, 1. - .5 * u_edge, edge);\n    opacity *= get_img_frame_alpha(img_uv, 0.01);\n    float noise = snoise(uv - t);\n    edge += (1. - edge) * u_liquid * noise;\n    float refr = 0.;\n    refr += (1. - bulge);\n    refr = clamp(refr, 0., 1.);\n    float dir = grad_uv.x;\n    dir += diagonal;\n    dir -= 2. * noise * diagonal * (smoothstep(0., 1., edge) * smoothstep(1., 0., edge));\n    bulge *= clamp(pow(uv.y, .1), .3, 1.);\n    dir *= (.1 + (1.1 - edge) * bulge);\n    dir *= smoothstep(1., .7, edge);\n    dir += .18 * (smoothstep(.1, .2, uv.y) * smoothstep(.4, .2, uv.y));\n    dir += .03 * (smoothstep(.1, .2, 1. - uv.y) * smoothstep(.4, .2, 1. - uv.y));\n    dir *= (.5 + .5 * pow(uv.y, 2.));\n    dir *= cycle_width;\n    dir -= t;\n    float refr_r = refr;\n    refr_r += .03 * bulge * noise;\n    float refr_b = 1.3 * refr;\n    refr_r += 5. * (smoothstep(-.1, .2, uv.y) * smoothstep(.5, .1, uv.y)) * (smoothstep(.4, .6, bulge) * smoothstep(1., .4, bulge));\n    refr_r -= diagonal;\n    refr_b += (smoothstep(0., .4, uv.y) * smoothstep(.8, .1, uv.y)) * (smoothstep(.4, .6, bulge) * smoothstep(.8, .4, bulge));\n    refr_b -= .2 * edge;\n    refr_r *= u_refraction;\n    refr_b *= u_refraction;\n    vec3 w = vec3(thin_strip_1_width, thin_strip_2_width, wide_strip_ratio);\n    w[1] -= .02 * smoothstep(.0, 1., edge + bulge);\n    float stripe_r = mod(dir + refr_r, 1.);\n    float r = get_color_channel(color1.r, color2.r, stripe_r, w, 0.02 + .03 * u_refraction * bulge, bulge);\n    float stripe_g = mod(dir, 1.);\n    float g = get_color_channel(color1.g, color2.g, stripe_g, w, 0.01 / (1. - diagonal), bulge);\n    float stripe_b = mod(dir - refr_b, 1.);\n    float b = get_color_channel(color1.b, color2.b, stripe_b, w, .01, bulge);\n    color = vec3(r, g, b);\n    color *= opacity;\n    fragColor = vec4(color, opacity);\n}\n`;\n\nfunction updateUniforms() {\n  if (!gl.value || !uniforms.value) return;\n  gl.value.uniform1f(uniforms.value.u_edge, props.params.edge);\n  gl.value.uniform1f(uniforms.value.u_patternBlur, props.params.patternBlur);\n  gl.value.uniform1f(uniforms.value.u_time, 0);\n  gl.value.uniform1f(uniforms.value.u_patternScale, props.params.patternScale);\n  gl.value.uniform1f(uniforms.value.u_refraction, props.params.refraction);\n  gl.value.uniform1f(uniforms.value.u_liquid, props.params.liquid);\n}\n\nfunction createShader(gl: WebGL2RenderingContext, sourceCode: string, type: number) {\n  const shader = gl.createShader(type);\n  if (!shader) {\n    return null;\n  }\n\n  gl.shaderSource(shader, sourceCode);\n  gl.compileShader(shader);\n\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\n    gl.deleteShader(shader);\n    return null;\n  }\n\n  return shader;\n}\n\nfunction getUniforms(program: WebGLProgram, gl: WebGL2RenderingContext) {\n  const uniformsObj: Record<string, WebGLUniformLocation> = {};\n  const uniformCount = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);\n  for (let i = 0; i < uniformCount; i++) {\n    const uniformName = gl.getActiveUniform(program, i)?.name;\n    if (!uniformName) continue;\n    uniformsObj[uniformName] = gl.getUniformLocation(program, uniformName) as WebGLUniformLocation;\n  }\n  return uniformsObj;\n}\n\nfunction initShader() {\n  const canvas = canvasRef.value;\n  const glContext = canvas?.getContext('webgl2', {\n    antialias: true,\n    alpha: true\n  });\n  if (!canvas || !glContext) {\n    return;\n  }\n\n  const vertexShader = createShader(glContext, vertexShaderSource, glContext.VERTEX_SHADER);\n  const fragmentShader = createShader(glContext, liquidFragSource, glContext.FRAGMENT_SHADER);\n  const program = glContext.createProgram();\n  if (!program || !vertexShader || !fragmentShader) {\n    return;\n  }\n\n  glContext.attachShader(program, vertexShader);\n  glContext.attachShader(program, fragmentShader);\n  glContext.linkProgram(program);\n\n  if (!glContext.getProgramParameter(program, glContext.LINK_STATUS)) {\n    console.error('Unable to initialize the shader program: ' + glContext.getProgramInfoLog(program));\n    return null;\n  }\n\n  const uniformsObj = getUniforms(program, glContext);\n  uniforms.value = uniformsObj;\n\n  const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);\n  const vertexBuffer = glContext.createBuffer();\n  glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuffer);\n  glContext.bufferData(glContext.ARRAY_BUFFER, vertices, glContext.STATIC_DRAW);\n\n  glContext.useProgram(program);\n\n  const positionLocation = glContext.getAttribLocation(program, 'a_position');\n  glContext.enableVertexAttribArray(positionLocation);\n\n  glContext.bindBuffer(glContext.ARRAY_BUFFER, vertexBuffer);\n  glContext.vertexAttribPointer(positionLocation, 2, glContext.FLOAT, false, 0, 0);\n\n  gl.value = glContext;\n}\n\nfunction resizeCanvas() {\n  if (!canvasRef.value || !gl.value || !uniforms.value || !props.imageData) return;\n  const imgRatio = props.imageData.width / props.imageData.height;\n  gl.value.uniform1f(uniforms.value.u_img_ratio, imgRatio);\n\n  const side = 1000;\n  canvasRef.value.width = side * devicePixelRatio;\n  canvasRef.value.height = side * devicePixelRatio;\n  gl.value.viewport(0, 0, canvasRef.value.height, canvasRef.value.height);\n  gl.value.uniform1f(uniforms.value.u_ratio, 1);\n  gl.value.uniform1f(uniforms.value.u_img_ratio, imgRatio);\n}\n\nfunction setupTexture() {\n  if (!gl.value || !uniforms.value) return;\n\n  const existingTexture = gl.value.getParameter(gl.value.TEXTURE_BINDING_2D);\n  if (existingTexture) {\n    gl.value.deleteTexture(existingTexture);\n  }\n\n  const imageTexture = gl.value.createTexture();\n  gl.value.activeTexture(gl.value.TEXTURE0);\n  gl.value.bindTexture(gl.value.TEXTURE_2D, imageTexture);\n\n  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_MIN_FILTER, gl.value.LINEAR);\n  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_MAG_FILTER, gl.value.LINEAR);\n  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_WRAP_S, gl.value.CLAMP_TO_EDGE);\n  gl.value.texParameteri(gl.value.TEXTURE_2D, gl.value.TEXTURE_WRAP_T, gl.value.CLAMP_TO_EDGE);\n\n  gl.value.pixelStorei(gl.value.UNPACK_ALIGNMENT, 1);\n\n  try {\n    gl.value.texImage2D(\n      gl.value.TEXTURE_2D,\n      0,\n      gl.value.RGBA,\n      props.imageData?.width,\n      props.imageData?.height,\n      0,\n      gl.value.RGBA,\n      gl.value.UNSIGNED_BYTE,\n      props.imageData?.data\n    );\n\n    gl.value.uniform1i(uniforms.value.u_image_texture, 0);\n  } catch (e) {\n    console.error('Error uploading texture:', e);\n  }\n}\n\nfunction render(currentTime: number) {\n  if (!gl.value || !uniforms.value) return;\n\n  const deltaTime = currentTime - lastRenderTime.value;\n  lastRenderTime.value = currentTime;\n\n  totalAnimationTime.value += deltaTime * props.params.speed;\n  gl.value.uniform1f(uniforms.value.u_time, totalAnimationTime.value);\n  gl.value.drawArrays(gl.value.TRIANGLE_STRIP, 0, 4);\n  animationId.value = requestAnimationFrame(render);\n}\n\nfunction startAnimation() {\n  if (animationId.value) {\n    cancelAnimationFrame(animationId.value);\n  }\n  lastRenderTime.value = performance.now();\n  animationId.value = requestAnimationFrame(render);\n}\n\nonMounted(async () => {\n  await nextTick();\n  initShader();\n  updateUniforms();\n  resizeCanvas();\n  setupTexture();\n  startAnimation();\n\n  window.addEventListener('resize', resizeCanvas);\n});\n\nonUnmounted(() => {\n  if (animationId.value) {\n    cancelAnimationFrame(animationId.value);\n  }\n  window.removeEventListener('resize', resizeCanvas);\n});\n\nwatch(\n  () => props.params,\n  () => {\n    updateUniforms();\n  },\n  { deep: true }\n);\n\nwatch(\n  () => props.imageData,\n  () => {\n    setupTexture();\n    resizeCanvas();\n  },\n  { deep: true }\n);\n</script>\n","path":"MetallicPaint/MetallicPaint.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]},{"type":"registry:component","role":"file","content":"export function parseImage(file: File): Promise<{ imageData: ImageData; pngBlob: Blob }> {\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n\n  return new Promise((resolve, reject) => {\n    if (!file || !ctx) {\n      reject(new Error('Invalid file or context'));\n      return;\n    }\n\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n    img.onload = function () {\n      if (file.type === 'image/svg+xml') {\n        img.width = 1000;\n        img.height = 1000;\n      }\n\n      const MAX_SIZE = 1000;\n      const MIN_SIZE = 500;\n      let width = img.naturalWidth;\n      let height = img.naturalHeight;\n\n      if (width > MAX_SIZE || height > MAX_SIZE || width < MIN_SIZE || height < MIN_SIZE) {\n        if (width > height) {\n          if (width > MAX_SIZE) {\n            height = Math.round((height * MAX_SIZE) / width);\n            width = MAX_SIZE;\n          } else if (width < MIN_SIZE) {\n            height = Math.round((height * MIN_SIZE) / width);\n            width = MIN_SIZE;\n          }\n        } else {\n          if (height > MAX_SIZE) {\n            width = Math.round((width * MAX_SIZE) / height);\n            height = MAX_SIZE;\n          } else if (height < MIN_SIZE) {\n            width = Math.round((width * MIN_SIZE) / height);\n            height = MIN_SIZE;\n          }\n        }\n      }\n\n      canvas.width = width;\n      canvas.height = height;\n\n      const shapeCanvas = document.createElement('canvas');\n      shapeCanvas.width = width;\n      shapeCanvas.height = height;\n      const shapeCtx = shapeCanvas.getContext('2d')!;\n      shapeCtx.drawImage(img, 0, 0, width, height);\n\n      const shapeImageData = shapeCtx.getImageData(0, 0, width, height);\n      const data = shapeImageData.data;\n      const shapeMask = new Array(width * height).fill(false);\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx4 = (y * width + x) * 4;\n          const r = data[idx4];\n          const g = data[idx4 + 1];\n          const b = data[idx4 + 2];\n          const a = data[idx4 + 3];\n          shapeMask[y * width + x] = !((r === 255 && g === 255 && b === 255 && a === 255) || a === 0);\n        }\n      }\n\n      function inside(x: number, y: number) {\n        if (x < 0 || x >= width || y < 0 || y >= height) return false;\n        return shapeMask[y * width + x];\n      }\n\n      const boundaryMask = new Array(width * height).fill(false);\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = y * width + x;\n          if (!shapeMask[idx]) continue;\n          let isBoundary = false;\n          for (let ny = y - 1; ny <= y + 1 && !isBoundary; ny++) {\n            for (let nx = x - 1; nx <= x + 1 && !isBoundary; nx++) {\n              if (!inside(nx, ny)) {\n                isBoundary = true;\n              }\n            }\n          }\n          if (isBoundary) {\n            boundaryMask[idx] = true;\n          }\n        }\n      }\n\n      const interiorMask = new Array(width * height).fill(false);\n      for (let y = 1; y < height - 1; y++) {\n        for (let x = 1; x < width - 1; x++) {\n          const idx = y * width + x;\n          if (\n            shapeMask[idx] &&\n            shapeMask[idx - 1] &&\n            shapeMask[idx + 1] &&\n            shapeMask[idx - width] &&\n            shapeMask[idx + width]\n          ) {\n            interiorMask[idx] = true;\n          }\n        }\n      }\n\n      const u = new Float32Array(width * height).fill(0);\n      const newU = new Float32Array(width * height).fill(0);\n      const C = 0.01;\n      const ITERATIONS = 300;\n\n      function getU(x: number, y: number, arr: Float32Array) {\n        if (x < 0 || x >= width || y < 0 || y >= height) return 0;\n        if (!shapeMask[y * width + x]) return 0;\n        return arr[y * width + x];\n      }\n\n      for (let iter = 0; iter < ITERATIONS; iter++) {\n        for (let y = 0; y < height; y++) {\n          for (let x = 0; x < width; x++) {\n            const idx = y * width + x;\n            if (!shapeMask[idx] || boundaryMask[idx]) {\n              newU[idx] = 0;\n              continue;\n            }\n            const sumN = getU(x + 1, y, u) + getU(x - 1, y, u) + getU(x, y + 1, u) + getU(x, y - 1, u);\n            newU[idx] = (C + sumN) / 4;\n          }\n        }\n        u.set(newU);\n      }\n\n      let maxVal = 0;\n      for (let i = 0; i < width * height; i++) {\n        if (u[i] > maxVal) maxVal = u[i];\n      }\n      const alpha = 2.0;\n      const outImg = ctx.createImageData(width, height);\n\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = y * width + x;\n          const px = idx * 4;\n          if (!shapeMask[idx]) {\n            outImg.data[px] = 255;\n            outImg.data[px + 1] = 255;\n            outImg.data[px + 2] = 255;\n            outImg.data[px + 3] = 255;\n          } else {\n            const raw = u[idx] / maxVal;\n            const remapped = Math.pow(raw, alpha);\n            const gray = 255 * (1 - remapped);\n            outImg.data[px] = gray;\n            outImg.data[px + 1] = gray;\n            outImg.data[px + 2] = gray;\n            outImg.data[px + 3] = 255;\n          }\n        }\n      }\n      ctx.putImageData(outImg, 0, 0);\n\n      canvas.toBlob(blob => {\n        if (!blob) {\n          reject(new Error('Failed to create PNG blob'));\n          return;\n        }\n        resolve({\n          imageData: outImg,\n          pngBlob: blob\n        });\n      }, 'image/png');\n    };\n\n    img.onerror = () => reject(new Error('Failed to load image'));\n    img.src = URL.createObjectURL(file);\n  });\n}\n","path":"MetallicPaint/parseImage.ts","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
+{"name":"MetallicPaint","title":"MetallicPaint","description":"Liquid metallic paint shader which can be applied to SVG elements.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\nconst vertexShader = `#version 300 es\nprecision highp float;\nin vec2 a_position;\nout vec2 vP;\nvoid main(){vP=a_position*.5+.5;gl_Position=vec4(a_position,0.,1.);}`;\n\nconst fragmentShader = `#version 300 es\nprecision highp float;\nin vec2 vP;\nout vec4 oC;\nuniform sampler2D u_tex;\nuniform float u_time,u_ratio,u_imgRatio,u_seed,u_scale,u_refract,u_blur,u_liquid;\nuniform float u_bright,u_contrast,u_angle,u_fresnel,u_sharp,u_wave,u_noise,u_chroma;\nuniform float u_distort,u_contour;\nuniform vec3 u_lightColor,u_darkColor,u_tint;\n\nvec3 sC,sM;\n\nvec3 pW(vec3 v){\n  vec3 i=floor(v),f=fract(v),s=sign(fract(v*.5)-.5),h=fract(sM*i+i.yzx),c=f*(f-1.);\n  return s*c*((h*16.-4.)*c-1.);\n}\n\nvec3 aF(vec3 b,vec3 c){return pW(b+c.zxy-pW(b.zxy+c.yzx)+pW(b.yzx+c.xyz));}\nvec3 lM(vec3 s,vec3 p){return(p+aF(s,p))*.5;}\n\nvec2 fA(){\n  vec2 c=vP-.5;\n  c.x*=u_ratio>u_imgRatio?u_ratio/u_imgRatio:1.;\n  c.y*=u_ratio>u_imgRatio?1.:u_imgRatio/u_ratio;\n  return vec2(c.x+.5,.5-c.y);\n}\n\nvec2 rot(vec2 p,float r){float c=cos(r),s=sin(r);return vec2(p.x*c+p.y*s,p.y*c-p.x*s);}\n\nfloat bM(vec2 c,float t){\n  vec2 l=smoothstep(vec2(0.),vec2(t),c),u=smoothstep(vec2(0.),vec2(t),1.-c);\n  return l.x*l.y*u.x*u.y;\n}\n\nfloat mG(float hi,float lo,float t,float sh,float cv){\n  sh*=(2.-u_sharp);\n  float ci=smoothstep(.15,.85,cv),r=lo;\n  float e1=.08/u_scale;\n  r=mix(r,hi,smoothstep(0.,sh*1.5,t));\n  r=mix(r,lo,smoothstep(e1-sh,e1+sh,t));\n  float e2=e1+.05/u_scale*(1.-ci*.35);\n  r=mix(r,hi,smoothstep(e2-sh,e2+sh,t));\n  float e3=e2+.025/u_scale*(1.-ci*.45);\n  r=mix(r,lo,smoothstep(e3-sh,e3+sh,t));\n  float e4=e1+.1/u_scale;\n  r=mix(r,hi,smoothstep(e4-sh,e4+sh,t));\n  float rm=1.-e4,gT=clamp((t-e4)/rm,0.,1.);\n  r=mix(r,mix(hi,lo,smoothstep(0.,1.,gT)),smoothstep(e4-sh*.5,e4+sh*.5,t));\n  return r;\n}\n\nvoid main(){\n  sC=fract(vec3(.7548,.5698,.4154)*(u_seed+17.31))+.5;\n  sM=fract(sC.zxy-sC.yzx*1.618);\n  vec2 sc=vec2(vP.x*u_ratio,1.-vP.y);\n  float angleRad=u_angle*3.14159/180.;\n  sc=rot(sc-.5,angleRad)+.5;\n  sc=clamp(sc,0.,1.);\n  float sl=sc.x-sc.y,an=u_time*.001;\n  vec2 iC=fA();\n  vec4 texSample=texture(u_tex,iC);\n  float dp=texSample.r;\n  float shapeMask=texSample.a;\n  vec3 hi=u_lightColor*u_bright;\n  vec3 lo=u_darkColor*(2.-u_bright);\n  lo.b+=smoothstep(.6,1.4,sc.x+sc.y)*.08;\n  vec2 fC=sc-.5;\n  float rd=length(fC+vec2(0.,sl*.15));\n  vec2 ag=rot(fC,(.22-sl*.18)*3.14159);\n  float cv=1.-pow(rd*1.65,1.15);\n  cv*=pow(sc.y,.35);\n  float vs=shapeMask;\n  vs*=bM(iC,.01);\n  float fr=pow(1.-cv,u_fresnel)*.3;\n  vs=min(vs+fr*vs,1.);\n  float mT=an*.0625;\n  vec3 wO=vec3(-1.05,1.35,1.55);\n  vec3 wA=aF(vec3(31.,73.,56.),mT+wO)*.22*u_wave;\n  vec3 wB=aF(vec3(24.,64.,42.),mT-wO.yzx)*.22*u_wave;\n  vec2 nC=sc*45.*u_noise;\n  nC+=aF(sC.zxy,an*.17*sC.yzx-sc.yxy*.35).xy*18.*u_wave;\n  vec3 tC=vec3(.00041,.00053,.00076)*mT+wB*nC.x+wA*nC.y;\n  tC=lM(sC,tC);\n  tC=lM(sC+1.618,tC);\n  float tb=sin(tC.x*3.14159)*.5+.5;\n  tb=tb*2.-1.;\n  float noiseVal=pW(vec3(sc*8.+an,an*.5)).x;\n  float edgeFactor=smoothstep(0.,.5,dp)*smoothstep(1.,.5,dp);\n  float lD=dp+(1.-dp)*u_liquid*tb;\n  lD+=noiseVal*u_distort*.15*edgeFactor;\n  float rB=clamp(1.-cv,0.,1.);\n  float fl=ag.x+sl;\n  fl+=noiseVal*sl*u_distort*edgeFactor;\n  fl*=mix(1.,1.-dp*.5,u_contour);\n  fl-=dp*u_contour*.8;\n  float eI=smoothstep(0.,1.,lD)*smoothstep(1.,0.,lD);\n  fl-=tb*sl*1.8*eI;\n  float cA=cv*clamp(pow(sc.y,.12),.25,1.);\n  fl*=.12+(1.05-lD)*cA;\n  fl*=smoothstep(1.,.65,lD);\n  float vA1=smoothstep(.08,.18,sc.y)*smoothstep(.38,.18,sc.y);\n  float vA2=smoothstep(.08,.18,1.-sc.y)*smoothstep(.38,.18,1.-sc.y);\n  fl+=vA1*.16+vA2*.025;\n  fl*=.45+pow(sc.y,2.)*.55;\n  fl*=u_scale;\n  fl-=an;\n  float rO=rB+cv*tb*.025;\n  float vM1=smoothstep(-.12,.18,sc.y)*smoothstep(.48,.08,sc.y);\n  float cM1=smoothstep(.35,.55,cv)*smoothstep(.95,.35,cv);\n  rO+=vM1*cM1*4.5;\n  rO-=sl;\n  float bO=rB*1.25;\n  float vM2=smoothstep(-.02,.35,sc.y)*smoothstep(.75,.08,sc.y);\n  float cM2=smoothstep(.35,.55,cv)*smoothstep(.75,.35,cv);\n  bO+=vM2*cM2*.9;\n  bO-=lD*.18;\n  rO*=u_refract*u_chroma;\n  bO*=u_refract*u_chroma;\n  float sf=u_blur;\n  float rP=fract(fl+rO);\n  float rC=mG(hi.r,lo.r,rP,sf+.018+u_refract*cv*.025,cv);\n  float gP=fract(fl);\n  float gC=mG(hi.g,lo.g,gP,sf+.008/max(.01,1.-sl),cv);\n  float bP=fract(fl-bO);\n  float bC=mG(hi.b,lo.b,bP,sf+.008,cv);\n  vec3 col=vec3(rC,gC,bC);\n  col=(col-.5)*u_contrast+.5;\n  col=clamp(col,0.,1.);\n  col=mix(col,1.-min(vec3(1.),(1.-col)/max(u_tint,vec3(.001))),length(u_tint-1.)*.5);\n  col=clamp(col,0.,1.);\n  oC=vec4(col*vs,vs);\n}`;\n\ninterface MetallicPaintProps {\n  imageSrc: string;\n  seed?: number;\n  scale?: number;\n  refraction?: number;\n  blur?: number;\n  liquid?: number;\n  speed?: number;\n  brightness?: number;\n  contrast?: number;\n  angle?: number;\n  fresnel?: number;\n  lightColor?: string;\n  darkColor?: string;\n  patternSharpness?: number;\n  waveAmplitude?: number;\n  noiseScale?: number;\n  chromaticSpread?: number;\n  mouseAnimation?: boolean;\n  distortion?: number;\n  contour?: number;\n  tintColor?: string;\n}\n\nfunction processImage(img: HTMLImageElement): ImageData {\n  const MAX_SIZE = 1000;\n  const MIN_SIZE = 500;\n  let width = img.naturalWidth || img.width;\n  let height = img.naturalHeight || img.height;\n\n  if (width > MAX_SIZE || height > MAX_SIZE || width < MIN_SIZE || height < MIN_SIZE) {\n    const scale =\n      width > height\n        ? width > MAX_SIZE\n          ? MAX_SIZE / width\n          : width < MIN_SIZE\n            ? MIN_SIZE / width\n            : 1\n        : height > MAX_SIZE\n          ? MAX_SIZE / height\n          : height < MIN_SIZE\n            ? MIN_SIZE / height\n            : 1;\n    width = Math.round(width * scale);\n    height = Math.round(height * scale);\n  }\n\n  const canvas = document.createElement('canvas');\n  canvas.width = width;\n  canvas.height = height;\n  const ctx = canvas.getContext('2d')!;\n  ctx.drawImage(img, 0, 0, width, height);\n\n  const imageData = ctx.getImageData(0, 0, width, height);\n  const data = imageData.data;\n  const size = width * height;\n  const alphaValues = new Float32Array(size);\n  const shapeMask = new Uint8Array(size);\n  const boundaryMask = new Uint8Array(size);\n\n  for (let i = 0; i < size; i++) {\n    const idx = i * 4;\n    const r = data[idx],\n      g = data[idx + 1],\n      b = data[idx + 2],\n      a = data[idx + 3];\n    const isBackground = (r > 250 && g > 250 && b > 250 && a === 255) || a < 5;\n    alphaValues[i] = isBackground ? 0 : a / 255;\n    shapeMask[i] = alphaValues[i] > 0.1 ? 1 : 0;\n  }\n\n  for (let y = 0; y < height; y++) {\n    for (let x = 0; x < width; x++) {\n      const idx = y * width + x;\n      if (!shapeMask[idx]) continue;\n      if (\n        x === 0 ||\n        x === width - 1 ||\n        y === 0 ||\n        y === height - 1 ||\n        !shapeMask[idx - 1] ||\n        !shapeMask[idx + 1] ||\n        !shapeMask[idx - width] ||\n        !shapeMask[idx + width]\n      ) {\n        boundaryMask[idx] = 1;\n      }\n    }\n  }\n\n  const u = new Float32Array(size);\n  const ITERATIONS = 200;\n  const C = 0.01;\n  const omega = 1.85;\n\n  for (let iter = 0; iter < ITERATIONS; iter++) {\n    for (let y = 1; y < height - 1; y++) {\n      for (let x = 1; x < width - 1; x++) {\n        const idx = y * width + x;\n        if (!shapeMask[idx] || boundaryMask[idx]) continue;\n        const sum =\n          (shapeMask[idx + 1] ? u[idx + 1] : 0) +\n          (shapeMask[idx - 1] ? u[idx - 1] : 0) +\n          (shapeMask[idx + width] ? u[idx + width] : 0) +\n          (shapeMask[idx - width] ? u[idx - width] : 0);\n        const newVal = (C + sum) / 4;\n        u[idx] = omega * newVal + (1 - omega) * u[idx];\n      }\n    }\n  }\n\n  let maxVal = 0;\n  for (let i = 0; i < size; i++) if (u[i] > maxVal) maxVal = u[i];\n  if (maxVal === 0) maxVal = 1;\n\n  const outData = ctx.createImageData(width, height);\n  for (let i = 0; i < size; i++) {\n    const px = i * 4;\n    const depth = u[i] / maxVal;\n    const gray = Math.round(255 * (1 - depth * depth));\n    outData.data[px] = outData.data[px + 1] = outData.data[px + 2] = gray;\n    outData.data[px + 3] = Math.round(alphaValues[i] * 255);\n  }\n\n  return outData;\n}\n\nfunction hexToRgb(hex: string): [number, number, number] {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n  return result\n    ? [parseInt(result[1], 16) / 255, parseInt(result[2], 16) / 255, parseInt(result[3], 16) / 255]\n    : [1, 1, 1];\n}\n\nconst props = withDefaults(defineProps<MetallicPaintProps>(), {\n  seed: 42,\n  scale: 4,\n  refraction: 0.01,\n  blur: 0.015,\n  liquid: 0.75,\n  speed: 0.3,\n  brightness: 2,\n  contrast: 0.5,\n  angle: 0,\n  fresnel: 1,\n  lightColor: '#ffffff',\n  darkColor: '#000000',\n  patternSharpness: 1,\n  waveAmplitude: 1,\n  noiseScale: 0.5,\n  chromaticSpread: 2,\n  mouseAnimation: false,\n  distortion: 1,\n  contour: 0.2,\n  tintColor: '#feb3ff'\n});\n\nconst canvasRef = ref<HTMLCanvasElement | null>(null);\nconst glRef = ref<WebGL2RenderingContext | null>(null);\nconst programRef = ref<WebGLProgram | null>(null);\nconst uniformsRef = ref<Record<string, WebGLUniformLocation | null>>({});\nconst textureRef = ref<WebGLTexture | null>(null);\nconst animTimeRef = ref(0);\nconst lastTimeRef = ref(0);\nconst rafRef = ref<number | null>(null);\nconst imgDataRef = ref<ImageData | null>(null);\nconst speedRef = ref(props.speed);\nconst mouseRef = ref({ x: 0.5, y: 0.5, targetX: 0.5, targetY: 0.5 });\nconst mouseAnimRef = ref(props.mouseAnimation);\n\nconst ready = ref<boolean>(false);\nconst textureReady = ref<boolean>(false);\n\nwatch(\n  () => props.speed,\n  speed => (speedRef.value = speed)\n);\n\nwatch(\n  () => props.mouseAnimation,\n  mouseAnimation => (mouseAnimRef.value = mouseAnimation)\n);\n\nconst initGL = (): boolean => {\n  const canvas = canvasRef.value;\n  if (!canvas) return false;\n\n  const gl = canvas.getContext('webgl2', { antialias: true, alpha: true });\n  if (!gl) return false;\n\n  const compile = (src: string, type: number): WebGLShader | null => {\n    const s = gl.createShader(type);\n    if (!s) return null;\n    gl.shaderSource(s, src);\n    gl.compileShader(s);\n    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {\n      console.error(gl.getShaderInfoLog(s));\n      return null;\n    }\n    return s;\n  };\n\n  const vs = compile(vertexShader, gl.VERTEX_SHADER);\n  const fs = compile(fragmentShader, gl.FRAGMENT_SHADER);\n  if (!vs || !fs) return false;\n\n  const prog = gl.createProgram();\n  if (!prog) return false;\n  gl.attachShader(prog, vs);\n  gl.attachShader(prog, fs);\n  gl.linkProgram(prog);\n  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {\n    console.error(gl.getProgramInfoLog(prog));\n    return false;\n  }\n\n  const uniforms: Record<string, WebGLUniformLocation | null> = {};\n  const count = gl.getProgramParameter(prog, gl.ACTIVE_UNIFORMS);\n  for (let i = 0; i < count; i++) {\n    const info = gl.getActiveUniform(prog, i);\n    if (info) {\n      uniforms[info.name] = gl.getUniformLocation(prog, info.name);\n    }\n  }\n\n  const verts = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);\n  const buf = gl.createBuffer();\n  if (!buf) return false;\n\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n  gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);\n\n  gl.useProgram(prog);\n  const pos = gl.getAttribLocation(prog, 'a_position');\n  gl.enableVertexAttribArray(pos);\n  gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n\n  glRef.value = gl;\n  programRef.value = prog;\n  uniformsRef.value = uniforms;\n\n  return true;\n};\n\nwatch(initGL, () => {\n  if (!initGL()) return;\n\n  const canvas = canvasRef.value;\n  const gl = glRef.value;\n  if (!canvas || !gl) return;\n\n  const side = 1000 * devicePixelRatio;\n  canvas.width = side;\n  canvas.height = side;\n  gl.viewport(0, 0, side, side);\n\n  ready.value = true;\n\n  return () => {\n    if (rafRef.value) cancelAnimationFrame(rafRef.value);\n    if (textureRef.value && glRef.value) {\n      glRef.value.deleteTexture(textureRef.value);\n    }\n  };\n});\n\nconst uploadTexture = (imgData: ImageData): void => {\n  const gl = glRef.value;\n  const uniforms = uniformsRef.value;\n  if (!gl || !imgData) return;\n\n  if (textureRef.value) gl.deleteTexture(textureRef.value);\n\n  const tex = gl.createTexture();\n  gl.activeTexture(gl.TEXTURE0);\n  gl.bindTexture(gl.TEXTURE_2D, tex);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, imgData.width, imgData.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, imgData.data);\n  gl.uniform1i(uniforms.u_tex, 0);\n\n  const ratio = imgData.width / imgData.height;\n  gl.uniform1f(uniforms.u_imgRatio, ratio);\n  gl.uniform1f(uniforms.u_ratio, 1);\n\n  textureRef.value = tex;\n  imgDataRef.value = imgData;\n};\n\nwatch(\n  () => [ready.value, props.imageSrc, uploadTexture],\n  () => {\n    if (!ready.value || !props.imageSrc) return;\n\n    textureReady.value = false;\n    const img = new Image();\n    img.crossOrigin = 'anonymous';\n    img.onload = () => {\n      const imgData = processImage(img);\n      uploadTexture(imgData);\n      textureReady.value = true;\n    };\n    img.src = props.imageSrc;\n  }\n);\n\nwatch(\n  () => [\n    ready.value,\n    props.seed,\n    props.scale,\n    props.refraction,\n    props.blur,\n    props.liquid,\n    props.brightness,\n    props.contrast,\n    props.angle,\n    props.fresnel,\n    props.lightColor,\n    props.darkColor,\n    props.patternSharpness,\n    props.waveAmplitude,\n    props.noiseScale,\n    props.chromaticSpread,\n    props.distortion,\n    props.contour,\n    props.tintColor\n  ],\n  () => {\n    const gl = glRef.value;\n    const u = uniformsRef.value;\n    if (!gl || !ready.value) return;\n\n    gl.uniform1f(u.u_seed, props.seed);\n    gl.uniform1f(u.u_scale, props.scale);\n    gl.uniform1f(u.u_refract, props.refraction);\n    gl.uniform1f(u.u_blur, props.blur);\n    gl.uniform1f(u.u_liquid, props.liquid);\n    gl.uniform1f(u.u_bright, props.brightness);\n    gl.uniform1f(u.u_contrast, props.contrast);\n    gl.uniform1f(u.u_angle, props.angle);\n    gl.uniform1f(u.u_fresnel, props.fresnel);\n\n    const light = hexToRgb(props.lightColor);\n    const dark = hexToRgb(props.darkColor);\n    const tint = hexToRgb(props.tintColor);\n    gl.uniform3f(u.u_lightColor, light[0], light[1], light[2]);\n    gl.uniform3f(u.u_darkColor, dark[0], dark[1], dark[2]);\n    gl.uniform1f(u.u_sharp, props.patternSharpness);\n    gl.uniform1f(u.u_wave, props.waveAmplitude);\n    gl.uniform1f(u.u_noise, props.noiseScale);\n    gl.uniform1f(u.u_chroma, props.chromaticSpread);\n    gl.uniform1f(u.u_distort, props.distortion);\n    gl.uniform1f(u.u_contour, props.contour);\n    gl.uniform3f(u.u_tint, tint[0], tint[1], tint[2]);\n  }\n);\n\nlet cleanup: (() => void) | null = null;\nconst setup = () => {\n  if (!ready.value || !textureReady.value) return;\n\n  const gl = glRef.value;\n  const u = uniformsRef.value;\n  const canvas = canvasRef.value;\n  const mouse = mouseRef.value;\n  if (!gl || !canvas) return;\n\n  const handleMouseMove = (e: MouseEvent) => {\n    const rect = canvas.getBoundingClientRect();\n    mouse.targetX = (e.clientX - rect.left) / rect.width;\n    mouse.targetY = (e.clientY - rect.top) / rect.height;\n  };\n\n  canvas.addEventListener('mousemove', handleMouseMove);\n\n  const render = (time: number) => {\n    const delta = time - lastTimeRef.value;\n    lastTimeRef.value = time;\n\n    if (mouseAnimRef.value) {\n      mouse.x += (mouse.targetX - mouse.x) * 0.08;\n      mouse.y += (mouse.targetY - mouse.y) * 0.08;\n      animTimeRef.value = mouse.x * 3000 + mouse.y * 1500;\n    } else {\n      animTimeRef.value += delta * speedRef.value;\n    }\n\n    gl.uniform1f(u.u_time, animTimeRef.value);\n    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n    rafRef.value = requestAnimationFrame(render);\n  };\n\n  lastTimeRef.value = performance.now();\n  rafRef.value = requestAnimationFrame(render);\n\n  cleanup = () => {\n    if (rafRef.value) cancelAnimationFrame(rafRef.value);\n    canvas.removeEventListener('mousemove', handleMouseMove);\n  };\n};\n\nonMounted(() => {\n  setup();\n});\n\nonBeforeUnmount(() => {\n  cleanup?.();\n});\n\nwatch(\n  () => [ready.value, textureReady.value],\n  () => {\n    cleanup?.();\n    setup();\n  }\n);\n</script>\n\n<template>\n  <canvas ref=\"canvasRef\" className=\"block h-full w-full object-contain\" />\n</template>\n","path":"MetallicPaint/MetallicPaint.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
diff --git a/public/r/PixelBlast.json b/public/r/PixelBlast.json
index c82b21f..0bcb70e 100644
--- a/public/r/PixelBlast.json
+++ b/public/r/PixelBlast.json
@@ -1 +1 @@
-{"name":"PixelBlast","title":"PixelBlast","description":"Exploding pixel particle bursts with optional liquid postprocessing.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div\n    ref=\"containerRef\"\n    :class=\"['w-full h-full relative overflow-hidden', className]\"\n    :style=\"style\"\n    aria-label=\"PixelBlast interactive background\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { Effect, EffectComposer, EffectPass, RenderPass } from 'postprocessing';\nimport * as THREE from 'three';\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef, watch, type CSSProperties } from 'vue';\n\nexport type PixelBlastVariant = 'square' | 'circle' | 'triangle' | 'diamond';\n\ntype PixelBlastProps = {\n  variant?: PixelBlastVariant;\n  pixelSize?: number;\n  color?: string;\n  className?: string;\n  style?: CSSProperties;\n  antialias?: boolean;\n  patternScale?: number;\n  patternDensity?: number;\n  liquid?: boolean;\n  liquidStrength?: number;\n  liquidRadius?: number;\n  pixelSizeJitter?: number;\n  enableRipples?: boolean;\n  rippleIntensityScale?: number;\n  rippleThickness?: number;\n  rippleSpeed?: number;\n  liquidWobbleSpeed?: number;\n  autoPauseOffscreen?: boolean;\n  speed?: number;\n  transparent?: boolean;\n  edgeFade?: number;\n  noiseAmount?: number;\n};\n\nconst createTouchTexture = () => {\n  const size = 64;\n  const canvas = document.createElement('canvas');\n  canvas.width = size;\n  canvas.height = size;\n  const ctx = canvas.getContext('2d');\n  if (!ctx) throw new Error('2D context not available');\n  ctx.fillStyle = 'black';\n  ctx.fillRect(0, 0, canvas.width, canvas.height);\n  const texture = new THREE.Texture(canvas);\n  texture.minFilter = THREE.LinearFilter;\n  texture.magFilter = THREE.LinearFilter;\n  texture.generateMipmaps = false;\n  const trail: {\n    x: number;\n    y: number;\n    vx: number;\n    vy: number;\n    force: number;\n    age: number;\n  }[] = [];\n  let last: { x: number; y: number } | null = null;\n  const maxAge = 64;\n  let radius = 0.1 * size;\n  const speed = 1 / maxAge;\n  const clear = () => {\n    ctx.fillStyle = 'black';\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n  };\n  const drawPoint = (p: { x: number; y: number; vx: number; vy: number; force: number; age: number }) => {\n    const pos = { x: p.x * size, y: (1 - p.y) * size };\n    let intensity = 1;\n    const easeOutSine = (t: number) => Math.sin((t * Math.PI) / 2);\n    const easeOutQuad = (t: number) => -t * (t - 2);\n    if (p.age < maxAge * 0.3) intensity = easeOutSine(p.age / (maxAge * 0.3));\n    else intensity = easeOutQuad(1 - (p.age - maxAge * 0.3) / (maxAge * 0.7)) || 0;\n    intensity *= p.force;\n    const color = `${((p.vx + 1) / 2) * 255}, ${((p.vy + 1) / 2) * 255}, ${intensity * 255}`;\n    const offset = size * 5;\n    ctx.shadowOffsetX = offset;\n    ctx.shadowOffsetY = offset;\n    ctx.shadowBlur = radius;\n    ctx.shadowColor = `rgba(${color},${0.22 * intensity})`;\n    ctx.beginPath();\n    ctx.fillStyle = 'rgba(255,0,0,1)';\n    ctx.arc(pos.x - offset, pos.y - offset, radius, 0, Math.PI * 2);\n    ctx.fill();\n  };\n  const addTouch = (norm: { x: number; y: number }) => {\n    let force = 0;\n    let vx = 0;\n    let vy = 0;\n    if (last) {\n      const dx = norm.x - last.x;\n      const dy = norm.y - last.y;\n      if (dx === 0 && dy === 0) return;\n      const dd = dx * dx + dy * dy;\n      const d = Math.sqrt(dd);\n      vx = dx / (d || 1);\n      vy = dy / (d || 1);\n      force = Math.min(dd * 10000, 1);\n    }\n    last = { x: norm.x, y: norm.y };\n    trail.push({ x: norm.x, y: norm.y, age: 0, force, vx, vy });\n  };\n  const update = () => {\n    clear();\n    for (let i = trail.length - 1; i >= 0; i--) {\n      const point = trail[i];\n      const f = point.force * speed * (1 - point.age / maxAge);\n      point.x += point.vx * f;\n      point.y += point.vy * f;\n      point.age++;\n      if (point.age > maxAge) trail.splice(i, 1);\n    }\n    for (let i = 0; i < trail.length; i++) drawPoint(trail[i]);\n    texture.needsUpdate = true;\n  };\n  return {\n    canvas,\n    texture,\n    addTouch,\n    update,\n    set radiusScale(v: number) {\n      radius = 0.1 * size * v;\n    },\n    get radiusScale() {\n      return radius / (0.1 * size);\n    },\n    size\n  };\n};\n\nconst createLiquidEffect = (texture: THREE.Texture, opts?: { strength?: number; freq?: number }) => {\n  const fragment = `\n    uniform sampler2D uTexture;\n    uniform float uStrength;\n    uniform float uTime;\n    uniform float uFreq;\n\n    void mainUv(inout vec2 uv) {\n      vec4 tex = texture2D(uTexture, uv);\n      float vx = tex.r * 2.0 - 1.0;\n      float vy = tex.g * 2.0 - 1.0;\n      float intensity = tex.b;\n\n      float wave = 0.5 + 0.5 * sin(uTime * uFreq + intensity * 6.2831853);\n\n      float amt = uStrength * intensity * wave;\n\n      uv += vec2(vx, vy) * amt;\n    }\n    `;\n  return new Effect('LiquidEffect', fragment, {\n    uniforms: new Map<string, THREE.Uniform>([\n      ['uTexture', new THREE.Uniform(texture)],\n      ['uStrength', new THREE.Uniform(opts?.strength ?? 0.025)],\n      ['uTime', new THREE.Uniform(0)],\n      ['uFreq', new THREE.Uniform(opts?.freq ?? 4.5)]\n    ])\n  });\n};\n\nconst SHAPE_MAP: Record<PixelBlastVariant, number> = {\n  square: 0,\n  circle: 1,\n  triangle: 2,\n  diamond: 3\n};\n\nconst VERTEX_SRC = `\nvoid main() {\n  gl_Position = vec4(position, 1.0);\n}\n`;\n\nconst FRAGMENT_SRC = `\nprecision highp float;\n\nuniform vec3  uColor;\nuniform vec2  uResolution;\nuniform float uTime;\nuniform float uPixelSize;\nuniform float uScale;\nuniform float uDensity;\nuniform float uPixelJitter;\nuniform int   uEnableRipples;\nuniform float uRippleSpeed;\nuniform float uRippleThickness;\nuniform float uRippleIntensity;\nuniform float uEdgeFade;\n\nuniform int   uShapeType;\nconst int SHAPE_SQUARE   = 0;\nconst int SHAPE_CIRCLE   = 1;\nconst int SHAPE_TRIANGLE = 2;\nconst int SHAPE_DIAMOND  = 3;\n\nconst int   MAX_CLICKS = 10;\n\nuniform vec2  uClickPos  [MAX_CLICKS];\nuniform float uClickTimes[MAX_CLICKS];\n\nout vec4 fragColor;\n\nfloat Bayer2(vec2 a) {\n  a = floor(a);\n  return fract(a.x / 2. + a.y * a.y * .75);\n}\n#define Bayer4(a) (Bayer2(.5*(a))*0.25 + Bayer2(a))\n#define Bayer8(a) (Bayer4(.5*(a))*0.25 + Bayer2(a))\n\n#define FBM_OCTAVES     5\n#define FBM_LACUNARITY  1.25\n#define FBM_GAIN        1.0\n\nfloat hash11(float n){ return fract(sin(n)*43758.5453); }\n\nfloat vnoise(vec3 p){\n  vec3 ip = floor(p);\n  vec3 fp = fract(p);\n  float n000 = hash11(dot(ip + vec3(0.0,0.0,0.0), vec3(1.0,57.0,113.0)));\n  float n100 = hash11(dot(ip + vec3(1.0,0.0,0.0), vec3(1.0,57.0,113.0)));\n  float n010 = hash11(dot(ip + vec3(0.0,1.0,0.0), vec3(1.0,57.0,113.0)));\n  float n110 = hash11(dot(ip + vec3(1.0,1.0,0.0), vec3(1.0,57.0,113.0)));\n  float n001 = hash11(dot(ip + vec3(0.0,0.0,1.0), vec3(1.0,57.0,113.0)));\n  float n101 = hash11(dot(ip + vec3(1.0,0.0,1.0), vec3(1.0,57.0,113.0)));\n  float n011 = hash11(dot(ip + vec3(0.0,1.0,1.0), vec3(1.0,57.0,113.0)));\n  float n111 = hash11(dot(ip + vec3(1.0,1.0,1.0), vec3(1.0,57.0,113.0)));\n  vec3 w = fp*fp*fp*(fp*(fp*6.0-15.0)+10.0);\n  float x00 = mix(n000, n100, w.x);\n  float x10 = mix(n010, n110, w.x);\n  float x01 = mix(n001, n101, w.x);\n  float x11 = mix(n011, n111, w.x);\n  float y0  = mix(x00, x10, w.y);\n  float y1  = mix(x01, x11, w.y);\n  return mix(y0, y1, w.z) * 2.0 - 1.0;\n}\n\nfloat fbm2(vec2 uv, float t){\n  vec3 p = vec3(uv * uScale, t);\n  float amp = 1.0;\n  float freq = 1.0;\n  float sum = 1.0;\n  for (int i = 0; i < FBM_OCTAVES; ++i){\n    sum  += amp * vnoise(p * freq);\n    freq *= FBM_LACUNARITY;\n    amp  *= FBM_GAIN;\n  }\n  return sum * 0.5 + 0.5;\n}\n\nfloat maskCircle(vec2 p, float cov){\n  float r = sqrt(cov) * .25;\n  float d = length(p - 0.5) - r;\n  float aa = 0.5 * fwidth(d);\n  return cov * (1.0 - smoothstep(-aa, aa, d * 2.0));\n}\n\nfloat maskTriangle(vec2 p, vec2 id, float cov){\n  bool flip = mod(id.x + id.y, 2.0) > 0.5;\n  if (flip) p.x = 1.0 - p.x;\n  float r = sqrt(cov);\n  float d  = p.y - r*(1.0 - p.x);\n  float aa = fwidth(d);\n  return cov * clamp(0.5 - d/aa, 0.0, 1.0);\n}\n\nfloat maskDiamond(vec2 p, float cov){\n  float r = sqrt(cov) * 0.564;\n  return step(abs(p.x - 0.49) + abs(p.y - 0.49), r);\n}\n\nvoid main(){\n  float pixelSize = uPixelSize;\n  vec2 fragCoord = gl_FragCoord.xy - uResolution * .5;\n  float aspectRatio = uResolution.x / uResolution.y;\n\n  vec2 pixelId = floor(fragCoord / pixelSize);\n  vec2 pixelUV = fract(fragCoord / pixelSize);\n\n  float cellPixelSize = 8.0 * pixelSize;\n  vec2 cellId = floor(fragCoord / cellPixelSize);\n  vec2 cellCoord = cellId * cellPixelSize;\n  vec2 uv = cellCoord / uResolution * vec2(aspectRatio, 1.0);\n\n  float base = fbm2(uv, uTime * 0.05);\n  base = base * 0.5 - 0.65;\n\n  float feed = base + (uDensity - 0.5) * 0.3;\n\n  float speed     = uRippleSpeed;\n  float thickness = uRippleThickness;\n  const float dampT     = 1.0;\n  const float dampR     = 10.0;\n\n  if (uEnableRipples == 1) {\n    for (int i = 0; i < MAX_CLICKS; ++i){\n      vec2 pos = uClickPos[i];\n      if (pos.x < 0.0) continue;\n      float cellPixelSize = 8.0 * pixelSize;\n      vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution))) * vec2(aspectRatio, 1.0);\n      float t = max(uTime - uClickTimes[i], 0.0);\n      float r = distance(uv, cuv);\n      float waveR = speed * t;\n      float ring  = exp(-pow((r - waveR) / thickness, 2.0));\n      float atten = exp(-dampT * t) * exp(-dampR * r);\n      feed = max(feed, ring * atten * uRippleIntensity);\n    }\n  }\n\n  float bayer = Bayer8(fragCoord / uPixelSize) - 0.5;\n  float bw = step(0.5, feed + bayer);\n\n  float h = fract(sin(dot(floor(fragCoord / uPixelSize), vec2(127.1, 311.7))) * 43758.5453);\n  float jitterScale = 1.0 + (h - 0.5) * uPixelJitter;\n  float coverage = bw * jitterScale;\n  float M;\n  if      (uShapeType == SHAPE_CIRCLE)   M = maskCircle (pixelUV, coverage);\n  else if (uShapeType == SHAPE_TRIANGLE) M = maskTriangle(pixelUV, pixelId, coverage);\n  else if (uShapeType == SHAPE_DIAMOND)  M = maskDiamond(pixelUV, coverage);\n  else                                   M = coverage;\n\n  if (uEdgeFade > 0.0) {\n    vec2 norm = gl_FragCoord.xy / uResolution;\n    float edge = min(min(norm.x, norm.y), min(1.0 - norm.x, 1.0 - norm.y));\n    float fade = smoothstep(0.0, uEdgeFade, edge);\n    M *= fade;\n  }\n\n  vec3 color = uColor;\n  fragColor = vec4(color, M);\n}\n`;\n\nconst MAX_CLICKS = 10;\n\nconst props = withDefaults(defineProps<PixelBlastProps>(), {\n  variant: 'square',\n  pixelSize: 3,\n  color: '#B19EEF',\n  antialias: true,\n  patternScale: 2,\n  patternDensity: 1,\n  liquid: false,\n  liquidStrength: 0.1,\n  liquidRadius: 1,\n  pixelSizeJitter: 0,\n  enableRipples: true,\n  rippleIntensityScale: 1,\n  rippleThickness: 0.1,\n  rippleSpeed: 0.3,\n  liquidWobbleSpeed: 4.5,\n  autoPauseOffscreen: true,\n  speed: 0.5,\n  transparent: true,\n  edgeFade: 0.5,\n  noiseAmount: 0\n});\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst visibilityRef = ref({ visible: true });\nconst speedRef = ref(props.speed);\n\nconst threeRef = ref<{\n  renderer: THREE.WebGLRenderer;\n  scene: THREE.Scene;\n  camera: THREE.OrthographicCamera;\n  material: THREE.ShaderMaterial;\n  clock: THREE.Clock;\n  clickIx: number;\n  uniforms: {\n    uResolution: { value: THREE.Vector2 };\n    uTime: { value: number };\n    uColor: { value: THREE.Color };\n    uClickPos: { value: THREE.Vector2[] };\n    uClickTimes: { value: Float32Array };\n    uShapeType: { value: number };\n    uPixelSize: { value: number };\n    uScale: { value: number };\n    uDensity: { value: number };\n    uPixelJitter: { value: number };\n    uEnableRipples: { value: number };\n    uRippleSpeed: { value: number };\n    uRippleThickness: { value: number };\n    uRippleIntensity: { value: number };\n    uEdgeFade: { value: number };\n  };\n  resizeObserver?: ResizeObserver;\n  raf?: number;\n  quad?: THREE.Mesh<THREE.PlaneGeometry, THREE.ShaderMaterial>;\n  timeOffset?: number;\n  composer?: EffectComposer;\n  touch?: ReturnType<typeof createTouchTexture>;\n  liquidEffect?: Effect;\n} | null>(null);\n\ninterface PixelBlastConfig {\n  antialias: boolean;\n  liquid: boolean;\n  noiseAmount: number;\n}\nconst prevConfigRef = ref<PixelBlastConfig | null>(null);\n\nlet cleanup: (() => void) | null = null;\n\nconst setup = () => {\n  const container = containerRef.value;\n  if (!container) return;\n  speedRef.value = props.speed;\n  const needsReinitKeys: (keyof PixelBlastConfig)[] = ['antialias', 'liquid', 'noiseAmount'];\n  const cfg: PixelBlastConfig = {\n    antialias: props.antialias,\n    liquid: props.liquid,\n    noiseAmount: props.noiseAmount\n  };\n  let mustReinit = false;\n  if (!threeRef.value) mustReinit = true;\n  else if (prevConfigRef.value) {\n    for (const k of needsReinitKeys)\n      if (prevConfigRef.value[k] !== cfg[k]) {\n        mustReinit = true;\n        break;\n      }\n  }\n  if (mustReinit) {\n    if (threeRef.value) {\n      const t = threeRef.value;\n      t.resizeObserver?.disconnect();\n      cancelAnimationFrame(t.raf!);\n      t.quad?.geometry.dispose();\n      t.material.dispose();\n      t.composer?.dispose();\n      t.renderer.dispose();\n      if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement);\n      threeRef.value = null;\n    }\n    const canvas = document.createElement('canvas');\n    const gl = canvas.getContext('webgl2', { antialias: props.antialias, alpha: true });\n    if (!gl) return;\n    const renderer = new THREE.WebGLRenderer({\n      canvas,\n      context: gl as WebGL2RenderingContext,\n      antialias: props.antialias,\n      alpha: true\n    });\n    renderer.domElement.style.width = '100%';\n    renderer.domElement.style.height = '100%';\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));\n    container.appendChild(renderer.domElement);\n    const uniforms = {\n      uResolution: { value: new THREE.Vector2(0, 0) },\n      uTime: { value: 0 },\n      uColor: { value: new THREE.Color(props.color) },\n      uClickPos: {\n        value: Array.from({ length: MAX_CLICKS }, () => new THREE.Vector2(-1, -1))\n      },\n      uClickTimes: { value: new Float32Array(MAX_CLICKS) },\n      uShapeType: { value: SHAPE_MAP[props.variant] ?? 0 },\n      uPixelSize: { value: props.pixelSize * renderer.getPixelRatio() },\n      uScale: { value: props.patternScale },\n      uDensity: { value: props.patternDensity },\n      uPixelJitter: { value: props.pixelSizeJitter },\n      uEnableRipples: { value: props.enableRipples ? 1 : 0 },\n      uRippleSpeed: { value: props.rippleSpeed },\n      uRippleThickness: { value: props.rippleThickness },\n      uRippleIntensity: { value: props.rippleIntensityScale },\n      uEdgeFade: { value: props.edgeFade }\n    };\n    const scene = new THREE.Scene();\n    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\n    const material = new THREE.ShaderMaterial({\n      vertexShader: VERTEX_SRC,\n      fragmentShader: FRAGMENT_SRC,\n      uniforms,\n      transparent: true,\n      glslVersion: THREE.GLSL3,\n      depthTest: false,\n      depthWrite: false\n    });\n    const quadGeom = new THREE.PlaneGeometry(2, 2);\n    const quad = new THREE.Mesh(quadGeom, material);\n    scene.add(quad);\n    const clock = new THREE.Clock();\n    const setSize = () => {\n      const w = container.clientWidth || 1;\n      const h = container.clientHeight || 1;\n      renderer.setSize(w, h, false);\n      uniforms.uResolution.value.set(renderer.domElement.width, renderer.domElement.height);\n      if (threeRef.value?.composer)\n        threeRef.value.composer.setSize(renderer.domElement.width, renderer.domElement.height);\n      uniforms.uPixelSize.value = props.pixelSize * renderer.getPixelRatio();\n    };\n    setSize();\n    const ro = new ResizeObserver(setSize);\n    ro.observe(container);\n    const randomFloat = () => {\n      if (typeof window !== 'undefined' && window.crypto?.getRandomValues) {\n        const u32 = new Uint32Array(1);\n        window.crypto.getRandomValues(u32);\n        return u32[0] / 0xffffffff;\n      }\n      return Math.random();\n    };\n    const timeOffset = randomFloat() * 1000;\n    let composer: EffectComposer | undefined;\n    let touch: ReturnType<typeof createTouchTexture> | undefined;\n    let liquidEffect: Effect | undefined;\n    if (props.liquid) {\n      touch = createTouchTexture();\n      touch.radiusScale = props.liquidRadius;\n      composer = new EffectComposer(renderer);\n      const renderPass = new RenderPass(scene, camera);\n      liquidEffect = createLiquidEffect(touch.texture, {\n        strength: props.liquidStrength,\n        freq: props.liquidWobbleSpeed\n      });\n      const effectPass = new EffectPass(camera, liquidEffect);\n      effectPass.renderToScreen = true;\n      composer.addPass(renderPass);\n      composer.addPass(effectPass);\n    }\n    if (props.noiseAmount > 0) {\n      if (!composer) {\n        composer = new EffectComposer(renderer);\n        composer.addPass(new RenderPass(scene, camera));\n      }\n      const noiseEffect = new Effect(\n        'NoiseEffect',\n        `uniform float uTime; uniform float uAmount; float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453);} void mainUv(inout vec2 uv){} void mainImage(const in vec4 inputColor,const in vec2 uv,out vec4 outputColor){ float n=hash(floor(uv*vec2(1920.0,1080.0))+floor(uTime*60.0)); float g=(n-0.5)*uAmount; outputColor=inputColor+vec4(vec3(g),0.0);} `,\n        {\n          uniforms: new Map<string, THREE.Uniform>([\n            ['uTime', new THREE.Uniform(0)],\n            ['uAmount', new THREE.Uniform(props.noiseAmount)]\n          ])\n        }\n      );\n      const noisePass = new EffectPass(camera, noiseEffect);\n      noisePass.renderToScreen = true;\n      if (composer && composer.passes.length > 0)\n        composer.passes.forEach(p => {\n          // EffectPass has renderToScreen; ensure we turn it off before adding a new final pass\n          if ('renderToScreen' in p) (p as { renderToScreen?: boolean }).renderToScreen = false;\n        });\n      composer.addPass(noisePass);\n    }\n    if (composer) composer.setSize(renderer.domElement.width, renderer.domElement.height);\n    const mapToPixels = (e: PointerEvent) => {\n      const rect = renderer.domElement.getBoundingClientRect();\n      const scaleX = renderer.domElement.width / rect.width;\n      const scaleY = renderer.domElement.height / rect.height;\n      const fx = (e.clientX - rect.left) * scaleX;\n      const fy = (rect.height - (e.clientY - rect.top)) * scaleY;\n      return {\n        fx,\n        fy,\n        w: renderer.domElement.width,\n        h: renderer.domElement.height\n      };\n    };\n    const onPointerDown = (e: PointerEvent) => {\n      const { fx, fy } = mapToPixels(e);\n      const ix = threeRef.value?.clickIx ?? 0;\n      uniforms.uClickPos.value[ix].set(fx, fy);\n      uniforms.uClickTimes.value[ix] = uniforms.uTime.value;\n      if (threeRef.value) threeRef.value.clickIx = (ix + 1) % MAX_CLICKS;\n    };\n    const onPointerMove = (e: PointerEvent) => {\n      if (!touch) return;\n      const { fx, fy, w, h } = mapToPixels(e);\n      touch.addTouch({ x: fx / w, y: fy / h });\n    };\n    renderer.domElement.addEventListener('pointerdown', onPointerDown, {\n      passive: true\n    });\n    renderer.domElement.addEventListener('pointermove', onPointerMove, {\n      passive: true\n    });\n    let raf = 0;\n    const animate = () => {\n      if (props.autoPauseOffscreen && !visibilityRef.value.visible) {\n        raf = requestAnimationFrame(animate);\n        return;\n      }\n      uniforms.uTime.value = timeOffset + clock.getElapsedTime() * speedRef.value;\n      if (liquidEffect) liquidEffect.uniforms.get('uTime')!.value = uniforms.uTime.value;\n      if (composer) {\n        if (touch) touch.update();\n        composer.passes.forEach(p => {\n          if (p instanceof EffectPass) {\n            const effs = (p as unknown as { effects?: Effect[] }).effects;\n            effs?.forEach(eff => {\n              const u = eff.uniforms.get('uTime');\n              if (u) u.value = uniforms.uTime.value;\n            });\n          }\n        });\n        composer.render();\n      } else renderer.render(scene, camera);\n      raf = requestAnimationFrame(animate);\n    };\n    raf = requestAnimationFrame(animate);\n    threeRef.value = {\n      renderer,\n      scene,\n      camera,\n      material,\n      clock,\n      clickIx: 0,\n      uniforms,\n      resizeObserver: ro,\n      raf,\n      quad,\n      timeOffset,\n      composer,\n      touch,\n      liquidEffect\n    };\n  } else {\n    const t = threeRef.value!;\n    t.uniforms.uShapeType.value = SHAPE_MAP[props.variant] ?? 0;\n    t.uniforms.uPixelSize.value = props.pixelSize * t.renderer.getPixelRatio();\n    t.uniforms.uColor.value.set(props.color);\n    t.uniforms.uScale.value = props.patternScale;\n    t.uniforms.uDensity.value = props.patternDensity;\n    t.uniforms.uPixelJitter.value = props.pixelSizeJitter;\n    t.uniforms.uEnableRipples.value = props.enableRipples ? 1 : 0;\n    t.uniforms.uRippleIntensity.value = props.rippleIntensityScale;\n    t.uniforms.uRippleThickness.value = props.rippleThickness;\n    t.uniforms.uRippleSpeed.value = props.rippleSpeed;\n    t.uniforms.uEdgeFade.value = props.edgeFade;\n    if (props.transparent) t.renderer.setClearAlpha(0);\n    else t.renderer.setClearColor(0x000000, 1);\n    if (t.liquidEffect) {\n      const uStrength = t.liquidEffect?.uniforms.get('uStrength');\n      if (uStrength) uStrength.value = props.liquidStrength;\n      const uFreq = t.liquidEffect?.uniforms.get('uFreq');\n      if (uFreq) uFreq.value = props.liquidWobbleSpeed;\n    }\n    if (t.touch) t.touch.radiusScale = props.liquidRadius;\n  }\n  prevConfigRef.value = cfg;\n\n  cleanup = () => {\n    if (threeRef.value && mustReinit) return;\n    if (!threeRef.value) return;\n    const t = threeRef.value;\n    t.resizeObserver?.disconnect();\n    cancelAnimationFrame(t.raf!);\n    t.quad?.geometry.dispose();\n    t.material.dispose();\n    t.composer?.dispose();\n    t.renderer.dispose();\n    if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement);\n    threeRef.value = null;\n  };\n};\n\nonMounted(() => {\n  setup();\n});\n\nonBeforeUnmount(() => {\n  cleanup?.();\n});\n\nwatch(\n  props,\n  () => {\n    cleanup?.();\n    setup();\n  },\n  { deep: true }\n);\n</script>\n","path":"PixelBlast/PixelBlast.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"postprocessing","version":"^6.37.6"},{"ecosystem":"js","name":"three","version":"^0.178.0"}],"devDependencies":[],"categories":["Backgrounds"]}
\ No newline at end of file
+{"name":"PixelBlast","title":"PixelBlast","description":"Exploding pixel particle bursts with optional liquid postprocessing.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div\n    ref=\"containerRef\"\n    :class=\"['w-full h-full relative overflow-hidden', className]\"\n    :style=\"style\"\n    aria-label=\"PixelBlast interactive background\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { Effect, EffectComposer, EffectPass, RenderPass } from 'postprocessing';\nimport * as THREE from 'three';\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef, watch, type CSSProperties } from 'vue';\n\nexport type PixelBlastVariant = 'square' | 'circle' | 'triangle' | 'diamond';\n\ntype PixelBlastProps = {\n  variant?: PixelBlastVariant;\n  pixelSize?: number;\n  color?: string;\n  className?: string;\n  style?: CSSProperties;\n  antialias?: boolean;\n  patternScale?: number;\n  patternDensity?: number;\n  liquid?: boolean;\n  liquidStrength?: number;\n  liquidRadius?: number;\n  pixelSizeJitter?: number;\n  enableRipples?: boolean;\n  rippleIntensityScale?: number;\n  rippleThickness?: number;\n  rippleSpeed?: number;\n  liquidWobbleSpeed?: number;\n  autoPauseOffscreen?: boolean;\n  speed?: number;\n  transparent?: boolean;\n  edgeFade?: number;\n  noiseAmount?: number;\n};\n\nconst createTouchTexture = () => {\n  const size = 64;\n  const canvas = document.createElement('canvas');\n  canvas.width = size;\n  canvas.height = size;\n  const ctx = canvas.getContext('2d');\n  if (!ctx) throw new Error('2D context not available');\n  ctx.fillStyle = 'black';\n  ctx.fillRect(0, 0, canvas.width, canvas.height);\n  const texture = new THREE.Texture(canvas);\n  texture.minFilter = THREE.LinearFilter;\n  texture.magFilter = THREE.LinearFilter;\n  texture.generateMipmaps = false;\n  const trail: {\n    x: number;\n    y: number;\n    vx: number;\n    vy: number;\n    force: number;\n    age: number;\n  }[] = [];\n  let last: { x: number; y: number } | null = null;\n  const maxAge = 64;\n  let radius = 0.1 * size;\n  const speed = 1 / maxAge;\n  const clear = () => {\n    ctx.fillStyle = 'black';\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n  };\n  const drawPoint = (p: { x: number; y: number; vx: number; vy: number; force: number; age: number }) => {\n    const pos = { x: p.x * size, y: (1 - p.y) * size };\n    let intensity = 1;\n    const easeOutSine = (t: number) => Math.sin((t * Math.PI) / 2);\n    const easeOutQuad = (t: number) => -t * (t - 2);\n    if (p.age < maxAge * 0.3) intensity = easeOutSine(p.age / (maxAge * 0.3));\n    else intensity = easeOutQuad(1 - (p.age - maxAge * 0.3) / (maxAge * 0.7)) || 0;\n    intensity *= p.force;\n    const color = `${((p.vx + 1) / 2) * 255}, ${((p.vy + 1) / 2) * 255}, ${intensity * 255}`;\n    const offset = size * 5;\n    ctx.shadowOffsetX = offset;\n    ctx.shadowOffsetY = offset;\n    ctx.shadowBlur = radius;\n    ctx.shadowColor = `rgba(${color},${0.22 * intensity})`;\n    ctx.beginPath();\n    ctx.fillStyle = 'rgba(255,0,0,1)';\n    ctx.arc(pos.x - offset, pos.y - offset, radius, 0, Math.PI * 2);\n    ctx.fill();\n  };\n  const addTouch = (norm: { x: number; y: number }) => {\n    let force = 0;\n    let vx = 0;\n    let vy = 0;\n    if (last) {\n      const dx = norm.x - last.x;\n      const dy = norm.y - last.y;\n      if (dx === 0 && dy === 0) return;\n      const dd = dx * dx + dy * dy;\n      const d = Math.sqrt(dd);\n      vx = dx / (d || 1);\n      vy = dy / (d || 1);\n      force = Math.min(dd * 10000, 1);\n    }\n    last = { x: norm.x, y: norm.y };\n    trail.push({ x: norm.x, y: norm.y, age: 0, force, vx, vy });\n  };\n  const update = () => {\n    clear();\n    for (let i = trail.length - 1; i >= 0; i--) {\n      const point = trail[i];\n      const f = point.force * speed * (1 - point.age / maxAge);\n      point.x += point.vx * f;\n      point.y += point.vy * f;\n      point.age++;\n      if (point.age > maxAge) trail.splice(i, 1);\n    }\n    for (let i = 0; i < trail.length; i++) drawPoint(trail[i]);\n    texture.needsUpdate = true;\n  };\n  return {\n    canvas,\n    texture,\n    addTouch,\n    update,\n    set radiusScale(v: number) {\n      radius = 0.1 * size * v;\n    },\n    get radiusScale() {\n      return radius / (0.1 * size);\n    },\n    size\n  };\n};\n\nconst createLiquidEffect = (texture: THREE.Texture, opts?: { strength?: number; freq?: number }) => {\n  const fragment = `\n    uniform sampler2D uTexture;\n    uniform float uStrength;\n    uniform float uTime;\n    uniform float uFreq;\n\n    void mainUv(inout vec2 uv) {\n      vec4 tex = texture2D(uTexture, uv);\n      float vx = tex.r * 2.0 - 1.0;\n      float vy = tex.g * 2.0 - 1.0;\n      float intensity = tex.b;\n\n      float wave = 0.5 + 0.5 * sin(uTime * uFreq + intensity * 6.2831853);\n\n      float amt = uStrength * intensity * wave;\n\n      uv += vec2(vx, vy) * amt;\n    }\n    `;\n  return new Effect('LiquidEffect', fragment, {\n    uniforms: new Map<string, THREE.Uniform>([\n      ['uTexture', new THREE.Uniform(texture)],\n      ['uStrength', new THREE.Uniform(opts?.strength ?? 0.025)],\n      ['uTime', new THREE.Uniform(0)],\n      ['uFreq', new THREE.Uniform(opts?.freq ?? 4.5)]\n    ])\n  });\n};\n\nconst SHAPE_MAP: Record<PixelBlastVariant, number> = {\n  square: 0,\n  circle: 1,\n  triangle: 2,\n  diamond: 3\n};\n\nconst VERTEX_SRC = `\nvoid main() {\n  gl_Position = vec4(position, 1.0);\n}\n`;\n\nconst FRAGMENT_SRC = `\nprecision highp float;\n\nuniform vec3  uColor;\nuniform vec2  uResolution;\nuniform float uTime;\nuniform float uPixelSize;\nuniform float uScale;\nuniform float uDensity;\nuniform float uPixelJitter;\nuniform int   uEnableRipples;\nuniform float uRippleSpeed;\nuniform float uRippleThickness;\nuniform float uRippleIntensity;\nuniform float uEdgeFade;\n\nuniform int   uShapeType;\nconst int SHAPE_SQUARE   = 0;\nconst int SHAPE_CIRCLE   = 1;\nconst int SHAPE_TRIANGLE = 2;\nconst int SHAPE_DIAMOND  = 3;\n\nconst int   MAX_CLICKS = 10;\n\nuniform vec2  uClickPos  [MAX_CLICKS];\nuniform float uClickTimes[MAX_CLICKS];\n\nout vec4 fragColor;\n\nfloat Bayer2(vec2 a) {\n  a = floor(a);\n  return fract(a.x / 2. + a.y * a.y * .75);\n}\n#define Bayer4(a) (Bayer2(.5*(a))*0.25 + Bayer2(a))\n#define Bayer8(a) (Bayer4(.5*(a))*0.25 + Bayer2(a))\n\n#define FBM_OCTAVES     5\n#define FBM_LACUNARITY  1.25\n#define FBM_GAIN        1.0\n\nfloat hash11(float n){ return fract(sin(n)*43758.5453); }\n\nfloat vnoise(vec3 p){\n  vec3 ip = floor(p);\n  vec3 fp = fract(p);\n  float n000 = hash11(dot(ip + vec3(0.0,0.0,0.0), vec3(1.0,57.0,113.0)));\n  float n100 = hash11(dot(ip + vec3(1.0,0.0,0.0), vec3(1.0,57.0,113.0)));\n  float n010 = hash11(dot(ip + vec3(0.0,1.0,0.0), vec3(1.0,57.0,113.0)));\n  float n110 = hash11(dot(ip + vec3(1.0,1.0,0.0), vec3(1.0,57.0,113.0)));\n  float n001 = hash11(dot(ip + vec3(0.0,0.0,1.0), vec3(1.0,57.0,113.0)));\n  float n101 = hash11(dot(ip + vec3(1.0,0.0,1.0), vec3(1.0,57.0,113.0)));\n  float n011 = hash11(dot(ip + vec3(0.0,1.0,1.0), vec3(1.0,57.0,113.0)));\n  float n111 = hash11(dot(ip + vec3(1.0,1.0,1.0), vec3(1.0,57.0,113.0)));\n  vec3 w = fp*fp*fp*(fp*(fp*6.0-15.0)+10.0);\n  float x00 = mix(n000, n100, w.x);\n  float x10 = mix(n010, n110, w.x);\n  float x01 = mix(n001, n101, w.x);\n  float x11 = mix(n011, n111, w.x);\n  float y0  = mix(x00, x10, w.y);\n  float y1  = mix(x01, x11, w.y);\n  return mix(y0, y1, w.z) * 2.0 - 1.0;\n}\n\nfloat fbm2(vec2 uv, float t){\n  vec3 p = vec3(uv * uScale, t);\n  float amp = 1.0;\n  float freq = 1.0;\n  float sum = 1.0;\n  for (int i = 0; i < FBM_OCTAVES; ++i){\n    sum  += amp * vnoise(p * freq);\n    freq *= FBM_LACUNARITY;\n    amp  *= FBM_GAIN;\n  }\n  return sum * 0.5 + 0.5;\n}\n\nfloat maskCircle(vec2 p, float cov){\n  float r = sqrt(cov) * .25;\n  float d = length(p - 0.5) - r;\n  float aa = 0.5 * fwidth(d);\n  return cov * (1.0 - smoothstep(-aa, aa, d * 2.0));\n}\n\nfloat maskTriangle(vec2 p, vec2 id, float cov){\n  bool flip = mod(id.x + id.y, 2.0) > 0.5;\n  if (flip) p.x = 1.0 - p.x;\n  float r = sqrt(cov);\n  float d  = p.y - r*(1.0 - p.x);\n  float aa = fwidth(d);\n  return cov * clamp(0.5 - d/aa, 0.0, 1.0);\n}\n\nfloat maskDiamond(vec2 p, float cov){\n  float r = sqrt(cov) * 0.564;\n  return step(abs(p.x - 0.49) + abs(p.y - 0.49), r);\n}\n\nvoid main(){\n  float pixelSize = uPixelSize;\n  vec2 fragCoord = gl_FragCoord.xy - uResolution * .5;\n  float aspectRatio = uResolution.x / uResolution.y;\n\n  vec2 pixelId = floor(fragCoord / pixelSize);\n  vec2 pixelUV = fract(fragCoord / pixelSize);\n\n  float cellPixelSize = 8.0 * pixelSize;\n  vec2 cellId = floor(fragCoord / cellPixelSize);\n  vec2 cellCoord = cellId * cellPixelSize;\n  vec2 uv = cellCoord / uResolution * vec2(aspectRatio, 1.0);\n\n  float base = fbm2(uv, uTime * 0.05);\n  base = base * 0.5 - 0.65;\n\n  float feed = base + (uDensity - 0.5) * 0.3;\n\n  float speed     = uRippleSpeed;\n  float thickness = uRippleThickness;\n  const float dampT     = 1.0;\n  const float dampR     = 10.0;\n\n  if (uEnableRipples == 1) {\n    for (int i = 0; i < MAX_CLICKS; ++i){\n      vec2 pos = uClickPos[i];\n      if (pos.x < 0.0) continue;\n      float cellPixelSize = 8.0 * pixelSize;\n      vec2 cuv = (((pos - uResolution * .5 - cellPixelSize * .5) / (uResolution))) * vec2(aspectRatio, 1.0);\n      float t = max(uTime - uClickTimes[i], 0.0);\n      float r = distance(uv, cuv);\n      float waveR = speed * t;\n      float ring  = exp(-pow((r - waveR) / thickness, 2.0));\n      float atten = exp(-dampT * t) * exp(-dampR * r);\n      feed = max(feed, ring * atten * uRippleIntensity);\n    }\n  }\n\n  float bayer = Bayer8(fragCoord / uPixelSize) - 0.5;\n  float bw = step(0.5, feed + bayer);\n\n  float h = fract(sin(dot(floor(fragCoord / uPixelSize), vec2(127.1, 311.7))) * 43758.5453);\n  float jitterScale = 1.0 + (h - 0.5) * uPixelJitter;\n  float coverage = bw * jitterScale;\n  float M;\n  if      (uShapeType == SHAPE_CIRCLE)   M = maskCircle (pixelUV, coverage);\n  else if (uShapeType == SHAPE_TRIANGLE) M = maskTriangle(pixelUV, pixelId, coverage);\n  else if (uShapeType == SHAPE_DIAMOND)  M = maskDiamond(pixelUV, coverage);\n  else                                   M = coverage;\n\n  if (uEdgeFade > 0.0) {\n    vec2 norm = gl_FragCoord.xy / uResolution;\n    float edge = min(min(norm.x, norm.y), min(1.0 - norm.x, 1.0 - norm.y));\n    float fade = smoothstep(0.0, uEdgeFade, edge);\n    M *= fade;\n  }\n\n  vec3 color = uColor;\n  fragColor = vec4(color, M);\n}\n`;\n\nconst MAX_CLICKS = 10;\n\nconst props = withDefaults(defineProps<PixelBlastProps>(), {\n  variant: 'square',\n  pixelSize: 3,\n  color: '#B19EEF',\n  antialias: true,\n  patternScale: 2,\n  patternDensity: 1,\n  liquid: false,\n  liquidStrength: 0.1,\n  liquidRadius: 1,\n  pixelSizeJitter: 0,\n  enableRipples: true,\n  rippleIntensityScale: 1,\n  rippleThickness: 0.1,\n  rippleSpeed: 0.3,\n  liquidWobbleSpeed: 4.5,\n  autoPauseOffscreen: true,\n  speed: 0.5,\n  transparent: true,\n  edgeFade: 0.5,\n  noiseAmount: 0\n});\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst visibilityRef = ref({ visible: true });\nconst speedRef = ref(props.speed);\n\nconst threeRef = ref<{\n  renderer: THREE.WebGLRenderer;\n  scene: THREE.Scene;\n  camera: THREE.OrthographicCamera;\n  material: THREE.ShaderMaterial;\n  clock: THREE.Clock;\n  clickIx: number;\n  uniforms: {\n    uResolution: { value: THREE.Vector2 };\n    uTime: { value: number };\n    uColor: { value: THREE.Color };\n    uClickPos: { value: THREE.Vector2[] };\n    uClickTimes: { value: Float32Array };\n    uShapeType: { value: number };\n    uPixelSize: { value: number };\n    uScale: { value: number };\n    uDensity: { value: number };\n    uPixelJitter: { value: number };\n    uEnableRipples: { value: number };\n    uRippleSpeed: { value: number };\n    uRippleThickness: { value: number };\n    uRippleIntensity: { value: number };\n    uEdgeFade: { value: number };\n  };\n  resizeObserver?: ResizeObserver;\n  raf?: number;\n  quad?: THREE.Mesh<THREE.PlaneGeometry, THREE.ShaderMaterial>;\n  timeOffset?: number;\n  composer?: EffectComposer;\n  touch?: ReturnType<typeof createTouchTexture>;\n  liquidEffect?: Effect;\n} | null>(null);\n\ninterface PixelBlastConfig {\n  antialias: boolean;\n  liquid: boolean;\n  noiseAmount: number;\n}\nconst prevConfigRef = ref<PixelBlastConfig | null>(null);\n\nlet cleanup: (() => void) | null = null;\n\nconst setup = () => {\n  const container = containerRef.value;\n  if (!container) return;\n  speedRef.value = props.speed;\n  const needsReinitKeys: (keyof PixelBlastConfig)[] = ['antialias', 'liquid', 'noiseAmount'];\n  const cfg: PixelBlastConfig = {\n    antialias: props.antialias,\n    liquid: props.liquid,\n    noiseAmount: props.noiseAmount\n  };\n  let mustReinit = false;\n  if (!threeRef.value) mustReinit = true;\n  else if (prevConfigRef.value) {\n    for (const k of needsReinitKeys)\n      if (prevConfigRef.value[k] !== cfg[k]) {\n        mustReinit = true;\n        break;\n      }\n  }\n  if (mustReinit) {\n    if (threeRef.value) {\n      const t = threeRef.value;\n      t.resizeObserver?.disconnect();\n      cancelAnimationFrame(t.raf!);\n      t.quad?.geometry.dispose();\n      t.material.dispose();\n      t.composer?.dispose();\n      t.renderer.dispose();\n      if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement);\n      threeRef.value = null;\n    }\n    const canvas = document.createElement('canvas');\n    const gl = canvas.getContext('webgl2', { antialias: props.antialias, alpha: true });\n    if (!gl) return;\n\n    const renderer = new THREE.WebGLRenderer({\n      canvas,\n      antialias: props.antialias,\n      alpha: true\n    });\n\n    renderer.domElement.style.width = '100%';\n    renderer.domElement.style.height = '100%';\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));\n    container.appendChild(renderer.domElement);\n    const uniforms = {\n      uResolution: { value: new THREE.Vector2(0, 0) },\n      uTime: { value: 0 },\n      uColor: { value: new THREE.Color(props.color) },\n      uClickPos: {\n        value: Array.from({ length: MAX_CLICKS }, () => new THREE.Vector2(-1, -1))\n      },\n      uClickTimes: { value: new Float32Array(MAX_CLICKS) },\n      uShapeType: { value: SHAPE_MAP[props.variant] ?? 0 },\n      uPixelSize: { value: props.pixelSize * renderer.getPixelRatio() },\n      uScale: { value: props.patternScale },\n      uDensity: { value: props.patternDensity },\n      uPixelJitter: { value: props.pixelSizeJitter },\n      uEnableRipples: { value: props.enableRipples ? 1 : 0 },\n      uRippleSpeed: { value: props.rippleSpeed },\n      uRippleThickness: { value: props.rippleThickness },\n      uRippleIntensity: { value: props.rippleIntensityScale },\n      uEdgeFade: { value: props.edgeFade }\n    };\n    const scene = new THREE.Scene();\n    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\n    const material = new THREE.ShaderMaterial({\n      vertexShader: VERTEX_SRC,\n      fragmentShader: FRAGMENT_SRC,\n      uniforms,\n      transparent: true,\n      glslVersion: THREE.GLSL3,\n      depthTest: false,\n      depthWrite: false\n    });\n    const quadGeom = new THREE.PlaneGeometry(2, 2);\n    const quad = new THREE.Mesh(quadGeom, material);\n    scene.add(quad);\n    const clock = new THREE.Clock();\n    const setSize = () => {\n      const w = container.clientWidth || 1;\n      const h = container.clientHeight || 1;\n      renderer.setSize(w, h, false);\n      uniforms.uResolution.value.set(renderer.domElement.width, renderer.domElement.height);\n      if (threeRef.value?.composer)\n        threeRef.value.composer.setSize(renderer.domElement.width, renderer.domElement.height);\n      uniforms.uPixelSize.value = props.pixelSize * renderer.getPixelRatio();\n    };\n    setSize();\n    const ro = new ResizeObserver(setSize);\n    ro.observe(container);\n    const randomFloat = () => {\n      if (typeof window !== 'undefined' && window.crypto?.getRandomValues) {\n        const u32 = new Uint32Array(1);\n        window.crypto.getRandomValues(u32);\n        return u32[0] / 0xffffffff;\n      }\n      return Math.random();\n    };\n    const timeOffset = randomFloat() * 1000;\n    let composer: EffectComposer | undefined;\n    let touch: ReturnType<typeof createTouchTexture> | undefined;\n    let liquidEffect: Effect | undefined;\n    if (props.liquid) {\n      touch = createTouchTexture();\n      touch.radiusScale = props.liquidRadius;\n      composer = new EffectComposer(renderer);\n      const renderPass = new RenderPass(scene, camera);\n      liquidEffect = createLiquidEffect(touch.texture, {\n        strength: props.liquidStrength,\n        freq: props.liquidWobbleSpeed\n      });\n      const effectPass = new EffectPass(camera, liquidEffect);\n      effectPass.renderToScreen = true;\n      composer.addPass(renderPass);\n      composer.addPass(effectPass);\n    }\n    if (props.noiseAmount > 0) {\n      if (!composer) {\n        composer = new EffectComposer(renderer);\n        composer.addPass(new RenderPass(scene, camera));\n      }\n      const noiseEffect = new Effect(\n        'NoiseEffect',\n        `uniform float uTime; uniform float uAmount; float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7))) * 43758.5453);} void mainUv(inout vec2 uv){} void mainImage(const in vec4 inputColor,const in vec2 uv,out vec4 outputColor){ float n=hash(floor(uv*vec2(1920.0,1080.0))+floor(uTime*60.0)); float g=(n-0.5)*uAmount; outputColor=inputColor+vec4(vec3(g),0.0);} `,\n        {\n          uniforms: new Map<string, THREE.Uniform>([\n            ['uTime', new THREE.Uniform(0)],\n            ['uAmount', new THREE.Uniform(props.noiseAmount)]\n          ])\n        }\n      );\n      const noisePass = new EffectPass(camera, noiseEffect);\n      noisePass.renderToScreen = true;\n      if (composer && composer.passes.length > 0)\n        composer.passes.forEach(p => {\n          // EffectPass has renderToScreen; ensure we turn it off before adding a new final pass\n          if ('renderToScreen' in p) (p as { renderToScreen?: boolean }).renderToScreen = false;\n        });\n      composer.addPass(noisePass);\n    }\n    if (composer) composer.setSize(renderer.domElement.width, renderer.domElement.height);\n    const mapToPixels = (e: PointerEvent) => {\n      const rect = renderer.domElement.getBoundingClientRect();\n      const scaleX = renderer.domElement.width / rect.width;\n      const scaleY = renderer.domElement.height / rect.height;\n      const fx = (e.clientX - rect.left) * scaleX;\n      const fy = (rect.height - (e.clientY - rect.top)) * scaleY;\n      return {\n        fx,\n        fy,\n        w: renderer.domElement.width,\n        h: renderer.domElement.height\n      };\n    };\n    const onPointerDown = (e: PointerEvent) => {\n      const { fx, fy } = mapToPixels(e);\n      const ix = threeRef.value?.clickIx ?? 0;\n      uniforms.uClickPos.value[ix].set(fx, fy);\n      uniforms.uClickTimes.value[ix] = uniforms.uTime.value;\n      if (threeRef.value) threeRef.value.clickIx = (ix + 1) % MAX_CLICKS;\n    };\n    const onPointerMove = (e: PointerEvent) => {\n      if (!touch) return;\n      const { fx, fy, w, h } = mapToPixels(e);\n      touch.addTouch({ x: fx / w, y: fy / h });\n    };\n    renderer.domElement.addEventListener('pointerdown', onPointerDown, {\n      passive: true\n    });\n    renderer.domElement.addEventListener('pointermove', onPointerMove, {\n      passive: true\n    });\n    let raf = 0;\n    const animate = () => {\n      if (props.autoPauseOffscreen && !visibilityRef.value.visible) {\n        raf = requestAnimationFrame(animate);\n        return;\n      }\n      uniforms.uTime.value = timeOffset + clock.getElapsedTime() * speedRef.value;\n      if (liquidEffect) liquidEffect.uniforms.get('uTime')!.value = uniforms.uTime.value;\n      if (composer) {\n        if (touch) touch.update();\n        composer.passes.forEach(p => {\n          if (p instanceof EffectPass) {\n            const effs = (p as unknown as { effects?: Effect[] }).effects;\n            effs?.forEach(eff => {\n              const u = eff.uniforms.get('uTime');\n              if (u) u.value = uniforms.uTime.value;\n            });\n          }\n        });\n        composer.render();\n      } else renderer.render(scene, camera);\n      raf = requestAnimationFrame(animate);\n    };\n    raf = requestAnimationFrame(animate);\n    threeRef.value = {\n      renderer,\n      scene,\n      camera,\n      material,\n      clock,\n      clickIx: 0,\n      uniforms,\n      resizeObserver: ro,\n      raf,\n      quad,\n      timeOffset,\n      composer,\n      touch,\n      liquidEffect\n    };\n  } else {\n    const t = threeRef.value!;\n    t.uniforms.uShapeType.value = SHAPE_MAP[props.variant] ?? 0;\n    t.uniforms.uPixelSize.value = props.pixelSize * t.renderer.getPixelRatio();\n    t.uniforms.uColor.value.set(props.color);\n    t.uniforms.uScale.value = props.patternScale;\n    t.uniforms.uDensity.value = props.patternDensity;\n    t.uniforms.uPixelJitter.value = props.pixelSizeJitter;\n    t.uniforms.uEnableRipples.value = props.enableRipples ? 1 : 0;\n    t.uniforms.uRippleIntensity.value = props.rippleIntensityScale;\n    t.uniforms.uRippleThickness.value = props.rippleThickness;\n    t.uniforms.uRippleSpeed.value = props.rippleSpeed;\n    t.uniforms.uEdgeFade.value = props.edgeFade;\n    if (props.transparent) t.renderer.setClearAlpha(0);\n    else t.renderer.setClearColor(0x000000, 1);\n    if (t.liquidEffect) {\n      const uStrength = t.liquidEffect?.uniforms.get('uStrength');\n      if (uStrength) uStrength.value = props.liquidStrength;\n      const uFreq = t.liquidEffect?.uniforms.get('uFreq');\n      if (uFreq) uFreq.value = props.liquidWobbleSpeed;\n    }\n    if (t.touch) t.touch.radiusScale = props.liquidRadius;\n  }\n  prevConfigRef.value = cfg;\n\n  cleanup = () => {\n    if (threeRef.value && mustReinit) return;\n    if (!threeRef.value) return;\n    const t = threeRef.value;\n    t.resizeObserver?.disconnect();\n    cancelAnimationFrame(t.raf!);\n    t.quad?.geometry.dispose();\n    t.material.dispose();\n    t.composer?.dispose();\n    t.renderer.dispose();\n    if (t.renderer.domElement.parentElement === container) container.removeChild(t.renderer.domElement);\n    threeRef.value = null;\n  };\n};\n\nonMounted(() => {\n  setup();\n});\n\nonBeforeUnmount(() => {\n  cleanup?.();\n});\n\nwatch(\n  props,\n  () => {\n    cleanup?.();\n    setup();\n  },\n  { deep: true }\n);\n</script>\n","path":"PixelBlast/PixelBlast.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"postprocessing","version":"^6.37.6"},{"ecosystem":"js","name":"three","version":"^0.178.0"}],"devDependencies":[],"categories":["Backgrounds"]}
\ No newline at end of file
diff --git a/public/r/PixelSnow.json b/public/r/PixelSnow.json
new file mode 100644
index 0000000..025a875
--- /dev/null
+++ b/public/r/PixelSnow.json
@@ -0,0 +1 @@
+{"name":"PixelSnow","title":"PixelSnow","description":"Falling pixelated snow effect with customizable density and speed.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport {\n  Color,\n  Mesh,\n  OrthographicCamera,\n  PlaneGeometry,\n  Scene,\n  ShaderMaterial,\n  Vector2,\n  Vector3,\n  WebGLRenderer\n} from 'three';\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef, watch, type CSSProperties } from 'vue';\n\nconst vertexShader = `\nvoid main() {\n  gl_Position = vec4(position, 1.0);\n}\n`;\n\nconst fragmentShader = `\nprecision highp float;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform float uFlakeSize;\nuniform float uMinFlakeSize;\nuniform float uPixelResolution;\nuniform float uSpeed;\nuniform float uDepthFade;\nuniform float uFarPlane;\nuniform vec3 uColor;\nuniform float uBrightness;\nuniform float uGamma;\nuniform float uDensity;\nuniform float uVariant;\nuniform float uDirection;\n\n#define M1 1597334677U\n#define M2 3812015801U\n#define M3 3299493293U\n#define F0 (1.0/float(0xffffffffU))\n#define hash(n) n*(n^(n>>15))\n#define coord3(p) (uvec3(p).x*M1^uvec3(p).y*M2^uvec3(p).z*M3)\n\nvec3 hash3(uint n) {\n  return vec3(hash(n) * uvec3(0x1U, 0x1ffU, 0x3ffffU)) * F0;\n}\n\nfloat snowflakeDist(vec2 p) {\n  float r = length(p);\n  float a = atan(p.y, p.x);\n  float PI = 3.14159265;\n  a = abs(mod(a + PI / 6.0, PI / 3.0) - PI / 6.0);\n  vec2 q = r * vec2(cos(a), sin(a));\n  float dMain = abs(q.y);\n  dMain = max(dMain, max(-q.x, q.x - 1.0));\n  vec2 b1s = vec2(0.4, 0.0);\n  vec2 b1d = vec2(0.574, 0.819);\n  float b1t = clamp(dot(q - b1s, b1d), 0.0, 0.4);\n  float dB1 = length(q - b1s - b1t * b1d);\n  vec2 b2s = vec2(0.7, 0.0);\n  float b2t = clamp(dot(q - b2s, b1d), 0.0, 0.25);\n  float dB2 = length(q - b2s - b2t * b1d);\n  return min(dMain, min(dB1, dB2)) * 10.0;\n}\n\nvoid main() {\n  float pixelSize = max(1.0, floor(0.5 + uResolution.x / uPixelResolution));\n  vec2 fragCoord = floor(gl_FragCoord.xy / pixelSize);\n  vec2 res = uResolution / pixelSize;\n\n  vec3 ray = normalize(vec3((fragCoord - res * 0.5) / res.x, 1.0));\n\n  vec3 camK = normalize(vec3(1.0, 1.0, 1.0));\n  vec3 camI = normalize(vec3(1.0, 0.0, -1.0));\n  vec3 camJ = cross(camK, camI);\n  ray = ray.x * camI + ray.y * camJ + ray.z * camK;\n\n  float windX = cos(uDirection) * 0.4;\n  float windY = sin(uDirection) * 0.4;\n  vec3 camPos = (windX * camI + windY * camJ + 0.1 * camK) * uTime * uSpeed;\n  vec3 pos = camPos;\n\n  vec3 strides = 1.0 / max(abs(ray), vec3(0.001));\n  vec3 phase = fract(pos) * strides;\n  phase = mix(strides - phase, phase, step(ray, vec3(0.0)));\n\n  float t = 0.0;\n  for (int i = 0; i < 256; i++) {\n    if (t >= uFarPlane) break;\n    vec3 fpos = floor(pos);\n    float cellHash = hash3(coord3(fpos)).x;\n\n    if (cellHash < uDensity) {\n      vec3 h = hash3(coord3(fpos));\n      vec3 flakePos = 0.5 - 0.5 * cos(\n        4.0 * sin(fpos.yzx * 0.073) +\n        4.0 * sin(fpos.zxy * 0.27) +\n        2.0 * h +\n        uTime * uSpeed * 0.1 * vec3(7.0, 8.0, 5.0)\n      );\n      flakePos = flakePos * 0.8 + 0.1 + fpos;\n\n      float toIntersection = dot(flakePos - pos, camK) / dot(ray, camK);\n      if (toIntersection > 0.0) {\n        vec3 testPos = pos + ray * toIntersection - flakePos;\n        vec2 testUV = abs(vec2(dot(testPos, camI), dot(testPos, camJ)));\n        float depth = dot(flakePos - camPos, camK);\n        float flakeSize = max(uFlakeSize, uMinFlakeSize * depth * 0.5 / res.x);\n        float dist;\n        if (uVariant < 0.5) dist = max(testUV.x, testUV.y);\n        else if (uVariant < 1.5) dist = length(testUV);\n        else dist = snowflakeDist(vec2(dot(testPos, camI), dot(testPos, camJ)) / flakeSize) * flakeSize;\n\n        if (dist < flakeSize) {\n          float intensity = exp2(-(t + toIntersection) / uDepthFade) *\n                           min(1.0, pow(uFlakeSize / flakeSize, 2.0)) * uBrightness;\n          gl_FragColor = vec4(uColor * pow(vec3(intensity), vec3(uGamma)), 1.0);\n          return;\n        }\n      }\n    }\n\n    float nextStep = min(min(phase.x, phase.y), phase.z);\n    vec3 sel = step(phase, vec3(nextStep));\n    phase = phase - nextStep + strides * sel;\n    t += nextStep;\n    pos = mix(pos + ray * nextStep, floor(pos + ray * nextStep + 0.5), sel);\n  }\n\n  gl_FragColor = vec4(0.0);\n}\n`;\n\ninterface PixelSnowProps {\n  color?: string;\n  flakeSize?: number;\n  minFlakeSize?: number;\n  pixelResolution?: number;\n  speed?: number;\n  depthFade?: number;\n  farPlane?: number;\n  brightness?: number;\n  gamma?: number;\n  density?: number;\n  variant?: 'square' | 'round' | 'snowflake';\n  direction?: number;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst props = withDefaults(defineProps<PixelSnowProps>(), {\n  color: '#ffffff',\n  flakeSize: 0.01,\n  minFlakeSize: 1.25,\n  pixelResolution: 200,\n  speed: 1.25,\n  depthFade: 8,\n  farPlane: 20,\n  brightness: 1,\n  gamma: 0.4545,\n  density: 0.3,\n  variant: 'square',\n  direction: 125,\n  className: '',\n  style: () => ({})\n});\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst animationRef = ref<number>(0);\n\nlet cleanupFn: (() => void) | null = null;\nconst setupFn = () => {\n  const container = containerRef.value;\n  if (!container) return;\n\n  const scene = new Scene();\n  const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);\n  const renderer = new WebGLRenderer({\n    antialias: false,\n    alpha: true,\n    premultipliedAlpha: false,\n    powerPreference: 'high-performance'\n  });\n\n  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n  renderer.setSize(container.offsetWidth, container.offsetHeight);\n  renderer.setClearColor(0x000000, 0);\n  container.appendChild(renderer.domElement);\n\n  const threeColor = new Color(props.color);\n  const material = new ShaderMaterial({\n    vertexShader,\n    fragmentShader,\n    uniforms: {\n      uTime: { value: 0 },\n      uResolution: { value: new Vector2(container.offsetWidth, container.offsetHeight) },\n      uFlakeSize: { value: props.flakeSize },\n      uMinFlakeSize: { value: props.minFlakeSize },\n      uPixelResolution: { value: props.pixelResolution },\n      uSpeed: { value: props.speed },\n      uDepthFade: { value: props.depthFade },\n      uFarPlane: { value: props.farPlane },\n      uColor: { value: new Vector3(threeColor.r, threeColor.g, threeColor.b) },\n      uBrightness: { value: props.brightness },\n      uGamma: { value: props.gamma },\n      uDensity: { value: props.density },\n      uVariant: { value: props.variant === 'round' ? 1.0 : props.variant === 'snowflake' ? 2.0 : 0.0 },\n      uDirection: { value: (props.direction * Math.PI) / 180 }\n    },\n    transparent: true\n  });\n\n  const geometry = new PlaneGeometry(2, 2);\n  scene.add(new Mesh(geometry, material));\n\n  const handleResize = () => {\n    const w = container.offsetWidth,\n      h = container.offsetHeight;\n    renderer.setSize(w, h);\n    material.uniforms.uResolution.value.set(w, h);\n  };\n  window.addEventListener('resize', handleResize);\n\n  const startTime = performance.now();\n  const animate = () => {\n    animationRef.value = requestAnimationFrame(animate);\n    material.uniforms.uTime.value = (performance.now() - startTime) * 0.001;\n    renderer.render(scene, camera);\n  };\n  animate();\n\n  cleanupFn = () => {\n    cancelAnimationFrame(animationRef.value);\n    window.removeEventListener('resize', handleResize);\n    container.removeChild(renderer.domElement);\n    renderer.dispose();\n    geometry.dispose();\n    material.dispose();\n  };\n};\n\nonMounted(() => {\n  setupFn();\n});\n\nonBeforeUnmount(() => {\n  cleanupFn?.();\n});\n\nwatch(\n  () => [\n    props.color,\n    props.flakeSize,\n    props.minFlakeSize,\n    props.pixelResolution,\n    props.speed,\n    props.depthFade,\n    props.farPlane,\n    props.brightness,\n    props.gamma,\n    props.density,\n    props.variant,\n    props.direction\n  ],\n  () => {\n    cleanupFn?.();\n    setupFn();\n  },\n  { deep: true }\n);\n</script>\n\n<template>\n  <div ref=\"containerRef\" :class=\"['absolute inset-0 w-full h-full', className]\" :style=\"style\"></div>\n</template>\n","path":"PixelSnow/PixelSnow.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"three","version":"^0.178.0"}],"devDependencies":[],"categories":["Backgrounds"]}
\ No newline at end of file
diff --git a/public/r/PixelTrail.json b/public/r/PixelTrail.json
new file mode 100644
index 0000000..f1a01ac
--- /dev/null
+++ b/public/r/PixelTrail.json
@@ -0,0 +1 @@
+{"name":"PixelTrail","title":"PixelTrail","description":"Pixel grid trail effect that follows cursor movement with customizable gooey filter.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';\nimport * as THREE from 'three';\n\ninterface GooeyFilterConfig {\n  id: string;\n  strength: number;\n}\n\ninterface PixelTrailProps {\n  gridSize?: number;\n  trailSize?: number;\n  maxAge?: number;\n  interpolate?: number;\n  color?: string;\n  gooeyFilter?: GooeyFilterConfig;\n  className?: string;\n}\n\nconst props = withDefaults(defineProps<PixelTrailProps>(), {\n  gridSize: 40,\n  trailSize: 0.1,\n  maxAge: 250,\n  interpolate: 5,\n  color: '#ffffff',\n  gooeyFilter: undefined,\n  className: ''\n});\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\n\nlet renderer: THREE.WebGLRenderer | null = null;\nlet scene: THREE.Scene | null = null;\nlet camera: THREE.OrthographicCamera | null = null;\nlet mesh: THREE.Mesh | null = null;\nlet animationFrameId: number | null = null;\nlet lastTime = 0;\nlet containerWidth = 0;\nlet containerHeight = 0;\n\n// Trail texture system (matching React's useTrailTexture config)\nconst TEXTURE_SIZE = 512; // React uses size: 512\nconst INTENSITY = 0.2;\nconst MIN_FORCE = 0.3;\nconst SMOOTHING = 0;\n\ninterface TrailPoint {\n  x: number;\n  y: number;\n  age: number;\n  force: number;\n}\n\nlet trailCanvas: HTMLCanvasElement | null = null;\nlet trailCtx: CanvasRenderingContext2D | null = null;\nlet trailTexture: THREE.CanvasTexture | null = null;\nlet trail: TrailPoint[] = [];\nlet force = 0;\n\n// Smooth average for force calculation (from drei)\nfunction smoothAverage(current: number, measurement: number, smoothing: number = 0.9): number {\n  return measurement * smoothing + current * (1.0 - smoothing);\n}\n\n// Vertex shader\nconst vertexShader = `\n  void main() {\n    gl_Position = vec4(position.xy, 0.0, 1.0);\n  }\n`;\n\n// Fragment shader for pixel grid (identical to React)\nconst fragmentShader = `\n  uniform vec2 resolution;\n  uniform sampler2D mouseTrail;\n  uniform float gridSize;\n  uniform vec3 pixelColor;\n\n  vec2 coverUv(vec2 uv) {\n    vec2 s = resolution.xy / max(resolution.x, resolution.y);\n    vec2 newUv = (uv - 0.5) * s + 0.5;\n    return clamp(newUv, 0.0, 1.0);\n  }\n\n  void main() {\n    vec2 screenUv = gl_FragCoord.xy / resolution;\n    vec2 uv = coverUv(screenUv);\n\n    vec2 gridUv = fract(uv * gridSize);\n    vec2 gridUvCenter = (floor(uv * gridSize) + 0.5) / gridSize;\n\n    float trail = texture2D(mouseTrail, gridUvCenter).r;\n\n    gl_FragColor = vec4(pixelColor, trail);\n  }\n`;\n\nfunction hexToRgb(hex: string): THREE.Color {\n  return new THREE.Color(hex);\n}\n\n// Apply coverUv transformation to convert screen coords to texture coords\n// Must match the shader's coverUv EXACTLY\nfunction screenToTextureUv(screenX: number, screenY: number): { x: number; y: number } {\n  // Match shader: vec2 s = resolution.xy / max(resolution.x, resolution.y);\n  const maxDim = Math.max(containerWidth, containerHeight);\n  const sx = containerWidth / maxDim;\n  const sy = containerHeight / maxDim;\n\n  // Match shader: vec2 newUv = (uv - 0.5) * s + 0.5;\n  const x = (screenX - 0.5) * sx + 0.5;\n  const y = (screenY - 0.5) * sy + 0.5;\n\n  return {\n    x: Math.max(0, Math.min(1, x)),\n    y: Math.max(0, Math.min(1, y))\n  };\n}\n\nfunction initTrailTexture() {\n  trailCanvas = document.createElement('canvas');\n  trailCanvas.width = trailCanvas.height = TEXTURE_SIZE;\n  trailCtx = trailCanvas.getContext('2d')!;\n  trailCtx.fillStyle = 'black';\n  trailCtx.fillRect(0, 0, TEXTURE_SIZE, TEXTURE_SIZE);\n\n  trailTexture = new THREE.CanvasTexture(trailCanvas);\n  trailTexture.minFilter = THREE.NearestFilter;\n  trailTexture.magFilter = THREE.NearestFilter;\n  trailTexture.wrapS = THREE.ClampToEdgeWrapping;\n  trailTexture.wrapT = THREE.ClampToEdgeWrapping;\n}\n\nfunction clearTrail() {\n  if (!trailCtx) return;\n  trailCtx.globalCompositeOperation = 'source-over';\n  trailCtx.fillStyle = 'black';\n  trailCtx.fillRect(0, 0, TEXTURE_SIZE, TEXTURE_SIZE);\n}\n\nfunction addTouch(point: { x: number; y: number }) {\n  const last = trail[trail.length - 1];\n\n  if (last) {\n    const dx = last.x - point.x;\n    const dy = last.y - point.y;\n    const dd = dx * dx + dy * dy;\n\n    const newForce = Math.max(MIN_FORCE, Math.min(dd * 10000, 1));\n    force = smoothAverage(newForce, force, SMOOTHING);\n\n    // Interpolation (matching drei's logic)\n    if (props.interpolate > 0) {\n      const lines = Math.ceil(dd / Math.pow((props.trailSize * 0.5) / props.interpolate, 2));\n\n      if (lines > 1) {\n        for (let i = 1; i < lines; i++) {\n          trail.push({\n            x: last.x - (dx / lines) * i,\n            y: last.y - (dy / lines) * i,\n            age: 0,\n            force: newForce\n          });\n        }\n      }\n    }\n  }\n\n  trail.push({ x: point.x, y: point.y, age: 0, force });\n}\n\nfunction drawTouch(point: TrailPoint) {\n  if (!trailCtx) return;\n\n  const pos = {\n    x: point.x * TEXTURE_SIZE,\n    y: (1 - point.y) * TEXTURE_SIZE\n  };\n\n  // Calculate intensity based on age (matching drei's logic)\n  // React uses linear easing: ease = (x) => x (identity function)\n  let intensity = 1;\n  if (point.age < props.maxAge * 0.3) {\n    // Fade in phase (0 to 30% of maxAge)\n    intensity = point.age / (props.maxAge * 0.3);\n  } else {\n    // Fade out phase (30% to 100% of maxAge)\n    intensity = 1 - (point.age - props.maxAge * 0.3) / (props.maxAge * 0.7);\n  }\n\n  intensity *= point.force;\n\n  // Apply blending\n  trailCtx.globalCompositeOperation = 'screen';\n\n  const radius = TEXTURE_SIZE * props.trailSize * intensity;\n\n  if (radius <= 0) return;\n\n  const grd = trailCtx.createRadialGradient(\n    pos.x,\n    pos.y,\n    Math.max(0, radius * 0.25),\n    pos.x,\n    pos.y,\n    Math.max(0, radius)\n  );\n  grd.addColorStop(0, `rgba(255, 255, 255, ${INTENSITY})`);\n  grd.addColorStop(1, 'rgba(0, 0, 0, 0.0)');\n\n  trailCtx.beginPath();\n  trailCtx.fillStyle = grd;\n  trailCtx.arc(pos.x, pos.y, Math.max(0, radius), 0, Math.PI * 2);\n  trailCtx.fill();\n}\n\nfunction updateTrailTexture(delta: number) {\n  if (!trailCtx || !trailTexture) return;\n\n  clearTrail();\n\n  // Age points and remove old ones\n  trail = trail.filter(point => {\n    point.age += delta * 1000;\n    return point.age <= props.maxAge;\n  });\n\n  // Reset force when empty\n  if (!trail.length) force = 0;\n\n  // Draw all points\n  trail.forEach(point => drawTouch(point));\n\n  trailTexture.needsUpdate = true;\n}\n\nfunction setupScene() {\n  const container = containerRef.value;\n  if (!container) return;\n\n  const width = container.clientWidth;\n  const height = container.clientHeight;\n  containerWidth = width;\n  containerHeight = height;\n  const dpr = Math.min(window.devicePixelRatio || 1, 2);\n\n  // Initialize trail texture\n  initTrailTexture();\n\n  // Main renderer\n  renderer = new THREE.WebGLRenderer({\n    antialias: false,\n    alpha: true,\n    powerPreference: 'high-performance'\n  });\n  renderer.setSize(width, height);\n  renderer.setPixelRatio(dpr);\n  container.appendChild(renderer.domElement);\n\n  // Main scene\n  scene = new THREE.Scene();\n  camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);\n  camera.position.z = 1;\n\n  // Main mesh with pixel shader\n  const pixelColor = hexToRgb(props.color);\n  const material = new THREE.ShaderMaterial({\n    uniforms: {\n      resolution: { value: new THREE.Vector2(width * dpr, height * dpr) },\n      mouseTrail: { value: trailTexture },\n      gridSize: { value: props.gridSize },\n      pixelColor: { value: new THREE.Vector3(pixelColor.r, pixelColor.g, pixelColor.b) }\n    },\n    vertexShader,\n    fragmentShader,\n    transparent: true\n  });\n\n  const geometry = new THREE.PlaneGeometry(2, 2);\n  mesh = new THREE.Mesh(geometry, material);\n  scene.add(mesh);\n\n  // Event listeners\n  container.addEventListener('pointermove', handlePointerMove);\n  window.addEventListener('resize', handleResize);\n\n  // Start animation\n  trail = [];\n  force = 0;\n  lastTime = performance.now();\n  animate();\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n  const container = containerRef.value;\n  if (!container) return;\n\n  const rect = container.getBoundingClientRect();\n  const screenX = (event.clientX - rect.left) / rect.width;\n  const screenY = 1 - (event.clientY - rect.top) / rect.height;\n\n  // Convert screen coordinates to texture UV space (apply coverUv transformation)\n  const uv = screenToTextureUv(screenX, screenY);\n\n  // Add touch point\n  addTouch(uv);\n}\n\nfunction handleResize() {\n  const container = containerRef.value;\n  if (!container || !renderer || !mesh) return;\n\n  const width = container.clientWidth;\n  const height = container.clientHeight;\n  containerWidth = width;\n  containerHeight = height;\n  const dpr = Math.min(window.devicePixelRatio || 1, 2);\n\n  renderer.setSize(width, height);\n\n  const material = mesh.material as THREE.ShaderMaterial;\n  material.uniforms.resolution.value.set(width * dpr, height * dpr);\n}\n\nfunction animate() {\n  if (!renderer || !scene || !camera || !mesh) return;\n\n  animationFrameId = requestAnimationFrame(animate);\n\n  // Calculate delta time\n  const currentTime = performance.now();\n  const delta = (currentTime - lastTime) / 1000;\n  lastTime = currentTime;\n\n  // Update trail texture with delta time\n  updateTrailTexture(delta);\n\n  // Render\n  renderer.render(scene, camera);\n}\n\nfunction cleanup() {\n  if (animationFrameId) {\n    cancelAnimationFrame(animationFrameId);\n    animationFrameId = null;\n  }\n\n  const container = containerRef.value;\n  if (container) {\n    container.removeEventListener('pointermove', handlePointerMove);\n  }\n  window.removeEventListener('resize', handleResize);\n\n  // Clear trail data\n  trail = [];\n  force = 0;\n\n  if (renderer) {\n    if (container && container.contains(renderer.domElement)) {\n      container.removeChild(renderer.domElement);\n    }\n    renderer.dispose();\n    renderer = null;\n  }\n\n  if (trailTexture) {\n    trailTexture.dispose();\n    trailTexture = null;\n  }\n\n  if (mesh) {\n    (mesh.material as THREE.ShaderMaterial).dispose();\n    mesh.geometry.dispose();\n    mesh = null;\n  }\n\n  trailCanvas = null;\n  trailCtx = null;\n  scene = null;\n  camera = null;\n}\n\nonMounted(setupScene);\nonUnmounted(cleanup);\n\nwatch(\n  () => [props.gridSize, props.trailSize, props.maxAge, props.interpolate, props.color],\n  () => {\n    cleanup();\n    setupScene();\n  },\n  { deep: true }\n);\n</script>\n\n<template>\n  <div class=\"relative w-full h-full\">\n    <svg v-if=\"props.gooeyFilter\" class=\"absolute overflow-hidden z-[1]\">\n      <defs>\n        <filter :id=\"props.gooeyFilter.id\">\n          <feGaussianBlur in=\"SourceGraphic\" :stdDeviation=\"props.gooeyFilter.strength\" result=\"blur\" />\n          <feColorMatrix in=\"blur\" type=\"matrix\" values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9\" result=\"goo\" />\n          <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\" />\n        </filter>\n      </defs>\n    </svg>\n\n    <div\n      ref=\"containerRef\"\n      :class=\"['absolute z-[1] w-full h-full', props.className]\"\n      :style=\"props.gooeyFilter ? { filter: `url(#${props.gooeyFilter.id})` } : undefined\"\n    />\n  </div>\n</template>\n","path":"PixelTrail/PixelTrail.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"three","version":"^0.178.0"}],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
diff --git a/public/r/RotatingText.json b/public/r/RotatingText.json
index 0adde8c..68c31bb 100644
--- a/public/r/RotatingText.json
+++ b/public/r/RotatingText.json
@@ -1 +1 @@
-{"name":"RotatingText","title":"RotatingText","description":"Cycles through multiple phrases with 3D rotate / flip transitions.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { AnimatePresence, Motion, type Target, type Transition, type VariantLabels } from 'motion-v';\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue';\n\ntype StaggerFrom = 'first' | 'last' | 'center' | 'random' | number;\ntype SplitBy = 'characters' | 'words' | 'lines';\n\ninterface WordElement {\n  characters: string[];\n  needsSpace: boolean;\n}\n\ninterface RotatingTextProps {\n  texts: string[];\n  transition?: Transition;\n  initial?: boolean | Target | VariantLabels;\n  animate?: Target | VariantLabels;\n  exit?: Target | VariantLabels;\n  animatePresenceMode?: 'sync' | 'wait';\n  animatePresenceInitial?: boolean;\n  rotationInterval?: number;\n  staggerDuration?: number;\n  staggerFrom?: StaggerFrom;\n  loop?: boolean;\n  auto?: boolean;\n  splitBy?: SplitBy;\n  onNext?: (index: number) => void;\n  mainClassName?: string;\n  splitLevelClassName?: string;\n  elementLevelClassName?: string;\n}\n\nconst cn = (...classes: (string | undefined | null | boolean)[]): string => {\n  return classes.filter(Boolean).join(' ');\n};\n\nconst props = withDefaults(defineProps<RotatingTextProps>(), {\n  transition: () =>\n    ({\n      type: 'spring',\n      damping: 25,\n      stiffness: 300\n    }) as Transition,\n  initial: () => ({ y: '100%', opacity: 0 }) as Target,\n  animate: () => ({ y: 0, opacity: 1 }) as Target,\n  exit: () => ({ y: '-120%', opacity: 0 }) as Target,\n  animatePresenceMode: 'wait',\n  animatePresenceInitial: false,\n  rotationInterval: 2000,\n  staggerDuration: 0,\n  staggerFrom: 'first',\n  loop: true,\n  auto: true,\n  splitBy: 'characters'\n});\n\nconst currentTextIndex = ref(0);\nlet intervalId: ReturnType<typeof setInterval> | null = null;\n\nconst splitIntoCharacters = (text: string): string[] => {\n  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n    const IntlWithSegmenter = Intl as typeof Intl & {\n      Segmenter: new (\n        locales?: string | string[],\n        options?: { granularity: 'grapheme' | 'word' | 'sentence' }\n      ) => {\n        segment: (text: string) => Iterable<{ segment: string }>;\n      };\n    };\n    const segmenter = new IntlWithSegmenter.Segmenter('en', { granularity: 'grapheme' });\n    return [...segmenter.segment(text)].map(({ segment }) => segment);\n  }\n\n  return [...text];\n};\nconst elements = computed((): WordElement[] => {\n  const currentText = props.texts[currentTextIndex.value];\n\n  switch (props.splitBy) {\n    case 'characters': {\n      const words = currentText.split(' ');\n      return words.map((word, i) => ({\n        characters: splitIntoCharacters(word),\n        needsSpace: i !== words.length - 1\n      }));\n    }\n    case 'words': {\n      const words = currentText.split(' ');\n      return words.map((word, i) => ({\n        characters: [word],\n        needsSpace: i !== words.length - 1\n      }));\n    }\n    case 'lines': {\n      const lines = currentText.split('\\n');\n      return lines.map((line, i) => ({\n        characters: [line],\n        needsSpace: i !== lines.length - 1\n      }));\n    }\n    default: {\n      const parts = currentText.split(props.splitBy!);\n      return parts.map((part, i) => ({\n        characters: [part],\n        needsSpace: i !== parts.length - 1\n      }));\n    }\n  }\n});\n\nconst getStaggerDelay = (index: number, totalChars: number): number => {\n  const { staggerDuration, staggerFrom } = props;\n\n  switch (staggerFrom) {\n    case 'first':\n      return index * staggerDuration;\n    case 'last':\n      return (totalChars - 1 - index) * staggerDuration;\n    case 'center': {\n      const center = Math.floor(totalChars / 2);\n      return Math.abs(center - index) * staggerDuration;\n    }\n    case 'random': {\n      const randomIndex = Math.floor(Math.random() * totalChars);\n      return Math.abs(randomIndex - index) * staggerDuration;\n    }\n    default:\n      return Math.abs((staggerFrom as number) - index) * staggerDuration;\n  }\n};\n\nconst handleIndexChange = (newIndex: number): void => {\n  currentTextIndex.value = newIndex;\n  props.onNext?.(newIndex);\n};\n\nconst next = (): void => {\n  const isAtEnd = currentTextIndex.value === props.texts.length - 1;\n  const nextIndex = isAtEnd ? (props.loop ? 0 : currentTextIndex.value) : currentTextIndex.value + 1;\n\n  if (nextIndex !== currentTextIndex.value) {\n    handleIndexChange(nextIndex);\n  }\n};\n\nconst previous = (): void => {\n  const isAtStart = currentTextIndex.value === 0;\n  const prevIndex = isAtStart\n    ? props.loop\n      ? props.texts.length - 1\n      : currentTextIndex.value\n    : currentTextIndex.value - 1;\n\n  if (prevIndex !== currentTextIndex.value) {\n    handleIndexChange(prevIndex);\n  }\n};\n\nconst jumpTo = (index: number): void => {\n  const validIndex = Math.max(0, Math.min(index, props.texts.length - 1));\n  if (validIndex !== currentTextIndex.value) {\n    handleIndexChange(validIndex);\n  }\n};\n\nconst reset = (): void => {\n  if (currentTextIndex.value !== 0) {\n    handleIndexChange(0);\n  }\n};\n\nconst cleanupInterval = (): void => {\n  if (intervalId) {\n    clearInterval(intervalId);\n    intervalId = null;\n  }\n};\n\nconst startInterval = (): void => {\n  if (props.auto) {\n    intervalId = setInterval(next, props.rotationInterval);\n  }\n};\n\ndefineExpose({\n  next,\n  previous,\n  jumpTo,\n  reset\n});\n\nwatch(\n  () => [props.auto, props.rotationInterval] as const,\n  () => {\n    cleanupInterval();\n    startInterval();\n  }\n);\n\nonMounted(() => {\n  startInterval();\n});\n\nonUnmounted(() => {\n  cleanupInterval();\n});\n</script>\n\n<template>\n  <Motion\n    tag=\"span\"\n    :class=\"cn('flex flex-wrap whitespace-pre-wrap relative', mainClassName)\"\n    v-bind=\"$attrs\"\n    :transition=\"transition\"\n    layout\n  >\n    <span class=\"sr-only\">\n      {{ texts[currentTextIndex] }}\n    </span>\n\n    <AnimatePresence :mode=\"animatePresenceMode\" :initial=\"animatePresenceInitial\">\n      <Motion\n        :key=\"currentTextIndex\"\n        tag=\"span\"\n        :class=\"cn(splitBy === 'lines' ? 'flex flex-col w-full' : 'flex flex-wrap whitespace-pre-wrap relative')\"\n        aria-hidden=\"true\"\n        layout\n      >\n        <span v-for=\"(wordObj, wordIndex) in elements\" :key=\"wordIndex\" :class=\"cn('inline-flex', splitLevelClassName)\">\n          <Motion\n            v-for=\"(char, charIndex) in wordObj.characters\"\n            :key=\"charIndex\"\n            tag=\"span\"\n            :initial=\"initial\"\n            :animate=\"animate\"\n            :exit=\"exit\"\n            :transition=\"{\n              ...transition,\n              delay: getStaggerDelay(\n                elements.slice(0, wordIndex).reduce((sum, word) => sum + word.characters.length, 0) + charIndex,\n                elements.reduce((sum, word) => sum + word.characters.length, 0)\n              )\n            }\"\n            :class=\"cn('inline-block', elementLevelClassName)\"\n          >\n            {{ char }}\n          </Motion>\n          <span v-if=\"wordObj.needsSpace\" class=\"whitespace-pre\"></span>\n        </span>\n      </Motion>\n    </AnimatePresence>\n  </Motion>\n</template>\n","path":"RotatingText/RotatingText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
+{"name":"RotatingText","title":"RotatingText","description":"Cycles through multiple phrases with 3D rotate / flip transitions.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { AnimatePresence, Motion } from 'motion-v';\nimport type { MotionProps } from 'motion-v';\nimport { computed, onMounted, onUnmounted, ref, watch } from 'vue';\n\ntype StaggerFrom = 'first' | 'last' | 'center' | 'random' | number;\ntype SplitBy = 'characters' | 'words' | 'lines';\n\ntype TransitionType = NonNullable<MotionProps['transition']>;\ntype InitialType = NonNullable<MotionProps['initial']>;\ntype AnimateType = NonNullable<MotionProps['animate']>;\ntype ExitType = NonNullable<MotionProps['exit']>;\n\ninterface WordElement {\n  characters: string[];\n  needsSpace: boolean;\n}\n\ninterface RotatingTextProps {\n  texts: string[];\n  transition?: TransitionType;\n  initial?: InitialType;\n  animate?: AnimateType;\n  exit?: ExitType;\n  animatePresenceMode?: 'sync' | 'wait';\n  animatePresenceInitial?: boolean;\n  rotationInterval?: number;\n  staggerDuration?: number;\n  staggerFrom?: StaggerFrom;\n  loop?: boolean;\n  auto?: boolean;\n  splitBy?: SplitBy;\n  onNext?: (index: number) => void;\n  mainClassName?: string;\n  splitLevelClassName?: string;\n  elementLevelClassName?: string;\n}\n\nconst cn = (...classes: (string | undefined | null | boolean)[]): string => {\n  return classes.filter(Boolean).join(' ');\n};\n\nconst props = withDefaults(defineProps<RotatingTextProps>(), {\n  transition: () =>\n    ({\n      type: 'spring',\n      damping: 25,\n      stiffness: 300\n    }) as TransitionType,\n  initial: () => ({ y: '100%', opacity: 0 }) as InitialType,\n  animate: () => ({ y: 0, opacity: 1 }) as AnimateType,\n  exit: () => ({ y: '-120%', opacity: 0 }) as ExitType,\n  animatePresenceMode: 'wait',\n  animatePresenceInitial: false,\n  rotationInterval: 2000,\n  staggerDuration: 0,\n  staggerFrom: 'first',\n  loop: true,\n  auto: true,\n  splitBy: 'characters'\n});\n\nconst currentTextIndex = ref(0);\nlet intervalId: ReturnType<typeof setInterval> | null = null;\n\nconst splitIntoCharacters = (text: string): string[] => {\n  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n    const IntlWithSegmenter = Intl as typeof Intl & {\n      Segmenter: new (\n        locales?: string | string[],\n        options?: { granularity: 'grapheme' | 'word' | 'sentence' }\n      ) => {\n        segment: (text: string) => Iterable<{ segment: string }>;\n      };\n    };\n    const segmenter = new IntlWithSegmenter.Segmenter('en', { granularity: 'grapheme' });\n    return [...segmenter.segment(text)].map(({ segment }) => segment);\n  }\n\n  return [...text];\n};\nconst elements = computed((): WordElement[] => {\n  const currentText = props.texts[currentTextIndex.value];\n\n  switch (props.splitBy) {\n    case 'characters': {\n      const words = currentText.split(' ');\n      return words.map((word, i) => ({\n        characters: splitIntoCharacters(word),\n        needsSpace: i !== words.length - 1\n      }));\n    }\n    case 'words': {\n      const words = currentText.split(' ');\n      return words.map((word, i) => ({\n        characters: [word],\n        needsSpace: i !== words.length - 1\n      }));\n    }\n    case 'lines': {\n      const lines = currentText.split('\\n');\n      return lines.map((line, i) => ({\n        characters: [line],\n        needsSpace: i !== lines.length - 1\n      }));\n    }\n    default: {\n      const parts = currentText.split(props.splitBy!);\n      return parts.map((part, i) => ({\n        characters: [part],\n        needsSpace: i !== parts.length - 1\n      }));\n    }\n  }\n});\n\nconst getStaggerDelay = (index: number, totalChars: number): number => {\n  const { staggerDuration, staggerFrom } = props;\n\n  switch (staggerFrom) {\n    case 'first':\n      return index * staggerDuration;\n    case 'last':\n      return (totalChars - 1 - index) * staggerDuration;\n    case 'center': {\n      const center = Math.floor(totalChars / 2);\n      return Math.abs(center - index) * staggerDuration;\n    }\n    case 'random': {\n      const randomIndex = Math.floor(Math.random() * totalChars);\n      return Math.abs(randomIndex - index) * staggerDuration;\n    }\n    default:\n      return Math.abs((staggerFrom as number) - index) * staggerDuration;\n  }\n};\n\nconst handleIndexChange = (newIndex: number): void => {\n  currentTextIndex.value = newIndex;\n  props.onNext?.(newIndex);\n};\n\nconst next = (): void => {\n  const isAtEnd = currentTextIndex.value === props.texts.length - 1;\n  const nextIndex = isAtEnd ? (props.loop ? 0 : currentTextIndex.value) : currentTextIndex.value + 1;\n\n  if (nextIndex !== currentTextIndex.value) {\n    handleIndexChange(nextIndex);\n  }\n};\n\nconst previous = (): void => {\n  const isAtStart = currentTextIndex.value === 0;\n  const prevIndex = isAtStart\n    ? props.loop\n      ? props.texts.length - 1\n      : currentTextIndex.value\n    : currentTextIndex.value - 1;\n\n  if (prevIndex !== currentTextIndex.value) {\n    handleIndexChange(prevIndex);\n  }\n};\n\nconst jumpTo = (index: number): void => {\n  const validIndex = Math.max(0, Math.min(index, props.texts.length - 1));\n  if (validIndex !== currentTextIndex.value) {\n    handleIndexChange(validIndex);\n  }\n};\n\nconst reset = (): void => {\n  if (currentTextIndex.value !== 0) {\n    handleIndexChange(0);\n  }\n};\n\nconst cleanupInterval = (): void => {\n  if (intervalId) {\n    clearInterval(intervalId);\n    intervalId = null;\n  }\n};\n\nconst startInterval = (): void => {\n  if (props.auto) {\n    intervalId = setInterval(next, props.rotationInterval);\n  }\n};\n\ndefineExpose({\n  next,\n  previous,\n  jumpTo,\n  reset\n});\n\nwatch(\n  () => [props.auto, props.rotationInterval] as const,\n  () => {\n    cleanupInterval();\n    startInterval();\n  }\n);\n\nonMounted(() => {\n  startInterval();\n});\n\nonUnmounted(() => {\n  cleanupInterval();\n});\n</script>\n\n<template>\n  <Motion\n    tag=\"span\"\n    :class=\"cn('flex flex-wrap whitespace-pre-wrap relative', mainClassName)\"\n    v-bind=\"$attrs\"\n    :transition=\"transition\"\n    layout\n  >\n    <span class=\"sr-only\">\n      {{ texts[currentTextIndex] }}\n    </span>\n\n    <AnimatePresence :mode=\"animatePresenceMode\" :initial=\"animatePresenceInitial\">\n      <Motion\n        :key=\"currentTextIndex\"\n        tag=\"span\"\n        :class=\"cn(splitBy === 'lines' ? 'flex flex-col w-full' : 'flex flex-wrap whitespace-pre-wrap relative')\"\n        aria-hidden=\"true\"\n        layout\n      >\n        <span v-for=\"(wordObj, wordIndex) in elements\" :key=\"wordIndex\" :class=\"cn('inline-flex', splitLevelClassName)\">\n          <Motion\n            v-for=\"(char, charIndex) in wordObj.characters\"\n            :key=\"charIndex\"\n            tag=\"span\"\n            :initial=\"initial\"\n            :animate=\"animate\"\n            :exit=\"exit\"\n            :transition=\"{\n              ...transition,\n              delay: getStaggerDelay(\n                elements.slice(0, wordIndex).reduce((sum, word) => sum + word.characters.length, 0) + charIndex,\n                elements.reduce((sum, word) => sum + word.characters.length, 0)\n              )\n            }\"\n            :class=\"cn('inline-block', elementLevelClassName)\"\n          >\n            {{ char }}\n          </Motion>\n          <span v-if=\"wordObj.needsSpace\" class=\"whitespace-pre\"></span>\n        </span>\n      </Motion>\n    </AnimatePresence>\n  </Motion>\n</template>\n","path":"RotatingText/RotatingText.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/Shuffle.json b/public/r/Shuffle.json
new file mode 100644
index 0000000..ed86190
--- /dev/null
+++ b/public/r/Shuffle.json
@@ -0,0 +1 @@
+{"name":"Shuffle","title":"Shuffle","description":"GSAP-powered slot machine style text shuffle animation with scroll trigger.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <component :is=\"tag\" ref=\"textRef\" :class=\"computedClasses\" :style=\"computedStyle\">\n    {{ text }}\n  </component>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport { SplitText as GSAPSplitText } from 'gsap/SplitText';\n\ngsap.registerPlugin(ScrollTrigger, GSAPSplitText);\n\nexport interface ShuffleProps {\n  text: string;\n  className?: string;\n  style?: Record<string, any>;\n  shuffleDirection?: 'left' | 'right' | 'up' | 'down';\n  duration?: number;\n  maxDelay?: number;\n  ease?: string | ((t: number) => number);\n  threshold?: number;\n  rootMargin?: string;\n  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';\n  textAlign?: 'left' | 'center' | 'right' | 'justify';\n  onShuffleComplete?: () => void;\n  shuffleTimes?: number;\n  animationMode?: 'random' | 'evenodd';\n  loop?: boolean;\n  loopDelay?: number;\n  stagger?: number;\n  scrambleCharset?: string;\n  colorFrom?: string;\n  colorTo?: string;\n  triggerOnce?: boolean;\n  respectReducedMotion?: boolean;\n  triggerOnHover?: boolean;\n}\n\nconst props = withDefaults(defineProps<ShuffleProps>(), {\n  className: '',\n  shuffleDirection: 'right',\n  duration: 0.35,\n  maxDelay: 0,\n  ease: 'power3.out',\n  threshold: 0.1,\n  rootMargin: '-100px',\n  tag: 'p',\n  textAlign: 'center',\n  shuffleTimes: 1,\n  animationMode: 'evenodd',\n  loop: false,\n  loopDelay: 0,\n  stagger: 0.03,\n  scrambleCharset: '',\n  colorFrom: undefined,\n  colorTo: undefined,\n  triggerOnce: true,\n  respectReducedMotion: true,\n  triggerOnHover: true\n});\n\nconst emit = defineEmits<{\n  'shuffle-complete': [];\n}>();\n\nconst textRef = useTemplateRef<HTMLElement>('textRef');\nconst fontsLoaded = ref(false);\nconst ready = ref(false);\n\nconst splitRef = ref<GSAPSplitText | null>(null);\nconst wrappersRef = ref<HTMLElement[]>([]);\nconst tlRef = ref<gsap.core.Timeline | null>(null);\nconst playingRef = ref(false);\nconst scrollTriggerRef = ref<ScrollTrigger | null>(null);\nlet hoverHandler: ((e: Event) => void) | null = null;\n\nconst scrollTriggerStart = computed(() => {\n  const startPct = (1 - props.threshold) * 100;\n  const mm = /^(-?\\d+(?:\\.\\d+)?)(px|em|rem|%)?$/.exec(props.rootMargin || '');\n  const mv = mm ? parseFloat(mm[1]) : 0;\n  const mu = mm ? mm[2] || 'px' : 'px';\n  const sign = mv === 0 ? '' : mv < 0 ? `-=${Math.abs(mv)}${mu}` : `+=${mv}${mu}`;\n  return `top ${startPct}%${sign}`;\n});\n\nconst baseTw = 'inline-block whitespace-normal break-words will-change-transform uppercase text-6xl leading-none';\n\nconst userHasFont = computed(() => props.className && /font[-[]/i.test(props.className));\n\nconst fallbackFont = computed(() => (userHasFont.value ? {} : { fontFamily: `'Press Start 2P', sans-serif` }));\n\nconst computedStyle = computed(() => ({\n  textAlign: props.textAlign,\n  ...fallbackFont.value,\n  ...props.style\n}));\n\nconst computedClasses = computed(() => `${baseTw} ${ready.value ? 'visible' : 'invisible'} ${props.className}`.trim());\n\nconst removeHover = () => {\n  if (hoverHandler && textRef.value) {\n    textRef.value.removeEventListener('mouseenter', hoverHandler);\n    hoverHandler = null;\n  }\n};\n\nconst teardown = () => {\n  if (tlRef.value) {\n    tlRef.value.kill();\n    tlRef.value = null;\n  }\n  if (wrappersRef.value.length) {\n    wrappersRef.value.forEach(wrap => {\n      const inner = wrap.firstElementChild as HTMLElement | null;\n      const orig = inner?.querySelector('[data-orig=\"1\"]') as HTMLElement | null;\n      if (orig && wrap.parentNode) wrap.parentNode.replaceChild(orig, wrap);\n    });\n    wrappersRef.value = [];\n  }\n  try {\n    splitRef.value?.revert();\n  } catch {}\n  splitRef.value = null;\n  playingRef.value = false;\n};\n\nconst build = () => {\n  if (!textRef.value) return;\n  teardown();\n\n  const el = textRef.value;\n  const computedFont = getComputedStyle(el).fontFamily;\n\n  splitRef.value = new GSAPSplitText(el, {\n    type: 'chars',\n    charsClass: 'shuffle-char',\n    wordsClass: 'shuffle-word',\n    linesClass: 'shuffle-line',\n    reduceWhiteSpace: false\n  });\n\n  const chars = (splitRef.value.chars || []) as HTMLElement[];\n  wrappersRef.value = [];\n\n  const rolls = Math.max(1, Math.floor(props.shuffleTimes));\n  const rand = (set: string) => set.charAt(Math.floor(Math.random() * set.length)) || '';\n\n  chars.forEach(ch => {\n    const parent = ch.parentElement;\n    if (!parent) return;\n\n    const w = ch.getBoundingClientRect().width;\n    const h = ch.getBoundingClientRect().height;\n    if (!w) return;\n\n    const wrap = document.createElement('span');\n    wrap.className = 'inline-block overflow-hidden text-left';\n    Object.assign(wrap.style, {\n      width: w + 'px',\n      height: props.shuffleDirection === 'up' || props.shuffleDirection === 'down' ? h + 'px' : 'auto',\n      verticalAlign: 'bottom'\n    });\n\n    const inner = document.createElement('span');\n    inner.className =\n      'inline-block will-change-transform origin-left transform-gpu ' +\n      (props.shuffleDirection === 'up' || props.shuffleDirection === 'down'\n        ? 'whitespace-normal'\n        : 'whitespace-nowrap');\n\n    parent.insertBefore(wrap, ch);\n    wrap.appendChild(inner);\n\n    const firstOrig = ch.cloneNode(true) as HTMLElement;\n    firstOrig.className =\n      'text-left ' + (props.shuffleDirection === 'up' || props.shuffleDirection === 'down' ? 'block' : 'inline-block');\n    Object.assign(firstOrig.style, { width: w + 'px', fontFamily: computedFont });\n\n    ch.setAttribute('data-orig', '1');\n    ch.className =\n      'text-left ' + (props.shuffleDirection === 'up' || props.shuffleDirection === 'down' ? 'block' : 'inline-block');\n    Object.assign(ch.style, { width: w + 'px', fontFamily: computedFont });\n\n    inner.appendChild(firstOrig);\n    for (let k = 0; k < rolls; k++) {\n      const c = ch.cloneNode(true) as HTMLElement;\n      if (props.scrambleCharset) c.textContent = rand(props.scrambleCharset);\n      c.className =\n        'text-left ' +\n        (props.shuffleDirection === 'up' || props.shuffleDirection === 'down' ? 'block' : 'inline-block');\n      Object.assign(c.style, { width: w + 'px', fontFamily: computedFont });\n      inner.appendChild(c);\n    }\n    inner.appendChild(ch);\n\n    const steps = rolls + 1;\n    if (props.shuffleDirection === 'right' || props.shuffleDirection === 'down') {\n      const firstCopy = inner.firstElementChild as HTMLElement | null;\n      const real = inner.lastElementChild as HTMLElement | null;\n      if (real) inner.insertBefore(real, inner.firstChild);\n      if (firstCopy) inner.appendChild(firstCopy);\n    }\n\n    let startX = 0;\n    let finalX = 0;\n    let startY = 0;\n    let finalY = 0;\n\n    if (props.shuffleDirection === 'right') {\n      startX = -steps * w;\n      finalX = 0;\n    } else if (props.shuffleDirection === 'left') {\n      startX = 0;\n      finalX = -steps * w;\n    } else if (props.shuffleDirection === 'down') {\n      startY = -steps * h;\n      finalY = 0;\n    } else if (props.shuffleDirection === 'up') {\n      startY = 0;\n      finalY = -steps * h;\n    }\n\n    if (props.shuffleDirection === 'left' || props.shuffleDirection === 'right') {\n      gsap.set(inner, { x: startX, y: 0, force3D: true });\n      inner.setAttribute('data-start-x', String(startX));\n      inner.setAttribute('data-final-x', String(finalX));\n    } else {\n      gsap.set(inner, { x: 0, y: startY, force3D: true });\n      inner.setAttribute('data-start-y', String(startY));\n      inner.setAttribute('data-final-y', String(finalY));\n    }\n\n    if (props.colorFrom) (inner.style as any).color = props.colorFrom;\n    wrappersRef.value.push(wrap);\n  });\n};\n\nconst getInners = () => wrappersRef.value.map(w => w.firstElementChild as HTMLElement);\n\nconst randomizeScrambles = () => {\n  if (!props.scrambleCharset) return;\n  wrappersRef.value.forEach(w => {\n    const strip = w.firstElementChild as HTMLElement;\n    if (!strip) return;\n    const kids = Array.from(strip.children) as HTMLElement[];\n    for (let i = 1; i < kids.length - 1; i++) {\n      kids[i].textContent = props.scrambleCharset.charAt(Math.floor(Math.random() * props.scrambleCharset.length));\n    }\n  });\n};\n\nconst cleanupToStill = () => {\n  wrappersRef.value.forEach(w => {\n    const strip = w.firstElementChild as HTMLElement;\n    if (!strip) return;\n    const real = strip.querySelector('[data-orig=\"1\"]') as HTMLElement | null;\n    if (!real) return;\n    strip.replaceChildren(real);\n    strip.style.transform = 'none';\n    strip.style.willChange = 'auto';\n  });\n};\n\nconst armHover = () => {\n  if (!props.triggerOnHover || !textRef.value) return;\n  removeHover();\n  const handler = () => {\n    if (playingRef.value) return;\n    build();\n    if (props.scrambleCharset) randomizeScrambles();\n    play();\n  };\n  hoverHandler = handler;\n  textRef.value.addEventListener('mouseenter', handler);\n};\n\nconst play = () => {\n  const strips = getInners();\n  if (!strips.length) return;\n\n  playingRef.value = true;\n  const isVertical = props.shuffleDirection === 'up' || props.shuffleDirection === 'down';\n\n  const tl = gsap.timeline({\n    smoothChildTiming: true,\n    repeat: props.loop ? -1 : 0,\n    repeatDelay: props.loop ? props.loopDelay : 0,\n    onRepeat: () => {\n      if (props.scrambleCharset) randomizeScrambles();\n      if (isVertical) {\n        gsap.set(strips, { y: (i, t: HTMLElement) => parseFloat(t.getAttribute('data-start-y') || '0') });\n      } else {\n        gsap.set(strips, { x: (i, t: HTMLElement) => parseFloat(t.getAttribute('data-start-x') || '0') });\n      }\n      emit('shuffle-complete');\n      props.onShuffleComplete?.();\n    },\n    onComplete: () => {\n      playingRef.value = false;\n      if (!props.loop) {\n        cleanupToStill();\n        if (props.colorTo) gsap.set(strips, { color: props.colorTo });\n        emit('shuffle-complete');\n        props.onShuffleComplete?.();\n        armHover();\n      }\n    }\n  });\n\n  const addTween = (targets: HTMLElement[], at: number) => {\n    const vars: any = {\n      duration: props.duration,\n      ease: props.ease,\n      force3D: true,\n      stagger: props.animationMode === 'evenodd' ? props.stagger : 0\n    };\n    if (isVertical) {\n      vars.y = (i: number, t: HTMLElement) => parseFloat(t.getAttribute('data-final-y') || '0');\n    } else {\n      vars.x = (i: number, t: HTMLElement) => parseFloat(t.getAttribute('data-final-x') || '0');\n    }\n\n    tl.to(targets, vars, at);\n    if (props.colorFrom && props.colorTo)\n      tl.to(targets, { color: props.colorTo, duration: props.duration, ease: props.ease }, at);\n  };\n\n  if (props.animationMode === 'evenodd') {\n    const odd = strips.filter((_, i) => i % 2 === 1);\n    const even = strips.filter((_, i) => i % 2 === 0);\n    const oddTotal = props.duration + Math.max(0, odd.length - 1) * props.stagger;\n    const evenStart = odd.length ? oddTotal * 0.7 : 0;\n    if (odd.length) addTween(odd, 0);\n    if (even.length) addTween(even, evenStart);\n  } else {\n    strips.forEach(strip => {\n      const d = Math.random() * props.maxDelay;\n      const vars: any = {\n        duration: props.duration,\n        ease: props.ease,\n        force3D: true\n      };\n      if (isVertical) {\n        vars.y = parseFloat(strip.getAttribute('data-final-y') || '0');\n      } else {\n        vars.x = parseFloat(strip.getAttribute('data-final-x') || '0');\n      }\n      tl.to(strip, vars, d);\n      if (props.colorFrom && props.colorTo)\n        tl.fromTo(\n          strip,\n          { color: props.colorFrom },\n          { color: props.colorTo, duration: props.duration, ease: props.ease },\n          d\n        );\n    });\n  }\n\n  tlRef.value = tl;\n};\n\nconst create = () => {\n  build();\n  if (props.scrambleCharset) randomizeScrambles();\n  play();\n  armHover();\n  ready.value = true;\n};\n\nconst initializeAnimation = async () => {\n  if (typeof window === 'undefined' || !textRef.value || !props.text || !fontsLoaded.value) return;\n\n  if (\n    props.respectReducedMotion &&\n    window.matchMedia &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  ) {\n    ready.value = true;\n    emit('shuffle-complete');\n    props.onShuffleComplete?.();\n    return;\n  }\n\n  await nextTick();\n\n  const el = textRef.value;\n  const start = scrollTriggerStart.value;\n\n  const st = ScrollTrigger.create({\n    trigger: el,\n    start,\n    once: props.triggerOnce,\n    onEnter: create\n  });\n\n  scrollTriggerRef.value = st;\n};\n\nconst cleanup = () => {\n  if (scrollTriggerRef.value) {\n    scrollTriggerRef.value.kill();\n    scrollTriggerRef.value = null;\n  }\n  removeHover();\n  teardown();\n  ready.value = false;\n};\n\nonMounted(async () => {\n  if ('fonts' in document) {\n    if (document.fonts.status === 'loaded') {\n      fontsLoaded.value = true;\n    } else {\n      await document.fonts.ready;\n      fontsLoaded.value = true;\n    }\n  } else {\n    fontsLoaded.value = true;\n  }\n\n  initializeAnimation();\n});\n\nonUnmounted(() => {\n  cleanup();\n});\n\nwatch(\n  [\n    () => props.text,\n    () => props.duration,\n    () => props.maxDelay,\n    () => props.ease,\n    () => props.shuffleDirection,\n    () => props.shuffleTimes,\n    () => props.animationMode,\n    () => props.loop,\n    () => props.loopDelay,\n    () => props.stagger,\n    () => props.scrambleCharset,\n    () => props.colorFrom,\n    () => props.colorTo,\n    () => props.triggerOnce,\n    () => props.respectReducedMotion,\n    () => props.triggerOnHover,\n    () => fontsLoaded.value\n  ],\n  () => {\n    cleanup();\n    initializeAnimation();\n  }\n);\n</script>\n","path":"Shuffle/Shuffle.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/StickerPeel.json b/public/r/StickerPeel.json
index 70d0847..a28a84b 100644
--- a/public/r/StickerPeel.json
+++ b/public/r/StickerPeel.json
@@ -1 +1 @@
-{"name":"StickerPeel","title":"StickerPeel","description":"Sticker corner lift + peel interaction using 3D transform and shadow depth.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { gsap } from 'gsap';\nimport { Draggable } from 'gsap/Draggable';\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';\n\ngsap.registerPlugin(Draggable);\n\ninterface StickerPeelProps {\n  imageSrc: string;\n  rotate?: number;\n  peelBackHoverPct?: number;\n  peelBackActivePct?: number;\n  peelEasing?: string;\n  peelHoverEasing?: string;\n  width?: number;\n  shadowIntensity?: number;\n  lightingIntensity?: number;\n  initialPosition?: 'center' | 'random' | { x: number; y: number };\n  peelDirection?: number;\n  className?: string;\n}\n\nconst props = withDefaults(defineProps<StickerPeelProps>(), {\n  rotate: 30,\n  peelBackHoverPct: 30,\n  peelBackActivePct: 40,\n  peelEasing: 'power3.out',\n  peelHoverEasing: 'power2.out',\n  width: 200,\n  shadowIntensity: 0.6,\n  lightingIntensity: 0.1,\n  initialPosition: 'center',\n  peelDirection: 0,\n  className: ''\n});\n\nconst containerRef = useTemplateRef('containerRef');\nconst dragTargetRef = useTemplateRef('dragTargetRef');\nconst pointLightRef = useTemplateRef('pointLightRef');\nconst pointLightFlippedRef = useTemplateRef('pointLightFlippedRef');\nconst draggableInstanceRef = ref<Draggable | null>(null);\n\nconst defaultPadding = 12;\n\nlet cleanup: (() => void) | null = null;\n\nconst setup = () => {\n  const target = dragTargetRef.value;\n  if (!target) return;\n\n  const boundsEl = target.parentNode as HTMLElement;\n\n  const draggable = Draggable.create(target, {\n    type: 'x,y',\n    bounds: boundsEl,\n    inertia: true,\n    onDrag(this: Draggable) {\n      const rot = gsap.utils.clamp(-24, 24, this.deltaX * 0.4);\n      gsap.to(target, { rotation: rot, duration: 0.15, ease: 'power1.out' });\n    },\n    onDragEnd() {\n      const rotationEase = 'power2.out';\n      const duration = 0.8;\n      gsap.to(target, { rotation: 0, duration, ease: rotationEase });\n    }\n  });\n\n  draggableInstanceRef.value = draggable[0];\n\n  const handleResize = () => {\n    if (draggableInstanceRef.value) {\n      draggableInstanceRef.value.update();\n\n      const currentX = gsap.getProperty(target, 'x') as number;\n      const currentY = gsap.getProperty(target, 'y') as number;\n\n      const boundsRect = boundsEl.getBoundingClientRect();\n      const targetRect = target.getBoundingClientRect();\n\n      const maxX = boundsRect.width - targetRect.width;\n      const maxY = boundsRect.height - targetRect.height;\n\n      const newX = Math.max(0, Math.min(currentX, maxX));\n      const newY = Math.max(0, Math.min(currentY, maxY));\n\n      if (newX !== currentX || newY !== currentY) {\n        gsap.to(target, {\n          x: newX,\n          y: newY,\n          duration: 0.3,\n          ease: 'power2.out'\n        });\n      }\n    }\n  };\n\n  window.addEventListener('resize', handleResize);\n  window.addEventListener('orientationchange', handleResize);\n\n  const container = containerRef.value;\n  if (!container) return;\n\n  const handleTouchStart = () => {\n    container.classList.add('touch-active');\n  };\n\n  const handleTouchEnd = () => {\n    container.classList.remove('touch-active');\n  };\n\n  container.addEventListener('touchstart', handleTouchStart);\n  container.addEventListener('touchend', handleTouchEnd);\n  container.addEventListener('touchcancel', handleTouchEnd);\n\n  cleanup = () => {\n    window.removeEventListener('resize', handleResize);\n    window.removeEventListener('orientationchange', handleResize);\n    if (draggableInstanceRef.value) {\n      draggableInstanceRef.value.kill();\n    }\n\n    container.removeEventListener('touchstart', handleTouchStart);\n    container.removeEventListener('touchend', handleTouchEnd);\n    container.removeEventListener('touchcancel', handleTouchEnd);\n  };\n};\n\nonMounted(() => {\n  setup();\n});\n\nwatch(\n  () => props.initialPosition,\n  () => {\n    const target = dragTargetRef.value;\n    if (!target) return;\n\n    let startX = 0,\n      startY = 0;\n\n    if (props.initialPosition === 'center') {\n      return;\n    }\n\n    if (\n      typeof props.initialPosition === 'object' &&\n      props.initialPosition.x !== undefined &&\n      props.initialPosition.y !== undefined\n    ) {\n      startX = props.initialPosition.x;\n      startY = props.initialPosition.y;\n    }\n\n    gsap.set(target, { x: startX, y: startY });\n  },\n  { immediate: true }\n);\n\nlet lightHandler: (() => void) | null = null;\n\nwatch(\n  () => props.peelDirection,\n  () => {\n    const updateLight = (e: Event) => {\n      const mouseEvent = e as MouseEvent;\n      const rect = containerRef.value?.getBoundingClientRect();\n      if (!rect) return;\n\n      const x = mouseEvent.clientX - rect.left;\n      const y = mouseEvent.clientY - rect.top;\n\n      if (pointLightRef.value) {\n        gsap.set(pointLightRef.value, { attr: { x, y } });\n      }\n\n      const normalizedAngle = Math.abs(props.peelDirection % 360);\n      if (pointLightFlippedRef.value) {\n        if (normalizedAngle !== 180) {\n          gsap.set(pointLightFlippedRef.value, {\n            attr: { x, y: rect.height - y }\n          });\n        } else {\n          gsap.set(pointLightFlippedRef.value, {\n            attr: { x: -1000, y: -1000 }\n          });\n        }\n      }\n    };\n\n    const container = containerRef.value;\n    const eventType = 'mousemove';\n\n    if (container) {\n      container.addEventListener(eventType, updateLight);\n      lightHandler = () => container.removeEventListener(eventType, updateLight);\n    }\n  },\n  { immediate: true }\n);\n\nonBeforeUnmount(() => {\n  const container = containerRef.value;\n  if (container && lightHandler) {\n    lightHandler();\n    lightHandler = null;\n  }\n\n  if (cleanup) {\n    cleanup();\n    cleanup = null;\n  }\n});\n\nconst cssVars = computed(() => ({\n  '--sticker-rotate': `${props.rotate}deg`,\n  '--sticker-p': `${defaultPadding}px`,\n  '--sticker-peelback-hover': `${props.peelBackHoverPct}%`,\n  '--sticker-peelback-active': `${props.peelBackActivePct}%`,\n  '--sticker-peel-easing': props.peelEasing,\n  '--sticker-peel-hover-easing': props.peelHoverEasing,\n  '--sticker-width': `${props.width}px`,\n  '--sticker-shadow-opacity': props.shadowIntensity,\n  '--sticker-lighting-constant': props.lightingIntensity,\n  '--peel-direction': `${props.peelDirection}deg`,\n  '--sticker-start': `calc(-1 * ${defaultPadding}px)`,\n  '--sticker-end': `calc(100% + ${defaultPadding}px)`\n}));\n\nconst stickerMainStyle = computed(() => ({\n  clipPath: `polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end))`,\n  transition: 'clip-path 0.6s ease-out',\n  filter: 'url(#dropShadow)',\n  willChange: 'clip-path, transform'\n}));\n\nconst flapStyle = computed(() => ({\n  clipPath: `polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-start) var(--sticker-start))`,\n  top: `calc(-100% - var(--sticker-p) - var(--sticker-p))`,\n  transform: 'scaleY(-1)',\n  transition: 'all 0.6s ease-out',\n  willChange: 'clip-path, transform'\n}));\n\nconst imageStyle = computed(() => ({\n  transform: `rotate(calc(${props.rotate}deg - ${props.peelDirection}deg))`,\n  width: `${props.width}px`\n}));\n\nconst shadowImageStyle = computed(() => ({\n  ...imageStyle.value,\n  filter: 'url(#expandAndFill)'\n}));\n\nconst dropShadowStdDeviation = computed(() => 3 * props.shadowIntensity);\nconst flippedLightingConstant = computed(() => props.lightingIntensity * 7);\n</script>\n\n<template>\n  <div\n    ref=\"dragTargetRef\"\n    :class=\"[`absolute cursor-grab active:cursor-grabbing transform-gpu ${className}`]\"\n    :style=\"cssVars\"\n  >\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <filter id=\"pointLight\">\n          <feGaussianBlur stdDeviation=\"1\" result=\"blur\" />\n          <feSpecularLighting\n            result=\"spec\"\n            in=\"blur\"\n            :specularExponent=\"100\"\n            :specularConstant=\"props.lightingIntensity\"\n            lighting-color=\"white\"\n          >\n            <fePointLight ref=\"pointLightRef\" :x=\"100\" :y=\"100\" :z=\"300\" />\n          </feSpecularLighting>\n          <feComposite in=\"spec\" in2=\"SourceGraphic\" result=\"lit\" />\n          <feComposite in=\"lit\" in2=\"SourceAlpha\" operator=\"in\" />\n        </filter>\n\n        <filter id=\"pointLightFlipped\">\n          <feGaussianBlur stdDeviation=\"10\" result=\"blur\" />\n          <feSpecularLighting\n            result=\"spec\"\n            in=\"blur\"\n            :specularExponent=\"100\"\n            :specularConstant=\"flippedLightingConstant\"\n            lighting-color=\"white\"\n          >\n            <fePointLight ref=\"pointLightFlippedRef\" :x=\"100\" :y=\"100\" :z=\"300\" />\n          </feSpecularLighting>\n          <feComposite in=\"spec\" in2=\"SourceGraphic\" result=\"lit\" />\n          <feComposite in=\"lit\" in2=\"SourceAlpha\" operator=\"in\" />\n        </filter>\n\n        <filter id=\"dropShadow\">\n          <feDropShadow\n            dx=\"2\"\n            dy=\"4\"\n            :stdDeviation=\"dropShadowStdDeviation\"\n            flood-color=\"black\"\n            :flood-opacity=\"props.shadowIntensity\"\n          />\n        </filter>\n\n        <filter id=\"expandAndFill\">\n          <feOffset dx=\"0\" dy=\"0\" in=\"SourceAlpha\" result=\"shape\" />\n          <feFlood flood-color=\"rgb(179,179,179)\" result=\"flood\" />\n          <feComposite operator=\"in\" in=\"flood\" in2=\"shape\" />\n        </filter>\n      </defs>\n    </svg>\n\n    <div\n      class=\"relative touch-none sm:touch-auto select-none sticker-container\"\n      ref=\"containerRef\"\n      :style=\"{\n        WebkitUserSelect: 'none',\n        userSelect: 'none',\n        WebkitTouchCallout: 'none',\n        WebkitTapHighlightColor: 'transparent',\n        transform: `rotate(${peelDirection}deg)`,\n        transformOrigin: 'center'\n      }\"\n    >\n      <div class=\"sticker-main\" :style=\"stickerMainStyle\">\n        <div :style=\"{ filter: 'url(#pointLight)' }\">\n          <img :src=\"props.imageSrc\" alt=\"\" class=\"block\" :style=\"imageStyle\" draggable=\"false\" @contextmenu.prevent />\n        </div>\n\n        <div class=\"top-4 left-2 absolute opacity-40 w-full h-full\" :style=\"{ filter: 'brightness(0) blur(8px)' }\">\n          <div class=\"sticker-flap\" :style=\"flapStyle\">\n            <img\n              :src=\"props.imageSrc\"\n              alt=\"\"\n              class=\"block\"\n              :style=\"shadowImageStyle\"\n              draggable=\"false\"\n              @contextmenu.prevent\n            />\n          </div>\n        </div>\n\n        <div class=\"left-0 absolute w-full h-full sticker-flap\" :style=\"flapStyle\">\n          <div :style=\"{ filter: 'url(#pointLightFlipped)' }\">\n            <img\n              :src=\"props.imageSrc\"\n              alt=\"\"\n              class=\"block\"\n              :style=\"shadowImageStyle\"\n              draggable=\"false\"\n              @contextmenu.prevent\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticker-container:hover .sticker-main,\n.sticker-container.touch-active .sticker-main {\n  clip-path: polygon(\n    var(--sticker-start) var(--sticker-peelback-hover),\n    var(--sticker-end) var(--sticker-peelback-hover),\n    var(--sticker-end) var(--sticker-end),\n    var(--sticker-start) var(--sticker-end)\n  ) !important;\n}\n\n.sticker-container:hover .sticker-flap,\n.sticker-container.touch-active .sticker-flap {\n  clip-path: polygon(\n    var(--sticker-start) var(--sticker-start),\n    var(--sticker-end) var(--sticker-start),\n    var(--sticker-end) var(--sticker-peelback-hover),\n    var(--sticker-start) var(--sticker-peelback-hover)\n  ) !important;\n  top: calc(-100% + 2 * var(--sticker-peelback-hover) - 1px) !important;\n}\n\n.sticker-container:active .sticker-main {\n  clip-path: polygon(\n    var(--sticker-start) var(--sticker-peelback-active),\n    var(--sticker-end) var(--sticker-peelback-active),\n    var(--sticker-end) var(--sticker-end),\n    var(--sticker-start) var(--sticker-end)\n  ) !important;\n}\n\n.sticker-container:active .sticker-flap {\n  clip-path: polygon(\n    var(--sticker-start) var(--sticker-start),\n    var(--sticker-end) var(--sticker-start),\n    var(--sticker-end) var(--sticker-peelback-active),\n    var(--sticker-start) var(--sticker-peelback-active)\n  ) !important;\n  top: calc(-100% + 2 * var(--sticker-peelback-active) - 1px) !important;\n}\n</style>\n","path":"StickerPeel/StickerPeel.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
+{"name":"StickerPeel","title":"StickerPeel","description":"Sticker corner lift + peel interaction using 3D transform and shadow depth.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { gsap } from 'gsap';\nimport { Draggable } from 'gsap/all';\nimport { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';\n\ngsap.registerPlugin(Draggable);\n\ninterface StickerPeelProps {\n  imageSrc: string;\n  rotate?: number;\n  peelBackHoverPct?: number;\n  peelBackActivePct?: number;\n  peelEasing?: string;\n  peelHoverEasing?: string;\n  width?: number;\n  shadowIntensity?: number;\n  lightingIntensity?: number;\n  initialPosition?: 'center' | 'random' | { x: number; y: number };\n  peelDirection?: number;\n  className?: string;\n}\n\nconst props = withDefaults(defineProps<StickerPeelProps>(), {\n  rotate: 30,\n  peelBackHoverPct: 30,\n  peelBackActivePct: 40,\n  peelEasing: 'power3.out',\n  peelHoverEasing: 'power2.out',\n  width: 200,\n  shadowIntensity: 0.6,\n  lightingIntensity: 0.1,\n  initialPosition: 'center',\n  peelDirection: 0,\n  className: ''\n});\n\nconst containerRef = useTemplateRef('containerRef');\nconst dragTargetRef = useTemplateRef('dragTargetRef');\nconst pointLightRef = useTemplateRef('pointLightRef');\nconst pointLightFlippedRef = useTemplateRef('pointLightFlippedRef');\nconst draggableInstanceRef = ref<Draggable | null>(null);\n\nconst defaultPadding = 12;\n\nlet cleanup: (() => void) | null = null;\n\nconst setup = () => {\n  const target = dragTargetRef.value;\n  if (!target) return;\n\n  const boundsEl = target.parentNode as HTMLElement;\n\n  const draggable = Draggable.create(target, {\n    type: 'x,y',\n    bounds: boundsEl,\n    inertia: true,\n    onDrag(this: Draggable) {\n      const rot = gsap.utils.clamp(-24, 24, this.deltaX * 0.4);\n      gsap.to(target, { rotation: rot, duration: 0.15, ease: 'power1.out' });\n    },\n    onDragEnd() {\n      const rotationEase = 'power2.out';\n      const duration = 0.8;\n      gsap.to(target, { rotation: 0, duration, ease: rotationEase });\n    }\n  });\n\n  draggableInstanceRef.value = draggable[0];\n\n  const handleResize = () => {\n    if (draggableInstanceRef.value) {\n      draggableInstanceRef.value.update();\n\n      const currentX = gsap.getProperty(target, 'x') as number;\n      const currentY = gsap.getProperty(target, 'y') as number;\n\n      const boundsRect = boundsEl.getBoundingClientRect();\n      const targetRect = target.getBoundingClientRect();\n\n      const maxX = boundsRect.width - targetRect.width;\n      const maxY = boundsRect.height - targetRect.height;\n\n      const newX = Math.max(0, Math.min(currentX, maxX));\n      const newY = Math.max(0, Math.min(currentY, maxY));\n\n      if (newX !== currentX || newY !== currentY) {\n        gsap.to(target, {\n          x: newX,\n          y: newY,\n          duration: 0.3,\n          ease: 'power2.out'\n        });\n      }\n    }\n  };\n\n  window.addEventListener('resize', handleResize);\n  window.addEventListener('orientationchange', handleResize);\n\n  const container = containerRef.value;\n  if (!container) return;\n\n  const handleTouchStart = () => {\n    container.classList.add('touch-active');\n  };\n\n  const handleTouchEnd = () => {\n    container.classList.remove('touch-active');\n  };\n\n  container.addEventListener('touchstart', handleTouchStart);\n  container.addEventListener('touchend', handleTouchEnd);\n  container.addEventListener('touchcancel', handleTouchEnd);\n\n  cleanup = () => {\n    window.removeEventListener('resize', handleResize);\n    window.removeEventListener('orientationchange', handleResize);\n    if (draggableInstanceRef.value) {\n      draggableInstanceRef.value.kill();\n    }\n\n    container.removeEventListener('touchstart', handleTouchStart);\n    container.removeEventListener('touchend', handleTouchEnd);\n    container.removeEventListener('touchcancel', handleTouchEnd);\n  };\n};\n\nonMounted(() => {\n  setup();\n});\n\nwatch(\n  () => props.initialPosition,\n  () => {\n    const target = dragTargetRef.value;\n    if (!target) return;\n\n    let startX = 0,\n      startY = 0;\n\n    if (props.initialPosition === 'center') {\n      return;\n    }\n\n    if (\n      typeof props.initialPosition === 'object' &&\n      props.initialPosition.x !== undefined &&\n      props.initialPosition.y !== undefined\n    ) {\n      startX = props.initialPosition.x;\n      startY = props.initialPosition.y;\n    }\n\n    gsap.set(target, { x: startX, y: startY });\n  },\n  { immediate: true }\n);\n\nlet lightHandler: (() => void) | null = null;\n\nwatch(\n  () => props.peelDirection,\n  () => {\n    const updateLight = (e: Event) => {\n      const mouseEvent = e as MouseEvent;\n      const rect = containerRef.value?.getBoundingClientRect();\n      if (!rect) return;\n\n      const x = mouseEvent.clientX - rect.left;\n      const y = mouseEvent.clientY - rect.top;\n\n      if (pointLightRef.value) {\n        gsap.set(pointLightRef.value, { attr: { x, y } });\n      }\n\n      const normalizedAngle = Math.abs(props.peelDirection % 360);\n      if (pointLightFlippedRef.value) {\n        if (normalizedAngle !== 180) {\n          gsap.set(pointLightFlippedRef.value, {\n            attr: { x, y: rect.height - y }\n          });\n        } else {\n          gsap.set(pointLightFlippedRef.value, {\n            attr: { x: -1000, y: -1000 }\n          });\n        }\n      }\n    };\n\n    const container = containerRef.value;\n    const eventType = 'mousemove';\n\n    if (container) {\n      container.addEventListener(eventType, updateLight);\n      lightHandler = () => container.removeEventListener(eventType, updateLight);\n    }\n  },\n  { immediate: true }\n);\n\nonBeforeUnmount(() => {\n  const container = containerRef.value;\n  if (container && lightHandler) {\n    lightHandler();\n    lightHandler = null;\n  }\n\n  if (cleanup) {\n    cleanup();\n    cleanup = null;\n  }\n});\n\nconst cssVars = computed(() => ({\n  '--sticker-rotate': `${props.rotate}deg`,\n  '--sticker-p': `${defaultPadding}px`,\n  '--sticker-peelback-hover': `${props.peelBackHoverPct}%`,\n  '--sticker-peelback-active': `${props.peelBackActivePct}%`,\n  '--sticker-peel-easing': props.peelEasing,\n  '--sticker-peel-hover-easing': props.peelHoverEasing,\n  '--sticker-width': `${props.width}px`,\n  '--sticker-shadow-opacity': props.shadowIntensity,\n  '--sticker-lighting-constant': props.lightingIntensity,\n  '--peel-direction': `${props.peelDirection}deg`,\n  '--sticker-start': `calc(-1 * ${defaultPadding}px)`,\n  '--sticker-end': `calc(100% + ${defaultPadding}px)`\n}));\n\nconst stickerMainStyle = computed(() => ({\n  clipPath: `polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end))`,\n  transition: 'clip-path 0.6s ease-out',\n  filter: 'url(#dropShadow)',\n  willChange: 'clip-path, transform'\n}));\n\nconst flapStyle = computed(() => ({\n  clipPath: `polygon(var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-start) var(--sticker-start))`,\n  top: `calc(-100% - var(--sticker-p) - var(--sticker-p))`,\n  transform: 'scaleY(-1)',\n  transition: 'all 0.6s ease-out',\n  willChange: 'clip-path, transform'\n}));\n\nconst imageStyle = computed(() => ({\n  transform: `rotate(calc(${props.rotate}deg - ${props.peelDirection}deg))`,\n  width: `${props.width}px`\n}));\n\nconst shadowImageStyle = computed(() => ({\n  ...imageStyle.value,\n  filter: 'url(#expandAndFill)'\n}));\n\nconst dropShadowStdDeviation = computed(() => 3 * props.shadowIntensity);\nconst flippedLightingConstant = computed(() => props.lightingIntensity * 7);\n</script>\n\n<template>\n  <div\n    ref=\"dragTargetRef\"\n    :class=\"[`absolute cursor-grab active:cursor-grabbing transform-gpu ${className}`]\"\n    :style=\"cssVars\"\n  >\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <filter id=\"pointLight\">\n          <feGaussianBlur stdDeviation=\"1\" result=\"blur\" />\n          <feSpecularLighting\n            result=\"spec\"\n            in=\"blur\"\n            :specularExponent=\"100\"\n            :specularConstant=\"props.lightingIntensity\"\n            lighting-color=\"white\"\n          >\n            <fePointLight ref=\"pointLightRef\" :x=\"100\" :y=\"100\" :z=\"300\" />\n          </feSpecularLighting>\n          <feComposite in=\"spec\" in2=\"SourceGraphic\" result=\"lit\" />\n          <feComposite in=\"lit\" in2=\"SourceAlpha\" operator=\"in\" />\n        </filter>\n\n        <filter id=\"pointLightFlipped\">\n          <feGaussianBlur stdDeviation=\"10\" result=\"blur\" />\n          <feSpecularLighting\n            result=\"spec\"\n            in=\"blur\"\n            :specularExponent=\"100\"\n            :specularConstant=\"flippedLightingConstant\"\n            lighting-color=\"white\"\n          >\n            <fePointLight ref=\"pointLightFlippedRef\" :x=\"100\" :y=\"100\" :z=\"300\" />\n          </feSpecularLighting>\n          <feComposite in=\"spec\" in2=\"SourceGraphic\" result=\"lit\" />\n          <feComposite in=\"lit\" in2=\"SourceAlpha\" operator=\"in\" />\n        </filter>\n\n        <filter id=\"dropShadow\">\n          <feDropShadow\n            dx=\"2\"\n            dy=\"4\"\n            :stdDeviation=\"dropShadowStdDeviation\"\n            flood-color=\"black\"\n            :flood-opacity=\"props.shadowIntensity\"\n          />\n        </filter>\n\n        <filter id=\"expandAndFill\">\n          <feOffset dx=\"0\" dy=\"0\" in=\"SourceAlpha\" result=\"shape\" />\n          <feFlood flood-color=\"rgb(179,179,179)\" result=\"flood\" />\n          <feComposite operator=\"in\" in=\"flood\" in2=\"shape\" />\n        </filter>\n      </defs>\n    </svg>\n\n    <div\n      class=\"relative touch-none sm:touch-auto select-none sticker-container\"\n      ref=\"containerRef\"\n      :style=\"{\n        WebkitUserSelect: 'none',\n        userSelect: 'none',\n        WebkitTouchCallout: 'none',\n        WebkitTapHighlightColor: 'transparent',\n        transform: `rotate(${peelDirection}deg)`,\n        transformOrigin: 'center'\n      }\"\n    >\n      <div class=\"sticker-main\" :style=\"stickerMainStyle\">\n        <div :style=\"{ filter: 'url(#pointLight)' }\">\n          <img :src=\"props.imageSrc\" alt=\"\" class=\"block\" :style=\"imageStyle\" draggable=\"false\" @contextmenu.prevent />\n        </div>\n\n        <div class=\"top-4 left-2 absolute opacity-40 w-full h-full\" :style=\"{ filter: 'brightness(0) blur(8px)' }\">\n          <div class=\"sticker-flap\" :style=\"flapStyle\">\n            <img\n              :src=\"props.imageSrc\"\n              alt=\"\"\n              class=\"block\"\n              :style=\"shadowImageStyle\"\n              draggable=\"false\"\n              @contextmenu.prevent\n            />\n          </div>\n        </div>\n\n        <div class=\"left-0 absolute w-full h-full sticker-flap\" :style=\"flapStyle\">\n          <div :style=\"{ filter: 'url(#pointLightFlipped)' }\">\n            <img\n              :src=\"props.imageSrc\"\n              alt=\"\"\n              class=\"block\"\n              :style=\"shadowImageStyle\"\n              draggable=\"false\"\n              @contextmenu.prevent\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.sticker-container:hover .sticker-main,\n.sticker-container.touch-active .sticker-main {\n  clip-path: polygon(\n    var(--sticker-start) var(--sticker-peelback-hover),\n    var(--sticker-end) var(--sticker-peelback-hover),\n    var(--sticker-end) var(--sticker-end),\n    var(--sticker-start) var(--sticker-end)\n  ) !important;\n}\n\n.sticker-container:hover .sticker-flap,\n.sticker-container.touch-active .sticker-flap {\n  clip-path: polygon(\n    var(--sticker-start) var(--sticker-start),\n    var(--sticker-end) var(--sticker-start),\n    var(--sticker-end) var(--sticker-peelback-hover),\n    var(--sticker-start) var(--sticker-peelback-hover)\n  ) !important;\n  top: calc(-100% + 2 * var(--sticker-peelback-hover) - 1px) !important;\n}\n\n.sticker-container:active .sticker-main {\n  clip-path: polygon(\n    var(--sticker-start) var(--sticker-peelback-active),\n    var(--sticker-end) var(--sticker-peelback-active),\n    var(--sticker-end) var(--sticker-end),\n    var(--sticker-start) var(--sticker-end)\n  ) !important;\n}\n\n.sticker-container:active .sticker-flap {\n  clip-path: polygon(\n    var(--sticker-start) var(--sticker-start),\n    var(--sticker-end) var(--sticker-start),\n    var(--sticker-end) var(--sticker-peelback-active),\n    var(--sticker-start) var(--sticker-peelback-active)\n  ) !important;\n  top: calc(-100% + 2 * var(--sticker-peelback-active) - 1px) !important;\n}\n</style>\n","path":"StickerPeel/StickerPeel.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
diff --git a/public/r/TargetCursor.json b/public/r/TargetCursor.json
index 28052b5..edd7fba 100644
--- a/public/r/TargetCursor.json
+++ b/public/r/TargetCursor.json
@@ -1 +1 @@
-{"name":"TargetCursor","title":"TargetCursor","description":"A cursor follow animation with 4 corners that lock onto targets.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { gsap } from 'gsap';\nimport { onMounted, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue';\n\ninterface TargetCursorProps {\n  targetSelector?: string;\n  spinDuration?: number;\n  hideDefaultCursor?: boolean;\n}\n\nconst props = withDefaults(defineProps<TargetCursorProps>(), {\n  targetSelector: '.cursor-target',\n  spinDuration: 2,\n  hideDefaultCursor: true\n});\n\nconst cursorRef = useTemplateRef('cursorRef');\nconst cornersRef = ref<NodeListOf<HTMLDivElement> | null>(null);\nconst spinTl = ref<gsap.core.Timeline | null>(null);\n\nconst constants = {\n  borderWidth: 3,\n  cornerSize: 12,\n  parallaxStrength: 0.00005\n};\n\nconst moveCursor = (x: number, y: number) => {\n  if (!cursorRef.value) return;\n\n  gsap.to(cursorRef.value, {\n    x,\n    y,\n    duration: 0.1,\n    ease: 'power3.out'\n  });\n};\n\nlet cleanupAnimation: () => void = () => {};\n\nconst setupAnimation = () => {\n  if (!cursorRef.value) return;\n\n  const originalCursor = document.body.style.cursor;\n  if (props.hideDefaultCursor) {\n    document.body.style.cursor = 'none';\n  }\n\n  const cursor = cursorRef.value;\n  cornersRef.value = cursor.querySelectorAll<HTMLDivElement>('.target-cursor-corner');\n\n  let activeTarget: Element | null = null;\n  let currentTargetMove: ((ev: Event) => void) | null = null;\n  let currentLeaveHandler: (() => void) | null = null;\n  let isAnimatingToTarget = false;\n  let resumeTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  const cleanupTarget = (target: Element) => {\n    if (currentTargetMove) {\n      target.removeEventListener('mousemove', currentTargetMove);\n    }\n    if (currentLeaveHandler) {\n      target.removeEventListener('mouseleave', currentLeaveHandler);\n    }\n    currentTargetMove = null;\n    currentLeaveHandler = null;\n  };\n\n  gsap.set(cursor, {\n    xPercent: -50,\n    yPercent: -50,\n    x: window.innerWidth / 2,\n    y: window.innerHeight / 2,\n    opacity: 1,\n    display: 'block'\n  });\n\n  const createSpinTimeline = () => {\n    if (spinTl.value) {\n      spinTl.value.kill();\n    }\n    spinTl.value = gsap\n      .timeline({ repeat: -1 })\n      .to(cursor, { rotation: '+=360', duration: props.spinDuration, ease: 'none' });\n  };\n\n  createSpinTimeline();\n\n  const moveHandler = (e: MouseEvent) => moveCursor(e.clientX, e.clientY);\n  window.addEventListener('mousemove', moveHandler);\n\n  const enterHandler = (e: MouseEvent) => {\n    const directTarget = e.target as Element;\n\n    const allTargets: Element[] = [];\n    let current = directTarget;\n    while (current && current !== document.body) {\n      if (current.matches(props.targetSelector)) {\n        allTargets.push(current);\n      }\n      current = current.parentElement!;\n    }\n\n    const target = allTargets[0] || null;\n    if (!target || !cursorRef.value || !cornersRef.value) return;\n\n    if (activeTarget === target) return;\n\n    if (activeTarget) {\n      cleanupTarget(activeTarget);\n    }\n\n    if (resumeTimeout) {\n      clearTimeout(resumeTimeout);\n      resumeTimeout = null;\n    }\n\n    activeTarget = target;\n    const corners = Array.from(cornersRef.value);\n    corners.forEach(corner => {\n      gsap.killTweensOf(corner);\n    });\n    gsap.killTweensOf(cursorRef.value, 'rotation');\n    spinTl.value?.pause();\n\n    gsap.set(cursorRef.value, { rotation: 0 });\n\n    const updateCorners = (mouseX?: number, mouseY?: number) => {\n      const rect = target.getBoundingClientRect();\n      const cursorRect = cursorRef.value!.getBoundingClientRect();\n\n      const cursorCenterX = cursorRect.left + cursorRect.width / 2;\n      const cursorCenterY = cursorRect.top + cursorRect.height / 2;\n\n      const [tlc, trc, brc, blc] = Array.from(cornersRef.value!);\n\n      const { borderWidth, cornerSize, parallaxStrength } = constants;\n\n      const tlOffset = {\n        x: rect.left - cursorCenterX - borderWidth,\n        y: rect.top - cursorCenterY - borderWidth\n      };\n      const trOffset = {\n        x: rect.right - cursorCenterX + borderWidth - cornerSize,\n        y: rect.top - cursorCenterY - borderWidth\n      };\n      const brOffset = {\n        x: rect.right - cursorCenterX + borderWidth - cornerSize,\n        y: rect.bottom - cursorCenterY + borderWidth - cornerSize\n      };\n      const blOffset = {\n        x: rect.left - cursorCenterX - borderWidth,\n        y: rect.bottom - cursorCenterY + borderWidth - cornerSize\n      };\n\n      if (mouseX !== undefined && mouseY !== undefined) {\n        const targetCenterX = rect.left + rect.width / 2;\n        const targetCenterY = rect.top + rect.height / 2;\n        const mouseOffsetX = (mouseX - targetCenterX) * parallaxStrength;\n        const mouseOffsetY = (mouseY - targetCenterY) * parallaxStrength;\n\n        tlOffset.x += mouseOffsetX;\n        tlOffset.y += mouseOffsetY;\n        trOffset.x += mouseOffsetX;\n        trOffset.y += mouseOffsetY;\n        brOffset.x += mouseOffsetX;\n        brOffset.y += mouseOffsetY;\n        blOffset.x += mouseOffsetX;\n        blOffset.y += mouseOffsetY;\n      }\n\n      const tl = gsap.timeline();\n      const corners = [tlc, trc, brc, blc];\n      const offsets = [tlOffset, trOffset, brOffset, blOffset];\n\n      corners.forEach((corner, index) => {\n        tl.to(\n          corner as HTMLElement,\n          {\n            x: offsets[index].x,\n            y: offsets[index].y,\n            duration: 0.2,\n            ease: 'power2.out'\n          },\n          0\n        );\n      });\n    };\n\n    isAnimatingToTarget = true;\n    updateCorners();\n\n    setTimeout(() => {\n      isAnimatingToTarget = false;\n    }, 1);\n\n    let moveThrottle: number | null = null;\n    const targetMove = (ev: Event) => {\n      if (moveThrottle || isAnimatingToTarget) return;\n      moveThrottle = requestAnimationFrame(() => {\n        const mouseEvent = ev as MouseEvent;\n        updateCorners(mouseEvent.clientX, mouseEvent.clientY);\n        moveThrottle = null;\n      });\n    };\n\n    const leaveHandler = () => {\n      activeTarget = null;\n      isAnimatingToTarget = false;\n\n      if (cornersRef.value) {\n        const corners = Array.from(cornersRef.value);\n        gsap.killTweensOf(corners);\n\n        const { cornerSize } = constants;\n        const positions = [\n          { x: -cornerSize * 1.5, y: -cornerSize * 1.5 },\n          { x: cornerSize * 0.5, y: -cornerSize * 1.5 },\n          { x: cornerSize * 0.5, y: cornerSize * 0.5 },\n          { x: -cornerSize * 1.5, y: cornerSize * 0.5 }\n        ];\n\n        const tl = gsap.timeline();\n        corners.forEach((corner, index) => {\n          tl.to(\n            corner as HTMLElement,\n            {\n              x: positions[index].x,\n              y: positions[index].y,\n              duration: 0.3,\n              ease: 'power3.out'\n            },\n            0\n          );\n        });\n      }\n\n      resumeTimeout = setTimeout(() => {\n        if (!activeTarget && cursorRef.value && spinTl.value) {\n          const currentRotation = gsap.getProperty(cursorRef.value, 'rotation') as number;\n          const normalizedRotation = currentRotation % 360;\n\n          spinTl.value.kill();\n          spinTl.value = gsap\n            .timeline({ repeat: -1 })\n            .to(cursorRef.value, { rotation: '+=360', duration: props.spinDuration, ease: 'none' });\n\n          gsap.to(cursorRef.value, {\n            rotation: normalizedRotation + 360,\n            duration: props.spinDuration * (1 - normalizedRotation / 360),\n            ease: 'none',\n            onComplete: () => {\n              spinTl.value?.restart();\n            }\n          });\n        }\n        resumeTimeout = null;\n      }, 50);\n\n      cleanupTarget(target);\n    };\n\n    currentTargetMove = targetMove;\n    currentLeaveHandler = leaveHandler;\n\n    target.addEventListener('mousemove', targetMove);\n    target.addEventListener('mouseleave', leaveHandler);\n  };\n\n  window.addEventListener('mouseover', enterHandler, { passive: true });\n\n  cleanupAnimation = () => {\n    window.removeEventListener('mousemove', moveHandler);\n    window.removeEventListener('mouseover', enterHandler);\n\n    if (activeTarget) {\n      cleanupTarget(activeTarget);\n    }\n\n    if (resumeTimeout) {\n      clearTimeout(resumeTimeout);\n      resumeTimeout = null;\n    }\n\n    spinTl.value?.kill();\n    spinTl.value = null;\n\n    if (cursorRef.value) {\n      gsap.killTweensOf(cursorRef.value);\n    }\n    if (cornersRef.value) {\n      gsap.killTweensOf(Array.from(cornersRef.value));\n    }\n\n    if (cursorRef.value) {\n      gsap.set(cursorRef.value, {\n        x: 0,\n        y: 0,\n        rotation: 0,\n        opacity: 0,\n        display: 'none'\n      });\n    }\n\n    document.body.style.cursor = originalCursor;\n    activeTarget = null;\n  };\n};\n\nonMounted(() => {\n  setupAnimation();\n});\n\nonBeforeUnmount(() => {\n  cleanupAnimation();\n});\n\nwatch(\n  () => [props.targetSelector, props.spinDuration, props.hideDefaultCursor],\n  () => {\n    cleanupAnimation();\n    setupAnimation();\n  }\n);\n\nwatch(\n  () => props.spinDuration,\n  () => {\n    if (!cursorRef.value || !spinTl.value) return;\n\n    if (spinTl.value.isActive()) {\n      spinTl.value.kill();\n      spinTl.value = gsap\n        .timeline({ repeat: -1 })\n        .to(cursorRef.value, { rotation: '+=360', duration: props.spinDuration, ease: 'none' });\n    }\n  },\n  { immediate: true }\n);\n</script>\n\n<template>\n  <div\n    ref=\"cursorRef\"\n    class=\"top-0 left-0 z-[9999] fixed w-0 h-0 -translate-x-1/2 -translate-y-1/2 pointer-events-none mix-blend-difference transform opacity-0\"\n    :style=\"{ willChange: 'transform' }\"\n  >\n    <div\n      class=\"top-1/2 left-1/2 absolute bg-white rounded-full w-1 h-1 -translate-x-1/2 -translate-y-1/2 transform\"\n      :style=\"{ willChange: 'transform' }\"\n    />\n    <div\n      class=\"top-1/2 left-1/2 absolute border-[3px] border-white border-r-0 border-b-0 w-3 h-3 -translate-x-[150%] -translate-y-[150%] target-cursor-corner transform\"\n      :style=\"{ willChange: 'transform' }\"\n    />\n    <div\n      class=\"top-1/2 left-1/2 absolute border-[3px] border-white border-b-0 border-l-0 w-3 h-3 -translate-y-[150%] translate-x-1/2 target-cursor-corner transform\"\n      :style=\"{ willChange: 'transform' }\"\n    />\n    <div\n      class=\"top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-l-0 w-3 h-3 translate-x-1/2 translate-y-1/2 target-cursor-corner transform\"\n      :style=\"{ willChange: 'transform' }\"\n    />\n    <div\n      class=\"top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-r-0 w-3 h-3 -translate-x-[150%] translate-y-1/2 target-cursor-corner transform\"\n      :style=\"{ willChange: 'transform' }\"\n    />\n  </div>\n</template>\n","path":"TargetCursor/TargetCursor.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
+{"name":"TargetCursor","title":"TargetCursor","description":"A cursor follow animation with 4 corners that lock onto targets.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { gsap } from 'gsap';\nimport { onMounted, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue';\n\ninterface TargetCursorProps {\n  targetSelector?: string;\n  spinDuration?: number;\n  hideDefaultCursor?: boolean;\n}\n\nconst props = withDefaults(defineProps<TargetCursorProps>(), {\n  targetSelector: '.cursor-target',\n  spinDuration: 2,\n  hideDefaultCursor: true\n});\n\nconst cursorRef = useTemplateRef('cursorRef');\nconst cornersRef = ref<NodeListOf<HTMLDivElement> | null>(null);\nconst spinTl = ref<gsap.core.Timeline | null>(null);\n\nconst constants = {\n  borderWidth: 3,\n  cornerSize: 12,\n  parallaxStrength: 0.00005\n};\n\nconst moveCursor = (x: number, y: number) => {\n  if (!cursorRef.value) return;\n\n  gsap.to(cursorRef.value, {\n    x,\n    y,\n    duration: 0.1,\n    ease: 'power3.out'\n  });\n};\n\nlet cleanupAnimation: () => void = () => {};\n\nconst setupAnimation = () => {\n  if (!cursorRef.value) return;\n\n  const originalCursor = document.body.style.cursor;\n  if (props.hideDefaultCursor) {\n    document.body.style.cursor = 'none';\n  }\n\n  const cursor = cursorRef.value;\n  cornersRef.value = cursor.querySelectorAll<HTMLDivElement>('.target-cursor-corner');\n\n  let activeTarget: Element | null = null;\n  let currentTargetMove: ((ev: Event) => void) | null = null;\n  let currentLeaveHandler: (() => void) | null = null;\n  let isAnimatingToTarget = false;\n  let resumeTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  const cleanupTarget = (target: Element) => {\n    if (currentTargetMove) {\n      target.removeEventListener('mousemove', currentTargetMove);\n    }\n    if (currentLeaveHandler) {\n      target.removeEventListener('mouseleave', currentLeaveHandler);\n    }\n    currentTargetMove = null;\n    currentLeaveHandler = null;\n  };\n\n  gsap.set(cursor, {\n    xPercent: -50,\n    yPercent: -50,\n    x: window.innerWidth / 2,\n    y: window.innerHeight / 2,\n    opacity: 1,\n    display: 'block'\n  });\n\n  const createSpinTimeline = () => {\n    if (spinTl.value) {\n      spinTl.value.kill();\n    }\n    spinTl.value = gsap.timeline({ repeat: -1 }).to(cursor, {\n      rotation: '+=360',\n      duration: props.spinDuration,\n      ease: 'none'\n    });\n  };\n\n  createSpinTimeline();\n\n  const moveHandler = (e: MouseEvent) => moveCursor(e.clientX, e.clientY);\n  window.addEventListener('mousemove', moveHandler);\n\n  const enterHandler = (e: MouseEvent) => {\n    const directTarget = e.target as Element;\n\n    const allTargets: Element[] = [];\n    let current = directTarget;\n    while (current && current !== document.body) {\n      if (current.matches(props.targetSelector)) {\n        allTargets.push(current);\n      }\n      current = current.parentElement!;\n    }\n\n    const target = allTargets[0] || null;\n    if (!target || !cursorRef.value || !cornersRef.value) return;\n\n    if (activeTarget === target) return;\n\n    if (activeTarget) {\n      cleanupTarget(activeTarget);\n    }\n\n    if (resumeTimeout) {\n      clearTimeout(resumeTimeout);\n      resumeTimeout = null;\n    }\n\n    activeTarget = target;\n    const corners = Array.from(cornersRef.value);\n    corners.forEach(corner => {\n      gsap.killTweensOf(corner);\n    });\n    gsap.killTweensOf(cursorRef.value, 'rotation');\n    spinTl.value?.pause();\n\n    gsap.set(cursorRef.value, { rotation: 0 });\n\n    const updateCorners = (mouseX?: number, mouseY?: number) => {\n      const rect = target.getBoundingClientRect();\n      const cursorRect = cursorRef.value!.getBoundingClientRect();\n\n      const cursorCenterX = cursorRect.left + cursorRect.width / 2;\n      const cursorCenterY = cursorRect.top + cursorRect.height / 2;\n\n      const [tlc, trc, brc, blc] = Array.from(cornersRef.value!);\n\n      const { borderWidth, cornerSize, parallaxStrength } = constants;\n\n      const tlOffset = {\n        x: rect.left - cursorCenterX - borderWidth,\n        y: rect.top - cursorCenterY - borderWidth\n      };\n      const trOffset = {\n        x: rect.right - cursorCenterX + borderWidth - cornerSize,\n        y: rect.top - cursorCenterY - borderWidth\n      };\n      const brOffset = {\n        x: rect.right - cursorCenterX + borderWidth - cornerSize,\n        y: rect.bottom - cursorCenterY + borderWidth - cornerSize\n      };\n      const blOffset = {\n        x: rect.left - cursorCenterX - borderWidth,\n        y: rect.bottom - cursorCenterY + borderWidth - cornerSize\n      };\n\n      if (mouseX !== undefined && mouseY !== undefined) {\n        const targetCenterX = rect.left + rect.width / 2;\n        const targetCenterY = rect.top + rect.height / 2;\n        const mouseOffsetX = (mouseX - targetCenterX) * parallaxStrength;\n        const mouseOffsetY = (mouseY - targetCenterY) * parallaxStrength;\n\n        tlOffset.x += mouseOffsetX;\n        tlOffset.y += mouseOffsetY;\n        trOffset.x += mouseOffsetX;\n        trOffset.y += mouseOffsetY;\n        brOffset.x += mouseOffsetX;\n        brOffset.y += mouseOffsetY;\n        blOffset.x += mouseOffsetX;\n        blOffset.y += mouseOffsetY;\n      }\n\n      const tl = gsap.timeline();\n      const corners = [tlc, trc, brc, blc];\n      const offsets = [tlOffset, trOffset, brOffset, blOffset];\n\n      corners.forEach((corner, index) => {\n        const offset = offsets[index];\n        if (!offset) return;\n        tl.to(\n          corner as HTMLElement,\n          {\n            x: offset.x,\n            y: offset.y,\n            duration: 0.2,\n            ease: 'power2.out'\n          },\n          0\n        );\n      });\n    };\n\n    isAnimatingToTarget = true;\n    updateCorners();\n\n    setTimeout(() => {\n      isAnimatingToTarget = false;\n    }, 1);\n\n    let moveThrottle: number | null = null;\n    const targetMove = (ev: Event) => {\n      if (moveThrottle || isAnimatingToTarget) return;\n      moveThrottle = requestAnimationFrame(() => {\n        const mouseEvent = ev as MouseEvent;\n        updateCorners(mouseEvent.clientX, mouseEvent.clientY);\n        moveThrottle = null;\n      });\n    };\n\n    const leaveHandler = () => {\n      activeTarget = null;\n      isAnimatingToTarget = false;\n\n      if (cornersRef.value) {\n        const corners = Array.from(cornersRef.value);\n        gsap.killTweensOf(corners);\n\n        const { cornerSize } = constants;\n        const positions = [\n          { x: -cornerSize * 1.5, y: -cornerSize * 1.5 },\n          { x: cornerSize * 0.5, y: -cornerSize * 1.5 },\n          { x: cornerSize * 0.5, y: cornerSize * 0.5 },\n          { x: -cornerSize * 1.5, y: cornerSize * 0.5 }\n        ];\n\n        const tl = gsap.timeline();\n        corners.forEach((corner, index) => {\n          const pos = positions[index];\n          if (!pos) return;\n          tl.to(\n            corner as HTMLElement,\n            {\n              x: pos.x,\n              y: pos.y,\n              duration: 0.3,\n              ease: 'power3.out'\n            },\n            0\n          );\n        });\n      }\n\n      resumeTimeout = setTimeout(() => {\n        if (!activeTarget && cursorRef.value && spinTl.value) {\n          const currentRotation = gsap.getProperty(cursorRef.value, 'rotation') as number;\n          const normalizedRotation = currentRotation % 360;\n\n          spinTl.value.kill();\n          spinTl.value = gsap.timeline({ repeat: -1 }).to(cursorRef.value, {\n            rotation: '+=360',\n            duration: props.spinDuration,\n            ease: 'none'\n          });\n\n          gsap.to(cursorRef.value, {\n            rotation: normalizedRotation + 360,\n            duration: props.spinDuration * (1 - normalizedRotation / 360),\n            ease: 'none',\n            onComplete: () => {\n              spinTl.value?.restart();\n            }\n          });\n        }\n        resumeTimeout = null;\n      }, 50);\n\n      cleanupTarget(target);\n    };\n\n    currentTargetMove = targetMove;\n    currentLeaveHandler = leaveHandler;\n\n    target.addEventListener('mousemove', targetMove);\n    target.addEventListener('mouseleave', leaveHandler);\n  };\n\n  window.addEventListener('mouseover', enterHandler, { passive: true });\n\n  cleanupAnimation = () => {\n    window.removeEventListener('mousemove', moveHandler);\n    window.removeEventListener('mouseover', enterHandler);\n\n    if (activeTarget) {\n      cleanupTarget(activeTarget);\n    }\n\n    if (resumeTimeout) {\n      clearTimeout(resumeTimeout);\n      resumeTimeout = null;\n    }\n\n    spinTl.value?.kill();\n    spinTl.value = null;\n\n    if (cursorRef.value) {\n      gsap.killTweensOf(cursorRef.value);\n    }\n    if (cornersRef.value) {\n      gsap.killTweensOf(Array.from(cornersRef.value));\n    }\n\n    if (cursorRef.value) {\n      gsap.set(cursorRef.value, {\n        x: 0,\n        y: 0,\n        rotation: 0,\n        opacity: 0,\n        display: 'none'\n      });\n    }\n\n    document.body.style.cursor = originalCursor;\n    activeTarget = null;\n  };\n};\n\nonMounted(() => {\n  setupAnimation();\n});\n\nonBeforeUnmount(() => {\n  cleanupAnimation();\n});\n\nwatch(\n  () => [props.targetSelector, props.spinDuration, props.hideDefaultCursor],\n  () => {\n    cleanupAnimation();\n    setupAnimation();\n  }\n);\n\nwatch(\n  () => props.spinDuration,\n  () => {\n    if (!cursorRef.value || !spinTl.value) return;\n\n    if (spinTl.value.isActive()) {\n      spinTl.value.kill();\n      spinTl.value = gsap.timeline({ repeat: -1 }).to(cursorRef.value, {\n        rotation: '+=360',\n        duration: props.spinDuration,\n        ease: 'none'\n      });\n    }\n  },\n  { immediate: true }\n);\n</script>\n\n<template>\n  <div\n    ref=\"cursorRef\"\n    class=\"top-0 left-0 z-[9999] fixed w-0 h-0 -translate-x-1/2 -translate-y-1/2 pointer-events-none mix-blend-difference transform opacity-0\"\n    :style=\"{ willChange: 'transform' }\"\n  >\n    <div\n      class=\"top-1/2 left-1/2 absolute bg-white rounded-full w-1 h-1 -translate-x-1/2 -translate-y-1/2 transform\"\n      :style=\"{ willChange: 'transform' }\"\n    />\n    <div\n      class=\"top-1/2 left-1/2 absolute border-[3px] border-white border-r-0 border-b-0 w-3 h-3 -translate-x-[150%] -translate-y-[150%] target-cursor-corner transform\"\n      :style=\"{ willChange: 'transform' }\"\n    />\n    <div\n      class=\"top-1/2 left-1/2 absolute border-[3px] border-white border-b-0 border-l-0 w-3 h-3 -translate-y-[150%] translate-x-1/2 target-cursor-corner transform\"\n      :style=\"{ willChange: 'transform' }\"\n    />\n    <div\n      class=\"top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-l-0 w-3 h-3 translate-x-1/2 translate-y-1/2 target-cursor-corner transform\"\n      :style=\"{ willChange: 'transform' }\"\n    />\n    <div\n      class=\"top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-r-0 w-3 h-3 -translate-x-[150%] translate-y-1/2 target-cursor-corner transform\"\n      :style=\"{ willChange: 'transform' }\"\n    />\n  </div>\n</template>\n","path":"TargetCursor/TargetCursor.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"gsap","version":"^3.13.0"}],"devDependencies":[],"categories":["Animations"]}
\ No newline at end of file
diff --git a/public/r/TextCursor.json b/public/r/TextCursor.json
index 988900f..110d2a8 100644
--- a/public/r/TextCursor.json
+++ b/public/r/TextCursor.json
@@ -1 +1 @@
-{"name":"TextCursor","title":"TextCursor","description":"Make any text element follow your cursor, leaving a trail of copies behind it.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport { Motion } from 'motion-v';\n\ninterface TextCursorProps {\n  text?: string;\n  delay?: number;\n  spacing?: number;\n  followMouseDirection?: boolean;\n  randomFloat?: boolean;\n  exitDuration?: number;\n  removalInterval?: number;\n  maxPoints?: number;\n}\n\ninterface TrailItem {\n  id: number;\n  x: number;\n  y: number;\n  angle: number;\n  randomX?: number;\n  randomY?: number;\n  randomRotate?: number;\n}\n\nconst props = withDefaults(defineProps<TextCursorProps>(), {\n  text: '⚛️',\n  delay: 0.01,\n  spacing: 100,\n  followMouseDirection: true,\n  randomFloat: true,\n  exitDuration: 0.5,\n  removalInterval: 30,\n  maxPoints: 5\n});\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst trail = ref<TrailItem[]>([]);\nconst lastMoveTime = ref(Date.now());\nconst idCounter = ref(0);\n\nlet removalIntervalId: number | null = null;\n\nconst handleMouseMove = (e: MouseEvent) => {\n  if (!containerRef.value) return;\n\n  const rect = containerRef.value.getBoundingClientRect();\n  const mouseX = e.clientX - rect.left;\n  const mouseY = e.clientY - rect.top;\n\n  let newTrail = [...trail.value];\n\n  if (newTrail.length === 0) {\n    newTrail.push({\n      id: idCounter.value++,\n      x: mouseX,\n      y: mouseY,\n      angle: 0,\n      ...(props.randomFloat && {\n        randomX: Math.random() * 10 - 5,\n        randomY: Math.random() * 10 - 5,\n        randomRotate: Math.random() * 10 - 5\n      })\n    });\n  } else {\n    const last = newTrail[newTrail.length - 1];\n    const dx = mouseX - last.x;\n    const dy = mouseY - last.y;\n    const distance = Math.sqrt(dx * dx + dy * dy);\n\n    if (distance >= props.spacing) {\n      let rawAngle = (Math.atan2(dy, dx) * 180) / Math.PI;\n      if (rawAngle > 90) rawAngle -= 180;\n      else if (rawAngle < -90) rawAngle += 180;\n      const computedAngle = props.followMouseDirection ? rawAngle : 0;\n      const steps = Math.floor(distance / props.spacing);\n\n      for (let i = 1; i <= steps; i++) {\n        const t = (props.spacing * i) / distance;\n        const newX = last.x + dx * t;\n        const newY = last.y + dy * t;\n        newTrail.push({\n          id: idCounter.value++,\n          x: newX,\n          y: newY,\n          angle: computedAngle,\n          ...(props.randomFloat && {\n            randomX: Math.random() * 10 - 5,\n            randomY: Math.random() * 10 - 5,\n            randomRotate: Math.random() * 10 - 5\n          })\n        });\n      }\n    }\n  }\n\n  if (newTrail.length > props.maxPoints) {\n    newTrail = newTrail.slice(newTrail.length - props.maxPoints);\n  }\n\n  trail.value = newTrail;\n  lastMoveTime.value = Date.now();\n};\n\nconst startRemovalInterval = () => {\n  if (removalIntervalId) {\n    clearInterval(removalIntervalId);\n  }\n\n  removalIntervalId = setInterval(() => {\n    if (Date.now() - lastMoveTime.value > 100) {\n      if (trail.value.length > 0) {\n        trail.value = trail.value.slice(1);\n      }\n    }\n  }, props.removalInterval);\n};\n\nonMounted(() => {\n  if (containerRef.value) {\n    containerRef.value.addEventListener('mousemove', handleMouseMove);\n    startRemovalInterval();\n  }\n});\n\nonUnmounted(() => {\n  if (containerRef.value) {\n    containerRef.value.removeEventListener('mousemove', handleMouseMove);\n  }\n  if (removalIntervalId) {\n    clearInterval(removalIntervalId);\n  }\n});\n</script>\n\n<template>\n  <div ref=\"containerRef\" class=\"w-full h-full relative\">\n    <div class=\"absolute inset-0 pointer-events-none\">\n      <Motion\n        v-for=\"item in trail\"\n        :key=\"item.id\"\n        :initial=\"{ opacity: 0, scale: 1, rotate: item.angle }\"\n        :animate=\"{\n          opacity: 1,\n          scale: 1,\n          x: props.randomFloat ? [0, item.randomX || 0, 0] : 0,\n          y: props.randomFloat ? [0, item.randomY || 0, 0] : 0,\n          rotate: props.randomFloat ? [item.angle, item.angle + (item.randomRotate || 0), item.angle] : item.angle\n        }\"\n        :transition=\"{\n          duration: props.randomFloat ? 2 : props.exitDuration,\n          repeat: props.randomFloat ? Infinity : 0,\n          repeatType: props.randomFloat ? 'mirror' : 'loop'\n        }\"\n        class=\"absolute select-none whitespace-nowrap text-3xl\"\n        :style=\"{ left: `${item.x}px`, top: `${item.y}px` }\"\n      >\n        {{ props.text }}\n      </Motion>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.trail-enter-active,\n.trail-leave-active {\n  transition: all 0.5s ease;\n}\n\n.trail-enter-from {\n  opacity: 0;\n  transform: scale(0);\n}\n\n.trail-leave-to {\n  opacity: 0;\n  transform: scale(0);\n}\n</style>\n","path":"TextCursor/TextCursor.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
+{"name":"TextCursor","title":"TextCursor","description":"Make any text element follow your cursor, leaving a trail of copies behind it.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';\nimport { Motion } from 'motion-v';\n\ninterface TextCursorProps {\n  text?: string;\n  delay?: number;\n  spacing?: number;\n  followMouseDirection?: boolean;\n  randomFloat?: boolean;\n  exitDuration?: number;\n  removalInterval?: number;\n  maxPoints?: number;\n}\n\ninterface TrailItem {\n  id: number;\n  x: number;\n  y: number;\n  angle: number;\n  randomX?: number;\n  randomY?: number;\n  randomRotate?: number;\n}\n\nconst props = withDefaults(defineProps<TextCursorProps>(), {\n  text: '⚛️',\n  delay: 0.01,\n  spacing: 100,\n  followMouseDirection: true,\n  randomFloat: true,\n  exitDuration: 0.5,\n  removalInterval: 30,\n  maxPoints: 5\n});\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst trail = ref<TrailItem[]>([]);\nconst lastMoveTime = ref(Date.now());\nconst idCounter = ref(0);\n\nlet removalIntervalId: ReturnType<typeof setInterval> | null = null;\n\nconst handleMouseMove = (e: MouseEvent) => {\n  if (!containerRef.value) return;\n\n  const rect = containerRef.value.getBoundingClientRect();\n  const mouseX = e.clientX - rect.left;\n  const mouseY = e.clientY - rect.top;\n\n  let newTrail = [...trail.value];\n\n  if (newTrail.length === 0) {\n    newTrail.push({\n      id: idCounter.value++,\n      x: mouseX,\n      y: mouseY,\n      angle: 0,\n      ...(props.randomFloat && {\n        randomX: Math.random() * 10 - 5,\n        randomY: Math.random() * 10 - 5,\n        randomRotate: Math.random() * 10 - 5\n      })\n    });\n  } else {\n    const last = newTrail[newTrail.length - 1];\n    const dx = mouseX - last.x;\n    const dy = mouseY - last.y;\n    const distance = Math.sqrt(dx * dx + dy * dy);\n\n    if (distance >= props.spacing) {\n      let rawAngle = (Math.atan2(dy, dx) * 180) / Math.PI;\n      if (rawAngle > 90) rawAngle -= 180;\n      else if (rawAngle < -90) rawAngle += 180;\n      const computedAngle = props.followMouseDirection ? rawAngle : 0;\n      const steps = Math.floor(distance / props.spacing);\n\n      for (let i = 1; i <= steps; i++) {\n        const t = (props.spacing * i) / distance;\n        const newX = last.x + dx * t;\n        const newY = last.y + dy * t;\n        newTrail.push({\n          id: idCounter.value++,\n          x: newX,\n          y: newY,\n          angle: computedAngle,\n          ...(props.randomFloat && {\n            randomX: Math.random() * 10 - 5,\n            randomY: Math.random() * 10 - 5,\n            randomRotate: Math.random() * 10 - 5\n          })\n        });\n      }\n    }\n  }\n\n  if (newTrail.length > props.maxPoints) {\n    newTrail = newTrail.slice(newTrail.length - props.maxPoints);\n  }\n\n  trail.value = newTrail;\n  lastMoveTime.value = Date.now();\n};\n\nconst startRemovalInterval = () => {\n  if (removalIntervalId) {\n    clearInterval(removalIntervalId);\n  }\n\n  removalIntervalId = setInterval(() => {\n    if (Date.now() - lastMoveTime.value > 100) {\n      if (trail.value.length > 0) {\n        trail.value = trail.value.slice(1);\n      }\n    }\n  }, props.removalInterval);\n};\n\nonMounted(() => {\n  if (containerRef.value) {\n    containerRef.value.addEventListener('mousemove', handleMouseMove);\n    startRemovalInterval();\n  }\n});\n\nonUnmounted(() => {\n  if (containerRef.value) {\n    containerRef.value.removeEventListener('mousemove', handleMouseMove);\n  }\n  if (removalIntervalId) {\n    clearInterval(removalIntervalId);\n  }\n});\n</script>\n\n<template>\n  <div ref=\"containerRef\" class=\"relative w-full h-full\">\n    <div class=\"absolute inset-0 pointer-events-none\">\n      <Motion\n        v-for=\"item in trail\"\n        :key=\"item.id\"\n        :initial=\"{ opacity: 0, scale: 1, rotate: item.angle }\"\n        :animate=\"{\n          opacity: 1,\n          scale: 1,\n          x: props.randomFloat ? [0, item.randomX || 0, 0] : 0,\n          y: props.randomFloat ? [0, item.randomY || 0, 0] : 0,\n          rotate: props.randomFloat ? [item.angle, item.angle + (item.randomRotate || 0), item.angle] : item.angle\n        }\"\n        :transition=\"{\n          duration: props.randomFloat ? 2 : props.exitDuration,\n          repeat: props.randomFloat ? Infinity : 0,\n          repeatType: props.randomFloat ? 'mirror' : 'loop'\n        }\"\n        class=\"absolute text-3xl whitespace-nowrap select-none\"\n        :style=\"{ left: `${item.x}px`, top: `${item.y}px` }\"\n      >\n        {{ props.text }}\n      </Motion>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.trail-enter-active,\n.trail-leave-active {\n  transition: all 0.5s ease;\n}\n\n.trail-enter-from {\n  opacity: 0;\n  transform: scale(0);\n}\n\n.trail-leave-to {\n  opacity: 0;\n  transform: scale(0);\n}\n</style>\n","path":"TextCursor/TextCursor.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/TrueFocus.json b/public/r/TrueFocus.json
index ba293a3..5f95aa2 100644
--- a/public/r/TrueFocus.json
+++ b/public/r/TrueFocus.json
@@ -1 +1 @@
-{"name":"TrueFocus","title":"TrueFocus","description":"Applies dynamic blur / clarity based over a series of words in order.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { motion } from 'motion-v';\nimport { computed, nextTick, onMounted, onUnmounted, ref, watch, useTemplateRef } from 'vue';\n\ninterface TrueFocusProps {\n  sentence?: string;\n  manualMode?: boolean;\n  blurAmount?: number;\n  borderColor?: string;\n  glowColor?: string;\n  animationDuration?: number;\n  pauseBetweenAnimations?: number;\n}\n\nconst props = withDefaults(defineProps<TrueFocusProps>(), {\n  sentence: 'True Focus',\n  manualMode: false,\n  blurAmount: 5,\n  borderColor: 'green',\n  glowColor: 'rgba(0, 255, 0, 0.6)',\n  animationDuration: 0.5,\n  pauseBetweenAnimations: 1\n});\n\nconst words = computed(() => props.sentence.split(' '));\nconst currentIndex = ref(0);\nconst lastActiveIndex = ref<number | null>(null);\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst wordRefs = ref<HTMLSpanElement[]>([]);\nconst focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });\n\nlet interval: number | null = null;\n\nwatch(\n  [currentIndex, () => words.value.length],\n  async () => {\n    if (currentIndex.value === null || currentIndex.value === -1) return;\n    if (!wordRefs.value[currentIndex.value] || !containerRef.value) return;\n\n    await nextTick();\n\n    const parentRect = containerRef.value.getBoundingClientRect();\n    const activeRect = wordRefs.value[currentIndex.value].getBoundingClientRect();\n\n    focusRect.value = {\n      x: activeRect.left - parentRect.left,\n      y: activeRect.top - parentRect.top,\n      width: activeRect.width,\n      height: activeRect.height\n    };\n  },\n  { immediate: true }\n);\n\nconst handleMouseEnter = (index: number) => {\n  if (props.manualMode) {\n    lastActiveIndex.value = index;\n    currentIndex.value = index;\n  }\n};\n\nconst handleMouseLeave = () => {\n  if (props.manualMode) {\n    currentIndex.value = lastActiveIndex.value || 0;\n  }\n};\n\nconst setWordRef = (el: HTMLSpanElement | null, index: number) => {\n  if (el) {\n    wordRefs.value[index] = el;\n  }\n};\n\nonMounted(async () => {\n  await nextTick();\n\n  if (wordRefs.value[0] && containerRef.value) {\n    const parentRect = containerRef.value.getBoundingClientRect();\n    const activeRect = wordRefs.value[0].getBoundingClientRect();\n\n    focusRect.value = {\n      x: activeRect.left - parentRect.left,\n      y: activeRect.top - parentRect.top,\n      width: activeRect.width,\n      height: activeRect.height\n    };\n  }\n\n  watch(\n    [() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, () => words.value],\n    () => {\n      if (interval) {\n        clearInterval(interval);\n        interval = null;\n      }\n\n      if (!props.manualMode) {\n        interval = setInterval(\n          () => {\n            currentIndex.value = (currentIndex.value + 1) % words.value.length;\n          },\n          (props.animationDuration + props.pauseBetweenAnimations) * 1000\n        );\n      }\n    },\n    { immediate: true }\n  );\n});\n\nonUnmounted(() => {\n  if (interval) {\n    clearInterval(interval);\n  }\n});\n</script>\n\n<template>\n  <div class=\"relative flex flex-wrap justify-center items-center gap-[1em]\" ref=\"containerRef\">\n    <span\n      v-for=\"(word, index) in words\"\n      :key=\"index\"\n      :ref=\"el => setWordRef(el as HTMLSpanElement, index)\"\n      class=\"relative font-black text-7xl transition-[filter,color] duration-300 ease-in-out cursor-pointer\"\n      :style=\"{\n        filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,\n        '--border-color': borderColor,\n        '--glow-color': glowColor,\n        transition: `filter ${animationDuration}s ease`\n      }\"\n      @mouseenter=\"handleMouseEnter(index)\"\n      @mouseleave=\"handleMouseLeave\"\n    >\n      {{ word }}\n    </span>\n\n    <motion.div\n      class=\"top-0 left-0 box-content absolute border-none pointer-events-none\"\n      :animate=\"{\n        x: focusRect.x,\n        y: focusRect.y,\n        width: focusRect.width,\n        height: focusRect.height,\n        opacity: currentIndex >= 0 ? 1 : 0\n      }\"\n      :transition=\"{\n        duration: animationDuration\n      }\"\n      :style=\"{\n        '--border-color': borderColor,\n        '--glow-color': glowColor\n      }\"\n    >\n      <span\n        class=\"top-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n\n      <span\n        class=\"top-[-10px] right-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n\n      <span\n        class=\"bottom-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n\n      <span\n        class=\"right-[-10px] bottom-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n    </motion.div>\n  </div>\n</template>\n","path":"TrueFocus/TrueFocus.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
+{"name":"TrueFocus","title":"TrueFocus","description":"Applies dynamic blur / clarity based over a series of words in order.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<script setup lang=\"ts\">\nimport { motion } from 'motion-v';\nimport { computed, nextTick, onMounted, onUnmounted, ref, watch, useTemplateRef } from 'vue';\n\ninterface TrueFocusProps {\n  sentence?: string;\n  manualMode?: boolean;\n  blurAmount?: number;\n  borderColor?: string;\n  glowColor?: string;\n  animationDuration?: number;\n  pauseBetweenAnimations?: number;\n}\n\nconst props = withDefaults(defineProps<TrueFocusProps>(), {\n  sentence: 'True Focus',\n  manualMode: false,\n  blurAmount: 5,\n  borderColor: 'green',\n  glowColor: 'rgba(0, 255, 0, 0.6)',\n  animationDuration: 0.5,\n  pauseBetweenAnimations: 1\n});\n\nconst words = computed(() => props.sentence.split(' '));\nconst currentIndex = ref(0);\nconst lastActiveIndex = ref<number | null>(null);\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst wordRefs = ref<HTMLSpanElement[]>([]);\nconst focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });\n\nlet interval: ReturnType<typeof setInterval> | null = null;\n\nwatch(\n  [currentIndex, () => words.value.length],\n  async () => {\n    if (currentIndex.value === null || currentIndex.value === -1) return;\n    if (!wordRefs.value[currentIndex.value] || !containerRef.value) return;\n\n    await nextTick();\n\n    const parentRect = containerRef.value.getBoundingClientRect();\n    const activeRect = wordRefs.value[currentIndex.value].getBoundingClientRect();\n\n    focusRect.value = {\n      x: activeRect.left - parentRect.left,\n      y: activeRect.top - parentRect.top,\n      width: activeRect.width,\n      height: activeRect.height\n    };\n  },\n  { immediate: true }\n);\n\nconst handleMouseEnter = (index: number) => {\n  if (props.manualMode) {\n    lastActiveIndex.value = index;\n    currentIndex.value = index;\n  }\n};\n\nconst handleMouseLeave = () => {\n  if (props.manualMode) {\n    currentIndex.value = lastActiveIndex.value || 0;\n  }\n};\n\nconst setWordRef = (el: HTMLSpanElement | null, index: number) => {\n  if (el) {\n    wordRefs.value[index] = el;\n  }\n};\n\nonMounted(async () => {\n  await nextTick();\n\n  if (wordRefs.value[0] && containerRef.value) {\n    const parentRect = containerRef.value.getBoundingClientRect();\n    const activeRect = wordRefs.value[0].getBoundingClientRect();\n\n    focusRect.value = {\n      x: activeRect.left - parentRect.left,\n      y: activeRect.top - parentRect.top,\n      width: activeRect.width,\n      height: activeRect.height\n    };\n  }\n\n  watch(\n    [() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, () => words.value],\n    () => {\n      if (interval) {\n        clearInterval(interval);\n        interval = null;\n      }\n\n      if (!props.manualMode) {\n        interval = setInterval(\n          () => {\n            currentIndex.value = (currentIndex.value + 1) % words.value.length;\n          },\n          (props.animationDuration + props.pauseBetweenAnimations) * 1000\n        );\n      }\n    },\n    { immediate: true }\n  );\n});\n\nonUnmounted(() => {\n  if (interval) {\n    clearInterval(interval);\n  }\n});\n</script>\n\n<template>\n  <div class=\"relative flex flex-wrap justify-center items-center gap-[1em]\" ref=\"containerRef\">\n    <span\n      v-for=\"(word, index) in words\"\n      :key=\"index\"\n      :ref=\"el => setWordRef(el as HTMLSpanElement, index)\"\n      class=\"relative font-black text-7xl transition-[filter,color] duration-300 ease-in-out cursor-pointer\"\n      :style=\"{\n        filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,\n        '--border-color': borderColor,\n        '--glow-color': glowColor,\n        transition: `filter ${animationDuration}s ease`\n      }\"\n      @mouseenter=\"handleMouseEnter(index)\"\n      @mouseleave=\"handleMouseLeave\"\n    >\n      {{ word }}\n    </span>\n\n    <motion.div\n      class=\"top-0 left-0 box-content absolute border-none pointer-events-none\"\n      :animate=\"{\n        x: focusRect.x,\n        y: focusRect.y,\n        width: focusRect.width,\n        height: focusRect.height,\n        opacity: currentIndex >= 0 ? 1 : 0\n      }\"\n      :transition=\"{\n        duration: animationDuration\n      }\"\n      :style=\"{\n        '--border-color': borderColor,\n        '--glow-color': glowColor\n      }\"\n    >\n      <spanx\n        class=\"top-[-10px] left-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></spanx>\n\n      <span\n        class=\"top-[-10px] right-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n\n      <span\n        class=\"bottom-[-10px] left-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n\n      <span\n        class=\"right-[-10px] bottom-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none\"\n      ></span>\n    </motion.div>\n  </div>\n</template>\n","path":"TrueFocus/TrueFocus.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"motion-v","version":"^1.5.0"}],"devDependencies":[],"categories":["TextAnimations"]}
\ No newline at end of file
diff --git a/public/r/registry.json b/public/r/registry.json
index a783f34..af2454a 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -549,19 +549,19 @@
       "categories": ["Animations"]
     },
     {
-      "name": "CountUp",
-      "title": "CountUp",
-      "description": "Animated number counter supporting formatting and decimals.",
+      "name": "PixelTrail",
+      "title": "PixelTrail",
+      "description": "Pixel grid trail effect that follows cursor movement with customizable gooey filter.",
       "type": "registry:component",
       "add": "when-added",
       "registryDependencies": [],
-      "dependencies": [],
+      "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }],
       "devDependencies": [],
       "files": [
         {
           "type": "registry:component",
           "role": "file",
-          "path": "CountUp/CountUp.vue",
+          "path": "PixelTrail/PixelTrail.vue",
           "registryDependencies": [],
           "dependencies": [],
           "devDependencies": []
@@ -582,7 +582,28 @@
         {
           "type": "registry:component",
           "role": "file",
-          "path": "ASCIIText/AsciiText.vue",
+          "path": "ASCIIText/ASCIIText.vue",
+          "registryDependencies": [],
+          "dependencies": [],
+          "devDependencies": []
+        }
+      ],
+      "categories": ["TextAnimations"]
+    },
+    {
+      "name": "CountUp",
+      "title": "CountUp",
+      "description": "Animated number counter supporting formatting and decimals.",
+      "type": "registry:component",
+      "add": "when-added",
+      "registryDependencies": [],
+      "dependencies": [],
+      "devDependencies": [],
+      "files": [
+        {
+          "type": "registry:component",
+          "role": "file",
+          "path": "CountUp/CountUp.vue",
           "registryDependencies": [],
           "dependencies": [],
           "devDependencies": []
@@ -1010,6 +1031,27 @@
       ],
       "categories": ["TextAnimations"]
     },
+    {
+      "name": "Shuffle",
+      "title": "Shuffle",
+      "description": "GSAP-powered slot machine style text shuffle animation with scroll trigger.",
+      "type": "registry:component",
+      "add": "when-added",
+      "registryDependencies": [],
+      "dependencies": [{ "ecosystem": "js", "name": "gsap", "version": "^3.13.0" }],
+      "devDependencies": [],
+      "files": [
+        {
+          "type": "registry:component",
+          "role": "file",
+          "path": "Shuffle/Shuffle.vue",
+          "registryDependencies": [],
+          "dependencies": [],
+          "devDependencies": []
+        }
+      ],
+      "categories": ["TextAnimations"]
+    },
     {
       "name": "AnimatedList",
       "title": "AnimatedList",
@@ -2391,6 +2433,27 @@
         }
       ],
       "categories": ["Backgrounds"]
+    },
+    {
+      "name": "PixelSnow",
+      "title": "PixelSnow",
+      "description": "Falling pixelated snow effect with customizable density and speed.",
+      "type": "registry:component",
+      "add": "when-added",
+      "registryDependencies": [],
+      "dependencies": [{ "ecosystem": "js", "name": "three", "version": "^0.178.0" }],
+      "devDependencies": [],
+      "files": [
+        {
+          "type": "registry:component",
+          "role": "file",
+          "path": "PixelSnow/PixelSnow.vue",
+          "registryDependencies": [],
+          "dependencies": [],
+          "devDependencies": []
+        }
+      ],
+      "categories": ["Backgrounds"]
     }
   ]
 }
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 658867b..eefff81 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -42,7 +42,7 @@ const textAnimations = {
   'falling-text': () => import("../demo/TextAnimations/FallingTextDemo.vue"),
   'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
   'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
-  'ascii-text': () => import("../demo/TextAnimations/AsciiTextDemo.vue"),
+  'ascii-text': () => import("../demo/TextAnimations/ASCIITextDemo.vue"),
   'scramble-text': () => import("../demo/TextAnimations/ScrambleTextDemo.vue"),
   'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
   'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
diff --git a/src/constants/Information.ts b/src/constants/Information.ts
index 4228e90..82c076b 100644
--- a/src/constants/Information.ts
+++ b/src/constants/Information.ts
@@ -225,11 +225,11 @@ export const componentMetadata: ComponentMetadata = {
 
   //! Text Animations -------------------------------------------------------------------------------------------------------------------------------
 
-  'TextAnimations/AsciiText': {
+  'TextAnimations/ASCIIText': {
     videoUrl: '/assets/videos/asciitext.webm',
     description: 'Renders text with an animated ASCII background for a retro feel.',
     category: 'TextAnimations',
-    name: 'AsciiText',
+    name: 'ASCIIText',
     docsUrl: 'https://vue-bits.dev/text-animations/ascii-text',
     tags: []
   },
diff --git a/src/constants/code/TextAnimations/asciiTextCode.ts b/src/constants/code/TextAnimations/asciiTextCode.ts
index c8e1af4..90e9464 100644
--- a/src/constants/code/TextAnimations/asciiTextCode.ts
+++ b/src/constants/code/TextAnimations/asciiTextCode.ts
@@ -1,12 +1,12 @@
-import code from '@/content/TextAnimations/AsciiText/AsciiText.vue?raw';
+import code from '@/content/TextAnimations/ASCIIText/ASCIIText.vue?raw';
 import { createCodeObject } from '../../../types/code';
 
-export const asciiText = createCodeObject(code, 'TextAnimations/AsciiText', {
+export const asciiText = createCodeObject(code, 'TextAnimations/ASCIIText', {
   installation: `npm install three @types/three`,
   usage: `<!-- Component ported and enhanced from https://codepen.io/JuanFuentes/pen/eYEeoyE -->
   
 <template>
-  <AsciiText
+  <ASCIIText
     text="Hey!"
     :ascii-font-size="8"
     :text-font-size="200"
@@ -18,6 +18,6 @@ export const asciiText = createCodeObject(code, 'TextAnimations/AsciiText', {
 </template>
 
 <script setup lang="ts">
-  import AsciiText from "./AsciiText.vue";
+  import ASCIIText from "./ASCIIText.vue";
 </script>`
 });
diff --git a/src/content/TextAnimations/AsciiText/AsciiText.vue b/src/content/TextAnimations/AsciiText/AsciiText.vue
index f41b2c6..b2644af 100644
--- a/src/content/TextAnimations/AsciiText/AsciiText.vue
+++ b/src/content/TextAnimations/AsciiText/AsciiText.vue
@@ -4,7 +4,7 @@
 import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import * as THREE from 'three';
 
-interface AsciiTextProps {
+interface ASCIITextProps {
   text?: string;
   asciiFontSize?: number;
   textFontSize?: number;
@@ -14,7 +14,7 @@ interface AsciiTextProps {
   className?: string;
 }
 
-const props = withDefaults(defineProps<AsciiTextProps>(), {
+const props = withDefaults(defineProps<ASCIITextProps>(), {
   text: 'David!',
   asciiFontSize: 8,
   textFontSize: 200,
diff --git a/src/demo/TextAnimations/AsciiTextDemo.vue b/src/demo/TextAnimations/AsciiTextDemo.vue
index cf70c01..583b453 100644
--- a/src/demo/TextAnimations/AsciiTextDemo.vue
+++ b/src/demo/TextAnimations/AsciiTextDemo.vue
@@ -2,7 +2,7 @@
   <TabbedLayout>
     <template #preview>
       <div class="demo-container h-[400px] overflow-hidden">
-        <AsciiText
+        <ASCIIText
           :key="rerenderKey"
           :text="text"
           :ascii-font-size="asciiFontSize"
@@ -62,7 +62,7 @@ import Customize from '@/components/common/Customize.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
 import PreviewText from '@/components/common/PreviewText.vue';
-import AsciiText from '@/content/TextAnimations/AsciiText/AsciiText.vue';
+import ASCIIText from '@/content/TextAnimations/ASCIIText/ASCIIText.vue';
 import { asciiText } from '@/constants/code/TextAnimations/asciiTextCode';
 import { useForceRerender } from '@/composables/useForceRerender';