{"version":3,"file":"ImagePixels.BiDok_oe.mjs","names":[],"sources":["https:/framerusercontent.com/modules/JsPmYlRY4sjuETQUzJyk/lP4ixyFLJyHEfhv6LyKA/ImagePixels.js"],"sourcesContent":["import{defineShader,ControlType}from\"framer\";export default defineShader({title:\"Pixels\",fragment:`\nvoid main() {\n    float cssResX = u_resolution.x / u_pixelRatio;\n    float cssResY = u_resolution.y / u_pixelRatio;\n    float aspect = cssResX / cssResY;\n\n    ivec2 texSizeI = textureSize(u_texture, 0);\n    vec2 texSize = vec2(texSizeI);\n    float textureAspect = texSize.x / texSize.y;\n\n    vec2 coverScale = vec2(1.0);\n    vec2 coverOffset = vec2(0.0);\n    if (aspect > textureAspect) {\n        float s = aspect / textureAspect;\n        coverScale = vec2(1.0, 1.0 / s);\n        coverOffset = vec2(0.0, (1.0 - coverScale.y) * 0.5);\n    } else {\n        float s = textureAspect / aspect;\n        coverScale = vec2(1.0 / s, 1.0);\n        coverOffset = vec2((1.0 - coverScale.x) * 0.5, 0.0);\n    }\n\n    // Pixel grid in CSS pixels (DPR-independent)\n    float cellsY = u_pixels;\n    vec2 cellCount = vec2(cellsY * aspect, cellsY);\n    vec2 coord = v_uv * cellCount;\n    vec2 normalizedSize = 1.0 / cellCount;\n\n    // Stagger\n    float colStagger = mod(floor(coord.x), 2.0) * u_stagger;\n    vec2 subcoord = coord * vec2(3.0, 1.0);\n    float subIdx = mod(floor(subcoord.x), 3.0);\n    float subStagger = subIdx * u_stagger;\n\n    // Offset UV with full stagger\n    vec2 offsetUV = v_uv;\n    offsetUV.y += (colStagger + subStagger) * normalizedSize.y;\n    vec2 cellCenter = normalizedSize * (floor(offsetUV / normalizedSize) + 0.5);\n\n    // Chromatic aberration\n    //float ca = u_aberration / cssResX;\n    float ca = u_aberration * normalizedSize.x;\n\n    vec2 sampleR = (cellCenter + vec2(-ca, 0.0)) * coverScale + coverOffset;\n    vec2 sampleG = cellCenter * coverScale + coverOffset;\n    vec2 sampleB = (cellCenter + vec2(ca, 0.0)) * coverScale + coverOffset;\n\n    sampleR.y = 1.0 - sampleR.y;\n    sampleG.y = 1.0 - sampleG.y;\n    sampleB.y = 1.0 - sampleB.y;\n\n    sampleR = clamp(sampleR, vec2(0.0), vec2(1.0));\n    sampleG = clamp(sampleG, vec2(0.0), vec2(1.0));\n    sampleB = clamp(sampleB, vec2(0.0), vec2(1.0));\n\n    vec4 colR = texelFetch(u_texture, clamp(ivec2(sampleR * texSize), ivec2(0), texSizeI - 1), 0);\n    vec4 colG = texelFetch(u_texture, clamp(ivec2(sampleG * texSize), ivec2(0), texSizeI - 1), 0);\n    vec4 colB = texelFetch(u_texture, clamp(ivec2(sampleB * texSize), ivec2(0), texSizeI - 1), 0);\n\n    // Hue rotation\n    float h = u_hueShift;\n    vec3 k = vec3(0.57735);\n\n    float cR = cos(-h), sR = sin(-h);\n    mat3 hueRotR = mat3(\n        cR + k.x*k.x*(1.0-cR), k.x*k.y*(1.0-cR) - k.z*sR, k.x*k.z*(1.0-cR) + k.y*sR,\n        k.y*k.x*(1.0-cR) + k.z*sR, cR + k.y*k.y*(1.0-cR), k.y*k.z*(1.0-cR) - k.x*sR,\n        k.z*k.x*(1.0-cR) - k.y*sR, k.z*k.y*(1.0-cR) + k.x*sR, cR + k.z*k.z*(1.0-cR)\n    );\n    float cB = cos(h), sB = sin(h);\n    mat3 hueRotB = mat3(\n        cB + k.x*k.x*(1.0-cB), k.x*k.y*(1.0-cB) - k.z*sB, k.x*k.z*(1.0-cB) + k.y*sB,\n        k.y*k.x*(1.0-cB) + k.z*sB, cB + k.y*k.y*(1.0-cB), k.y*k.z*(1.0-cB) - k.x*sB,\n        k.z*k.x*(1.0-cB) - k.y*sB, k.z*k.y*(1.0-cB) + k.x*sB, cB + k.z*k.z*(1.0-cB)\n    );\n\n    colR.rgb = hueRotR * colR.rgb;\n    colB.rgb = hueRotB * colB.rgb;\n\n    vec3 color = vec3(colR.r, colG.g, colB.b);\n\n    // Sub-pixel bevel border\n    float luma = dot(color, vec3(0.2126, 0.7152, 0.0722));\n    vec2 cellOffset = vec2(0.0, colStagger + subStagger);\n    vec2 subCellUV = fract(subcoord + cellOffset) * 2.0 - 1.0;\n    float borderAmount = u_border - luma * 0.25;\n    vec2 border = 1.0 - subCellUV * subCellUV * borderAmount;\n    float mask = border.x * border.y;\n\n    // AA based on CSS pixels per cell\n    float pixelsPerCell = cssResY / cellsY * u_pixelRatio * 2.;\n    float aaRange = smoothstep(2.0, 8.0, pixelsPerCell) * 0.95;\n    float maskStrength = smoothstep(0.0, aaRange, mask);\n\n    color *= maskStrength;\n\n    fragColor = vec4(color, colG.a); //or originally 1.0 with no transparency handling\n}\n`,propertyControls:{texture:{type:ControlType.ResponsiveImage,title:\"Image\",defaultValue:\"data:framer/asset-reference,HcsbdkJggvMaJ0BVy56SIVkBUA.png?originalFilename=Zoom.png&width=2560&height=1440\"},pixels:{type:ControlType.Number,title:\"Pixels\",defaultValue:28,min:8,max:128,step:1},stagger:{type:ControlType.Number,title:\"Stagger\",defaultValue:0,min:0,max:1,step:.01},border:{type:ControlType.Number,title:\"Border\",defaultValue:0,min:0,max:1,step:.01},aberration:{type:ControlType.Number,title:\"Aberration\",defaultValue:0,min:0,max:20,step:.5},hueShift:{type:ControlType.Number,title:\"Hue Shift\",defaultValue:0,min:-1,max:1,step:.01}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"shader\",\"name\":null,\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImagePixels.map"],"mappings":"8HAA4C,IAAgB,EAAa,CAAC,MAAM,SAAS,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkGhG,iBAAiB,CAAC,QAAQ,CAAC,KAAK,EAAY,gBAAgB,MAAM,QAAQ,aAAa,6GAA6G,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,GAAG,IAAI,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,UAAU,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC"}