{"version":3,"file":"PixelTransition.jeeNX3rt.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/VHx6h9GDKMSkp9munUQE/iuO6cUEY1gVzApkGCZgp/LogoGradient.js","https:/framerusercontent.com/modules/wncS9FuA6MF0CZfxcGzR/treujVAAQoXrC6l9ORac/PixelTransition.js"],"sourcesContent":["import{defineShader,ControlType}from\"framer\";export default defineShader({title:\"Logo Gradient\",heightmapSource:\"image\",mouse:\"disabledByDefault\",buffers:[{name:\"push\",resolutionScale:.5,format:\"rgba16f\",fragment:`\nvoid main() {\n float aspect = u_resolution.x / u_resolution.y;\n vec2 aspectFix = vec2(aspect, 1.0);\n\n vec2 texel = 1.0 / u_resolution;\n\n // --- Read own previous frame + neighbours ---\n vec4 prev = texture(u_push_buffer, v_uv);\n vec2 c = prev.xy;\n vec2 nl = texture(u_push_buffer, v_uv - vec2(texel.x, 0.0)).xy;\n vec2 nr = texture(u_push_buffer, v_uv + vec2(texel.x, 0.0)).xy;\n vec2 nd = texture(u_push_buffer, v_uv - vec2(0.0, texel.y)).xy;\n vec2 nu = texture(u_push_buffer, v_uv + vec2(0.0, texel.y)).xy;\n\n vec2 blurred = (nl + nr + nd + nu) * 0.25;\n vec2 field = mix(c, blurred, 0.12);\n\n float r = clamp(u_deltaTime * 60.0, 0.0, 3.0);\n float decay = pow(mix(0.86, 0.985, clamp(u_mousePersist, 0.0, 1.0)), r);\n field *= decay;\n\n // --- Smooth the cursor velocity (EMA) ---\n // Raw .zw arrives in uneven per-frame pulses at low speeds; the EMA\n // spreads each pulse over a few frames so the deposit reads as a\n // continuous stream. ~0.25 blend per 60fps frame, frame-rate independent.\n vec2 rawVel = u_mousePosition.zw * aspectFix * u_mouseHover;\n float smoothK = 1.0 - pow(0.75, r); //or smoothK = 1. for original no smooth feeling\n vec2 mouseVel = mix(prev.zw, rawVel, smoothK);\n\n float speed = length(mouseVel);\n float brush = max(u_mouseRadius * 0.1, 0.001);\n\n float speedPerSec = speed / max(u_deltaTime, 1e-4);\n float moving = 1.0 - exp(-speedPerSec * 0.5);\n\n vec2 dir = speed > 1e-5 ? mouseVel / speed : vec2(1.0, 0.0);\n vec2 ortho = vec2(-dir.y, dir.x);\n\n vec2 toMouse = (v_uv - u_mousePosition.xy) * aspectFix;\n //toMouse -= dir * brush * 0.2 * moving;\n\n float along = dot(toMouse, dir);\n float across = dot(toMouse, ortho);\n float ra = brush * (1.0 + u_mouseStretch * moving);\n float rb = brush;\n float d2 = (along * along) / (ra * ra) + (across * across) / (rb * rb);\n float falloff = exp(-d2);\n\n field += mouseVel * falloff * (u_mousePush * 0.1) * u_mouseHover;\n\n field = clamp(field, -1.0, 1.0);\n\n fragColor = vec4(field, mouseVel);\n}\n`}],fragment:`\n// === CONSTANTS ===\nconst float GOLDEN_ANGLE = 2.3999632;\nconst float TAU = 6.28318530;\n\n// === PCG hash ===\nuvec3 hash3(uvec3 v) {\n v = v * 1664525u + 1013904223u;\n v.x += v.y * v.z;\n v.y += v.z * v.x;\n v.z += v.x * v.y;\n v ^= v >> 16u;\n v.x += v.y * v.z;\n v.y += v.z * v.x;\n v.z += v.x * v.y;\n return v;\n}\n\nvec3 seedRandom(float seedVal) {\n uvec3 s = uvec3(\n floatBitsToUint(seedVal),\n floatBitsToUint(seedVal * 1.5 + 7.31),\n floatBitsToUint(seedVal * 2.7 + 13.37)\n );\n s = hash3(s);\n return vec3(s) / float(0xFFFFFFFFu);\n}\n\n// === COLOR SPACE (Oklab/LCH) ===\n\nvec3 toLinear(vec3 c) {\n return pow(c, vec3(2.2));\n}\n\nvec3 toSrgb(vec3 c) {\n return pow(clamp(c, 0.0, 1.0), vec3(0.4545));\n}\n\nvec3 linearToOklab(vec3 c) {\n float l = 0.4122214708 * c.r + 0.5363325363 * c.g + 0.0514459929 * c.b;\n float m = 0.2119034982 * c.r + 0.6806995451 * c.g + 0.1073969566 * c.b;\n float s = 0.0883024619 * c.r + 0.2817188376 * c.g + 0.6299787005 * c.b;\n\n l = pow(max(l, 0.0), 1.0 / 3.0);\n m = pow(max(m, 0.0), 1.0 / 3.0);\n s = pow(max(s, 0.0), 1.0 / 3.0);\n\n return vec3(\n 0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,\n 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,\n 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s\n );\n}\n\nvec3 oklabToLinear(vec3 c) {\n float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z;\n float m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z;\n float s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;\n\n l = l * l * l;\n m = m * m * m;\n s = s * s * s;\n\n return vec3(\n +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n );\n}\n\nvec3 oklabToLch(vec3 lab) {\n return vec3(lab.x, length(lab.yz), atan(lab.z, lab.y));\n}\n\nvec3 lchToOklab(vec3 lch) {\n return vec3(lch.x, lch.y * cos(lch.z), lch.y * sin(lch.z));\n}\n\nvec3 mixLch(vec3 lab0, vec3 lab1, float t) {\n vec3 lch0 = oklabToLch(lab0);\n vec3 lch1 = oklabToLch(lab1);\n\n if (lch0.y < 0.05) lch0.z = lch1.z;\n if (lch1.y < 0.05) lch1.z = lch0.z;\n\n float dh = lch1.z - lch0.z;\n if (dh > 3.14159265) dh -= 6.28318530;\n if (dh < -3.14159265) dh += 6.28318530;\n\n return lchToOklab(vec3(\n mix(lch0.x, lch1.x, t),\n mix(lch0.y, lch1.y, t),\n lch0.z + dh * t\n ));\n}\n\n// === PALETTE ===\n\nvec3 getColor(int idx) {\n if (u_colors_length < 1) return vec3(0.0);\n int safeIdx = clamp(idx, 0, u_colors_length - 1);\n return u_colors[safeIdx].rgb;\n}\n\nvec3 paletteN(float t, int count) {\n if (count < 1) return vec3(0.0);\n if (count < 2) return toLinear(getColor(0));\n\n float segmentSize = 1.0 / float(count - 1);\n t = clamp(t, 0.0, 1.0);\n int idx = min(int(floor(t / segmentSize)), count - 2);\n float localT = clamp((t - float(idx) * segmentSize) / segmentSize, 0.0, 1.0);\n\n vec3 lab0 = linearToOklab(toLinear(getColor(idx)));\n vec3 lab1 = linearToOklab(toLinear(getColor(idx + 1)));\n\n return oklabToLinear(mixLch(lab0, lab1, localT));\n}\n\n// === POST-PROCESS ===\n\nvec3 softGamutMap(vec3 linearRgb) {\n float maxC = max(linearRgb.r, max(linearRgb.g, linearRgb.b));\n float minC = min(linearRgb.r, min(linearRgb.g, linearRgb.b));\n\n if (minC >= 0.0 && maxC <= 1.0) return linearRgb;\n\n vec3 lab = linearToOklab(max(linearRgb, 0.0));\n float L = clamp(lab.x, 0.0, 1.0);\n float C = length(lab.yz);\n float h = atan(lab.z, lab.y);\n\n float maxChroma = 0.4 * (1.0 - pow(abs(2.0 * L - 1.0), 2.0));\n\n if (C > maxChroma * 0.7) {\n float knee = maxChroma * 0.7;\n C = knee + (maxChroma - knee) * tanh((C - knee) / (maxChroma - knee + 0.001));\n }\n\n return clamp(oklabToLinear(vec3(L, C * cos(h), C * sin(h))), 0.0, 1.0);\n}\n\n// === HEIGHTMAP HELPERS ===\n\nfloat blurDepth3x3(vec2 uv, vec2 dudx, vec2 dudy, vec2 texel, float radius) {\n vec2 r = radius * texel;\n\n float sum = 4.0 * textureGrad(u_image_heightmap, uv, dudx, dudy).r;\n\n sum += 2.0 * textureGrad(u_image_heightmap, uv + vec2(0.0, -r.y), dudx, dudy).r;\n sum += 2.0 * textureGrad(u_image_heightmap, uv + vec2(0.0, r.y), dudx, dudy).r;\n sum += 2.0 * textureGrad(u_image_heightmap, uv + vec2(-r.x, 0.0), dudx, dudy).r;\n sum += 2.0 * textureGrad(u_image_heightmap, uv + vec2( r.x, 0.0), dudx, dudy).r;\n\n sum += textureGrad(u_image_heightmap, uv + vec2(-r.x, -r.y), dudx, dudy).r;\n sum += textureGrad(u_image_heightmap, uv + vec2( r.x, -r.y), dudx, dudy).r;\n sum += textureGrad(u_image_heightmap, uv + vec2(-r.x, r.y), dudx, dudy).r;\n sum += textureGrad(u_image_heightmap, uv + vec2( r.x, r.y), dudx, dudy).r;\n\n return sum / 16.0;\n}\n\nvec2 heightGrad(vec2 uv, vec2 dudx, vec2 dudy, vec2 texel, float blurRadius) {\n float eps = 4.0;\n float dR = blurDepth3x3(uv + vec2(eps * texel.x, 0.0), dudx, dudy, texel, blurRadius);\n float dL = blurDepth3x3(uv - vec2(eps * texel.x, 0.0), dudx, dudy, texel, blurRadius);\n float dU = blurDepth3x3(uv + vec2(0.0, eps * texel.y), dudx, dudy, texel, blurRadius);\n float dD = blurDepth3x3(uv - vec2(0.0, eps * texel.y), dudx, dudy, texel, blurRadius);\n return vec2(dR - dL, dU - dD) / (2.0 * eps * texel);\n}\n\n// === MAIN ===\n\nvoid main() {\n vec2 uv = vec2(v_uv.x, 1.0 - v_uv.y);\n vec2 texSize = vec2(textureSize(u_image_heightmap, 0));\n float imgAspect = texSize.x / texSize.y;\n float canvasAspect = u_resolution.x / u_resolution.y;\n\n if (canvasAspect > imgAspect) {\n uv.x = (uv.x - 0.5) * (canvasAspect / imgAspect) + 0.5;\n } else {\n uv.y = (uv.y - 0.5) * (imgAspect / canvasAspect) + 0.5;\n }\n\n /*\n if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {\n fragColor = vec4(u_colorBack.rgb * u_colorBack.a, u_colorBack.a);\n return;\n }\n */\n\n // 1.0 on DPR 2+, up to 2.0 on DPR 1\n float aaScale = max(1.0, 2.0 / u_pixelRatio);\n\n vec2 dudx = dFdx(uv);\n vec2 dudy = dFdy(uv);\n\n vec4 hm = textureGrad(u_image_heightmap, uv, dudx, dudy);\n float fw_b = 0.5 * fwidth(hm.b);\n float hardMask = smoothstep(0.5 - fw_b, 0.5 + fw_b, hm.b);\n float opacity = hardMask * (1.0 - hm.g);\n\n // Only fade at the letterbox boundary, not on the axis the image fills\n float edgeDist;\n if (canvasAspect > imgAspect) {\n // Letterbox bars are left/right → only fade X edges\n edgeDist = min(uv.x, 1.0 - uv.x);\n } else if (canvasAspect < imgAspect) {\n // Letterbox bars are top/bottom → only fade Y edges\n edgeDist = min(uv.y, 1.0 - uv.y);\n } else {\n // Aspects match — no letterboxing, no seam, no fade needed\n edgeDist = 1.0;\n }\n opacity *= smoothstep(0.0, 1.0 * fwidth(edgeDist), edgeDist);\n\n if (opacity < 0.001) {\n fragColor = vec4(u_colorBack.rgb * u_colorBack.a, u_colorBack.a);\n return;\n }\n\n vec2 texel = 1.0 / texSize;\n int colorCount = u_colors_length;\n\n if (colorCount < 1) {\n fragColor = vec4(u_colorBack.rgb * u_colorBack.a, u_colorBack.a);\n return;\n }\n\n float rawDepth = blurDepth3x3(uv, dudx, dudy, texel, 6.0);\n float depth = max(rawDepth, 0.001);\n\n vec2 grad = heightGrad(uv, dudx, dudy, texel, 6.0);\n float gradMag = min(length(grad), 5.0);\n vec2 gradDir = gradMag > 0.001 ? normalize(grad) : vec2(0.0);\n vec2 contourDir = vec2(-gradDir.y, gradDir.x);\n\n float t = mod(u_time * u_speed, 3600.0);\n\n // Motion mode: 0 = Random, 1 = Melt\n float isMelt = step(0.5, u_motionMode);\n\n // Seed\n vec3 seedOffset = seedRandom(u_seed);\n vec3 seedOffset2 = seedRandom(u_seed + 100.0);\n float seedAngle = u_seed * GOLDEN_ANGLE;\n vec2 seedPhase = (seedOffset2.xy - 0.5) * TAU;\n\n // World-space coordinates anchored to the image\n vec2 p = (uv - 0.5) * 2.0;\n p.x *= imgAspect;\n\n // Seed-based rotation\n float cs = cos(seedAngle);\n float sn = sin(seedAngle);\n p = mat2(cs, -sn, sn, cs) * p;\n\n // Angle — rotates the gradient flow direction\n float ang = u_angle * 3.14159 / 180.0;\n float cosA = cos(ang);\n float sinA = sin(ang);\n p = vec2(p.x * cosA - p.y * sinA, p.x * sinA + p.y * cosA);\n\n // === MOUSE PUSH (fluid, from push buffer) ===\n vec2 pf = texture(u_push_buffer, v_uv).xy;\n\n // Buffer space is v_uv (Y-up); image uv is flipped → flip the vector's Y\n // BEFORE any rotation, or the rotations scramble the error across axes.\n pf.y = -pf.y;\n\n // Buffer aspect-corrects with canvas aspect; p is in image-aspect space.\n // On the tall-canvas branch the letterbox remap doesn't cancel it out.\n if (canvasAspect <= imgAspect) {\n pf *= imgAspect / canvasAspect;\n }\n\n pf = mat2(cs, -sn, sn, cs) * pf; // seed rotation\n pf = vec2(pf.x * cosA - pf.y * sinA, pf.x * sinA + pf.y * cosA); // angle rotation\n p -= pf * 2.0;\n\n\n // Turbulence time\n float tTurb = t * mix(1.0, 0.4, isMelt);\n\n // Melt flow offset applied to q inside turbulence, not to p\n vec2 meltOffset = vec2(1.0, 0.0) * t * 0.4 * isMelt;\n\n // === SHAPE-AWARE COORDINATE WARPING ===\n float edgeProximity = 1.0 - smoothstep(0.0, 0.8, depth);\n\n float coordScale = max(0.4, 0.1 + depth * 1.0);\n p *= coordScale;\n\n p += contourDir * edgeProximity * u_bend * 2.0;\n p -= gradDir * edgeProximity * u_bend * 0.5;\n p *= max(0.5, mix(1.0, 0.4 + 0.6 * smoothstep(0.0, 0.5, depth), u_contour));\n\n // === TURBULENCE ===\n int turbIter = int(u_turbIter);\n float freq = 1.0 / max(u_turbFreq, 0.01);\n\n vec2 q = p * u_scale + meltOffset;\n\n float a = seedPhase.x;\n float d = seedPhase.y;\n\n for (int j = 2; j < 10; j++) {\n if (j >= turbIter) break;\n float fj = float(j);\n q += u_turbAmp * sin(length(q) / freq * fj + tTurb + vec2(a, d) + seedOffset.xy * fj) / fj;\n a += cos(fj + d * 1.2 + q.x * 2.0 - tTurb + seedOffset2.z);\n d += sin(fj * q.y + a + seedOffset.z + tTurb + seedOffset2.y);\n }\n\n float base = length(q.yx + vec2(a, d) * 0.2) * u_waveFreq + seedOffset.x;\n float val = 0.5 + 0.125 * sin(base + 1.0) + 0.25 * sin(base + 4.0) + 0.125 * sin(base + 9.0);\n val = clamp((val - 0.3) / 0.4, 0.0, 1.0);\n\n // Depth-based intensity modulation\n float innerIntensity = smoothstep(0.0, 0.4, depth);\n float contourHeat = (1.0 - innerIntensity) * u_contour;\n val = mix(val, val * innerIntensity + contourHeat, 0.5 + 0.5 * u_contour);\n\n vec3 col = paletteN(val, colorCount);\n col = softGamutMap(col);\n col = toSrgb(col);\n\n /*\n // Silhouette AA — hardMask + clamped fwidth\n float fw = fwidth(depth);\n float effectMask = hardMask * smoothstep(0.0, max(fw, min(2.0 * fw, 0.1)), depth);\n opacity *= effectMask;\n */\n\n // Alpha compositing\n col *= opacity;\n vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n col = col + bgColor * (1.0 - opacity);\n float finalAlpha = opacity + u_colorBack.a * (1.0 - opacity);\n\n fragColor = vec4(col, finalAlpha);\n}\n`,propertyControls:{image:{type:ControlType.ResponsiveImage,title:\"Image\",defaultValue:\"data:framer/asset-reference,7XHsXmlUUmdQM95fkSvi3LRCuSk.svg?originalFilename=Path.svg&width=32&height=48\"},colors:{type:ControlType.Array,title:\"Colors\",control:{type:ControlType.Color},maxCount:8,defaultValue:[\"#000000\",\"#0051FF\",\"#0DAAFF\",\"#BDE4FF\"]},colorBack:{type:ControlType.Color,title:\"Background\",defaultValue:\"#000000\"},seed:{type:ControlType.Number,title:\"Seed\",defaultValue:6,min:0,max:1e3,step:1,section:\"Motion\"},speed:{type:ControlType.Number,title:\"Speed\",defaultValue:.6,min:0,max:2,step:.01,section:\"Motion\"},motionMode:{type:ControlType.Enum,title:\"Motion\",options:[0,1],optionTitles:[\"Random\",\"Directional\"],defaultValue:0,section:\"Motion\"},angle:{type:ControlType.Number,title:\"Angle\",defaultValue:20,min:0,max:360,step:1,section:\"Motion\"},scale:{type:ControlType.Number,title:\"Scale\",defaultValue:1.2,min:.1,max:2,step:.01,section:\"Motion\"},turbAmp:{type:ControlType.Number,title:\"Amplitude\",defaultValue:.21,min:0,max:1,step:.01,section:\"Motion\"},turbFreq:{type:ControlType.Number,title:\"Frequency\",defaultValue:1.15,min:.1,max:2,step:.01,section:\"Motion\"},turbIter:{type:ControlType.Number,title:\"Definition\",defaultValue:7,min:3,max:8,step:1,displayStepper:true,section:\"Motion\"},waveFreq:{type:ControlType.Number,title:\"Bands\",defaultValue:2.4,min:.1,max:5,step:.1,section:\"Motion\"},bend:{type:ControlType.Number,title:\"Bevel\",defaultValue:.24,min:0,max:1,step:.01,section:\"Shape\",hiddenWhenUnset:true},contour:{type:ControlType.Number,title:\"Contour\",defaultValue:.8,min:0,max:1,step:.1,section:\"Shape\",hiddenWhenUnset:true},mousePush:{type:ControlType.Number,title:\"Push\",defaultValue:.5,min:.1,max:1,step:.1,section:\"Mouse\"},mouseRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:1,min:.1,max:1,step:.1,section:\"Mouse\"},mouseStretch:{type:ControlType.Number,title:\"Stretch\",defaultValue:0,min:0,max:1,step:.1,section:\"Mouse\"},mousePersist:{type:ControlType.Number,title:\"Persistence\",defaultValue:.8,min:0,max:1,step:.01,section:\"Mouse\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"shader\",\"name\":null,\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./LogoGradient.map","import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";// Cella di Asset 3: parallelogramma 294.62 x 201.78\n// bordo inferiore 0 -> 154.29, bordo superiore 140.33 -> 294.62\nconst SLANT=140.33/201.78;const BAND=154.29/201.78;/**\n * CTM Pixel Transition\n *\n * Dissolvenza scroll-driven tra sezioni: le celle diagonali del brand\n * (Asset 3) appaiono in ordine casuale componendo la texture CTM.\n *\n * @framerIntrinsicWidth 1200\n * @framerIntrinsicHeight 600\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function PixelTransition(props){const{tileColor=\"#00FFAD\",accentColor=\"#FFFFFF\",accentRate=6,tileSize=44,direction=\"up\",mode=\"fill\",seed=7,style}=props;const rootRef=useRef(null);const canvasRef=useRef(null);const isStatic=useIsStaticRenderer();useEffect(()=>{if(typeof window===\"undefined\")return;const root=rootRef.current;const canvas=canvasRef.current;if(!root||!canvas)return;const ctx=canvas.getContext(\"2d\");if(!ctx)return;let raf=0;let tiles=[];let bh=0;let dpr=1;// pseudo-random deterministico\nconst rand=i=>{const v=Math.sin(i*127.1+seed*311.7)*43758.5453;return v-Math.floor(v);};const layout=()=>{const rect=root.getBoundingClientRect();dpr=Math.min(window.devicePixelRatio||1,2);canvas.width=Math.max(1,Math.round(rect.width*dpr));canvas.height=Math.max(1,Math.round(rect.height*dpr));bh=Math.max(16,tileSize);const s=SLANT*bh;const bw=BAND*bh;const rows=Math.ceil(rect.height/bh);const cols=Math.ceil((rect.width+s+rows*s)/bw)+1;tiles=[];for(let r=0;r{const s=SLANT*bh;const bw=BAND*bh;ctx.moveTo(x+s,y);ctx.lineTo(x+s+bw+.75,y);ctx.lineTo(x+bw+.75,y+bh+.5);ctx.lineTo(x,y+bh+.5);ctx.closePath();};const draw=p=>{ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,canvas.width,canvas.height);const prog=mode===\"fill\"?p:1-p;// base\nctx.beginPath();for(const tile of tiles){if(prog>tile.t&&!(tile.accent&&prog-tile.t<.1)){drawTile(tile.x,tile.y);}}ctx.fillStyle=tileColor;ctx.fill();// accenti sul bordo della dissolvenza\nctx.beginPath();for(const tile of tiles){if(tile.accent&&prog>tile.t&&prog-tile.t<.1){drawTile(tile.x,tile.y);}}ctx.fillStyle=accentColor;ctx.fill();};const progress=()=>{const rect=root.getBoundingClientRect();const vh=window.innerHeight;return Math.min(Math.max((vh-rect.top)/(vh+rect.height),0),1);};layout();if(isStatic){draw(.55);return;}// Senza questa guardia il canvas si ridisegna per intero a ogni frame\n// di scroll anche a progress clampato (0 o 1), cioè per tutto il resto\n// della pagina, per sempre.\nlet lastP=-1;const render=()=>{const v=progress();if(v===lastP)return;lastP=v;draw(v);};const onScroll=()=>{if(!raf)raf=window.requestAnimationFrame(()=>{raf=0;render();});};let lastW=0;let lastH=0;const onResize=()=>{// la URL bar mobile spara resize in pieno scroll: rifare layout e\n// realloc del canvas a parità di dimensioni è lavoro buttato\nconst w=root.clientWidth;const h=root.clientHeight;if(w===lastW&&h===lastH)return;lastW=w;lastH=h;layout();lastP=-1;render();};render();window.addEventListener(\"resize\",onResize);// il listener di scroll si aggancia solo quando la sezione è in vista\nlet attached=false;const attach=on=>{if(on===attached)return;attached=on;if(on)window.addEventListener(\"scroll\",onScroll,{passive:true});else window.removeEventListener(\"scroll\",onScroll);};const io=new IntersectionObserver(entries=>attach(entries.some(e=>e.isIntersecting)),{rootMargin:\"200px 0px\"});io.observe(root);return()=>{io.disconnect();attach(false);window.removeEventListener(\"resize\",onResize);if(raf)window.cancelAnimationFrame(raf);};},[isStatic,tileColor,accentColor,accentRate,tileSize,direction,mode,seed]);return /*#__PURE__*/_jsx(\"div\",{ref:rootRef,style:{...style,position:\"relative\",width:\"100%\",height:style?.height??\"100%\",overflow:\"clip\"},children:/*#__PURE__*/_jsx(\"canvas\",{ref:canvasRef,style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\"},\"aria-hidden\":\"true\"})});}addPropertyControls(PixelTransition,{tileColor:{type:ControlType.Color,title:\"Colore celle\",defaultValue:\"#00FFAD\"},accentColor:{type:ControlType.Color,title:\"Colore accento\",defaultValue:\"#FFFFFF\"},accentRate:{type:ControlType.Number,title:\"Accenti\",defaultValue:6,min:0,max:25,step:1,unit:\"%\"},tileSize:{type:ControlType.Number,title:\"Dimensione cella\",defaultValue:44,min:20,max:120,step:2,unit:\"px\"},direction:{type:ControlType.Enum,title:\"Direzione\",options:[\"up\",\"down\"],optionTitles:[\"Sale\",\"Scende\"],defaultValue:\"up\",displaySegmentedControl:true},mode:{type:ControlType.Enum,title:\"Modo\",options:[\"fill\",\"empty\"],optionTitles:[\"Riempie\",\"Svuota\"],defaultValue:\"fill\",displaySegmentedControl:true},seed:{type:ControlType.Number,title:\"Seed\",defaultValue:7,min:1,max:100,step:1,displayStepper:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"PixelTransition\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicWidth\":\"1200\",\"framerIntrinsicHeight\":\"600\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./PixelTransition.map"],"mappings":"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"}