@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.30

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

@@ -0,0 +1,166 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslHashFloat, glslSimplexNoise2D } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * Dithering fragment shader — adapted from paper-design/shaders' `dithering.ts`
+ * (https://github.com/paper-design/shaders, Apache License 2.0).
+ *
+ * Simplified from the original: plain gl_FragCoord/iResolution UV instead of
+ * paper-design's ShaderSizingParams fit/scale/rotation engine; pure-hash GLSL
+ * (see shared/shaderNoise.glsl.ts) instead of pre-generated noise-texture
+ * sampling. The dithering pixel grid still comes directly from gl_FragCoord
+ * (unaffected by the simplification), matching the original's design.
+ */
+const ditheringFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform float u_pxSize;
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_shape;
+uniform float u_type;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslHashFloat}
+${glslSimplexNoise2D}
+
+float hash11(float p) {
+  return randomR(vec2(p, p * 0.7919));
+}
+
+float getSimplexNoise(vec2 uv, float t) {
+  float n = .5 * snoise(uv - vec2(0., .3 * t));
+  n += .5 * snoise(2. * uv + vec2(0., .32 * t));
+  return n;
+}
+
+const int bayer2x2[4] = int[4](0, 2, 3, 1);
+const int bayer4x4[16] = int[16](
+  0, 8, 2, 10,
+  12, 4, 14, 6,
+  3, 11, 1, 9,
+  15, 7, 13, 5
+);
+const int bayer8x8[64] = int[64](
+  0, 32, 8, 40, 2, 34, 10, 42,
+  48, 16, 56, 24, 50, 18, 58, 26,
+  12, 44, 4, 36, 14, 46, 6, 38,
+  60, 28, 52, 20, 62, 30, 54, 22,
+  3, 35, 11, 43, 1, 33, 9, 41,
+  51, 19, 59, 27, 49, 17, 57, 25,
+  15, 47, 7, 39, 13, 45, 5, 37,
+  63, 31, 55, 23, 61, 29, 53, 21
+);
+
+float getBayerValue(vec2 uv, int size) {
+  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));
+  int index = pos.y * size + pos.x;
+  if (size == 2) return float(bayer2x2[index]) / 4.0;
+  if (size == 4) return float(bayer4x4[index]) / 16.0;
+  if (size == 8) return float(bayer8x8[index]) / 64.0;
+  return 0.0;
+}
+
+void main() {
+  float t = .5 * iTime;
+
+  float pxSize = max(u_pxSize, 1.0);
+  vec2 pxSizeUV = gl_FragCoord.xy - .5 * iResolution.xy;
+  pxSizeUV /= pxSize;
+  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;
+  vec2 normalizedUV = canvasPixelizedUV / iResolution.xy;
+
+  vec2 ditheringNoiseUV = canvasPixelizedUV;
+  vec2 shapeUV = normalizedUV - 0.5;
+  shapeUV.x *= iResolution.x / max(iResolution.y, 1.0);
+
+  float shape = 0.;
+  if (u_shape < 1.5) {
+    // simplex
+    shapeUV *= .001;
+    shape = 0.5 + 0.5 * getSimplexNoise(shapeUV, t);
+    shape = smoothstep(0.3, 0.9, shape);
+  } else if (u_shape < 2.5) {
+    // warp
+    shapeUV *= .003;
+    for (float i = 1.0; i < 6.0; i++) {
+      shapeUV.x += 0.6 / i * cos(i * 2.5 * shapeUV.y + t);
+      shapeUV.y += 0.6 / i * cos(i * 1.5 * shapeUV.x + t);
+    }
+    shape = .15 / max(0.001, abs(sin(t - shapeUV.y - shapeUV.x)));
+    shape = smoothstep(0.02, 1., shape);
+  } else if (u_shape < 3.5) {
+    // dots
+    // Note: scaled up vs. the paper-design original (.05) — this port uses a
+    // small normalized UV range (see file doc comment), so the constant is
+    // recalibrated to produce a visible multi-cycle pattern at that scale.
+    shapeUV *= 20.;
+    float stripeIdx = floor(2. * shapeUV.x / TWO_PI);
+    float rand = hash11(stripeIdx * 10.);
+    rand = sign(rand - .5) * pow(.1 + abs(rand), .4);
+    shape = sin(shapeUV.x) * cos(shapeUV.y - 5. * rand * t);
+    shape = pow(abs(shape), 6.);
+  } else if (u_shape < 4.5) {
+    // sine wave
+    shapeUV *= 4.;
+    float wave = cos(.5 * shapeUV.x - 2. * t) * sin(1.5 * shapeUV.x + t) * (.75 + .25 * cos(3. * t));
+    shape = 1. - smoothstep(-1., 1., shapeUV.y + wave);
+  } else if (u_shape < 5.5) {
+    // ripple
+    float dist = length(shapeUV);
+    float waves = sin(pow(dist, 1.7) * 7. - 3. * t) * .5 + .5;
+    shape = waves;
+  } else if (u_shape < 6.5) {
+    // swirl
+    float l = length(shapeUV);
+    float angle = 6. * atan(shapeUV.y, shapeUV.x) + 4. * t;
+    float twist = 1.2;
+    float offset = 1. / pow(max(l, 1e-6), twist) + angle / TWO_PI;
+    float mid = smoothstep(0., 1., pow(l, twist));
+    shape = mix(0., fract(offset), mid);
+  } else {
+    // sphere
+    shapeUV *= 2.;
+    float d = 1. - pow(length(shapeUV), 2.);
+    vec3 pos = vec3(shapeUV, sqrt(max(0., d)));
+    vec3 lightPos = normalize(vec3(cos(1.5 * t), .8, sin(1.25 * t)));
+    shape = .5 + .5 * dot(lightPos, pos);
+    shape *= step(0., d);
+  }
+
+  int type = int(floor(u_type));
+  float dithering = 0.0;
+  if (type == 1) {
+    dithering = step(randomR(ditheringNoiseUV), shape);
+  } else if (type == 2) {
+    dithering = getBayerValue(pxSizeUV, 2);
+  } else if (type == 3) {
+    dithering = getBayerValue(pxSizeUV, 4);
+  } else {
+    dithering = getBayerValue(pxSizeUV, 8);
+  }
+
+  dithering -= .5;
+  float res = step(.5, shape + dithering);
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { ditheringFragmentShader };

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

@@ -0,0 +1,31 @@
+import type React from "react";
+export declare const DITHERING_SHAPES: {
+    readonly simplex: 1;
+    readonly warp: 2;
+    readonly dots: 3;
+    readonly wave: 4;
+    readonly ripple: 5;
+    readonly swirl: 6;
+    readonly sphere: 7;
+};
+export type DitheringShape = keyof typeof DITHERING_SHAPES;
+export declare const DITHERING_TYPES: {
+    readonly random: 1;
+    readonly "2x2": 2;
+    readonly "4x4": 3;
+    readonly "8x8": 4;
+};
+export type DitheringType = keyof typeof DITHERING_TYPES;
+export interface DitheringProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Foreground CSS color (hex, rgb(), named, or var(--...)). Default: 'var(--color-primary)'. */
+    colorFront?: string;
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Underlying procedural pattern the dithering quantizes. Default: 'wave'. */
+    shape?: DitheringShape;
+    /** Ordered-dithering matrix, or 'random' for noise dithering. Default: '8x8'. */
+    type?: DitheringType;
+    /** Dither cell size in device pixels. Default: 2. */
+    size?: number;
+    className?: string;
+}

