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:T110b,"use client" import { shaderMaterial } from "@react-three/drei" import { extend, type ThreeElement, useFrame } from "@react-three/fiber" import { useRef } from "react" import { Texture } from "three" import type { RenderProp } from "../../hooks/use-render" import { WebglText } from "../webgl-text/webgl-text" declare module "@react-three/fiber" { interface ThreeElements { textFluidMat: ThreeElement } } const vertexShader = /* glsl */ ` varying vec2 vUv; uniform float uTime; uniform float uNoiseFrequency; uniform float uNoiseAmplitude; float rand(vec2 n) { return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); } float noise(vec2 p) { vec2 ip = floor(p); vec2 u = fract(p); u = u * u * (3.0 - 2.0 * u); float res = mix( mix(rand(ip), rand(ip + vec2(1.0, 0.0)), u.x), mix(rand(ip + vec2(0.0, 1.0)), rand(ip + vec2(1.0, 1.0)), u.x), u.y ); return res * res; } float fbm(vec2 x) { float v = 0.0; float a = 0.5; vec2 shift = vec2(100.0); mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.5)); for (int i = 0; i < 6; ++i) { v += a * noise(x); x = rot * x * 2.0 + shift; a *= 0.5; } return v; } void main() { vUv = uv; vec3 newPos = position; float n = fbm(newPos.xy * uNoiseFrequency + uTime); newPos.y += (n - 0.25) * uNoiseAmplitude * 50.0; newPos.x += (n - 0.25) * uNoiseAmplitude * 100.0; gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0); } ` const fragmentShader = /* glsl */ ` precision highp float; uniform sampler2D uTexture; uniform float uTime; uniform float uRippleStrength; uniform float uOpacity; varying vec2 vUv; void main() { vec2 uv = vUv; uv.x += sin(vUv.y * 8.5 + uTime * 1.8) * uRippleStrength; uv.y += cos(vUv.x * 8.5 + uTime * 1.4) * uRippleStrength; uv = clamp(uv, 0.0, 1.0); vec4 tex = texture2D(uTexture, uv); if (tex.a < 0.01) discard; gl_FragColor = vec4(tex.rgb, tex.a * uOpacity); } ` const TextFluidMat = shaderMaterial( { uTexture: new Texture(), uTime: 0, uRippleStrength: 0, uNoiseFrequency: 0, uNoiseAmplitude: 0, uOpacity: 0, }, vertexShader, fragmentShader, ) extend({ TextFluidMat }) export type DynamicNumber = number | (() => number) const read = (v: DynamicNumber) => (typeof v === "function" ? v() : v) export type TextFluidProps = { children: string speed?: number ripple?: DynamicNumber frequency?: DynamicNumber amplitude?: DynamicNumber opacity?: DynamicNumber segments?: number webglEnabled?: boolean render?: RenderProp } type TextFluidMaterialProps = { uTexture: Texture } & Required> function TextFluidMaterial({ uTexture, speed, ripple, frequency, amplitude, opacity, }: TextFluidMaterialProps) { const ref = useRef>(null) useFrame(({ clock }) => { const mat = ref.current if (!mat) return mat.uTime = clock.getElapsedTime() * speed mat.uRippleStrength = read(ripple) mat.uNoiseFrequency = read(frequency) mat.uNoiseAmplitude = read(amplitude) mat.uOpacity = read(opacity) }) return ( ) } export function TextFluid({ children, speed = 0.2, ripple = 0.015, frequency = 1.5, amplitude = 0.002, opacity = 1, segments = 20, webglEnabled = true, render, }: TextFluidProps) { return ( ( )} > {children} ) } 51:Tbe7,// biome-ignore-all lint/suspicious/noExplicitAny: prop merging is inherently dynamic /** * Inspired by Base UI's `useRender` + `mergeProps`, intentionally simplified for this * library's scope at the moment. * * Chosen over polymorphic prop: cleaner TypeScript, integrates better with other * component (Next/Image, design systems, third-party UI libraries) * * @see https://base-ui.com/react/utils/use-render * @see https://base-ui.com/react/utils/merge-props */ import { cloneElement, isValidElement, type ReactElement, type Ref } from "react" type AnyProps = Record type RenderFunction = (props: AnyProps, state: S) => ReactElement export type RenderProp = ReactElement | RenderFunction type UseRenderOptions = { render: RenderProp | undefined props: AnyProps state?: S defaultElement: ReactElement } export function useRender(options: UseRenderOptions): ReactElement { const { render, props, state, defaultElement } = options const target = render ?? defaultElement // Function form: consumer wires props themselves, no merging needed. if (typeof target === "function") { return target(props, state as S) as ReactElement } // Element form: clone and merge our internal props with whatever the consumer set on the element. const targetProps = (isValidElement(target) ? target.props : {}) as AnyProps return cloneElement(target, mergeProps(props, targetProps)) as ReactElement } function mergeProps(internal: AnyProps, external: AnyProps): AnyProps { const merged: AnyProps = { ...internal } for (const key in external) { const internalValue = internal[key] const externalValue = external[key] if (key === "className" && typeof externalValue === "string") { merged[key] = [internalValue, externalValue].filter(Boolean).join(" ") } else if (key === "style" && externalValue && typeof externalValue === "object") { merged[key] = { ...internalValue, ...externalValue } } else if (key === "ref") { merged[key] = composeRefs(internalValue, externalValue) } else if ( key.startsWith("on") && typeof internalValue === "function" && typeof externalValue === "function" ) { // External handler runs first so consumers can stopPropagation before our logic fires. merged[key] = chainFunctions(externalValue, internalValue) } else { merged[key] = externalValue } } return merged } function chainFunctions(...fns: Array<(...args: any[]) => void>) { return (...args: any[]) => { for (const fn of fns) fn(...args) } } function composeRefs(...refs: Array | undefined>) { return (node: T) => { for (const ref of refs) { if (typeof ref === "function") ref(node) else if (ref != null) (ref as { current: T | null }).current = node } } } 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-text.json","https://atelier-ui.com/r/agent-rules.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/text-fluid/text-fluid.tsx","content":"$50","type":"registry:component","target":"components/text-fluid/text-fluid.tsx"},{"path":"registry/hooks/use-render.ts","content":"$51","type":"registry:hook","target":"hooks/use-render.ts"}],"className":"h-[70svh] min-h-80"}]]}]