@flikk/ui 1.0.0-beta.31 → 1.0.0-beta.32

package/dist/components/effects/GridPattern/GridPattern.js

@@ -1,65 +0,0 @@
-"use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useId, useMemo } from 'react';
-import { useReducedMotion, motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * Build a CSS mask-image value for the given fade direction and size.
- */
-function buildMaskImage(direction, fadeSize) {
-    const stop = Math.max(0, Math.min(100, fadeSize));
-    if (direction === "radial") {
-        return `radial-gradient(ellipse at center, black ${100 - stop}%, transparent 100%)`;
-    }
-    const directionMap = {
-        top: "to top",
-        bottom: "to bottom",
-        left: "to left",
-        right: "to right",
-    };
-    return `linear-gradient(${directionMap[direction]}, black ${100 - stop}%, transparent 100%)`;
-}
-/**
- * GridPattern renders an SVG-based grid background pattern.
- *
- * Use it as an absolute-positioned decorative background inside a container
- * with `position: relative`. The pattern is fully non-interactive
- * (`pointer-events: none`) and sits at `z-index: 0` by default.
- *
- * @example
- * ```tsx
- * <div className="relative overflow-hidden h-96">
- *   <GridPattern size={48} color="var(--color-border)" fade animated />
- *   <div className="relative z-10">Your content here</div>
- * </div>
- * ```
- */
-const GridPattern = React__default.forwardRef(({ size = 40, strokeWidth = 1, color = "var(--color-border)", fade = true, fadeDirection = "radial", fadeSize = 50, animated = false, className, style, ...rest }, ref) => {
-    const patternId = useId();
-    const shouldReduceMotion = useReducedMotion();
-    const enableAnimation = animated && !shouldReduceMotion;
-    const maskImage = useMemo(() => (fade ? buildMaskImage(fadeDirection, fadeSize) : undefined), [fade, fadeDirection, fadeSize]);
-    const containerStyle = {
-        ...style,
-        ...(maskImage
-            ? {
-                maskImage,
-                WebkitMaskImage: maskImage,
-            }
-            : {}),
-    };
-    const svgContent = (jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 w-full h-full", children: [jsx("defs", { children: jsxs("pattern", { id: patternId, x: "0", y: "0", width: size, height: size, patternUnits: "userSpaceOnUse", children: [jsx("line", { x1: size, y1: "0", x2: size, y2: size, stroke: color, strokeWidth: strokeWidth }), jsx("line", { x1: "0", y1: size, x2: size, y2: size, stroke: color, strokeWidth: strokeWidth })] }) }), jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }));
-    const animatedSvgContent = enableAnimation ? (jsxs(motion.svg, { "aria-hidden": "true", className: "absolute inset-0 w-full h-full", animate: {
-            x: [0, size],
-            y: [0, size],
-        }, transition: {
-            duration: 20,
-            ease: "linear",
-            repeat: Infinity,
-        }, children: [jsx("defs", { children: jsxs("pattern", { id: patternId, x: "0", y: "0", width: size, height: size, patternUnits: "userSpaceOnUse", children: [jsx("line", { x1: size, y1: "0", x2: size, y2: size, stroke: color, strokeWidth: strokeWidth }), jsx("line", { x1: "0", y1: size, x2: size, y2: size, stroke: color, strokeWidth: strokeWidth })] }) }), jsx("rect", { x: -size, y: -size, width: `calc(100% + ${size * 2}px)`, height: `calc(100% + ${size * 2}px)`, fill: `url(#${patternId})` })] })) : null;
-    return (jsx("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none z-0 overflow-hidden", className), style: containerStyle, ...rest, children: enableAnimation ? animatedSvgContent : svgContent }));
-});
-GridPattern.displayName = "GridPattern";
-
-export { GridPattern };

package/dist/components/effects/GridPattern/GridPattern.types.d.ts

@@ -1,47 +0,0 @@
-import React from "react";
-/** Direction for the fade gradient mask */
-export type GridPatternFadeDirection = "radial" | "top" | "bottom" | "left" | "right";
-export interface GridPatternProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Grid cell size in pixels.
-     * @default 40
-     */
-    size?: number;
-    /**
-     * Stroke width of the grid lines in pixels.
-     * @default 1
-     */
-    strokeWidth?: number;
-    /**
-     * Stroke color of the grid lines.
-     * Accepts any valid CSS color value or CSS variable.
-     * @default "var(--color-border)"
-     */
-    color?: string;
-    /**
-     * Whether to apply a gradient mask that fades the pattern at the edges.
-     * @default true
-     */
-    fade?: boolean;
-    /**
-     * Direction of the fade gradient.
-     * - "radial" fades from center outward
-     * - "top" | "bottom" | "left" | "right" fades toward that edge
-     * @default "radial"
-     */
-    fadeDirection?: GridPatternFadeDirection;
-    /**
-     * Size of the fade area as a percentage (0-100).
-     * Higher values create a larger transparent region.
-     * @default 50
-     */
-    fadeSize?: number;
-    /**
-     * Whether to apply a subtle drift animation to the grid pattern.
-     * Respects prefers-reduced-motion automatically.
-     * @default false
-     */
-    animated?: boolean;
-    /** Additional className for style overrides (shadcn pattern). */
-    className?: string;
-}

package/dist/components/effects/GridPattern/index.d.ts

@@ -1,2 +0,0 @@
-export { GridPattern } from "./GridPattern";
-export type { GridPatternProps, GridPatternFadeDirection, } from "./GridPattern.types";

package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import type { HalftoneCmykProps } from "./HalftoneCmyk.types";
-/**
- * CMYK halftone image filter — separates a source image into 4 classic
- * print-screen-angled ink dot layers (cyan/magenta/yellow/black). WebGL2-
- * powered; falls back to the plain source image (via `object-fit: cover`)
- * when WebGL2 is unavailable. The most GPU-expensive effect in this
- * library — avoid using it as a full-page background at low `size` values.
- */
-export declare const HalftoneCmyk: React.FC<HalftoneCmykProps>;

package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.js

