4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1eca,"use client" import { type ComponentRef, useEffect, useRef } from "react" import { useFrameLoop } from "../../hooks/use-frame-loop" export type PixelTrailProps = { mode?: "color" | "sample" color?: string imageSelector?: string lightenSample?: number pixelSize?: number trailRadius?: number lifetime?: number fade?: number className?: string } type ColorSampler = (screenX: number, screenY: number) => string | null type Pixel = { posX: number posY: number lifetime: number fade: number color: string } function getContext(canvas: HTMLCanvasElement) { const ctx = canvas.getContext("2d") if (!ctx) throw new Error("Canvas 2D context not supported") return ctx } function toRGB(data: Uint8ClampedArray, offset: number, lightenSample: number) { const red = Math.min(255, data[offset] + lightenSample) const green = Math.min(255, data[offset + 1] + lightenSample) const blue = Math.min(255, data[offset + 2] + lightenSample) return `rgb(${red},${green},${blue})` } function clamp(value: number, min: number, max: number) { return Math.max(min, Math.min(value, max)) } function createImageSampler(img: HTMLImageElement, lightenSample: number): ColorSampler { const offscreen = document.createElement("canvas") offscreen.width = img.naturalWidth offscreen.height = img.naturalHeight try { const ctx = getContext(offscreen) ctx.drawImage(img, 0, 0) const imageData = ctx.getImageData(0, 0, offscreen.width, offscreen.height) return (screenX, screenY) => { const rect = img.getBoundingClientRect() if ( screenX < rect.left || screenX > rect.right || screenY < rect.top || screenY > rect.bottom ) { return null } const pixelX = clamp( Math.floor(((screenX - rect.left) / rect.width) * offscreen.width), 0, offscreen.width - 1, ) const pixelY = clamp( Math.floor(((screenY - rect.top) / rect.height) * offscreen.height), 0, offscreen.height - 1, ) const offset = (pixelY * imageData.width + pixelX) * 4 return toRGB(imageData.data, offset, lightenSample) } } catch { return () => null } } export function PixelTrail({ mode = "color", color = "#000000", imageSelector = "img", lightenSample = 20, pixelSize = 20, trailRadius = 2, lifetime = 1, fade = 0.5, className, }: PixelTrailProps) { const canvasRef = useRef>(null) const canvasSizeRef = useRef({ width: 0, height: 0 }) const pixelsRef = useRef([]) useFrameLoop((_, delta) => { if (!canvasRef.current) return const ctx = getContext(canvasRef.current) const { width, height } = canvasSizeRef.current const pixels = pixelsRef.current ctx.clearRect(0, 0, width, height) for (let i = pixels.length - 1; i >= 0; i--) { pixels[i].fade += delta if (pixels[i].fade >= pixels[i].lifetime) { pixels[i] = pixels[pixels.length - 1] pixels.pop() } } for (const pixel of pixels) { const remaining = pixel.lifetime - pixel.fade ctx.globalAlpha = fade > 0 ? Math.min(1, remaining / fade) : 1 ctx.fillStyle = pixel.color ctx.fillRect(pixel.posX, pixel.posY, pixelSize, pixelSize) } ctx.globalAlpha = 1 }) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = getContext(canvas) const samplers: ColorSampler[] = [] function rebuildSamplers() { samplers.length = 0 if (mode !== "sample") return document.querySelectorAll(imageSelector).forEach((img) => { if (img.complete && img.naturalWidth > 0) { samplers.push(createImageSampler(img, lightenSample)) } }) } rebuildSamplers() if (mode === "sample") { document.querySelectorAll(imageSelector).forEach((img) => { if (!img.complete) { img.addEventListener("load", () => rebuildSamplers(), { once: true }) } }) } const getColorAt = (screenX: number, screenY: number): string => { for (const sampler of samplers) { const sampled = sampler(screenX, screenY) if (sampled) return sampled } return color } const addPixels = (clientX: number, clientY: number) => { const rect = canvas.getBoundingClientRect() const localX = clientX - rect.left const localY = clientY - rect.top const gridX = Math.floor(localX / pixelSize) const gridY = Math.floor(localY / pixelSize) for (let offsetX = -trailRadius; offsetX <= trailRadius; offsetX++) { for (let offsetY = -trailRadius; offsetY <= trailRadius; offsetY++) { const isOutsideCircle = offsetX * offsetX + offsetY * offsetY > trailRadius * trailRadius const isSkipped = trailRadius > 0 && Math.random() < 0.75 if (!isOutsideCircle && !isSkipped) { const posX = (gridX + offsetX) * pixelSize const posY = (gridY + offsetY) * pixelSize pixelsRef.current.push({ posX, posY, lifetime: lifetime * (0.2 + Math.random() ** 2 * 0.8), fade: 0, color: getColorAt( posX + rect.left + pixelSize * 0.5, posY + rect.top + pixelSize * 0.5, ), }) } } } } const resize = () => { const dpr = window.devicePixelRatio || 1 canvasSizeRef.current.width = canvas.clientWidth canvasSizeRef.current.height = canvas.clientHeight canvas.width = canvasSizeRef.current.width * dpr canvas.height = canvasSizeRef.current.height * dpr ctx.setTransform(dpr, 0, 0, dpr, 0, 0) } const onMouseMove = (event: MouseEvent) => addPixels(event.clientX, event.clientY) const onTouchMove = (event: TouchEvent) => { for (let index = 0; index < event.touches.length; index++) { addPixels(event.touches[index].clientX, event.touches[index].clientY) } } const resizeObserver = new ResizeObserver(resize) resizeObserver.observe(canvas) window.addEventListener("mousemove", onMouseMove) window.addEventListener("touchmove", onTouchMove, { passive: true }) resize() return () => { resizeObserver.disconnect() window.removeEventListener("mousemove", onMouseMove) window.removeEventListener("touchmove", onTouchMove) } }, [mode, color, imageSelector, lightenSample, pixelSize, trailRadius, lifetime, fade]) return (

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@atelier","registryDependencies":["https://atelier-ui.com/r/agent-rules.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pixel-trail/pixel-trail.tsx","content":"$50","type":"registry:component","target":"components/pixel-trail/pixel-trail.tsx"},{"path":"registry/hooks/use-frame-loop.ts","content":"import { useEffect, useRef } from \"react\"\n\nconst DELTA_MAX = 0.1\n\ntype FrameLoopCallback = (time: number, delta: number) => void\n\nexport function useFrameLoop(callback: FrameLoopCallback, interval?: number) {\n const ref = useRef(callback)\n ref.current = callback\n\n useEffect(() => {\n let frameId = 0\n let lastTime = 0\n let lastTick = 0\n\n const tick = (now: number) => {\n frameId = requestAnimationFrame(tick)\n\n if (interval && now - lastTick < interval) return\n if (interval) lastTick = now\n\n const time = now * 0.001\n const delta = lastTime ? Math.min(time - lastTime, DELTA_MAX) : 0\n lastTime = time\n\n ref.current(time, delta)\n }\n\n frameId = requestAnimationFrame(tick)\n\n return () => {\n cancelAnimationFrame(frameId)\n }\n }, [interval])\n}\n","type":"registry:hook","target":"hooks/use-frame-loop.ts"}],"className":"h-[70svh] min-h-80"}]]}]