{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "laser-flow", "type": "registry:block", "title": "Laser flow", "description": "Laser flow", "files": [ { "path": "components/usages/laserflowusage.tsx", "content": "import { useCallback, useRef, useState } from \"react\";\n\nimport LaserFlow from \"@/registry/open-source/laser-flow\";\n\nimport { Input } from \"../ui/input\";\nimport { Select } from \"../ui/select\";\nimport { Slider } from \"../ui/slider\";\n\nconst useForceRerender = () => {\n\tconst [key, setKey] = useState(0);\n\n\tconst forceRerender = useCallback(() => {\n\t\tsetKey((prevKey) => prevKey + 1);\n\t}, []);\n\n\treturn [key, forceRerender];\n};\n\n// Image Example Interactive Reveal Effect\nexport default function Usage() {\n\tconst revealImgRef = useRef(null);\n\n\tconst containerRef = useRef(null);\n\tconst [key, forceRerender] = useForceRerender();\n\tconst [selectedExample, setSelectedExample] = useState(\"box\");\n\tconst [laserColor, setLaserColor] = useState(\"#CF9EFF\");\n\tconst [horizontalSizing, setHorizontalSizing] = useState(0.5);\n\tconst [verticalSizing, setVerticalSizing] = useState(2.0);\n\tconst [wispDensity, setWispDensity] = useState(1);\n\tconst [wispSpeed, setWispSpeed] = useState(15.0);\n\tconst [wispIntensity, setWispIntensity] = useState(5.0);\n\tconst [flowSpeed, setFlowSpeed] = useState(0.35);\n\tconst [flowStrength, setFlowStrength] = useState(0.25);\n\tconst [fogIntensity, setFogIntensity] = useState(0.45);\n\tconst [fogScale, setFogScale] = useState(0.3);\n\tconst [fogFallSpeed, setFogFallSpeed] = useState(0.6);\n\tconst [decay, setDecay] = useState(1.1);\n\tconst [falloffStart, setFalloffStart] = useState(1.2);\n\n\treturn (\n\t\t
\n\t\t\t {\n\t\t\t\t\tconst rect = e.currentTarget.getBoundingClientRect();\n\t\t\t\t\tconst x = e.clientX - rect.left;\n\t\t\t\t\tconst y = e.clientY - rect.top;\n\t\t\t\t\tconst el = revealImgRef.current;\n\t\t\t\t\tif (el) {\n\t\t\t\t\t\tel.style.setProperty(\"--mx\", `${x}px`);\n\t\t\t\t\t\tel.style.setProperty(\"--my\", `${y + rect.height * 0.5}px`);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\tconst el = revealImgRef.current;\n\t\t\t\t\tif (el) {\n\t\t\t\t\t\tel.style.setProperty(\"--mx\", \"-9999px\");\n\t\t\t\t\t\tel.style.setProperty(\"--my\", \"-9999px\");\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t\t\t{/* Your content here */}\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\n\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n", "type": "registry:block", "target": "~/example.tsx" }, { "path": "components/usages/laserflowusage.tsx", "content": "import { useCallback, useRef, useState } from \"react\";\n\nimport LaserFlow from \"@/registry/open-source/laser-flow\";\n\nimport { Input } from \"../ui/input\";\nimport { Select } from \"../ui/select\";\nimport { Slider } from \"../ui/slider\";\n\nconst useForceRerender = () => {\n\tconst [key, setKey] = useState(0);\n\n\tconst forceRerender = useCallback(() => {\n\t\tsetKey((prevKey) => prevKey + 1);\n\t}, []);\n\n\treturn [key, forceRerender];\n};\n\n// Image Example Interactive Reveal Effect\nexport default function Usage() {\n\tconst revealImgRef = useRef(null);\n\n\tconst containerRef = useRef(null);\n\tconst [key, forceRerender] = useForceRerender();\n\tconst [selectedExample, setSelectedExample] = useState(\"box\");\n\tconst [laserColor, setLaserColor] = useState(\"#CF9EFF\");\n\tconst [horizontalSizing, setHorizontalSizing] = useState(0.5);\n\tconst [verticalSizing, setVerticalSizing] = useState(2.0);\n\tconst [wispDensity, setWispDensity] = useState(1);\n\tconst [wispSpeed, setWispSpeed] = useState(15.0);\n\tconst [wispIntensity, setWispIntensity] = useState(5.0);\n\tconst [flowSpeed, setFlowSpeed] = useState(0.35);\n\tconst [flowStrength, setFlowStrength] = useState(0.25);\n\tconst [fogIntensity, setFogIntensity] = useState(0.45);\n\tconst [fogScale, setFogScale] = useState(0.3);\n\tconst [fogFallSpeed, setFogFallSpeed] = useState(0.6);\n\tconst [decay, setDecay] = useState(1.1);\n\tconst [falloffStart, setFalloffStart] = useState(1.2);\n\n\treturn (\n\t\t
\n\t\t\t {\n\t\t\t\t\tconst rect = e.currentTarget.getBoundingClientRect();\n\t\t\t\t\tconst x = e.clientX - rect.left;\n\t\t\t\t\tconst y = e.clientY - rect.top;\n\t\t\t\t\tconst el = revealImgRef.current;\n\t\t\t\t\tif (el) {\n\t\t\t\t\t\tel.style.setProperty(\"--mx\", `${x}px`);\n\t\t\t\t\t\tel.style.setProperty(\"--my\", `${y + rect.height * 0.5}px`);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\tconst el = revealImgRef.current;\n\t\t\t\t\tif (el) {\n\t\t\t\t\t\tel.style.setProperty(\"--mx\", \"-9999px\");\n\t\t\t\t\t\tel.style.setProperty(\"--my\", \"-9999px\");\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t\t\t{/* Your content here */}\n\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\n\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n}\n", "type": "registry:ui" }, { "path": "registry/open-source/laser-flow.tsx", "content": "import React, { useEffect, useRef } from \"react\";\r\n\r\nimport * as THREE from \"three\";\r\n\r\ntype Props = {\r\n\tclassName?: string;\r\n\tstyle?: React.CSSProperties;\r\n\twispDensity?: number;\r\n\tdpr?: number;\r\n\tmouseSmoothTime?: number;\r\n\tmouseTiltStrength?: number;\r\n\thorizontalBeamOffset?: number;\r\n\tverticalBeamOffset?: number;\r\n\tflowSpeed?: number;\r\n\tverticalSizing?: number;\r\n\thorizontalSizing?: number;\r\n\tfogIntensity?: number;\r\n\tfogScale?: number;\r\n\twispSpeed?: number;\r\n\twispIntensity?: number;\r\n\tflowStrength?: number;\r\n\tdecay?: number;\r\n\tfalloffStart?: number;\r\n\tfogFallSpeed?: number;\r\n\tcolor?: string;\r\n};\r\n\r\nconst VERT = `\r\nprecision highp float;\r\nattribute vec3 position;\r\nvoid main(){\r\n gl_Position = vec4(position, 1.0);\r\n}\r\n`;\r\n\r\nconst FRAG = `\r\n#ifdef GL_ES\r\n#extension GL_OES_standard_derivatives : enable\r\n#endif\r\nprecision highp float;\r\nprecision mediump int;\r\n\r\nuniform float iTime;\r\nuniform vec3 iResolution;\r\nuniform vec4 iMouse;\r\nuniform float uWispDensity;\r\nuniform float uTiltScale;\r\nuniform float uFlowTime;\r\nuniform float uFogTime;\r\nuniform float uBeamXFrac;\r\nuniform float uBeamYFrac;\r\nuniform float uFlowSpeed;\r\nuniform float uVLenFactor;\r\nuniform float uHLenFactor;\r\nuniform float uFogIntensity;\r\nuniform float uFogScale;\r\nuniform float uWSpeed;\r\nuniform float uWIntensity;\r\nuniform float uFlowStrength;\r\nuniform float uDecay;\r\nuniform float uFalloffStart;\r\nuniform float uFogFallSpeed;\r\nuniform vec3 uColor;\r\nuniform float uFade;\r\n\r\n// Core beam/flare shaping and dynamics\r\n#define PI 3.14159265359\r\n#define TWO_PI 6.28318530718\r\n#define EPS 1e-6\r\n#define EDGE_SOFT (DT_LOCAL*4.0)\r\n#define DT_LOCAL 0.0038\r\n#define TAP_RADIUS 6\r\n#define R_H 150.0\r\n#define R_V 150.0\r\n#define FLARE_HEIGHT 16.0\r\n#define FLARE_AMOUNT 8.0\r\n#define FLARE_EXP 2.0\r\n#define TOP_FADE_START 0.1\r\n#define TOP_FADE_EXP 1.0\r\n#define FLOW_PERIOD 0.5\r\n#define FLOW_SHARPNESS 1.5\r\n\r\n// Wisps (animated micro-streaks) that travel along the beam\r\n#define W_BASE_X 1.5\r\n#define W_LAYER_GAP 0.25\r\n#define W_LANES 55\r\n#define W_SIDE_DECAY 0.5\r\n#define W_HALF 0.01\r\n#define W_AA 0.15\r\n#define W_CELL 20.0\r\n#define W_SEG_MIN 0.01\r\n#define W_SEG_MAX 0.55\r\n#define W_CURVE_AMOUNT 15.0\r\n#define W_CURVE_RANGE (FLARE_HEIGHT - 3.0)\r\n#define W_BOTTOM_EXP 10.0\r\n\r\n// Volumetric fog controls\r\n#define FOG_ON 1\r\n#define FOG_CONTRAST 1.2\r\n#define FOG_SPEED_U 0.1\r\n#define FOG_SPEED_V -0.1\r\n#define FOG_OCTAVES 5\r\n#define FOG_BOTTOM_BIAS 0.8\r\n#define FOG_TILT_TO_MOUSE 0.05\r\n#define FOG_TILT_DEADZONE 0.01\r\n#define FOG_TILT_MAX_X 0.35\r\n#define FOG_TILT_SHAPE 1.5\r\n#define FOG_BEAM_MIN 0.0\r\n#define FOG_BEAM_MAX 0.75\r\n#define FOG_MASK_GAMMA 0.5\r\n#define FOG_EXPAND_SHAPE 12.2\r\n#define FOG_EDGE_MIX 0.5\r\n\r\n// Horizontal vignette for the fog volume\r\n#define HFOG_EDGE_START 0.20\r\n#define HFOG_EDGE_END 0.98\r\n#define HFOG_EDGE_GAMMA 1.4\r\n#define HFOG_Y_RADIUS 25.0\r\n#define HFOG_Y_SOFT 60.0\r\n\r\n// Beam extents and edge masking\r\n#define EDGE_X0 0.22\r\n#define EDGE_X1 0.995\r\n#define EDGE_X_GAMMA 1.25\r\n#define EDGE_LUMA_T0 0.0\r\n#define EDGE_LUMA_T1 2.0\r\n#define DITHER_STRENGTH 1.0\r\n\r\n float g(float x){return x<=0.00031308?12.92*x:1.055*pow(x,1.0/2.4)-0.055;}\r\n float bs(vec2 p,vec2 q,float powr){\r\n float d=distance(p,q),f=powr*uFalloffStart,r=(f*f)/(d*d+EPS);\r\n return powr*min(1.0,r);\r\n }\r\n float bsa(vec2 p,vec2 q,float powr,vec2 s){\r\n vec2 d=p-q; float dd=(d.x*d.x)/(s.x*s.x)+(d.y*d.y)/(s.y*s.y),f=powr*uFalloffStart,r=(f*f)/(dd+EPS);\r\n return powr*min(1.0,r);\r\n }\r\n float tri01(float x){float f=fract(x);return 1.0-abs(f*2.0-1.0);}\r\n float tauWf(float t,float tmin,float tmax){float a=smoothstep(tmin,tmin+EDGE_SOFT,t),b=1.0-smoothstep(tmax-EDGE_SOFT,tmax,t);return max(0.0,a*b);} \r\n float h21(vec2 p){p=fract(p*vec2(123.34,456.21));p+=dot(p,p+34.123);return fract(p.x*p.y);}\r\n float vnoise(vec2 p){\r\n vec2 i=floor(p),f=fract(p);\r\n float a=h21(i),b=h21(i+vec2(1,0)),c=h21(i+vec2(0,1)),d=h21(i+vec2(1,1));\r\n vec2 u=f*f*(3.0-2.0*f);\r\n return mix(mix(a,b,u.x),mix(c,d,u.x),u.y);\r\n }\r\n float fbm2(vec2 p){\r\n float v=0.0,amp=0.6; mat2 m=mat2(0.86,0.5,-0.5,0.86);\r\n for(int i=0;i=lanes) break;\r\n float off=W_BASE_X+float(i)*W_LAYER_GAP,xc=sgn*(off*xS);\r\n float dx=abs(uv.x-xc),lat=1.0-smoothstep(W_HALF,W_HALF+W_AA,dx),amp=exp(-off*W_SIDE_DECAY);\r\n float seed=h21(vec2(off,sgn*17.0)),yf2=yf+seed*7.0,ci=floor(yf2),fy=fract(yf2);\r\n float seg=mix(W_SEG_MIN,W_SEG_MAX,h21(vec2(ci,off*2.3)));\r\n float spR=h21(vec2(ci,off+sgn*31.0)),seg1=rGate(fy,seg)*step(spR,sp);\r\n if(ep>0.0){float spR2=h21(vec2(ci*3.1+7.0,off*5.3+sgn*13.0)); float f2=fract(fy+0.5); seg1+=rGate(f2,seg*0.9)*step(spR2,ep);}\r\n sum+=amp*lat*seg1;\r\n }\r\n }\r\n float span=smoothstep(-3.0,0.0,y)*(1.0-smoothstep(R_V-6.0,R_V,y));\r\n return uWIntensity*sum*topF*bGain*span;\r\n}\r\n\r\nvoid mainImage(out vec4 fc,in vec2 frag){\r\n vec2 C=iResolution.xy*.5; float invW=1.0/max(C.x,1.0);\r\n float sc=512.0/iResolution.x*.4;\r\n vec2 uv=(frag-C)*sc,off=vec2(uBeamXFrac*iResolution.x*sc,uBeamYFrac*iResolution.y*sc);\r\n vec2 uvc = uv - off;\r\n float a=0.0,b=0.0;\r\n float basePhase=1.5*PI+uDecay*.5; float tauMin=basePhase-uDecay; float tauMax=basePhase;\r\n float cx=clamp(uvc.x/(R_H*uHLenFactor),-1.0,1.0),tH=clamp(TWO_PI-acos(cx),tauMin,tauMax);\r\n for(int k=-TAP_RADIUS;k<=TAP_RADIUS;++k){\r\n float tu=tH+float(k)*DT_LOCAL,wt=tauWf(tu,tauMin,tauMax); if(wt<=0.0) continue;\r\n float spd=max(abs(sin(tu)),0.02),u=clamp((basePhase-tu)/max(uDecay,EPS),0.0,1.0),env=pow(1.0-abs(u*2.0-1.0),0.8);\r\n vec2 p=vec2((R_H*uHLenFactor)*cos(tu),0.0);\r\n a+=wt*bs(uvc,p,env*spd);\r\n }\r\n float yPix=uvc.y,cy=clamp(-yPix/(R_V*uVLenFactor),-1.0,1.0),tV=clamp(TWO_PI-acos(cy),tauMin,tauMax);\r\n for(int k=-TAP_RADIUS;k<=TAP_RADIUS;++k){\r\n float tu=tV+float(k)*DT_LOCAL,wt=tauWf(tu,tauMin,tauMax); if(wt<=0.0) continue;\r\n float yb=(-R_V)*cos(tu),s=clamp(yb/R_V,0.0,1.0),spd=max(abs(sin(tu)),0.02);\r\n float env=pow(1.0-s,0.6)*spd;\r\n float cap=1.0-smoothstep(TOP_FADE_START,1.0,s); cap=pow(cap,TOP_FADE_EXP); env*=cap;\r\n float ph=s/max(FLOW_PERIOD,EPS)+uFlowTime*uFlowSpeed;\r\n float fl=pow(tri01(ph),FLOW_SHARPNESS);\r\n env*=mix(1.0-uFlowStrength,1.0,fl);\r\n float yp=(-R_V*uVLenFactor)*cos(tu),m=pow(smoothstep(FLARE_HEIGHT,0.0,yp),FLARE_EXP),wx=1.0+FLARE_AMOUNT*m;\r\n vec2 sig=vec2(wx,1.0),p=vec2(0.0,yp);\r\n float mask=step(0.0,yp);\r\n b+=wt*bsa(uvc,p,mask*env,sig);\r\n }\r\n float sPix=clamp(yPix/R_V,0.0,1.0),topA=pow(1.0-smoothstep(TOP_FADE_START,1.0,sPix),TOP_FADE_EXP);\r\n float L=a+b*topA;\r\n float w=vWisps(vec2(uvc.x,yPix),topA);\r\n float fog=0.0;\r\n#if FOG_ON\r\n vec2 fuv=uvc*uFogScale;\r\n float mAct=step(1.0,length(iMouse.xy)),nx=((iMouse.x-C.x)*invW)*mAct;\r\n float ax = abs(nx);\r\n float stMag = mix(ax, pow(ax, FOG_TILT_SHAPE), 0.35);\r\n float st = sign(nx) * stMag * uTiltScale;\r\n st = clamp(st, -FOG_TILT_MAX_X, FOG_TILT_MAX_X);\r\n vec2 dir=normalize(vec2(st,1.0));\r\n fuv+=uFogTime*uFogFallSpeed*dir;\r\n vec2 prp=vec2(-dir.y,dir.x);\r\n fuv+=prp*(0.08*sin(dot(uvc,prp)*0.08+uFogTime*0.9));\r\n float n=fbm2(fuv+vec2(fbm2(fuv+vec2(7.3,2.1)),fbm2(fuv+vec2(-3.7,5.9)))*0.6);\r\n n=pow(clamp(n,0.0,1.0),FOG_CONTRAST);\r\n float pixW = 1.0 / max(iResolution.y, 1.0);\r\n#ifdef GL_OES_standard_derivatives\r\n float wL = max(fwidth(L), pixW);\r\n#else\r\n float wL = pixW;\r\n#endif\r\n float m0=pow(smoothstep(FOG_BEAM_MIN - wL, FOG_BEAM_MAX + wL, L),FOG_MASK_GAMMA);\r\n float bm=1.0-pow(1.0-m0,FOG_EXPAND_SHAPE); bm=mix(bm*m0,bm,FOG_EDGE_MIX);\r\n float yP=1.0-smoothstep(HFOG_Y_RADIUS,HFOG_Y_RADIUS+HFOG_Y_SOFT,abs(yPix));\r\n float nxF=abs((frag.x-C.x)*invW),hE=1.0-smoothstep(HFOG_EDGE_START,HFOG_EDGE_END,nxF); hE=pow(clamp(hE,0.0,1.0),HFOG_EDGE_GAMMA);\r\n float hW=mix(1.0,hE,clamp(yP,0.0,1.0));\r\n float bBias=mix(1.0,1.0-sPix,FOG_BOTTOM_BIAS);\r\n // Browser-specific fog intensity adjustment\r\n float browserFogIntensity = uFogIntensity;\r\n // Increase fog intensity for Chrome and other browsers (reduce for Safari)\r\n browserFogIntensity *= 1.8;\r\n \r\n // Safari-compatible fog calculation with enhanced fade\r\n float radialFade = 1.0 - smoothstep(0.0, 0.7, length(uvc) / 120.0);\r\n float safariFog = n * browserFogIntensity * bBias * bm * hW * radialFade;\r\n fog = safariFog;\r\n#endif\r\n float LF=L+fog;\r\n float dith=(h21(frag)-0.5)*(DITHER_STRENGTH/255.0);\r\n float tone=g(LF+w);\r\n vec3 col=tone*uColor+dith;\r\n float alpha=clamp(g(L+w*0.6)+dith*0.6,0.0,1.0);\r\n float nxE=abs((frag.x-C.x)*invW),xF=pow(clamp(1.0-smoothstep(EDGE_X0,EDGE_X1,nxE),0.0,1.0),EDGE_X_GAMMA);\r\n float scene=LF+max(0.0,w)*0.5,hi=smoothstep(EDGE_LUMA_T0,EDGE_LUMA_T1,scene);\r\n float eM=mix(xF,1.0,hi);\r\n col*=eM; alpha*=eM;\r\n col*=uFade; alpha*=uFade;\r\n fc=vec4(col,alpha);\r\n}\r\n\r\nvoid main(){\r\n vec4 fc;\r\n mainImage(fc, gl_FragCoord.xy);\r\n gl_FragColor = fc;\r\n}\r\n`;\r\n\r\nexport const LaserFlow: React.FC = ({\r\n\tclassName,\r\n\tstyle,\r\n\twispDensity = 1,\r\n\tdpr,\r\n\tmouseSmoothTime = 0.0,\r\n\tmouseTiltStrength = 0.01,\r\n\thorizontalBeamOffset = 0.1,\r\n\tverticalBeamOffset = 0.0,\r\n\tflowSpeed = 0.35,\r\n\tverticalSizing = 2.0,\r\n\thorizontalSizing = 0.5,\r\n\tfogIntensity = 0.45,\r\n\tfogScale = 0.3,\r\n\twispSpeed = 15.0,\r\n\twispIntensity = 5.0,\r\n\tflowStrength = 0.25,\r\n\tdecay = 1.1,\r\n\tfalloffStart = 1.2,\r\n\tfogFallSpeed = 0.6,\r\n\tcolor = \"#FF79C6\",\r\n}) => {\r\n\tconst mountRef = useRef(null);\r\n\tconst hasFadedRef = useRef(false);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst mount = mountRef.current!;\r\n\t\tconst renderer = new THREE.WebGLRenderer({\r\n\t\t\tantialias: true,\r\n\t\t\talpha: false,\r\n\t\t\tpowerPreference: \"high-performance\",\r\n\t\t\tpremultipliedAlpha: false,\r\n\t\t\tpreserveDrawingBuffer: false,\r\n\t\t\tfailIfMajorPerformanceCaveat: false,\r\n\t\t});\r\n\r\n\t\trenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n\t\trenderer.shadowMap.enabled = false;\r\n\t\trenderer.outputColorSpace = THREE.SRGBColorSpace;\r\n\t\trenderer.setClearColor(0x000000, 1);\r\n\t\trenderer.domElement.style.width = \"100%\";\r\n\t\trenderer.domElement.style.height = \"100%\";\r\n\t\trenderer.domElement.style.display = \"block\";\r\n\t\tmount.appendChild(renderer.domElement);\r\n\r\n\t\tconst scene = new THREE.Scene();\r\n\t\tconst camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\r\n\r\n\t\tconst geometry = new THREE.BufferGeometry();\r\n\t\tgeometry.setAttribute(\r\n\t\t\t\"position\",\r\n\t\t\tnew THREE.BufferAttribute(\r\n\t\t\t\tnew Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]),\r\n\t\t\t\t3\r\n\t\t\t)\r\n\t\t);\r\n\r\n\t\tconst uniforms = {\r\n\t\t\tiTime: { value: 0 },\r\n\t\t\tiResolution: { value: new THREE.Vector3(1, 1, 1) },\r\n\t\t\tiMouse: { value: new THREE.Vector4(0, 0, 0, 0) },\r\n\t\t\tuWispDensity: { value: wispDensity },\r\n\t\t\tuTiltScale: { value: mouseTiltStrength },\r\n\t\t\tuFlowTime: { value: 0 },\r\n\t\t\tuFogTime: { value: 0 },\r\n\t\t\tuBeamXFrac: { value: horizontalBeamOffset },\r\n\t\t\tuBeamYFrac: { value: verticalBeamOffset },\r\n\t\t\tuFlowSpeed: { value: flowSpeed },\r\n\t\t\tuVLenFactor: { value: verticalSizing },\r\n\t\t\tuHLenFactor: { value: horizontalSizing },\r\n\t\t\tuFogIntensity: { value: fogIntensity },\r\n\t\t\tuFogScale: { value: fogScale },\r\n\t\t\tuWSpeed: { value: wispSpeed },\r\n\t\t\tuWIntensity: { value: wispIntensity },\r\n\t\t\tuFlowStrength: { value: flowStrength },\r\n\t\t\tuDecay: { value: decay },\r\n\t\t\tuFalloffStart: { value: falloffStart },\r\n\t\t\tuFogFallSpeed: { value: fogFallSpeed },\r\n\t\t\tuColor: { value: new THREE.Vector3(1, 1, 1) },\r\n\t\t\tuFade: { value: hasFadedRef.current ? 1 : 0 },\r\n\t\t};\r\n\r\n\t\tconst material = new THREE.RawShaderMaterial({\r\n\t\t\tvertexShader: VERT,\r\n\t\t\tfragmentShader: FRAG,\r\n\t\t\tuniforms,\r\n\t\t\ttransparent: false,\r\n\t\t\tdepthTest: false,\r\n\t\t\tdepthWrite: false,\r\n\t\t\tblending: THREE.NormalBlending,\r\n\t\t});\r\n\r\n\t\tconst mesh = new THREE.Mesh(geometry, material);\r\n\t\tscene.add(mesh);\r\n\r\n\t\tconst clock = new THREE.Clock();\r\n\t\tlet prevTime = 0;\r\n\t\tlet flowTime = 0;\r\n\t\tlet fogTime = 0;\r\n\t\tlet fade = hasFadedRef.current ? 1 : 0;\r\n\t\tconst mouseTarget = new THREE.Vector2(0, 0);\r\n\t\tconst mouseSmooth = new THREE.Vector2(0, 0);\r\n\r\n\t\tconst setSize = () => {\r\n\t\t\tconst { clientWidth: w, clientHeight: h } = mount;\r\n\t\t\tconst pixelRatio = Math.min(dpr ?? window.devicePixelRatio ?? 1, 2);\r\n\t\t\trenderer.setPixelRatio(pixelRatio);\r\n\t\t\trenderer.setSize(w, h, false);\r\n\t\t\tuniforms.iResolution.value.set(\r\n\t\t\t\tw * pixelRatio,\r\n\t\t\t\th * pixelRatio,\r\n\t\t\t\tpixelRatio\r\n\t\t\t);\r\n\t\t};\r\n\r\n\t\tsetSize();\r\n\t\tconst ro = new ResizeObserver(setSize);\r\n\t\tro.observe(mount);\r\n\r\n\t\tconst updateMouse = (clientX: number, clientY: number) => {\r\n\t\t\tconst rect = renderer.domElement.getBoundingClientRect();\r\n\t\t\tconst x = clientX - rect.left;\r\n\t\t\tconst y = clientY - rect.top;\r\n\t\t\tconst ratio = renderer.getPixelRatio();\r\n\t\t\tconst hb = rect.height * ratio;\r\n\t\t\tmouseTarget.set(x * ratio, hb - y * ratio);\r\n\t\t};\r\n\r\n\t\tconst onMove = (ev: PointerEvent | MouseEvent) =>\r\n\t\t\tupdateMouse(ev.clientX, ev.clientY);\r\n\t\tconst onLeave = () => mouseTarget.set(0, 0);\r\n\r\n\t\trenderer.domElement.addEventListener(\"pointermove\", onMove as any);\r\n\t\trenderer.domElement.addEventListener(\"pointerdown\", onMove as any);\r\n\t\trenderer.domElement.addEventListener(\"pointerenter\", onMove as any);\r\n\t\trenderer.domElement.addEventListener(\"pointerleave\", onLeave as any);\r\n\t\twindow.addEventListener(\"mousemove\", onMove);\r\n\r\n\t\tlet raf = 0;\r\n\t\tlet lastFrameTime = 0;\r\n\t\tlet frameCount = 0;\r\n\t\tlet lastFpsTime = 0;\r\n\t\tconst targetFPS = 60;\r\n\t\tconst frameInterval = 1000 / targetFPS;\r\n\r\n\t\tlet colorR = 1,\r\n\t\t\tcolorG = 1,\r\n\t\t\tcolorB = 1;\r\n\t\tif (color) {\r\n\t\t\tlet c = color.trim();\r\n\t\t\tif (c[0] === \"#\") c = c.slice(1);\r\n\t\t\tif (c.length === 3) {\r\n\t\t\t\tc = c\r\n\t\t\t\t\t.split(\"\")\r\n\t\t\t\t\t.map((x) => x + x)\r\n\t\t\t\t\t.join(\"\");\r\n\t\t\t}\r\n\t\t\tconst n = parseInt(c, 16) || 0xffffff;\r\n\t\t\tcolorR = ((n >> 16) & 255) / 255;\r\n\t\t\tcolorG = ((n >> 8) & 255) / 255;\r\n\t\t\tcolorB = (n & 255) / 255;\r\n\t\t}\r\n\r\n\t\tconst animate = () => {\r\n\t\t\tconst currentTime = performance.now();\r\n\t\t\tconst deltaTime = currentTime - lastFrameTime;\r\n\r\n\t\t\tif (deltaTime >= frameInterval) {\r\n\t\t\t\tconst t = clock.getElapsedTime();\r\n\t\t\t\tconst dt = Math.max(0, t - prevTime);\r\n\t\t\t\tprevTime = t;\r\n\t\t\t\tlastFrameTime = currentTime;\r\n\t\t\t\tuniforms.iTime.value = t;\r\n\t\t\t\tuniforms.uTiltScale.value = mouseTiltStrength;\r\n\t\t\t\tuniforms.uWispDensity.value = wispDensity;\r\n\t\t\t\tuniforms.uBeamXFrac.value = horizontalBeamOffset;\r\n\t\t\t\tuniforms.uBeamYFrac.value = verticalBeamOffset;\r\n\t\t\t\tuniforms.uFlowSpeed.value = flowSpeed;\r\n\t\t\t\tuniforms.uVLenFactor.value = verticalSizing;\r\n\t\t\t\tuniforms.uHLenFactor.value = horizontalSizing;\r\n\t\t\t\tuniforms.uFogIntensity.value = fogIntensity;\r\n\t\t\t\tuniforms.uFogScale.value = fogScale;\r\n\t\t\t\tuniforms.uWSpeed.value = wispSpeed;\r\n\t\t\t\tuniforms.uWIntensity.value = wispIntensity;\r\n\t\t\t\tuniforms.uFlowStrength.value = flowStrength;\r\n\t\t\t\tuniforms.uDecay.value = decay;\r\n\t\t\t\tuniforms.uFalloffStart.value = falloffStart;\r\n\t\t\t\tuniforms.uFogFallSpeed.value = fogFallSpeed;\r\n\r\n\t\t\t\tuniforms.uColor.value.set(colorR, colorG, colorB);\r\n\t\t\t\tconst cdt = Math.min(0.033, Math.max(0.001, dt));\r\n\t\t\t\tflowTime += cdt;\r\n\t\t\t\tfogTime += cdt;\r\n\t\t\t\tuniforms.uFlowTime.value = flowTime;\r\n\t\t\t\tuniforms.uFogTime.value = fogTime;\r\n\t\t\t\tif (!hasFadedRef.current) {\r\n\t\t\t\t\tconst fadeDur = 1.0;\r\n\t\t\t\t\tfade = Math.min(1, fade + cdt / fadeDur);\r\n\t\t\t\t\tuniforms.uFade.value = fade;\r\n\t\t\t\t\tif (fade >= 1) hasFadedRef.current = true;\r\n\t\t\t\t} else if (uniforms.uFade.value !== 1) {\r\n\t\t\t\t\tuniforms.uFade.value = 1;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tconst tau = Math.max(1e-3, mouseSmoothTime);\r\n\t\t\t\tconst alpha = 1 - Math.exp(-cdt / tau);\r\n\t\t\t\tmouseSmooth.lerp(mouseTarget, alpha);\r\n\t\t\t\tuniforms.iMouse.value.set(mouseSmooth.x, mouseSmooth.y, 0, 0);\r\n\r\n\t\t\t\trenderer.render(scene, camera);\r\n\r\n\t\t\t\tframeCount++;\r\n\t\t\t\tif (currentTime - lastFpsTime >= 1000) {\r\n\t\t\t\t\tconst fps = Math.round(\r\n\t\t\t\t\t\t(frameCount * 1000) / (currentTime - lastFpsTime)\r\n\t\t\t\t\t);\r\n\t\t\t\t\tif (fps < 50) {\r\n\t\t\t\t\t\tconsole.warn(`LaserFlow performance warning: ${fps} FPS`);\r\n\t\t\t\t\t}\r\n\t\t\t\t\tframeCount = 0;\r\n\t\t\t\t\tlastFpsTime = currentTime;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\traf = requestAnimationFrame(animate);\r\n\t\t};\r\n\t\tanimate();\r\n\r\n\t\treturn () => {\r\n\t\t\tcancelAnimationFrame(raf);\r\n\t\t\tro.disconnect();\r\n\t\t\trenderer.domElement.removeEventListener(\"pointermove\", onMove as any);\r\n\t\t\trenderer.domElement.removeEventListener(\"pointerdown\", onMove as any);\r\n\t\t\trenderer.domElement.removeEventListener(\"pointerenter\", onMove as any);\r\n\t\t\trenderer.domElement.removeEventListener(\r\n\t\t\t\t\"pointerleave\",\r\n\t\t\t\tonLeave as any\r\n\t\t\t);\r\n\t\t\twindow.removeEventListener(\"mousemove\", onMove);\r\n\t\t\tgeometry.dispose();\r\n\t\t\tmaterial.dispose();\r\n\t\t\trenderer.dispose();\r\n\t\t\tmount.removeChild(renderer.domElement);\r\n\t\t};\r\n\t}, [\r\n\t\twispDensity,\r\n\t\tdpr,\r\n\t\tmouseSmoothTime,\r\n\t\tmouseTiltStrength,\r\n\t\thorizontalBeamOffset,\r\n\t\tverticalBeamOffset,\r\n\t\tflowSpeed,\r\n\t\tverticalSizing,\r\n\t\thorizontalSizing,\r\n\t\tfogIntensity,\r\n\t\tfogScale,\r\n\t\twispSpeed,\r\n\t\twispIntensity,\r\n\t\tflowStrength,\r\n\t\tdecay,\r\n\t\tfalloffStart,\r\n\t\tfogFallSpeed,\r\n\t\tcolor,\r\n\t]);\r\n\r\n\treturn (\r\n\t\t\r\n\t);\r\n};\r\n\r\nexport default LaserFlow;\r\n", "type": "registry:ui" }, { "path": "components/ui/input.tsx", "content": "// SHADCN UI GENERATED CODE\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\nexport interface InputProps\n\textends React.InputHTMLAttributes {}\n\nconst Input = React.forwardRef(\n\t({ className, type, ...props }, ref) => {\n\t\treturn (\n\t\t\t\n\t\t);\n\t}\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n", "type": "registry:ui" }, { "path": "registry/utilities/cn.ts", "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n", "type": "registry:ui" }, { "path": "components/ui/select.tsx", "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = React.forwardRef<\n\tReact.ElementRef,\n\tReact.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n\t\n\t\t\n\t\t\t\n\t\t\n\t\t{children}\n\t\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n\tReact.ElementRef,\n\tReact.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n\t\n\t\t\n\t\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n\tReact.ElementRef,\n\tReact.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n\t\n\t\t\n\t\n));\nSelectScrollDownButton.displayName =\n\tSelectPrimitive.ScrollDownButton.displayName;\n\nconst SelectContent = React.forwardRef<\n\tReact.ElementRef,\n\tReact.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t{children}\n\t\t\t\n\t\t\t\n\t\t\n\t\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectLabel = React.forwardRef<\n\tReact.ElementRef,\n\tReact.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n\t\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n\tReact.ElementRef,\n\tReact.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\n\t\t{children}\n\t\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n\tReact.ElementRef,\n\tReact.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n\t\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n\tSelect,\n\tSelectGroup,\n\tSelectValue,\n\tSelectTrigger,\n\tSelectContent,\n\tSelectLabel,\n\tSelectItem,\n\tSelectSeparator,\n\tSelectScrollUpButton,\n\tSelectScrollDownButton,\n};\n", "type": "registry:ui" }, { "path": "components/ui/slider.tsx", "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\r\n\r\nconst Slider = React.forwardRef<\r\n\tReact.ElementRef,\r\n\tReact.ComponentPropsWithoutRef\r\n>(({ className, ...props }, ref) => (\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\r\n\t\t\r\n\t\t\r\n\t\r\n));\r\nSlider.displayName = SliderPrimitive.Root.displayName;\r\n\r\nexport { Slider };\r\n", "type": "registry:ui" } ] }