@@ -1,78 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { useState, useMemo, useRef, useCallback } from 'react';
-import { useIsClient } from '../../../hooks/useIsClient.js';
-import 'motion/react';
-import { useDarkMode } from '../../../hooks/useDarkMode.js';
-import { cn } from '../../../utils/cn.js';
-import { ShaderCanvas } from '../shared/ShaderCanvas/ShaderCanvas.js';
-import { resolveShaderColor } from '../shared/resolveShaderColor.js';
-import { halftoneCmykFragmentShader } from './HalftoneCmyk.shaders.js';
-
-const DEFAULT_COLOR_BACK = "var(--color-background)";
-const DEFAULT_COLOR_C = "#00b7eb";
-const DEFAULT_COLOR_M = "#e4007c";
-const DEFAULT_COLOR_Y = "#ffe800";
-const DEFAULT_COLOR_K = "var(--color-text-primary)";
-function useWebgl2Supported() {
-    return useMemo(() => {
-        if (typeof document === "undefined")
-            return false;
-        try {
-            return !!document.createElement("canvas").getContext("webgl2");
-        }
-        catch (_a) {
-            return false;
-        }
-    }, []);
-}
-/**
- * CMYK halftone image filter — separates a source image into 4 classic
- * print-screen-angled ink dot layers (cyan/magenta/yellow/black). WebGL2-
- * powered; falls back to the plain source image (via `object-fit: cover`)
- * when WebGL2 is unavailable. The most GPU-expensive effect in this
- * library — avoid using it as a full-page background at low `size` values.
- */
-const HalftoneCmyk = ({ image, colorBack = DEFAULT_COLOR_BACK, colorC = DEFAULT_COLOR_C, colorM = DEFAULT_COLOR_M, colorY = DEFAULT_COLOR_Y, colorK = DEFAULT_COLOR_K, size = 0.6, contrast = 1, softness = 0.3, gridNoise = 0.1, grainSize = 0.5, grainMixer = 0, grainOverlay = 0, floodC = 0, floodM = 0, floodY = 0, floodK = 0, gainC = 0, gainM = 0, gainY = 0, gainK = 0, className, style, ...props }) => {
-    const isClient = useIsClient();
-    const isDark = useDarkMode();
-    const webglSupported = useWebgl2Supported();
-    const [imageAspectRatio, setImageAspectRatio] = useState(16 / 9);
-    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), [colorBack, isDark]); // eslint-disable-line react-hooks/exhaustive-deps
-    const resolvedC = useMemo(() => resolveShaderColor(colorC), [colorC, isDark]); // eslint-disable-line react-hooks/exhaustive-deps
-    const resolvedM = useMemo(() => resolveShaderColor(colorM), [colorM, isDark]); // eslint-disable-line react-hooks/exhaustive-deps
-    const resolvedY = useMemo(() => resolveShaderColor(colorY), [colorY, isDark]); // eslint-disable-line react-hooks/exhaustive-deps
-    const resolvedK = useMemo(() => resolveShaderColor(colorK), [colorK, isDark]); // eslint-disable-line react-hooks/exhaustive-deps
-    const texturesRef = useRef({ u_image: image });
-    texturesRef.current.u_image = image;
-    const handleTextureLoad = useCallback((name, aspectRatio) => {
-        if (name === "u_image")
-            setImageAspectRatio(aspectRatio);
-    }, []);
-    const uniformsRef = useRef({});
-    uniformsRef.current.u_colorBack = resolvedBack;
-    uniformsRef.current.u_colorC = resolvedC;
-    uniformsRef.current.u_colorM = resolvedM;
-    uniformsRef.current.u_colorY = resolvedY;
-    uniformsRef.current.u_colorK = resolvedK;
-    uniformsRef.current.u_imageAspectRatio = imageAspectRatio;
-    uniformsRef.current.u_size = size;
-    uniformsRef.current.u_contrast = contrast;
-    uniformsRef.current.u_softness = softness;
-    uniformsRef.current.u_gridNoise = gridNoise;
-    uniformsRef.current.u_grainSize = grainSize;
-    uniformsRef.current.u_grainMixer = grainMixer;
-    uniformsRef.current.u_grainOverlay = grainOverlay;
-    uniformsRef.current.u_floodC = floodC;
-    uniformsRef.current.u_floodM = floodM;
-    uniformsRef.current.u_floodY = floodY;
-    uniformsRef.current.u_floodK = floodK;
-    uniformsRef.current.u_gainC = gainC;
-    uniformsRef.current.u_gainM = gainM;
-    uniformsRef.current.u_gainY = gainY;
-    uniformsRef.current.u_gainK = gainK;
-    const imageSrc = typeof image === "string" ? image : image.src;
-    return (jsx("div", { className: cn("absolute inset-0 overflow-hidden pointer-events-none select-none", className), style: style, "aria-hidden": "true", ...props, children: isClient && webglSupported ? (jsx(ShaderCanvas, { fragmentShader: halftoneCmykFragmentShader, uniformsRef: uniformsRef, texturesRef: texturesRef, onTextureLoad: handleTextureLoad })) : (jsx("img", { src: imageSrc, alt: "", className: "absolute inset-0 w-full h-full object-cover" })) }));
-};
-
-export { HalftoneCmyk };

package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.shaders.d.ts

