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

package/dist/components/effects/MagneticElement/MagneticElement.js

@@ -1,111 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useCallback } from 'react';
-import { useReducedMotion, useMotionValue, useSpring, motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * MagneticElement
- *
- * A wrapper component that adds a magnetic pull effect to its children.
- * When the cursor moves over the element, it subtly translates toward
- * the cursor position, creating an engaging interactive effect.
- *
- * The component uses spring-based animations for smooth, natural movement
- * and respects the user's reduced motion preferences.
- *
- * @example
- * ```tsx
- * <MagneticElement strength={0.3}>
- *   <Button>Hover me</Button>
- * </MagneticElement>
- * ```
- *
- * @example
- * ```tsx
- * // With parallax inner content
- * <MagneticElement strength={0.4} innerStrength={2}>
- *   <div className="p-4">
- *     <span>Pull me closer</span>
- *   </div>
- * </MagneticElement>
- * ```
- */
-const MagneticElement = forwardRef(({ strength = 0.3, distance = 100, damping = 15, stiffness = 150, innerStrength = 1.5, disabled = false, className, children, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, onAnimationStart: _onAnimationStart, ...restProps }, ref) => {
-    const elementRef = useRef(null);
-    const shouldReduceMotion = useReducedMotion();
-    const isDisabled = disabled || shouldReduceMotion;
-    // Motion values for outer wrapper translation
-    const x = useMotionValue(0);
-    const y = useMotionValue(0);
-    // Spring-animated versions of x and y for smooth movement
-    const springConfig = { damping, stiffness, mass: 1 };
-    const springX = useSpring(x, springConfig);
-    const springY = useSpring(y, springConfig);
-    // Motion values for inner content (parallax effect)
-    const innerX = useMotionValue(0);
-    const innerY = useMotionValue(0);
-    const innerSpringX = useSpring(innerX, springConfig);
-    const innerSpringY = useSpring(innerY, springConfig);
-    const handleMouseMove = useCallback((event) => {
-        var _a;
-        if (isDisabled)
-            return;
-        const element = elementRef.current;
-        if (!element)
-            return;
-        const rect = element.getBoundingClientRect();
-        const centerX = rect.left + rect.width / 2;
-        const centerY = rect.top + rect.height / 2;
-        // Calculate distance from cursor to element center
-        const deltaX = event.clientX - centerX;
-        const deltaY = event.clientY - centerY;
-        const distanceFromCenter = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-        // Only apply effect within the configured distance
-        const maxDistance = Math.max(rect.width, rect.height) / 2 + distance;
-        if (distanceFromCenter < maxDistance) {
-            // Apply translation proportional to offset and strength
-            const translateX = deltaX * strength;
-            const translateY = deltaY * strength;
-            x.set(translateX);
-            y.set(translateY);
-            // Inner content moves slightly more for parallax feel
-            if (innerStrength !== 1) {
-                innerX.set(translateX * (innerStrength - 1));
-                innerY.set(translateY * (innerStrength - 1));
-            }
-        }
-        // Forward to user's onMouseMove if provided
-        (_a = restProps.onMouseMove) === null || _a === void 0 ? void 0 : _a.call(restProps, event);
-    }, [isDisabled, strength, distance, innerStrength, x, y, innerX, innerY, restProps.onMouseMove]);
-    const handleMouseLeave = useCallback((event) => {
-        var _a;
-        if (isDisabled)
-            return;
-        // Reset to center position; the spring will animate the return
-        x.set(0);
-        y.set(0);
-        innerX.set(0);
-        innerY.set(0);
-        // Forward to user's onMouseLeave if provided
-        (_a = restProps.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(restProps, event);
-    }, [isDisabled, x, y, innerX, innerY, restProps.onMouseLeave]);
-    // When disabled or reduced motion preferred, render without motion
-    if (isDisabled) {
-        return (jsx("div", { ref: ref, className: cn("inline-block", className), ...restProps, children: children }));
-    }
-    const hasParallax = innerStrength !== 1;
-    return (jsx(motion.div, { ref: (node) => {
-            // Assign to both the internal ref and the forwarded ref
-            elementRef.current = node;
-            if (typeof ref === "function") {
-                ref(node);
-            }
-            else if (ref) {
-                ref.current = node;
-            }
-        }, className: cn("inline-block", className), style: { x: springX, y: springY }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, ...restProps, children: hasParallax ? (jsx(motion.div, { style: { x: innerSpringX, y: innerSpringY }, children: children })) : (children) }));
-});
-MagneticElement.displayName = "MagneticElement";
-
-export { MagneticElement };

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

@@ -1,44 +0,0 @@
-import React from "react";
-export interface MagneticElementProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Strength of the magnetic pull effect.
-     * Value between 0 and 1, where 0 is no effect and 1 is maximum pull.
-     * @default 0.3
-     */
-    strength?: number;
-    /**
-     * Distance in pixels at which the magnetic effect activates.
-     * Only applies when the cursor is within this radius of the element center.
-     * @default 100
-     */
-    distance?: number;
-    /**
-     * Spring damping for the animation.
-     * Higher values result in less oscillation and a more dampened feel.
-     * @default 15
-     */
-    damping?: number;
-    /**
-     * Spring stiffness for the animation.
-     * Higher values result in a snappier spring.
-     * @default 150
-     */
-    stiffness?: number;
-    /**
-     * Multiplier for inner content movement relative to the outer wrapper.
-     * Creates a subtle parallax-like effect where content moves slightly more.
-     * Set to 1 for no parallax. Values above 1 amplify inner movement.
-     * @default 1.5
-     */
-    innerStrength?: number;
-    /**
-     * When true, disables the magnetic effect entirely.
-     * The component renders as a plain div wrapper.
-     * @default false
-     */
-    disabled?: boolean;
-    /** Additional className for the outer wrapper */
-    className?: string;
-    /** Content to wrap with the magnetic effect */
-    children: React.ReactNode;
-}

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

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

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

@@ -1,8 +0,0 @@
-import React from "react";
-import type { MetaballsProps } from "./Metaballs.types";
-/**
- * Animated lava-lamp-style blobby merging balls. WebGL2-powered; falls back
- * to a static CSS radial-gradient cluster when WebGL2 is unavailable or the
- * user prefers reduced motion.
- */
-export declare const Metaballs: React.FC<MetaballsProps>;

package/dist/components/effects/Metaballs/Metaballs.js

@@ -1,59 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { useMemo, useRef } from 'react';
-import { useReducedMotion } from 'motion/react';
-import { useIsClient } from '../../../hooks/useIsClient.js';
-import { useDarkMode } from '../../../hooks/useDarkMode.js';
-import { cn } from '../../../utils/cn.js';
-import { ShaderCanvas } from '../shared/ShaderCanvas/ShaderCanvas.js';
-import { resolveShaderColors, resolveShaderColor } from '../shared/resolveShaderColor.js';
-import { metaballsFragmentShader } from './Metaballs.shaders.js';
-import { METABALLS_MAX_COLORS } from './Metaballs.types.js';
-
-const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
-const DEFAULT_COLOR_BACK = "var(--color-background)";
-function useWebgl2Supported(disabled) {
-    return useMemo(() => {
-        if (disabled || typeof document === "undefined")
-            return false;
-        try {
-            return !!document.createElement("canvas").getContext("webgl2");
-        }
-        catch (_a) {
-            return false;
-        }
-    }, [disabled]);
-}
-/**
- * Animated lava-lamp-style blobby merging balls. WebGL2-powered; falls back
- * to a static CSS radial-gradient cluster when WebGL2 is unavailable or the
- * user prefers reduced motion.
- */
-const Metaballs = ({ colorBack = DEFAULT_COLOR_BACK, colors = DEFAULT_COLORS, count = 10, size = 0.6, speed = 1, className, style, ...props }) => {
-    var _a, _b, _c, _d;
-    const isClient = useIsClient();
-    const shouldReduceMotion = useReducedMotion();
-    const isDark = useDarkMode();
-    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
-    const safeColors = colors.length > 0 ? colors.slice(0, METABALLS_MAX_COLORS) : DEFAULT_COLORS;
-    const resolvedColors = useMemo(() => resolveShaderColors(safeColors), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [safeColors.join("|"), isDark]);
-    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [colorBack, isDark]);
-    const uniformsRef = useRef({});
-    for (let i = 0; i < METABALLS_MAX_COLORS; i++) {
-        uniformsRef.current[`u_colors[${i}]`] =
-            (_b = (_a = resolvedColors[i]) !== null && _a !== void 0 ? _a : resolvedColors[resolvedColors.length - 1]) !== null && _b !== void 0 ? _b : [0, 0, 0, 0];
-    }
-    uniformsRef.current.u_colorsCount = resolvedColors.length;
-    uniformsRef.current.u_colorBack = resolvedBack;
-    uniformsRef.current.u_count = count;
-    uniformsRef.current.u_size = size;
-    uniformsRef.current.u_speed = speed;
-    const fallbackGradient = `radial-gradient(circle at 30% 40%, ${(_c = safeColors[0]) !== null && _c !== void 0 ? _c : "var(--color-primary)"}, transparent 60%), radial-gradient(circle at 70% 60%, ${(_d = safeColors[safeColors.length - 1]) !== null && _d !== void 0 ? _d : "var(--color-primary)"}, transparent 60%), ${colorBack}`;
-    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: metaballsFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
-};
-
-export { Metaballs };

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

