mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
1 line
12 KiB
JSON
1 line
12 KiB
JSON
{"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"]} |