@@ -1,22 +0,0 @@
-/**
- * HalftoneCmyk fragment shader — adapted from paper-design/shaders'
- * `halftone-cmyk.ts` (https://github.com/paper-design/shaders, Apache
- * License 2.0). An image filter: separates a source image into 4
- * classic-print-screen-angled CMYK halftone dot layers.
- *
- * Highest-complexity/cost effect in this port (up to ~36 texture reads per
- * pixel across 4 channels × a 3×3 cell neighborhood) — build/verify last,
- * most scrutiny, and keep the default `size` conservative.
- *
- * Trimmed for v1: paper-design's `ink`/`sharp` modes are omitted — this
- * ships the `dots` mode only (separate, discrete halftone dots; the
- * classic print look), which also lets this port drop the entire
- * single-pixel-sample "sharp" code path and its `RGBAtoCMYK`/contrast
- * machinery, cutting real per-pixel cost, not just API surface.
- *
- * Simplified from the original: image UV computed via the shared
- * `getImageCoverUV` cover-fit helper (see shared/imageUV.glsl.ts) instead of
- * paper-design's ShaderSizingParams fit engine; pure-hash GLSL instead of
- * pre-generated noise-texture sampling.
- */
-export declare const halftoneCmykFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform vec2 iResolution;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorC;\nuniform vec4 u_colorM;\nuniform vec4 u_colorY;\nuniform vec4 u_colorK;\nuniform float u_size;\nuniform float u_contrast;\nuniform float u_grainSize;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\nuniform float u_gridNoise;\nuniform float u_softness;\nuniform float u_floodC;\nuniform float u_floodM;\nuniform float u_floodY;\nuniform float u_floodK;\nuniform float u_gainC;\nuniform float u_gainM;\nuniform float u_gainY;\nuniform float u_gainK;\n\nout vec4 fragColor;\n\nconst float shiftC = -.5;\nconst float shiftM = -.25;\nconst float shiftY = .2;\nconst float shiftK = 0.;\n\nconst float cosC = 0.9659258;\nconst float sinC = 0.2588190;\nconst float cosM = 0.2588190;\nconst float sinM = 0.9659258;\nconst float cosY = 1.0;\nconst float sinY = 0.0;\nconst float cosK = 0.7071068;\nconst float sinK = 0.7071068;\n\n\nvec2 randomGB(vec2 st) {\n  return vec2(\n    fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123),\n    fract(sin(dot(st, vec2(93.9898, 67.345))) * 24634.6345123)\n  );\n}\n\n\nvec2 getImageCoverUV(vec2 fragUV, vec2 resolution, float imageAspectRatio) {\n  float containerAspect = resolution.x / resolution.y;\n  // Container wider (relative to its height) than the image: sample a\n  // narrower vertical slice of the image (crop top/bottom) so it fills the\n  // container width with no letterboxing. Container narrower/taller than\n  // the image: sample a narrower horizontal slice (crop left/right) instead.\n  vec2 scale = containerAspect > imageAspectRatio\n    ? vec2(1.0, imageAspectRatio / containerAspect)\n    : vec2(containerAspect / imageAspectRatio, 1.0);\n  return (fragUV - 0.5) * scale + 0.5;\n}\n\n\nvec3 hash23(vec2 p) {\n  vec3 p3 = fract(vec3(p.xyx) * vec3(0.3183099, 0.3678794, 0.3141592)) + 0.1;\n  p3 += dot(p3, p3.yzx + 19.19);\n  return fract(vec3(p3.x * p3.y, p3.y * p3.z, p3.z * p3.x));\n}\n\nfloat sst(float edge0, float edge1, float x) {\n  return smoothstep(edge0, edge1, x);\n}\n\nvec3 valueNoise3(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  vec3 a = hash23(i);\n  vec3 b = hash23(i + vec2(1.0, 0.0));\n  vec3 c = hash23(i + vec2(0.0, 1.0));\n  vec3 d = hash23(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  vec3 x1 = mix(a, b, u.x);\n  vec3 x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat getUvFrame(vec2 uv, vec2 pad) {\n  float left = smoothstep(-pad.x, 0., uv.x);\n  float right = smoothstep(1. + pad.x, 1., uv.x);\n  float bottom = smoothstep(-pad.y, 0., uv.y);\n  float top = smoothstep(1. + pad.y, 1., uv.y);\n  return left * right * bottom * top;\n}\n\nfloat getCyan(vec4 rgba) {\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\n  float maxRGB = max(max(c.r, c.g), c.b);\n  return (maxRGB > 1e-5 ? (maxRGB - c.r) / maxRGB : 0.) * rgba.a;\n}\nfloat getMagenta(vec4 rgba) {\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\n  float maxRGB = max(max(c.r, c.g), c.b);\n  return (maxRGB > 1e-5 ? (maxRGB - c.g) / maxRGB : 0.) * rgba.a;\n}\nfloat getYellow(vec4 rgba) {\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\n  float maxRGB = max(max(c.r, c.g), c.b);\n  return (maxRGB > 1e-5 ? (maxRGB - c.b) / maxRGB : 0.) * rgba.a;\n}\nfloat getBlack(vec4 rgba) {\n  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);\n  return (1. - max(max(c.r, c.g), c.b)) * rgba.a;\n}\n\nvec2 cellCenterPos(vec2 uv, vec2 cellOffset, float channelIdx) {\n  vec2 cellCenter = floor(uv) + .5 + cellOffset;\n  return cellCenter + (randomGB(cellCenter + channelIdx * 50.) - .5) * u_gridNoise;\n}\n\nvec2 gridToImageUV(vec2 cellCenter, float cosA, float sinA, float shift, vec2 pad) {\n  vec2 uvGridToImage = mat2(cosA, -sinA, sinA, cosA) * (cellCenter - shift);\n  return uvGridToImage * pad + 0.5;\n}\n\nvoid colorMask(vec2 pos, vec2 cellCenter, float rad, float transparency, float grain, float channelAddon, float channelgain, float generalComp, inout float outMask) {\n  float dist = length(pos - cellCenter);\n\n  float radius = rad;\n  radius *= (1. + generalComp);\n  radius += (.15 + channelgain * radius);\n  radius = max(0., radius);\n  radius = mix(0., radius, transparency);\n  radius += channelAddon;\n  radius *= (1. - grain);\n\n  float mask = 1. - sst(0., radius, dist);\n  mask = sst(.5 - .5 * u_softness, .51 + .49 * u_softness, mask);\n  mask *= mix(1., mix(.5, 1., 1.5 * radius), u_softness);\n  outMask += mask;\n}\n\nvec3 applyInk(vec3 paper, vec3 inkColor, float cov) {\n  vec3 inkEffect = mix(vec3(1.0), inkColor, clamp(cov, 0.0, 1.0));\n  return paper * inkEffect;\n}\n\nvoid main() {\n  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;\n  vec2 uv = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);\n\n  float cellsPerSide = mix(400.0, 7.0, pow(u_size, 0.7));\n  float cellSizeY = 1.0 / cellsPerSide;\n  vec2 pad = cellSizeY * vec2(1.0 / u_imageAspectRatio, 1.0);\n  vec2 uvGrid = (uv - .5) / pad;\n  float insideImageBox = getUvFrame(uv, pad);\n\n  float generalComp = .1 * u_softness + .1 * u_gridNoise + .15;\n\n  vec2 uvC = mat2(cosC, sinC, -sinC, cosC) * uvGrid + shiftC;\n  vec2 uvM = mat2(cosM, sinM, -sinM, cosM) * uvGrid + shiftM;\n  vec2 uvY = mat2(cosY, sinY, -sinY, cosY) * uvGrid + shiftY;\n  vec2 uvK = mat2(cosK, sinK, -sinK, cosK) * uvGrid + shiftK;\n\n  vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);\n  vec2 grainUV = (fragUV - .5) * grainSize + .5;\n  vec3 noiseValues = valueNoise3(grainUV);\n  float grain = sst(.55, 1., noiseValues.r);\n  grain *= u_grainMixer;\n\n  vec4 outMask = vec4(0.);\n\n  for (int dy = -1; dy <= 1; dy++) {\n    for (int dx = -1; dx <= 1; dx++) {\n      vec2 cellOffset = vec2(float(dx), float(dy));\n\n      vec2 cellCenterC = cellCenterPos(uvC, cellOffset, 0.);\n      vec4 texC = texture(u_image, gridToImageUV(cellCenterC, cosC, sinC, shiftC, pad));\n      colorMask(uvC, cellCenterC, getCyan(texC), insideImageBox * texC.a, grain, u_floodC, u_gainC, generalComp, outMask[0]);\n\n      vec2 cellCenterM = cellCenterPos(uvM, cellOffset, 1.);\n      vec4 texM = texture(u_image, gridToImageUV(cellCenterM, cosM, sinM, shiftM, pad));\n      colorMask(uvM, cellCenterM, getMagenta(texM), insideImageBox * texM.a, grain, u_floodM, u_gainM, generalComp, outMask[1]);\n\n      vec2 cellCenterY = cellCenterPos(uvY, cellOffset, 2.);\n      vec4 texY = texture(u_image, gridToImageUV(cellCenterY, cosY, sinY, shiftY, pad));\n      colorMask(uvY, cellCenterY, getYellow(texY), insideImageBox * texY.a, grain, u_floodY, u_gainY, generalComp, outMask[2]);\n\n      vec2 cellCenterK = cellCenterPos(uvK, cellOffset, 3.);\n      vec4 texK = texture(u_image, gridToImageUV(cellCenterK, cosK, sinK, shiftK, pad));\n      colorMask(uvK, cellCenterK, getBlack(texK), insideImageBox * texK.a, grain, u_floodK, u_gainK, generalComp, outMask[3]);\n    }\n  }\n\n  float C = outMask[0] * u_colorC.a;\n  float M = outMask[1] * u_colorM.a;\n  float Y = outMask[2] * u_colorY.a;\n  float K = outMask[3] * u_colorK.a;\n\n  vec3 ink = vec3(1.);\n  ink = applyInk(ink, u_colorK.rgb, K);\n  ink = applyInk(ink, u_colorC.rgb, C);\n  ink = applyInk(ink, u_colorM.rgb, M);\n  ink = applyInk(ink, u_colorY.rgb, Y);\n\n  float shape = clamp(max(max(C, M), max(Y, K)), 0., 1.);\n\n  vec3 color = u_colorBack.rgb * u_colorBack.a;\n  float opacity = u_colorBack.a;\n  color = mix(color, ink, shape);\n  opacity += shape;\n  opacity = clamp(opacity, 0., 1.);\n\n  float grainOverlay = mix(noiseValues.g, noiseValues.b, .5);\n  grainOverlay = pow(grainOverlay, 1.3);\n  float grainOverlayV = grainOverlay * 2. - 1.;\n  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));\n  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);\n  grainOverlayStrength = pow(grainOverlayStrength, .8);\n  color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);\n\n  opacity += .5 * grainOverlayStrength;\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.shaders.js

@@ -1,239 +0,0 @@
-import 'react/jsx-runtime';
-import 'react';
-import { glslHashVec2 } from '../shared/shaderNoise.glsl.js';
-import { glslImageCoverUV } from '../shared/imageUV.glsl.js';
-
-/**
- * HalftoneCmyk fragment shader — adapted from paper-design/shaders'
- * `halftone-cmyk.ts` (https://github.com/paper-design/shaders, Apache
- * License 2.0). An image filter: separates a source image into 4
- * classic-print-screen-angled CMYK halftone dot layers.
- *
- * Highest-complexity/cost effect in this port (up to ~36 texture reads per
- * pixel across 4 channels × a 3×3 cell neighborhood) — build/verify last,
- * most scrutiny, and keep the default `size` conservative.
- *
- * Trimmed for v1: paper-design's `ink`/`sharp` modes are omitted — this
- * ships the `dots` mode only (separate, discrete halftone dots; the
- * classic print look), which also lets this port drop the entire
- * single-pixel-sample "sharp" code path and its `RGBAtoCMYK`/contrast
- * machinery, cutting real per-pixel cost, not just API surface.
- *
- * Simplified from the original: image UV computed via the shared
- * `getImageCoverUV` cover-fit helper (see shared/imageUV.glsl.ts) instead of
- * paper-design's ShaderSizingParams fit engine; pure-hash GLSL instead of
- * pre-generated noise-texture sampling.
- */
-const halftoneCmykFragmentShader = `#version 300 es
-precision mediump float;
-
-uniform vec2 iResolution;
-
-uniform sampler2D u_image;
-uniform float u_imageAspectRatio;
-
-uniform vec4 u_colorBack;
-uniform vec4 u_colorC;
-uniform vec4 u_colorM;
-uniform vec4 u_colorY;
-uniform vec4 u_colorK;
-uniform float u_size;
-uniform float u_contrast;
-uniform float u_grainSize;
-uniform float u_grainMixer;
-uniform float u_grainOverlay;
-uniform float u_gridNoise;
-uniform float u_softness;
-uniform float u_floodC;
-uniform float u_floodM;
-uniform float u_floodY;
-uniform float u_floodK;
-uniform float u_gainC;
-uniform float u_gainM;
-uniform float u_gainY;
-uniform float u_gainK;
-
-out vec4 fragColor;
-
-const float shiftC = -.5;
-const float shiftM = -.25;
-const float shiftY = .2;
-const float shiftK = 0.;
-
-const float cosC = 0.9659258;
-const float sinC = 0.2588190;
-const float cosM = 0.2588190;
-const float sinM = 0.9659258;
-const float cosY = 1.0;
-const float sinY = 0.0;
-const float cosK = 0.7071068;
-const float sinK = 0.7071068;
-
-${glslHashVec2}
-${glslImageCoverUV}
-
-vec3 hash23(vec2 p) {
-  vec3 p3 = fract(vec3(p.xyx) * vec3(0.3183099, 0.3678794, 0.3141592)) + 0.1;
-  p3 += dot(p3, p3.yzx + 19.19);
-  return fract(vec3(p3.x * p3.y, p3.y * p3.z, p3.z * p3.x));
-}
-
-float sst(float edge0, float edge1, float x) {
-  return smoothstep(edge0, edge1, x);
-}
-
-vec3 valueNoise3(vec2 st) {
-  vec2 i = floor(st);
-  vec2 f = fract(st);
-  vec3 a = hash23(i);
-  vec3 b = hash23(i + vec2(1.0, 0.0));
-  vec3 c = hash23(i + vec2(0.0, 1.0));
-  vec3 d = hash23(i + vec2(1.0, 1.0));
-  vec2 u = f * f * (3.0 - 2.0 * f);
-  vec3 x1 = mix(a, b, u.x);
-  vec3 x2 = mix(c, d, u.x);
-  return mix(x1, x2, u.y);
-}
-
-float getUvFrame(vec2 uv, vec2 pad) {
-  float left = smoothstep(-pad.x, 0., uv.x);
-  float right = smoothstep(1. + pad.x, 1., uv.x);
-  float bottom = smoothstep(-pad.y, 0., uv.y);
-  float top = smoothstep(1. + pad.y, 1., uv.y);
-  return left * right * bottom * top;
-}
-
-float getCyan(vec4 rgba) {
-  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
-  float maxRGB = max(max(c.r, c.g), c.b);
-  return (maxRGB > 1e-5 ? (maxRGB - c.r) / maxRGB : 0.) * rgba.a;
-}
-float getMagenta(vec4 rgba) {
-  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
-  float maxRGB = max(max(c.r, c.g), c.b);
-  return (maxRGB > 1e-5 ? (maxRGB - c.g) / maxRGB : 0.) * rgba.a;
-}
-float getYellow(vec4 rgba) {
-  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
-  float maxRGB = max(max(c.r, c.g), c.b);
-  return (maxRGB > 1e-5 ? (maxRGB - c.b) / maxRGB : 0.) * rgba.a;
-}
-float getBlack(vec4 rgba) {
-  vec3 c = clamp((rgba.rgb - 0.5) * u_contrast + 0.5, 0.0, 1.0);
-  return (1. - max(max(c.r, c.g), c.b)) * rgba.a;
-}
-
-vec2 cellCenterPos(vec2 uv, vec2 cellOffset, float channelIdx) {
-  vec2 cellCenter = floor(uv) + .5 + cellOffset;
-  return cellCenter + (randomGB(cellCenter + channelIdx * 50.) - .5) * u_gridNoise;
-}
-
-vec2 gridToImageUV(vec2 cellCenter, float cosA, float sinA, float shift, vec2 pad) {
-  vec2 uvGridToImage = mat2(cosA, -sinA, sinA, cosA) * (cellCenter - shift);
-  return uvGridToImage * pad + 0.5;
-}
-
-void colorMask(vec2 pos, vec2 cellCenter, float rad, float transparency, float grain, float channelAddon, float channelgain, float generalComp, inout float outMask) {
-  float dist = length(pos - cellCenter);
-
-  float radius = rad;
-  radius *= (1. + generalComp);
-  radius += (.15 + channelgain * radius);
-  radius = max(0., radius);
-  radius = mix(0., radius, transparency);
-  radius += channelAddon;
-  radius *= (1. - grain);
-
-  float mask = 1. - sst(0., radius, dist);
-  mask = sst(.5 - .5 * u_softness, .51 + .49 * u_softness, mask);
-  mask *= mix(1., mix(.5, 1., 1.5 * radius), u_softness);
-  outMask += mask;
-}
-
-vec3 applyInk(vec3 paper, vec3 inkColor, float cov) {
-  vec3 inkEffect = mix(vec3(1.0), inkColor, clamp(cov, 0.0, 1.0));
-  return paper * inkEffect;
-}
-
-void main() {
-  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;
-  vec2 uv = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);
-
-  float cellsPerSide = mix(400.0, 7.0, pow(u_size, 0.7));
-  float cellSizeY = 1.0 / cellsPerSide;
-  vec2 pad = cellSizeY * vec2(1.0 / u_imageAspectRatio, 1.0);
-  vec2 uvGrid = (uv - .5) / pad;
-  float insideImageBox = getUvFrame(uv, pad);
-
-  float generalComp = .1 * u_softness + .1 * u_gridNoise + .15;
-
-  vec2 uvC = mat2(cosC, sinC, -sinC, cosC) * uvGrid + shiftC;
-  vec2 uvM = mat2(cosM, sinM, -sinM, cosM) * uvGrid + shiftM;
-  vec2 uvY = mat2(cosY, sinY, -sinY, cosY) * uvGrid + shiftY;
-  vec2 uvK = mat2(cosK, sinK, -sinK, cosK) * uvGrid + shiftK;
-
-  vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);
-  vec2 grainUV = (fragUV - .5) * grainSize + .5;
-  vec3 noiseValues = valueNoise3(grainUV);
-  float grain = sst(.55, 1., noiseValues.r);
-  grain *= u_grainMixer;
-
-  vec4 outMask = vec4(0.);
-
-  for (int dy = -1; dy <= 1; dy++) {
-    for (int dx = -1; dx <= 1; dx++) {
-      vec2 cellOffset = vec2(float(dx), float(dy));
-
-      vec2 cellCenterC = cellCenterPos(uvC, cellOffset, 0.);
-      vec4 texC = texture(u_image, gridToImageUV(cellCenterC, cosC, sinC, shiftC, pad));
-      colorMask(uvC, cellCenterC, getCyan(texC), insideImageBox * texC.a, grain, u_floodC, u_gainC, generalComp, outMask[0]);
-
-      vec2 cellCenterM = cellCenterPos(uvM, cellOffset, 1.);
-      vec4 texM = texture(u_image, gridToImageUV(cellCenterM, cosM, sinM, shiftM, pad));
-      colorMask(uvM, cellCenterM, getMagenta(texM), insideImageBox * texM.a, grain, u_floodM, u_gainM, generalComp, outMask[1]);
-
-      vec2 cellCenterY = cellCenterPos(uvY, cellOffset, 2.);
-      vec4 texY = texture(u_image, gridToImageUV(cellCenterY, cosY, sinY, shiftY, pad));
-      colorMask(uvY, cellCenterY, getYellow(texY), insideImageBox * texY.a, grain, u_floodY, u_gainY, generalComp, outMask[2]);
-
-      vec2 cellCenterK = cellCenterPos(uvK, cellOffset, 3.);
-      vec4 texK = texture(u_image, gridToImageUV(cellCenterK, cosK, sinK, shiftK, pad));
-      colorMask(uvK, cellCenterK, getBlack(texK), insideImageBox * texK.a, grain, u_floodK, u_gainK, generalComp, outMask[3]);
-    }
-  }
-
-  float C = outMask[0] * u_colorC.a;
-  float M = outMask[1] * u_colorM.a;
-  float Y = outMask[2] * u_colorY.a;
-  float K = outMask[3] * u_colorK.a;
-
-  vec3 ink = vec3(1.);
-  ink = applyInk(ink, u_colorK.rgb, K);
-  ink = applyInk(ink, u_colorC.rgb, C);
-  ink = applyInk(ink, u_colorM.rgb, M);
-  ink = applyInk(ink, u_colorY.rgb, Y);
-
-  float shape = clamp(max(max(C, M), max(Y, K)), 0., 1.);
-
-  vec3 color = u_colorBack.rgb * u_colorBack.a;
-  float opacity = u_colorBack.a;
-  color = mix(color, ink, shape);
-  opacity += shape;
-  opacity = clamp(opacity, 0., 1.);
-
-  float grainOverlay = mix(noiseValues.g, noiseValues.b, .5);
-  grainOverlay = pow(grainOverlay, 1.3);
-  float grainOverlayV = grainOverlay * 2. - 1.;
-  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
-  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
-  grainOverlayStrength = pow(grainOverlayStrength, .8);
-  color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);
-
-  opacity += .5 * grainOverlayStrength;
-  opacity = clamp(opacity, 0., 1.);
-
-  fragColor = vec4(color, opacity);
-}
-`;
-
-export { halftoneCmykFragmentShader };

package/dist/components/effects/HalftoneCmyk/HalftoneCmyk.types.d.ts

@@ -1,52 +0,0 @@
-import type React from "react";
-import type { ShaderTextureSource } from "../shared";
-export interface HalftoneCmykProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Source image (URL or an existing HTMLImageElement). Required. */
-    image: ShaderTextureSource;
-    /** Background CSS color (paper color). Default: 'var(--color-background)'. */
-    colorBack?: string;
-    /** Cyan ink color. Default: '#00b7eb' (print cyan). */
-    colorC?: string;
-    /** Magenta ink color. Default: '#e4007c' (print magenta). */
-    colorM?: string;
-    /** Yellow ink color. Default: '#ffe800' (print yellow). */
-    colorY?: string;
-    /** Black ink color. Default: 'var(--color-text-primary)'. */
-    colorK?: string;
-    /**
-     * Dot grid density, 0-1 (lower = finer/denser grid = significantly more
-     * GPU cost, up to ~36 texture reads/pixel across 4 channels). Default:
-     * 0.6 — a deliberately conservative default; avoid using this effect as
-     * a full-page background at low `size` values.
-     */
-    size?: number;
-    /** Per-channel contrast, 0-1+. Default: 1. */
-    contrast?: number;
-    /** Dot edge softness, 0-1. Default: 0.3. */
-    softness?: number;
-    /** Per-cell dot-center jitter, 0-1. Default: 0.1. */
-    gridNoise?: number;
-    /** Grain texture scale, 0-1. Default: 0.5. */
-    grainSize?: number;
-    /** Grain influence on dot radii, 0-1. Default: 0. */
-    grainMixer?: number;
-    /** Post-composite grain overlay strength, 0-1. Default: 0. */
-    grainOverlay?: number;
-    /** Minimum-coverage flood for the cyan channel, 0-1. Default: 0. */
-    floodC?: number;
-    /** Minimum-coverage flood for the magenta channel, 0-1. Default: 0. */
-    floodM?: number;
-    /** Minimum-coverage flood for the yellow channel, 0-1. Default: 0. */
-    floodY?: number;
-    /** Minimum-coverage flood for the black channel, 0-1. Default: 0. */
-    floodK?: number;
-    /** Dot-size gain for the cyan channel, 0-1. Default: 0. */
-    gainC?: number;
-    /** Dot-size gain for the magenta channel, 0-1. Default: 0. */
-    gainM?: number;
-    /** Dot-size gain for the yellow channel, 0-1. Default: 0. */
-    gainY?: number;
-    /** Dot-size gain for the black channel, 0-1. Default: 0. */
-    gainK?: number;
-    className?: string;
-}