@@ -1,10 +0,0 @@
-/**
- * Metaballs fragment shader — adapted from paper-design/shaders' `metaballs.ts`
- * (https://github.com/paper-design/shaders, Apache License 2.0).
- *
- * Simplified from the original: plain centered/aspect-corrected UV
- * (gl_FragCoord/iResolution) 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.
- */
-export declare const metaballsFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[8];\nuniform float u_colorsCount;\nuniform float u_size;\nuniform float u_count;\nuniform float u_speed;\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\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f);\n  vec2 p0 = vec2(i, 0.0);\n  vec2 p1 = vec2(i + 1.0, 0.0);\n  return mix(randomR(p0), randomR(p1), u);\n}\n\nfloat getBallShape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  vec2 shape_uv = objectUV + .5;\n\n  const float firstFrameOffset = 2503.4;\n  float t = .2 * u_speed * iTime + firstFrameOffset;\n\n  vec3 totalColor = vec3(0.);\n  float totalShape = 0.;\n  float totalOpacity = 0.;\n\n  for (int i = 0; i < 20; i++) {\n    if (i >= int(ceil(u_count))) break;\n    float idxFract = float(i) / float(20);\n    float angle = TWO_PI * idxFract;\n    float speed = 1. - .2 * idxFract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n    vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);\n\n    int safeIndex = i % int(u_colorsCount + 0.5);\n    vec4 ballColor = u_colors[safeIndex];\n    ballColor.rgb *= ballColor.a;\n\n    float sizeFrac = 1.;\n    if (float(i) > floor(u_count - 1.)) {\n      sizeFrac *= fract(u_count);\n    }\n\n    float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);\n    shape *= pow(u_size, .2);\n    shape = smoothstep(0., 1., shape);\n\n    totalColor += ballColor.rgb * shape;\n    totalShape += shape;\n    totalOpacity += ballColor.a * shape;\n  }\n\n  totalColor /= max(totalShape, 1e-4);\n  totalOpacity /= max(totalShape, 1e-4);\n\n  float edge_width = fwidth(totalShape);\n  float finalShape = smoothstep(.4, .4 + edge_width, totalShape);\n\n  vec3 color = totalColor * finalShape;\n  float 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\n  fragColor = vec4(color, opacity);\n}\n";

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