package/dist/components/effects/Dithering/Dithering.types.js

@@ -0,0 +1,17 @@
+const DITHERING_SHAPES = {
+    simplex: 1,
+    warp: 2,
+    dots: 3,
+    wave: 4,
+    ripple: 5,
+    swirl: 6,
+    sphere: 7,
+};
+const DITHERING_TYPES = {
+    random: 1,
+    "2x2": 2,
+    "4x4": 3,
+    "8x8": 4,
+};
+
+export { DITHERING_SHAPES, DITHERING_TYPES };

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

@@ -0,0 +1,3 @@
+export { Dithering } from "./Dithering";
+export type { DitheringProps, DitheringShape, DitheringType } from "./Dithering.types";
+export { DITHERING_SHAPES, DITHERING_TYPES } from "./Dithering.types";

package/dist/components/effects/DotPattern/DotPattern.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useId, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
@@ -34,7 +35,7 @@ function buildMaskImage(direction, fadeSize) {
  * </div>
  * ```
  */
-const DotPattern = React__default.forwardRef(({ spacing = 20, dotSize = 1, color = "var(--color-border)", fade = true, fadeDirection = "radial", fadeSize = 50, animated = false, className, style, ...rest }, ref) => {
+const DotPattern = React__default.forwardRef(({ spacing = 20, dotSize = 1, color = "var(--color-border-secondary)", fade = true, fadeDirection = "radial", fadeSize = 50, animated = false, className, style, ...rest }, ref) => {
     const patternId = useId();
     const shouldReduceMotion = useReducedMotion();
     const enableAnimation = animated && !shouldReduceMotion;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { FlutedGlassProps } from "./FlutedGlass.types";
+/**
+ * Fluted-glass image filter — refracts a source image through a directional
+ * ribbed-glass grid with per-ridge highlights/shadows and a real Gaussian
+ * blur. WebGL2-powered; falls back to the plain source image (via
+ * `object-fit: cover`) when WebGL2 is unavailable.
+ */
+export declare const FlutedGlass: React.FC<FlutedGlassProps>;

package/dist/components/effects/FlutedGlass/FlutedGlass.js

@@ -0,0 +1,80 @@
+"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 { flutedGlassFragmentShader } from './FlutedGlass.shaders.js';
+import { FLUTED_GLASS_SHAPES, FLUTED_GLASS_DISTORTION_SHAPES } from './FlutedGlass.types.js';
+
+const DEFAULT_COLOR_BACK = "var(--color-surface-sunken)";
+const DEFAULT_COLOR_SHADOW = "var(--color-text-primary)";
+const DEFAULT_COLOR_HIGHLIGHT = "var(--color-background)";
+function useWebgl2Supported() {
+    return useMemo(() => {
+        if (typeof document === "undefined")
+            return false;
+        try {
+            return !!document.createElement("canvas").getContext("webgl2");
+        }
+        catch (_a) {
+            return false;
+        }
+    }, []);
+}
+/**
+ * Fluted-glass image filter — refracts a source image through a directional
+ * ribbed-glass grid with per-ridge highlights/shadows and a real Gaussian
+ * blur. WebGL2-powered; falls back to the plain source image (via
+ * `object-fit: cover`) when WebGL2 is unavailable.
+ */
+const FlutedGlass = ({ image, colorBack = DEFAULT_COLOR_BACK, colorShadow = DEFAULT_COLOR_SHADOW, colorHighlight = DEFAULT_COLOR_HIGHLIGHT, shape = "lines", distortionShape = "lens", size = 0.5, angle = 0, distortion = 0.5, shift = 0, blur = 0.2, edges = 0.3, shadows = 0.4, highlights = 0.5, stretch = 0, margin = 0, marginLeft, marginRight, marginTop, marginBottom, grainMixer = 0, grainOverlay = 0, className, style, ...props }) => {
+    const isClient = useIsClient();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported();
+    const [imageAspectRatio, setImageAspectRatio] = useState(16 / 9);
+    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorBack, isDark]);
+    const resolvedShadow = useMemo(() => resolveShaderColor(colorShadow), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorShadow, isDark]);
+    const resolvedHighlight = useMemo(() => resolveShaderColor(colorHighlight), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorHighlight, 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_colorBack = resolvedBack;
+    uniformsRef.current.u_colorShadow = resolvedShadow;
+    uniformsRef.current.u_colorHighlight = resolvedHighlight;
+    uniformsRef.current.u_imageAspectRatio = imageAspectRatio;
+    uniformsRef.current.u_shape = FLUTED_GLASS_SHAPES[shape];
+    uniformsRef.current.u_distortionShape = FLUTED_GLASS_DISTORTION_SHAPES[distortionShape];
+    uniformsRef.current.u_size = size;
+    uniformsRef.current.u_angle = angle;
+    uniformsRef.current.u_distortion = distortion;
+    uniformsRef.current.u_shift = shift;
+    uniformsRef.current.u_blur = blur;
+    uniformsRef.current.u_edges = edges;
+    uniformsRef.current.u_shadows = shadows;
+    uniformsRef.current.u_highlights = highlights;
+    uniformsRef.current.u_stretch = stretch;
+    uniformsRef.current.u_marginLeft = marginLeft !== null && marginLeft !== void 0 ? marginLeft : margin;
+    uniformsRef.current.u_marginRight = marginRight !== null && marginRight !== void 0 ? marginRight : margin;
+    uniformsRef.current.u_marginTop = marginTop !== null && marginTop !== void 0 ? marginTop : margin;
+    uniformsRef.current.u_marginBottom = marginBottom !== null && marginBottom !== void 0 ? marginBottom : margin;
+    uniformsRef.current.u_grainMixer = grainMixer;
+    uniformsRef.current.u_grainOverlay = grainOverlay;
+    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: flutedGlassFragmentShader, uniformsRef: uniformsRef, texturesRef: texturesRef, onTextureLoad: handleTextureLoad })) : (jsx("img", { src: imageSrc, alt: "", className: "absolute inset-0 w-full h-full object-cover" })) }));
+};
+
+export { FlutedGlass };

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

@@ -0,0 +1,12 @@
+/**
+ * FlutedGlass fragment shader — adapted from paper-design/shaders'
+ * `fluted-glass.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0). An image filter: refracts a source image through a
+ * directional fluted/ribbed glass grid, with a real per-pixel Gaussian blur.
+ *
+ * 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 flutedGlassFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colorShadow;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_size;\nuniform float u_shadows;\nuniform float u_angle;\nuniform float u_stretch;\nuniform float u_shape;\nuniform float u_distortion;\nuniform float u_highlights;\nuniform float u_distortionShape;\nuniform float u_shift;\nuniform float u_blur;\nuniform float u_edges;\nuniform float u_marginLeft;\nuniform float u_marginRight;\nuniform float u_marginTop;\nuniform float u_marginBottom;\nuniform float u_grainMixer;\nuniform float u_grainOverlay;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nvec2 rotate(vec2 v, float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c) * v;\n}\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 p) {\n  return randomR(p);\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 getUvFrame(vec2 uv, float softness) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n  float left = smoothstep(0., aax + softness, uv.x);\n  float right = 1. - smoothstep(1. - softness - aax, 1., uv.x);\n  float bottom = smoothstep(0., aay + softness, uv.y);\n  float top = 1. - smoothstep(1. - softness - aay, 1., uv.y);\n  return left * right * bottom * top;\n}\n\nconst int MAX_RADIUS = 50;\nvec4 samplePremultiplied(sampler2D tex, vec2 uv) {\n  vec4 c = texture(tex, uv);\n  c.rgb *= c.a;\n  return c;\n}\n\nvec4 getBlur(sampler2D tex, vec2 uv, vec2 texelSize, vec2 dir, float sigma) {\n  if (sigma <= .5) return texture(tex, uv);\n  int radius = int(min(float(MAX_RADIUS), ceil(3.0 * sigma)));\n\n  float twoSigma2 = 2.0 * sigma * sigma;\n  float gaussianNorm = 1.0 / sqrt(TWO_PI * sigma * sigma);\n\n  vec4 sum = samplePremultiplied(tex, uv) * gaussianNorm;\n  float weightSum = gaussianNorm;\n\n  for (int i = 1; i <= MAX_RADIUS; i++) {\n    if (i > radius) break;\n\n    float x = float(i);\n    float w = exp(-(x * x) / twoSigma2) * gaussianNorm;\n\n    vec2 offset = dir * texelSize * x;\n    vec4 s1 = samplePremultiplied(tex, uv + offset);\n    vec4 s2 = samplePremultiplied(tex, uv - offset);\n\n    sum += (s1 + s2) * w;\n    weightSum += 2.0 * w;\n  }\n\n  vec4 result = sum / weightSum;\n  if (result.a > 0.) {\n    result.rgb /= result.a;\n  }\n\n  return result;\n}\n\nvec2 rotateAspect(vec2 p, float a, float aspect) {\n  p.x *= aspect;\n  p = rotate(p, a);\n  p.x /= aspect;\n  return p;\n}\n\nfloat smoothFract(float x) {\n  float f = fract(x);\n  float w = fwidth(x);\n  float edge = abs(f - 0.5) - 0.5;\n  float band = smoothstep(-w, w, edge);\n  return mix(f, 1.0 - f, band);\n}\n\nvoid main() {\n  float patternRotation = -u_angle * PI / 180.;\n  float patternSize = mix(200., 5., u_size);\n\n  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;\n  vec2 imageUV0 = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);\n  vec2 uv = imageUV0;\n\n  vec2 uvMask = fragUV;\n  vec2 sw = vec2(.005);\n  vec4 margins = vec4(u_marginLeft, u_marginTop, u_marginRight, u_marginBottom);\n  float mask =\n    smoothstep(margins[0], margins[0] + sw.x, uvMask.x + sw.x) *\n    smoothstep(margins[2], margins[2] + sw.x, 1.0 - uvMask.x + sw.x) *\n    smoothstep(margins[1], margins[1] + sw.y, uvMask.y + sw.y) *\n    smoothstep(margins[3], margins[3] + sw.y, 1.0 - uvMask.y + sw.y);\n  float maskOuter =\n    smoothstep(margins[0] - sw.x, margins[0], uvMask.x + sw.x) *\n    smoothstep(margins[2] - sw.x, margins[2], 1.0 - uvMask.x + sw.x) *\n    smoothstep(margins[1] - sw.y, margins[1], uvMask.y + sw.y) *\n    smoothstep(margins[3] - sw.y, margins[3], 1.0 - uvMask.y + sw.y);\n  float maskStroke = maskOuter - mask;\n  float maskInner =\n    smoothstep(margins[0] - 2. * sw.x, margins[0], uvMask.x) *\n    smoothstep(margins[2] - 2. * sw.x, margins[2], 1.0 - uvMask.x) *\n    smoothstep(margins[1] - 2. * sw.y, margins[1], uvMask.y) *\n    smoothstep(margins[3] - 2. * sw.y, margins[3], 1.0 - uvMask.y);\n  float maskStrokeInner = maskInner - mask;\n\n  uv -= .5;\n  uv *= patternSize;\n  uv = rotateAspect(uv, patternRotation, u_imageAspectRatio);\n\n  float curve = 0.;\n  float patternY = uv.y / u_imageAspectRatio;\n  if (u_shape > 4.5) {\n    curve = .5 + .5 * sin(.5 * PI * uv.x) * cos(.5 * PI * patternY);\n  } else if (u_shape > 3.5) {\n    curve = 10. * abs(fract(.1 * patternY) - .5);\n  } else if (u_shape > 2.5) {\n    curve = 4. * sin(.23 * patternY);\n  } else if (u_shape > 1.5) {\n    curve = .5 + .5 * sin(.5 * uv.x) * sin(1.7 * uv.x);\n  }\n\n  vec2 UvToFract = uv + curve;\n  vec2 fractOrigUV = fract(uv);\n  vec2 floorOrigUV = floor(uv);\n\n  float x = smoothFract(UvToFract.x);\n  float xNonSmooth = fract(UvToFract.x) + .0001;\n\n  float highlightsWidth = 2. * max(.001, fwidth(UvToFract.x));\n  highlightsWidth += 2. * maskStrokeInner;\n  float highlights = smoothstep(0., highlightsWidth, xNonSmooth);\n  highlights *= smoothstep(1., 1. - highlightsWidth, xNonSmooth);\n  highlights = 1. - highlights;\n  highlights *= u_highlights;\n  highlights = clamp(highlights, 0., 1.);\n  highlights *= mask;\n\n  float shadows = pow(x, 1.3);\n  float distortion = 0.;\n  float fadeX = 1.;\n  float frameFade = 0.;\n\n  float aa = fwidth(xNonSmooth);\n  aa = max(aa, fwidth(uv.x));\n  aa = max(aa, fwidth(UvToFract.x));\n  aa = max(aa, .0001);\n\n  if (u_distortionShape == 1.) {\n    distortion = -pow(1.5 * x, 3.);\n    distortion += (.5 - u_shift);\n    frameFade = pow(1.5 * x, 3.);\n    aa = max(.2, aa);\n    aa += mix(.2, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    distortion = mix(.5, distortion, fadeX);\n  } else if (u_distortionShape == 2.) {\n    distortion = 2. * pow(x, 2.);\n    distortion -= (.5 + u_shift);\n    frameFade = pow(abs(x - .5), 4.);\n    aa = max(.2, aa);\n    aa += mix(.2, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    distortion = mix(.5, distortion, fadeX);\n    frameFade = mix(1., frameFade, .5 * fadeX);\n  } else if (u_distortionShape == 3.) {\n    distortion = pow(2. * (xNonSmooth - .5), 6.);\n    distortion -= .25;\n    distortion -= u_shift;\n    frameFade = 1. - 2. * pow(abs(x - .4), 2.);\n    aa = .15;\n    aa += mix(.1, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    frameFade = mix(1., frameFade, fadeX);\n  } else if (u_distortionShape == 4.) {\n    x = xNonSmooth;\n    distortion = sin((x + .25) * TWO_PI);\n    shadows = .5 + .5 * asin(distortion) / (.5 * PI);\n    distortion *= .5;\n    distortion -= u_shift;\n    frameFade = .5 + .5 * sin(x * TWO_PI);\n  } else if (u_distortionShape == 5.) {\n    distortion -= pow(abs(x), .2) * x;\n    distortion += .33;\n    distortion -= 3. * u_shift;\n    distortion *= .33;\n    frameFade = .3 * (smoothstep(.0, 1., x));\n    shadows = pow(x, 2.5);\n    aa = max(.1, aa);\n    aa += mix(.1, 0., u_size);\n    fadeX = smoothstep(0., aa, xNonSmooth) * smoothstep(1., 1. - aa, xNonSmooth);\n    distortion *= fadeX;\n  }\n\n  vec2 dudx = dFdx(imageUV0);\n  vec2 dudy = dFdy(imageUV0);\n  vec2 grainUV = imageUV0 - .5;\n  grainUV *= (.8 / vec2(length(dudx), length(dudy)));\n  grainUV += .5;\n  float grain = valueNoise(grainUV);\n  grain = smoothstep(.4, .7, grain);\n  grain *= u_grainMixer;\n  distortion = mix(distortion, 0., grain);\n\n  shadows = min(shadows, 1.);\n  shadows += maskStrokeInner;\n  shadows *= mask;\n  shadows = min(shadows, 1.);\n  shadows *= pow(u_shadows, 2.);\n  shadows = clamp(shadows, 0., 1.);\n\n  distortion *= 3. * u_distortion;\n  frameFade *= u_distortion;\n\n  fractOrigUV.x += distortion;\n  floorOrigUV = rotateAspect(floorOrigUV, -patternRotation, u_imageAspectRatio);\n  fractOrigUV = rotateAspect(fractOrigUV, -patternRotation, u_imageAspectRatio);\n\n  uv = (floorOrigUV + fractOrigUV) / patternSize;\n  uv += pow(maskStroke, 4.);\n  uv += vec2(.5);\n\n  uv = mix(imageUV0, uv, smoothstep(0., .7, mask));\n  float blur = mix(0., 50., u_blur);\n  blur = mix(0., blur, smoothstep(.5, 1., mask));\n\n  float edgeDistortion = mix(.0, .04, u_edges);\n  edgeDistortion += .06 * frameFade * u_edges;\n  edgeDistortion *= mask;\n  float frame = getUvFrame(uv, edgeDistortion);\n\n  float stretch = 1. - smoothstep(0., .5, xNonSmooth) * smoothstep(1., 1. - .5, xNonSmooth);\n  stretch = pow(stretch, 2.);\n  stretch *= mask;\n  stretch *= getUvFrame(uv, .1 + .05 * mask * frameFade);\n  uv.y = mix(uv.y, .5, u_stretch * stretch);\n\n  vec4 image = getBlur(u_image, uv, 1. / iResolution, vec2(0., 1.), blur);\n  image.rgb *= image.a;\n  vec4 backColor = u_colorBack;\n  backColor.rgb *= backColor.a;\n  vec4 highlightColor = u_colorHighlight;\n  highlightColor.rgb *= highlightColor.a;\n  vec4 shadowColor = u_colorShadow;\n\n  vec3 color = highlightColor.rgb * highlights;\n  float opacity = highlightColor.a * highlights;\n\n  shadows = mix(shadows * shadowColor.a, 0., highlights);\n  color = mix(color, shadowColor.rgb * shadowColor.a, .5 * shadows);\n  color += .5 * pow(shadows, .5) * shadowColor.rgb;\n  opacity += shadows;\n  color = clamp(color, vec3(0.), vec3(1.));\n  opacity = clamp(opacity, 0., 1.);\n\n  color += image.rgb * (1. - opacity) * frame;\n  opacity += image.a * (1. - opacity) * frame;\n\n  color += backColor.rgb * (1. - opacity);\n  opacity += backColor.a * (1. - opacity);\n\n  float grainOverlay = valueNoise(rotate(grainUV, 1.) + vec2(3.));\n  grainOverlay = mix(grainOverlay, valueNoise(rotate(grainUV, 2.) + 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  grainOverlayStrength *= mask;\n  color = mix(color, grainOverlayColor, .35 * grainOverlayStrength);\n  opacity += .5 * grainOverlayStrength;\n  opacity = clamp(opacity, 0., 1.);\n\n  fragColor = vec4(color, opacity);\n}\n";