{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "PixelTrail-JS-CSS",
	"title": "PixelTrail",
	"description": "Pixelated cursor trail emitting fading squares with retro digital feel.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:file",
			"path": "PixelTrail.css",
			"target": "@components/PixelTrail.css",
			"content": ".goo-filter-container {\n  position: absolute;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.pixel-canvas {\n  position: absolute;\n  z-index: 1;\n}\n"
		},
		{
			"type": "registry:component",
			"path": "PixelTrail.jsx",
			"content": "/* eslint-disable react/no-unknown-property */\nimport { useEffect, useMemo } from 'react';\nimport { Canvas, useThree } from '@react-three/fiber';\nimport { shaderMaterial, useTrailTexture } from '@react-three/drei';\nimport * as THREE from 'three';\n\nimport './PixelTrail.css';\n\nconst GooeyFilter = ({ id = 'goo-filter', strength = 10 }) => {\n  return (\n    <svg className=\"goo-filter-container\">\n      <defs>\n        <filter id={id}>\n          <feGaussianBlur in=\"SourceGraphic\" stdDeviation={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};\n\nconst DotMaterial = shaderMaterial(\n  {\n    resolution: new THREE.Vector2(),\n    mouseTrail: null,\n    gridSize: 100,\n    pixelColor: new THREE.Color('#ffffff')\n  },\n  `\n    varying vec2 vUv;\n    void main() {\n      gl_Position = vec4(position.xy, 0.0, 1.0);\n    }\n  `,\n  `\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    float sdfCircle(vec2 p, float r) {\n        return length(p - 0.5) - r;\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);\n\nconst identityEase = x => x;\n\nfunction Scene({ gridSize, trailSize, maxAge, interpolate, easingFunction, pixelColor }) {\n  const size = useThree(s => s.size);\n  const viewport = useThree(s => s.viewport);\n\n  const dotMaterial = useMemo(() => new DotMaterial(), []);\n  useEffect(() => () => dotMaterial.dispose(), [dotMaterial]);\n\n  useEffect(() => {\n    dotMaterial.uniforms.pixelColor.value.set(pixelColor);\n  }, [dotMaterial, pixelColor]);\n\n  const [trail, onMove] = useTrailTexture({\n    size: 512,\n    radius: trailSize,\n    maxAge: maxAge,\n    interpolate: interpolate || 0.1,\n    ease: easingFunction || identityEase\n  });\n\n  useEffect(() => {\n    if (!trail) return;\n    trail.minFilter = THREE.NearestFilter;\n    trail.magFilter = THREE.NearestFilter;\n    trail.wrapS = THREE.ClampToEdgeWrapping;\n    trail.wrapT = THREE.ClampToEdgeWrapping;\n  }, [trail]);\n\n  const scale = Math.max(viewport.width, viewport.height) / 2;\n\n  return (\n    <mesh scale={[scale, scale, 1]} onPointerMove={onMove}>\n      <planeGeometry args={[2, 2]} />\n      <primitive\n        object={dotMaterial}\n        attach=\"material\"\n        gridSize={gridSize}\n        resolution={[size.width * viewport.dpr, size.height * viewport.dpr]}\n        mouseTrail={trail}\n      />\n    </mesh>\n  );\n}\n\nexport default function PixelTrail({\n  gridSize = 40,\n  trailSize = 0.1,\n  maxAge = 250,\n  interpolate = 5,\n  easingFunction = identityEase,\n  canvasProps = {},\n  glProps = {\n    antialias: false,\n    powerPreference: 'high-performance',\n    alpha: true\n  },\n  gooeyFilter,\n  color = '#ffffff',\n  className = ''\n}) {\n  return (\n    <>\n      {gooeyFilter && <GooeyFilter id={gooeyFilter.id} strength={gooeyFilter.strength} />}\n      <Canvas\n        {...canvasProps}\n        dpr={canvasProps.dpr ?? [1, 1.25]}\n        gl={glProps}\n        className={`pixel-canvas ${className}`}\n        style={gooeyFilter && { filter: `url(#${gooeyFilter.id})` }}\n      >\n        <Scene\n          gridSize={gridSize}\n          trailSize={trailSize}\n          maxAge={maxAge}\n          interpolate={interpolate}\n          easingFunction={easingFunction}\n          pixelColor={color}\n        />\n      </Canvas>\n    </>\n  );\n}\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"@react-three/fiber@^9.3.0",
		"@react-three/drei@^10.7.4",
		"three@^0.180.0"
	]
}