@@ -1,102 +0,0 @@
-import 'react/jsx-runtime';
-import 'react';
-import { glslDeclarePI, glslHashFloat } from '../shared/shaderNoise.glsl.js';
-
-/**
- * Metaballs fragment shader — adapted from paper-design/shaders' `metaballs.ts`
- * (https://github.com/paper-design/shaders, Apache License 2.0).
- *
- * Simplified from the original: plain centered/aspect-corrected UV
- * (gl_FragCoord/iResolution) 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.
- */
-const metaballsFragmentShader = `#version 300 es
-precision mediump float;
-
-uniform float iTime;
-uniform vec2 iResolution;
-
-uniform vec4 u_colorBack;
-uniform vec4 u_colors[8];
-uniform float u_colorsCount;
-uniform float u_size;
-uniform float u_count;
-uniform float u_speed;
-
-out vec4 fragColor;
-
-${glslDeclarePI}
-${glslHashFloat}
-
-float noise(float x) {
-  float i = floor(x);
-  float f = fract(x);
-  float u = f * f * (3.0 - 2.0 * f);
-  vec2 p0 = vec2(i, 0.0);
-  vec2 p1 = vec2(i + 1.0, 0.0);
-  return mix(randomR(p0), randomR(p1), u);
-}
-
-float getBallShape(vec2 uv, vec2 c, float p) {
-  float s = .5 * length(uv - c);
-  s = 1. - clamp(s, 0., 1.);
-  s = pow(s, p);
-  return s;
-}
-
-void main() {
-  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
-  vec2 shape_uv = objectUV + .5;
-
-  const float firstFrameOffset = 2503.4;
-  float t = .2 * u_speed * iTime + firstFrameOffset;
-
-  vec3 totalColor = vec3(0.);
-  float totalShape = 0.;
-  float totalOpacity = 0.;
-
-  for (int i = 0; i < 20; i++) {
-    if (i >= int(ceil(u_count))) break;
-    float idxFract = float(i) / float(20);
-    float angle = TWO_PI * idxFract;
-    float speed = 1. - .2 * idxFract;
-    float noiseX = noise(angle * 10. + float(i) + t * speed);
-    float noiseY = noise(angle * 20. + float(i) - t * speed);
-    vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);
-
-    int safeIndex = i % int(u_colorsCount + 0.5);
-    vec4 ballColor = u_colors[safeIndex];
-    ballColor.rgb *= ballColor.a;
-
-    float sizeFrac = 1.;
-    if (float(i) > floor(u_count - 1.)) {
-      sizeFrac *= fract(u_count);
-    }
-
-    float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);
-    shape *= pow(u_size, .2);
-    shape = smoothstep(0., 1., shape);
-
-    totalColor += ballColor.rgb * shape;
-    totalShape += shape;
-    totalOpacity += ballColor.a * shape;
-  }
-
-  totalColor /= max(totalShape, 1e-4);
-  totalOpacity /= max(totalShape, 1e-4);
-
-  float edge_width = fwidth(totalShape);
-  float finalShape = smoothstep(.4, .4 + edge_width, totalShape);
-
-  vec3 color = totalColor * finalShape;
-  float opacity = totalOpacity * finalShape;
-  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
-  color = color + bgColor * (1. - opacity);
-  opacity = opacity + u_colorBack.a * (1. - opacity);
-
-  fragColor = vec4(color, opacity);
-}
-`;
-
-export { metaballsFragmentShader };

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

