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:T16bb,"use client" import { shaderMaterial } from "@react-three/drei" import { extend, type ThreeElement, useFrame } from "@react-three/fiber" import { useRef } from "react" import { type Group, MathUtils, 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 { lensMediaMat: 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; #define MAX_DISPERSION 64 varying vec2 vUv; uniform sampler2D uMap; uniform vec2 uMouse; uniform float uAspect; uniform float uSize; uniform float uSoftness; uniform float uAberration; uniform float uRefraction; uniform float uHover; uniform int uDispersion; void main() { vec2 toCenter = vUv - uMouse; vec2 aspectDistance = vec2(toCenter.x * uAspect, toCenter.y); float radius = length(aspectDistance); float mask = (1.0 - smoothstep(uSize, uSize + uSoftness, radius)) * uHover; vec2 refracted = vUv - toCenter * uRefraction * mask; vec2 shift = toCenter * uAberration * mask; vec3 color = vec3(0.0); vec3 total = vec3(0.0); for (int i = 0; i < MAX_DISPERSION; i++) { if (i >= uDispersion) break; float t = (float(i) + 0.5) / float(uDispersion); vec3 weight = clamp(1.0 - 2.0 * abs(t - vec3(0.0, 0.5, 1.0)), 0.0, 1.0); color += texture2D(uMap, refracted + shift * (1.0 - 2.0 * t)).rgb * weight; total += weight; } gl_FragColor = vec4(color / max(total, vec3(0.0001)), 1.0); } ` const LensMediaMat = shaderMaterial( { uMap: new Texture(), uMouse: new Vector2(0.5, 0.5), uAspect: 1, uSize: 0.12, uSoftness: 0.5, uAberration: 0.18, uRefraction: 0.4, uHover: 0, uDispersion: 35, }, vertexShader, fragmentShader, ) extend({ LensMediaMat }) type LensMediaMaterialProps = { map: Texture pointer: Pointer } & Required< Pick< LensEffectProps, "size" | "softness" | "aberration" | "refraction" | "dispersion" | "smoothing" > > // Effect props shared by both the image and video variants. export type LensEffectProps = { size?: number softness?: number aberration?: number refraction?: number dispersion?: number smoothing?: number segments?: number webglEnabled?: boolean } type LensMediaImageProps = LensEffectProps & { type?: "image" src: string alt: string } & Omit, "src" | "alt"> type LensMediaVideoProps = LensEffectProps & { type: "video" src: string } & Omit, "src"> export type LensMediaProps = LensMediaImageProps | LensMediaVideoProps function LensMediaMaterial({ map, pointer, size, softness, aberration, refraction, dispersion, smoothing, }: LensMediaMaterialProps) { const ref = useRef>(null) const anchorRef = useRef(null) useFrame((_, delta) => { const material = ref.current if (!material) return const mouse = material.uMouse mouse.x = MathUtils.damp(mouse.x, pointer.texUv.x, smoothing, delta) mouse.y = MathUtils.damp(mouse.y, pointer.texUv.y, smoothing, delta) material.uHover = MathUtils.damp(material.uHover, pointer.hover, smoothing, delta) const parent = anchorRef.current?.parent if (parent) { const aspect = parent.scale.x / parent.scale.y material.uAspect = (aspect * pointer.repeat.y) / pointer.repeat.x } }) return ( <> ) } export function LensMedia(props: LensMediaProps) { const { size = 0.12, softness = 0.5, aberration = 0.18, refraction = 0.4, dispersion = 35, smoothing = 7, segments = 1, webglEnabled = true, ...rest } = props // The lens is a fragment-only shader, so the same material runs on both // the image and video primitives (they share the WebGL plane contract). 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/lens-media/lens-media.tsx","content":"$50","type":"registry:component","target":"components/lens-media/lens-media.tsx"}],"className":"h-[70svh] min-h-80"}]]}]