package/dist/components/effects/HalftoneCmyk/index.d.ts

@@ -1,2 +0,0 @@
-export { HalftoneCmyk } from "./HalftoneCmyk";
-export type { HalftoneCmykProps } from "./HalftoneCmyk.types";

package/dist/components/effects/HalftoneDots/HalftoneDots.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-import type { HalftoneDotsProps } from "./HalftoneDots.types";
-/**
- * Halftone-dot image filter — renders a source image as a luminance-driven
- * dot grid (classic/gooey/holes/soft ball styles, square or hex grid).
- * WebGL2-powered; falls back to the plain source image (via
- * `object-fit: cover`) when WebGL2 is unavailable.
- */
-export declare const HalftoneDots: React.FC<HalftoneDotsProps>;

package/dist/components/effects/HalftoneDots/HalftoneDots.js

@@ -1,68 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { useState, useMemo, useRef, useCallback } from 'react';
-import { useIsClient } from '../../../hooks/useIsClient.js';
-import 'motion/react';
-import { useDarkMode } from '../../../hooks/useDarkMode.js';
-import { cn } from '../../../utils/cn.js';
-import { ShaderCanvas } from '../shared/ShaderCanvas/ShaderCanvas.js';
-import { resolveShaderColor } from '../shared/resolveShaderColor.js';
-import { halftoneDotsFragmentShader } from './HalftoneDots.shaders.js';
-import { HALFTONE_DOTS_TYPES, HALFTONE_DOTS_GRIDS } from './HalftoneDots.types.js';
-
-const DEFAULT_COLOR_FRONT = "var(--color-text-primary)";
-const DEFAULT_COLOR_BACK = "var(--color-background)";
-function useWebgl2Supported() {
-    return useMemo(() => {
-        if (typeof document === "undefined")
-            return false;
-        try {
-            return !!document.createElement("canvas").getContext("webgl2");
-        }
-        catch (_a) {
-            return false;
-        }
-    }, []);
-}
-/**
- * Halftone-dot image filter — renders a source image as a luminance-driven
- * dot grid (classic/gooey/holes/soft ball styles, square or hex grid).
- * WebGL2-powered; falls back to the plain source image (via
- * `object-fit: cover`) when WebGL2 is unavailable.
- */
-const HalftoneDots = ({ image, colorFront = DEFAULT_COLOR_FRONT, colorBack = DEFAULT_COLOR_BACK, type = "classic", grid = "square", size = 0.6, radius = 0.8, contrast = 0.5, originalColors = false, inverted = false, grainMixer = 0, grainOverlay = 0, grainSize = 0.5, className, style, ...props }) => {
-    const isClient = useIsClient();
-    const isDark = useDarkMode();
-    const webglSupported = useWebgl2Supported();
-    const [imageAspectRatio, setImageAspectRatio] = useState(16 / 9);
-    const resolvedFront = useMemo(() => resolveShaderColor(colorFront), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [colorFront, isDark]);
-    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [colorBack, isDark]);
-    const texturesRef = useRef({ u_image: image });
-    texturesRef.current.u_image = image;
-    const handleTextureLoad = useCallback((name, aspectRatio) => {
-        if (name === "u_image")
-            setImageAspectRatio(aspectRatio);
-    }, []);
-    const uniformsRef = useRef({});
-    uniformsRef.current.u_colorFront = resolvedFront;
-    uniformsRef.current.u_colorBack = resolvedBack;
-    uniformsRef.current.u_imageAspectRatio = imageAspectRatio;
-    uniformsRef.current.u_type = HALFTONE_DOTS_TYPES[type];
-    uniformsRef.current.u_grid = HALFTONE_DOTS_GRIDS[grid];
-    uniformsRef.current.u_size = size;
-    uniformsRef.current.u_radius = radius;
-    uniformsRef.current.u_contrast = contrast;
-    uniformsRef.current.u_originalColors = originalColors ? 1 : 0;
-    uniformsRef.current.u_inverted = inverted ? 1 : 0;
-    uniformsRef.current.u_grainMixer = grainMixer;
-    uniformsRef.current.u_grainOverlay = grainOverlay;
-    uniformsRef.current.u_grainSize = grainSize;
-    const imageSrc = typeof image === "string" ? image : image.src;
-    return (jsx("div", { className: cn("absolute inset-0 overflow-hidden pointer-events-none select-none", className), style: style, "aria-hidden": "true", ...props, children: isClient && webglSupported ? (jsx(ShaderCanvas, { fragmentShader: halftoneDotsFragmentShader, uniformsRef: uniformsRef, texturesRef: texturesRef, onTextureLoad: handleTextureLoad })) : (jsx("img", { src: imageSrc, alt: "", className: "absolute inset-0 w-full h-full object-cover" })) }));
-};
-
-export { HalftoneDots };