@@ -1,16 +0,0 @@
-import type React from "react";
-export declare const METABALLS_MAX_COLORS = 8;
-export declare const METABALLS_MAX_COUNT = 20;
-export interface MetaballsProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Background CSS color. Default: 'var(--color-background)'. */
-    colorBack?: string;
-    /** Ball colors, cycled across balls, up to 8. Default: a 3-stop primary ramp. */
-    colors?: string[];
-    /** Number of balls, 1-20 (fractional values fade the last ball in). Default: 10. */
-    count?: number;
-    /** Ball size multiplier. Default: 0.6. */
-    size?: number;
-    /** Animation speed multiplier. Default: 1. */
-    speed?: number;
-    className?: string;
-}

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

@@ -1,3 +0,0 @@
-const METABALLS_MAX_COLORS = 8;
-
-export { METABALLS_MAX_COLORS };

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

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

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

@@ -1,9 +0,0 @@
-import React from "react";
-import type { PaperTextureProps } from "./PaperTexture.types";
-/**
- * Paper-grain image filter — normal-maps a source image with a fiber/
- * roughness texture and re-lights it, giving it a textured-paper look.
- * WebGL2-powered; falls back to the plain source image (via
- * `object-fit: cover`) when WebGL2 is unavailable.
- */
-export declare const PaperTexture: React.FC<PaperTextureProps>;

