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:T16ae,"use client" import { shaderMaterial } from "@react-three/drei" import { extend, type ThreeElement, useFrame } from "@react-three/fiber" import { useMemo, useRef } from "react" import { DataTexture, FloatType, NearestFilter, RGBAFormat, Texture, Vector2 } from "three" import { type Pointer, WebglImage } from "../webgl-image/webgl-image" import { WebglVideo } from "../webgl-video/webgl-video" declare module "@react-three/fiber" { interface ThreeElements { pixelMediaMat: ThreeElement } } const vertexShader = /* glsl */ ` precision highp float; varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ` const fragmentShader = /* glsl */ ` precision highp float; varying vec2 vUv; uniform sampler2D uMap; uniform sampler2D uGrid; uniform float uStrength; uniform float uAberration; void main() { vec2 offset = texture2D(uGrid, vUv).rg * uStrength; vec2 uv = vUv - offset; vec2 shift = offset * uAberration; gl_FragColor = vec4( texture2D(uMap, uv - shift).r, texture2D(uMap, uv).g, texture2D(uMap, uv + shift).b, 1.0 ); } ` const PixelMediaMat = shaderMaterial( { uMap: new Texture(), uGrid: new Texture(), uStrength: 0.5, uAberration: 0.5, }, vertexShader, fragmentShader, ) extend({ PixelMediaMat }) const REFERENCE_FPS = 60 export type PixelEffectProps = { gridSize?: number interactionRadius?: number strength?: number aberration?: number trail?: number segments?: number webglEnabled?: boolean } type PixelMediaMaterialProps = { map: Texture pointer: Pointer } & Required< Pick > type PixelMediaImageProps = PixelEffectProps & { type?: "image" src: string alt: string } & Omit, "src" | "alt"> type PixelMediaVideoProps = PixelEffectProps & { type: "video" src: string } & Omit, "src"> export type PixelMediaProps = PixelMediaImageProps | PixelMediaVideoProps function PixelMediaMaterial({ map, pointer, gridSize, interactionRadius, strength, aberration, trail, }: PixelMediaMaterialProps) { const ref = useRef>(null) const previous = useMemo(() => new Vector2(0.5, 0.5), []) const wasHovering = useRef(false) const grid = useMemo(() => { const data = new Float32Array(gridSize * gridSize * 4) const texture = new DataTexture(data, gridSize, gridSize, RGBAFormat, FloatType) texture.magFilter = NearestFilter texture.minFilter = NearestFilter texture.needsUpdate = true return { texture, data } }, [gridSize]) useFrame((_, delta) => { const material = ref.current if (!material) return const { data } = grid if (pointer.hover > 0 && !wasHovering.current) previous.copy(pointer.texUv) wasHovering.current = pointer.hover > 0 const velocityX = (pointer.texUv.x - previous.x) * pointer.hover const velocityY = (pointer.texUv.y - previous.y) * pointer.hover previous.copy(pointer.texUv) const fade = trail ** (delta * REFERENCE_FPS) const cursorColumn = pointer.texUv.x * gridSize const cursorRow = pointer.texUv.y * gridSize for (let row = 0; row < gridSize; row++) { for (let column = 0; column < gridSize; column++) { const index = (row * gridSize + column) * 4 const distance = Math.hypot(column - cursorColumn, row - cursorRow) const falloff = Math.max(0, 1 - distance / interactionRadius) data[index] = data[index] * fade + velocityX * falloff data[index + 1] = data[index + 1] * fade + velocityY * falloff } } grid.texture.needsUpdate = true material.uMap = map material.uGrid = grid.texture material.uStrength = strength material.uAberration = aberration }) return ( ) } export function PixelMedia(props: PixelMediaProps) { const { gridSize = 22, interactionRadius = 4, strength = 1.65, aberration = 0.25, trail = 0.93, segments = 1, webglEnabled = true, ...rest } = props // The pixel displacement is a fragment-only shader, so the same material // runs on both the image and video primitives (they share the WebGL plane). const material = (map: Texture, pointer: Pointer) => ( ) if (rest.type === "video") { const { type: _type, ...videoProps } = rest return ( ) } const { type: _type, ...imageProps } = rest 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three"}]]}]}],["$","li","@types/three",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40types%2Fthree","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@types/three"}]]}]}],["$","li","@react-three/fiber",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Ffiber","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/fiber"}]]}]}],["$","li","@react-three/drei",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Fdrei","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/drei"}]]}]}]]}],["$","$L4e",null,{"namespace":"@atelier","registryDependencies":["https://atelier-ui.com/r/webgl-image.json","https://atelier-ui.com/r/webgl-video.json","https://atelier-ui.com/r/agent-rules.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pixel-media/pixel-media.tsx","content":"$50","type":"registry:component","target":"components/pixel-media/pixel-media.tsx"}],"className":"h-[70svh] min-h-80"}]]}]