package/dist/components/effects/HalftoneDots/HalftoneDots.shaders.d.ts

@@ -1,13 +0,0 @@
-/**
- * HalftoneDots fragment shader — adapted from paper-design/shaders'
- * `halftone-dots.ts` (https://github.com/paper-design/shaders, Apache
- * License 2.0). An image filter: renders a source image as a luminance-
- * driven halftone dot grid (classic/gooey/holes/soft ball styles, square or
- * hex grid).
- *
- * Simplified from the original: image UV computed via the shared
- * `getImageCoverUV` cover-fit helper (see shared/imageUV.glsl.ts) instead of
- * paper-design's ShaderSizingParams fit engine; pure-hash GLSL instead of
- * pre-generated noise-texture sampling.
- */
-export declare const halftoneDotsFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform vec2 iResolution;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform float u_radius;\nuniform float u_contrast;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\nuniform float u_grainSize;\nuniform float u_grid;\nuniform float u_originalColors;\nuniform float u_inverted;\nuniform float u_type;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nfloat randomR(vec2 st) {\n  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\n\nvec2 getImageCoverUV(vec2 fragUV, vec2 resolution, float imageAspectRatio) {\n  float containerAspect = resolution.x / resolution.y;\n  // Container wider (relative to its height) than the image: sample a\n  // narrower vertical slice of the image (crop top/bottom) so it fills the\n  // container width with no letterboxing. Container narrower/taller than\n  // the image: sample a narrower horizontal slice (crop left/right) instead.\n  vec2 scale = containerAspect > imageAspectRatio\n    ? vec2(1.0, imageAspectRatio / containerAspect)\n    : vec2(containerAspect / imageAspectRatio, 1.0);\n  return (fragUV - 0.5) * scale + 0.5;\n}\n\n\nfloat hash21(vec2 n) {\n  return randomR(n);\n}\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = hash21(i);\n  float b = hash21(i + vec2(1.0, 0.0));\n  float c = hash21(i + vec2(0.0, 1.0));\n  float d = hash21(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat lst(float edge0, float edge1, float x) {\n  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}\n\nfloat sst(float edge0, float edge1, float x) {\n  return smoothstep(edge0, edge1, x);\n}\n\nfloat getCircle(vec2 uv, float r, float baseR) {\n  r = mix(.25 * baseR, 0., r);\n  float d = length(uv - .5);\n  float aa = fwidth(d);\n  return 1. - smoothstep(r - aa, r + aa, d);\n}\n\nfloat getCell(vec2 uv) {\n  float insideX = step(0.0, uv.x) * (1.0 - step(1.0, uv.x));\n  float insideY = step(0.0, uv.y) * (1.0 - step(1.0, uv.y));\n  return insideX * insideY;\n}\n\nfloat getCircleWithHole(vec2 uv, float r, float baseR) {\n  float cell = getCell(uv);\n  r = mix(.75 * baseR, 0., r);\n  float rMod = mod(r, .5);\n  float d = length(uv - .5);\n  float aa = fwidth(d);\n  float circle = 1. - smoothstep(rMod - aa, rMod + aa, d);\n  if (r < .5) {\n    return circle;\n  } else {\n    return cell - circle;\n  }\n}\n\nfloat getGooeyBall(vec2 uv, float r, float baseR) {\n  float d = length(uv - .5);\n  float sizeRadius = .3;\n  if (u_grid == 1.) {\n    sizeRadius = .42;\n  }\n  sizeRadius = mix(sizeRadius * baseR, 0., r);\n  d = 1. - sst(0., sizeRadius, d);\n  d = pow(d, 2. + baseR);\n  return d;\n}\n\nfloat getSoftBall(vec2 uv, float r, float baseR) {\n  float d = length(uv - .5);\n  float sizeRadius = clamp(baseR, 0., 1.);\n  sizeRadius = mix(.5 * sizeRadius, 0., r);\n  d = 1. - lst(0., sizeRadius, d);\n  float powRadius = 1. - lst(0., 2., baseR);\n  d = pow(d, 4. + 3. * powRadius);\n  return d;\n}\n\nfloat getUvFrame(vec2 uv, vec2 pad) {\n  float aa = 0.0001;\n  float left = smoothstep(-pad.x, -pad.x + aa, uv.x);\n  float right = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);\n  float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);\n  float top = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);\n  return left * right * bottom * top;\n}\n\nfloat sigmoid(float x, float k) {\n  return 1.0 / (1.0 + exp(-k * (x - 0.5)));\n}\n\nfloat getLumAtPx(vec2 uv, float contrast) {\n  vec4 tex = texture(u_image, uv);\n  vec3 c = vec3(sigmoid(tex.r, contrast), sigmoid(tex.g, contrast), sigmoid(tex.b, contrast));\n  float lum = dot(vec3(0.2126, 0.7152, 0.0722), c);\n  lum = mix(1., lum, tex.a);\n  lum = mix(lum, 1. - lum, u_inverted);\n  return lum;\n}\n\nfloat getLumBall(vec2 p, vec2 pad, vec2 inCellOffset, float contrast, float baseR, float stepSize, out vec4 ballColor) {\n  p += inCellOffset;\n  vec2 uv_i = floor(p);\n  vec2 uv_f = fract(p);\n  vec2 samplingUV = (uv_i + .5 - inCellOffset) * pad + vec2(.5);\n  float outOfFrame = getUvFrame(samplingUV, pad * stepSize);\n\n  float lum = getLumAtPx(samplingUV, contrast);\n  ballColor = texture(u_image, samplingUV);\n  ballColor.rgb *= ballColor.a;\n  ballColor *= outOfFrame;\n\n  float ball = 0.;\n  if (u_type == 0.) {\n    ball = getCircle(uv_f, lum, baseR);\n  } else if (u_type == 1.) {\n    ball = getGooeyBall(uv_f, lum, baseR);\n  } else if (u_type == 2.) {\n    ball = getCircleWithHole(uv_f, lum, baseR);\n  } else if (u_type == 3.) {\n    ball = getSoftBall(uv_f, lum, baseR);\n  }\n\n  return ball * outOfFrame;\n}\n\nvoid main() {\n  float stepMultiplier = 1.;\n  if (u_type == 0.) {\n    stepMultiplier = 2.;\n  } else if (u_type == 1. || u_type == 3.) {\n    stepMultiplier = 6.;\n  }\n\n  float cellsPerSide = mix(300., 7., pow(u_size, .7));\n  cellsPerSide /= stepMultiplier;\n  float cellSizeY = 1. / cellsPerSide;\n  vec2 pad = cellSizeY * vec2(1. / u_imageAspectRatio, 1.);\n  if (u_type == 1. && u_grid == 1.) {\n    pad *= .7;\n  }\n\n  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;\n  vec2 uv = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);\n  uv -= vec2(.5);\n  uv /= pad;\n\n  float contrast = mix(0., 15., pow(u_contrast, 1.5));\n  float baseRadius = u_radius;\n  if (u_originalColors > 0.5) {\n    contrast = mix(.1, 4., pow(u_contrast, 2.));\n    baseRadius = 2. * pow(.5 * u_radius, .3);\n  }\n\n  float totalShape = 0.;\n  vec3 totalColor = vec3(0.);\n  float totalOpacity = 0.;\n\n  vec4 ballColor;\n  float shape;\n  float stepSize = 1. / stepMultiplier;\n  for (float x = -0.5; x < 0.5; x += stepSize) {\n    for (float y = -0.5; y < 0.5; y += stepSize) {\n      vec2 offset = vec2(x, y);\n\n      if (u_grid == 1.) {\n        float rowIndex = floor((y + .5) / stepSize);\n        float colIndex = floor((x + .5) / stepSize);\n        if (stepSize == 1.) {\n          rowIndex = floor(uv.y + y + 1.);\n          if (u_type == 1.) {\n            colIndex = floor(uv.x + x + 1.);\n          }\n        }\n        if (u_type == 1.) {\n          if (mod(rowIndex + colIndex, 2.) == 1.) {\n            continue;\n          }\n        } else {\n          if (mod(rowIndex, 2.) == 1.) {\n            offset.x += .5 * stepSize;\n          }\n        }\n      }\n\n      shape = getLumBall(uv, pad, offset, contrast, baseRadius, stepSize, ballColor);\n      totalColor += ballColor.rgb * shape;\n      totalShape += shape;\n      totalOpacity += shape;\n    }\n  }\n\n  const float eps = 1e-4;\n  totalColor /= max(totalShape, eps);\n  totalOpacity /= max(totalShape, eps);\n\n  float finalShape = 0.;\n  if (u_type == 0.) {\n    finalShape = min(1., totalShape);\n  } else if (u_type == 1.) {\n    float aa = fwidth(totalShape);\n    float th = .5;\n    finalShape = smoothstep(th - aa, th + aa, totalShape);\n  } else if (u_type == 2.) {\n    finalShape = min(1., totalShape);\n  } else if (u_type == 3.) {\n    finalShape = totalShape;\n  }\n\n  vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);\n  vec2 grainUV = fragUV - .5;\n  grainUV *= grainSize;\n  grainUV += .5;\n  float grain = valueNoise(grainUV);\n  grain = smoothstep(.55, .7 + .2 * u_grainMixer, grain);\n  grain *= u_grainMixer;\n  finalShape = mix(finalShape, 0., grain);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n\n  if (u_originalColors > 0.5) {\n    color = totalColor * finalShape;\n    opacity = totalOpacity * finalShape;\n    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n    color = color + bgColor * (1. - opacity);\n    opacity = opacity + u_colorBack.a * (1. - opacity);\n  } else {\n    vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n    float fgOpacity = u_colorFront.a;\n    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n    float bgOpacity = u_colorBack.a;\n\n    color = fgColor * finalShape;\n    opacity = fgOpacity * finalShape;\n    color += bgColor * (1. - opacity);\n    opacity += bgOpacity * (1. - opacity);\n  }\n\n  float grainOverlay = valueNoise(grainUV + vec2(3.));\n  grainOverlay = mix(grainOverlay, valueNoise(grainUV * 1.4 + vec2(-1.)), .5);\n  grainOverlay = pow(grainOverlay, 1.3);\n  float grainOverlayV = grainOverlay * 2. - 1.;\n  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));\n  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);\n  grainOverlayStrength = pow(grainOverlayStrength, .8);\n  color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);\n  opacity += .5 * grainOverlayStrength;\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n";