package/dist/components/effects/PaperTexture/PaperTexture.js

@@ -1,61 +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 { paperTextureFragmentShader } from './PaperTexture.shaders.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;
-        }
-    }, []);
-}
-/**
- * Paper-grain image filter — normal-maps a source image with a fiber/
- * roughness texture and re-lights it, giving it a textured-paper look.
- * WebGL2-powered; falls back to the plain source image (via
- * `object-fit: cover`) when WebGL2 is unavailable.
- */
-const PaperTexture = ({ image, colorFront = DEFAULT_COLOR_FRONT, colorBack = DEFAULT_COLOR_BACK, contrast = 0.5, roughness = 0.5, fiber = 0.5, fiberSize = 1, 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_contrast = contrast;
-    uniformsRef.current.u_roughness = roughness;
-    uniformsRef.current.u_fiber = fiber;
-    uniformsRef.current.u_fiberSize = fiberSize;
-    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: paperTextureFragmentShader, uniformsRef: uniformsRef, texturesRef: texturesRef, onTextureLoad: handleTextureLoad })) : (jsx("img", { src: imageSrc, alt: "", className: "absolute inset-0 w-full h-full object-cover" })) }));
-};
-
-export { PaperTexture };

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

@@ -1,22 +0,0 @@
-/**
- * PaperTexture fragment shader — adapted from paper-design/shaders'
- * `paper-texture.ts` (https://github.com/paper-design/shaders, Apache
- * License 2.0). An image filter: normal-maps a source image with a
- * paper-grain fiber/roughness texture and re-lights it.
- *
- * 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.
- *
- * Trimmed for v1: keeps the core `fiber`/`roughness`/`contrast` normal-map
- * layers (the essential "paper grain" look) and drops the elaborate
- * `crumples`/`folds`/`drops`/`fade` secondary normal-perturbation layers —
- * those are the most GLSL-dense part of the original and least essential to
- * "paper texture" reading as itself. May be added later as a follow-up.
- *
- * `fiberNoise` below is an original approximation (directional streaked
- * value-noise), NOT a port — paper-design's own `fiberNoise` implementation
- * wasn't available in the extracted source material for this port.
- */
-export declare const paperTextureFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform vec2 iResolution;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_contrast;\nuniform float u_roughness;\nuniform float u_fiber;\nuniform float u_fiberSize;\n\nout vec4 fragColor;\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 getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n  float left = smoothstep(0., aax, uv.x);\n  float right = 1. - smoothstep(1. - aax, 1., uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top = 1. - smoothstep(1. - aay, 1., uv.y);\n  return left * right * bottom * top;\n}\n\nfloat roughnessTex(vec2 p) {\n  p *= .1;\n  float o = 0.;\n  for (float i = 0.; ++i < 4.; p *= 2.1) {\n    vec4 w = vec4(floor(p), ceil(p));\n    vec2 f = fract(p);\n    o += mix(mix(randomR(w.xy), randomR(w.xw), f.y), mix(randomR(w.zy), randomR(w.zw), f.y), f.x);\n    o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y)));\n  }\n  return o / 3.;\n}\n\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(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 fiberNoise(vec2 p, vec2 seed) {\n  p += seed;\n  float n = 0.0;\n  float amp = 1.0;\n  for (int i = 0; i < 3; i++) {\n    float stretch = 6.0 + float(i) * 4.0;\n    vec2 sp = vec2(p.x * stretch, p.y * 1.5);\n    n += amp * valueNoise(sp);\n    amp *= 0.5;\n    p = rotate(p, 0.3);\n  }\n  return n;\n}\n\nvoid main() {\n  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;\n  vec2 imageUV = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);\n  vec2 patternUV = imageUV - .5;\n  patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.));\n\n  vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * iResolution.xy);\n  float roughnessVal = roughnessTex(roughnessUv + vec2(1., 0.)) - roughnessTex(roughnessUv - vec2(1., 0.));\n\n  vec2 fiberUV = 2. / max(u_fiberSize, 0.01) * patternUV;\n  float fiber = fiberNoise(fiberUV, vec2(0.));\n  fiber = .5 * u_fiber * (fiber - 1.);\n\n  vec2 normal = vec2(0.);\n  vec2 normalImage = vec2(0.);\n\n  normal.xy += u_roughness * 1.5 * roughnessVal;\n  normal.xy += fiber;\n  normalImage += u_roughness * .75 * roughnessVal;\n  normalImage += .2 * fiber;\n\n  vec3 lightPos = vec3(1., 2., 1.);\n  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));\n\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  imageUV += .02 * normalImage;\n  float frame = getUvFrame(imageUV);\n  vec4 image = texture(u_image, imageUV);\n  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);\n  frame *= image.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n  opacity = mix(opacity, 1., frame);\n\n  color.rgb = mix(color, image.rgb, frame);\n\n  fragColor = vec4(color, opacity);\n}\n";

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

@@ -1,145 +0,0 @@
-import 'react/jsx-runtime';
-import 'react';
-import { glslRotate2, glslHashFloat } from '../shared/shaderNoise.glsl.js';
-import { glslImageCoverUV } from '../shared/imageUV.glsl.js';
-
-/**
- * PaperTexture fragment shader — adapted from paper-design/shaders'
- * `paper-texture.ts` (https://github.com/paper-design/shaders, Apache
- * License 2.0). An image filter: normal-maps a source image with a
- * paper-grain fiber/roughness texture and re-lights it.
- *
- * 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.
- *
- * Trimmed for v1: keeps the core `fiber`/`roughness`/`contrast` normal-map
- * layers (the essential "paper grain" look) and drops the elaborate
- * `crumples`/`folds`/`drops`/`fade` secondary normal-perturbation layers —
- * those are the most GLSL-dense part of the original and least essential to
- * "paper texture" reading as itself. May be added later as a follow-up.
- *
- * `fiberNoise` below is an original approximation (directional streaked
- * value-noise), NOT a port — paper-design's own `fiberNoise` implementation
- * wasn't available in the extracted source material for this port.
- */
-const paperTextureFragmentShader = `#version 300 es
-precision mediump float;
-
-uniform vec2 iResolution;
-
-uniform vec4 u_colorFront;
-uniform vec4 u_colorBack;
-
-uniform sampler2D u_image;
-uniform float u_imageAspectRatio;
-
-uniform float u_contrast;
-uniform float u_roughness;
-uniform float u_fiber;
-uniform float u_fiberSize;
-
-out vec4 fragColor;
-
-${glslRotate2}
-${glslHashFloat}
-${glslImageCoverUV}
-
-float getUvFrame(vec2 uv) {
-  float aax = 2. * fwidth(uv.x);
-  float aay = 2. * fwidth(uv.y);
-  float left = smoothstep(0., aax, uv.x);
-  float right = 1. - smoothstep(1. - aax, 1., uv.x);
-  float bottom = smoothstep(0., aay, uv.y);
-  float top = 1. - smoothstep(1. - aay, 1., uv.y);
-  return left * right * bottom * top;
-}
-
-float roughnessTex(vec2 p) {
-  p *= .1;
-  float o = 0.;
-  for (float i = 0.; ++i < 4.; p *= 2.1) {
-    vec4 w = vec4(floor(p), ceil(p));
-    vec2 f = fract(p);
-    o += mix(mix(randomR(w.xy), randomR(w.xw), f.y), mix(randomR(w.zy), randomR(w.zw), f.y), f.x);
-    o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y)));
-  }
-  return o / 3.;
-}
-
-float valueNoise(vec2 st) {
-  vec2 i = floor(st);
-  vec2 f = fract(st);
-  float a = randomR(i);
-  float b = randomR(i + vec2(1.0, 0.0));
-  float c = randomR(i + vec2(0.0, 1.0));
-  float d = randomR(i + vec2(1.0, 1.0));
-  vec2 u = f * f * (3.0 - 2.0 * f);
-  float x1 = mix(a, b, u.x);
-  float x2 = mix(c, d, u.x);
-  return mix(x1, x2, u.y);
-}
-
-float fiberNoise(vec2 p, vec2 seed) {
-  p += seed;
-  float n = 0.0;
-  float amp = 1.0;
-  for (int i = 0; i < 3; i++) {
-    float stretch = 6.0 + float(i) * 4.0;
-    vec2 sp = vec2(p.x * stretch, p.y * 1.5);
-    n += amp * valueNoise(sp);
-    amp *= 0.5;
-    p = rotate(p, 0.3);
-  }
-  return n;
-}
-
-void main() {
-  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;
-  vec2 imageUV = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);
-  vec2 patternUV = imageUV - .5;
-  patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.));
-
-  vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * iResolution.xy);
-  float roughnessVal = roughnessTex(roughnessUv + vec2(1., 0.)) - roughnessTex(roughnessUv - vec2(1., 0.));
-
-  vec2 fiberUV = 2. / max(u_fiberSize, 0.01) * patternUV;
-  float fiber = fiberNoise(fiberUV, vec2(0.));
-  fiber = .5 * u_fiber * (fiber - 1.);
-
-  vec2 normal = vec2(0.);
-  vec2 normalImage = vec2(0.);
-
-  normal.xy += u_roughness * 1.5 * roughnessVal;
-  normal.xy += fiber;
-  normalImage += u_roughness * .75 * roughnessVal;
-  normalImage += .2 * fiber;
-
-  vec3 lightPos = vec3(1., 2., 1.);
-  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));
-
-  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;
-
-  imageUV += .02 * normalImage;
-  float frame = getUvFrame(imageUV);
-  vec4 image = texture(u_image, imageUV);
-  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);
-  frame *= image.a;
-
-  vec3 color = fgColor * res;
-  float opacity = fgOpacity * res;
-  color += bgColor * (1. - opacity);
-  opacity += bgOpacity * (1. - opacity);
-  opacity = mix(opacity, 1., frame);
-
-  color.rgb = mix(color, image.rgb, frame);
-
-  fragColor = vec4(color, opacity);
-}
-`;
-
-export { paperTextureFragmentShader };

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

@@ -1,19 +0,0 @@
-import type React from "react";
-import type { ShaderTextureSource } from "../shared";
-export interface PaperTextureProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Source image (URL or an existing HTMLImageElement). Required. */
-    image: ShaderTextureSource;
-    /** Shadow-side color mixed into the paper-grain lighting. Default: 'var(--color-text-primary)'. */
-    colorFront?: string;
-    /** Highlight-side color mixed into the paper-grain lighting. Default: 'var(--color-background)'. */
-    colorBack?: string;
-    /** Lighting contrast, 0-1+. Default: 0.5. */
-    contrast?: number;
-    /** Fine paper roughness strength, 0-1+. Default: 0.5. */
-    roughness?: number;
-    /** Fiber streak strength, 0-1+. Default: 0.5. */
-    fiber?: number;
-    /** Fiber streak scale. Default: 1. */
-    fiberSize?: number;
-    className?: string;
-}

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

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