@heyramzi/ui 2.8.0 → 2.10.0

package/dist/effects/border-beam/register-properties.js

@@ -0,0 +1,39 @@
+export function registerBorderBeamProperties(id, size) {
+    const registry = globalThis.CSS;
+    if (typeof registry?.registerProperty !== "function") return;
+    for (const registration of getBorderBeamPropertyRegistrations(id, size)){
+        try {
+            registry.registerProperty?.(registration);
+        } catch  {}
+    }
+}
+function getBorderBeamPropertyRegistrations(id, size) {
+    if (size === "line") {
+        return [
+            numberProperty(`--beam-x-${id}`, "0"),
+            numberProperty(`--beam-w-${id}`, "1"),
+            numberProperty(`--beam-h-${id}`, "1"),
+            numberProperty(`--beam-spike-${id}`, "1"),
+            numberProperty(`--beam-spike2-${id}`, "1"),
+            numberProperty(`--beam-edge-${id}`, "1"),
+            numberProperty(`--beam-opacity-${id}`, "0")
+        ];
+    }
+    return [
+        {
+            name: `--beam-angle-${id}`,
+            syntax: "<angle>",
+            initialValue: "0deg",
+            inherits: true
+        },
+        numberProperty(`--beam-opacity-${id}`, "0")
+    ];
+}
+function numberProperty(name, initialValue) {
+    return {
+        name,
+        syntax: "<number>",
+        initialValue,
+        inherits: true
+    };
+}

package/dist/effects/image-comparison/compare.js

@@ -0,0 +1,4 @@
+export function positionAt(clientX, left, width) {
+    if (width <= 0) return 50;
+    return Math.min(Math.max((clientX - left) / width * 100, 0), 100);
+}

package/dist/effects/image-reveal/index.js

@@ -0,0 +1 @@
+export { default as ImageReveal } from "../../../src/effects/image-reveal/ImageReveal.svelte";

package/dist/effects/magnetic/magnetic.js

@@ -0,0 +1,54 @@
+const EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+export const magnetic = (node, options)=>{
+    let intensity = options?.intensity ?? 0.6;
+    let range = options?.range ?? 100;
+    let from = options?.from ?? "self";
+    let duration = options?.duration ?? 350;
+    let armed = false;
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const zone = ()=>from === "parent" ? node.parentElement ?? node : node;
+    const reset = ()=>{
+        node.style.transition = `translate ${duration}ms ${EASE}`;
+        node.style.translate = "0px 0px";
+    };
+    const onMove = (event)=>{
+        if (!armed || reduced.matches) return;
+        const rect = node.getBoundingClientRect();
+        const dx = event.clientX - (rect.left + rect.width / 2);
+        const dy = event.clientY - (rect.top + rect.height / 2);
+        const distance = Math.hypot(dx, dy);
+        if (distance > range) return reset();
+        const falloff = intensity * (1 - distance / range);
+        node.style.transition = "translate 0ms";
+        node.style.translate = `${dx * falloff}px ${dy * falloff}px`;
+    };
+    const arm = ()=>armed = true;
+    const disarm = ()=>{
+        armed = false;
+        reset();
+    };
+    let target = zone();
+    target.addEventListener("pointerenter", arm);
+    target.addEventListener("pointerleave", disarm);
+    document.addEventListener("pointermove", onMove);
+    return {
+        update (next) {
+            intensity = next?.intensity ?? 0.6;
+            range = next?.range ?? 100;
+            duration = next?.duration ?? 350;
+            const nextFrom = next?.from ?? "self";
+            if (nextFrom === from) return;
+            target.removeEventListener("pointerenter", arm);
+            target.removeEventListener("pointerleave", disarm);
+            from = nextFrom;
+            target = zone();
+            target.addEventListener("pointerenter", arm);
+            target.addEventListener("pointerleave", disarm);
+        },
+        destroy () {
+            target.removeEventListener("pointerenter", arm);
+            target.removeEventListener("pointerleave", disarm);
+            document.removeEventListener("pointermove", onMove);
+        }
+    };
+};

package/dist/effects/reveal/index.js

@@ -0,0 +1,4 @@
+export { default as InView } from "../../../src/effects/reveal/InView.svelte";
+export { default as AnimatedGroup } from "../../../src/effects/reveal/AnimatedGroup.svelte";
+export { default as TextEffect } from "../../../src/effects/reveal/TextEffect.svelte";
+export { observeInView, onInView } from "./observe.js";

package/dist/effects/reveal/observe.js

@@ -0,0 +1,43 @@
+export function observeInView(el, options, onChange) {
+    if (typeof IntersectionObserver === "undefined") {
+        onChange(true);
+        return ()=>{};
+    }
+    const observer = new IntersectionObserver(([entry])=>{
+        if (entry.isIntersecting) {
+            onChange(true);
+            if (options.once !== false) observer.disconnect();
+            return;
+        }
+        if (options.once === false) onChange(false);
+    }, {
+        threshold: options.amount ?? 0,
+        rootMargin: options.margin ?? "0px"
+    });
+    observer.observe(el);
+    return ()=>observer.disconnect();
+}
+export const onInView = (node, initial)=>{
+    let options = initial ?? {};
+    let entered = false;
+    const { amount = 0.1, margin, once } = options;
+    const stop = observeInView(node, {
+        amount,
+        margin,
+        once
+    }, (inView)=>{
+        if (inView && !entered) {
+            entered = true;
+            options.onEnter?.();
+        } else if (!inView && entered) {
+            entered = false;
+            options.onLeave?.();
+        }
+    });
+    return {
+        update (next) {
+            options = next ?? {};
+        },
+        destroy: stop
+    };
+};

package/dist/effects/shader-gradient/color.js

@@ -0,0 +1,34 @@
+let probe;
+function getProbe() {
+    if (probe !== undefined) return probe;
+    probe = document.createElement("canvas").getContext("2d", {
+        willReadFrequently: true
+    });
+    return probe;
+}
+export function resolveColor(input, scope) {
+    const fallback = [
+        0,
+        0,
+        0
+    ];
+    if (typeof document === "undefined") return fallback;
+    let value = input.trim();
+    const token = /^var\(\s*(--[\w-]+)\s*(?:,\s*([\s\S]+))?\)$/.exec(value);
+    if (token) {
+        const resolved = getComputedStyle(scope ?? document.documentElement).getPropertyValue(token[1]).trim();
+        value = resolved || token[2]?.trim() || "";
+    }
+    if (!value) return fallback;
+    const context = getProbe();
+    if (!context) return fallback;
+    context.fillStyle = value;
+    context.clearRect(0, 0, 1, 1);
+    context.fillRect(0, 0, 1, 1);
+    const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
+    return [
+        r / 255,
+        g / 255,
+        b / 255
+    ];
+}

package/dist/effects/shader-gradient/index.js

@@ -0,0 +1 @@
+export { default as ShaderGradient } from "../../../src/effects/shader-gradient/ShaderGradient.svelte";

package/dist/effects/shader-gradient/renderer.js

@@ -0,0 +1,320 @@
+import { HALFTONE_FRAGMENT_SHADER, MESH_FRAGMENT_SHADER, MESH_VERTEX_SHADER, QUAD_VERTEX_SHADER } from "./shaders.js";
+const PLANE_SIZE = 10;
+const PLANE_SEGMENTS = 192;
+const DEG_TO_RAD = Math.PI / 180;
+const HALFTONE_ROTATION = {
+    r: Math.PI / 12,
+    g: Math.PI / 12 * 3,
+    b: Math.PI / 12 * 2
+};
+const HALFTONE_SCATTER = 1;
+const MAX_VISIBLE_HALF_WIDTH = 2.4;
+const MAX_CORNER_RAY_DEGREES = 10;
+function createPlane() {
+    const positions = new Float32Array((PLANE_SEGMENTS + 1) * 2 * 3);
+    const indices = new Uint16Array(PLANE_SEGMENTS * 6);
+    const half = PLANE_SIZE / 2;
+    const segment = PLANE_SIZE / PLANE_SEGMENTS;
+    for(let iy = 0; iy <= PLANE_SEGMENTS; iy++){
+        const y = -(iy * segment - half);
+        const offset = iy * 6;
+        positions[offset] = -half;
+        positions[offset + 1] = y;
+        positions[offset + 2] = 0;
+        positions[offset + 3] = half;
+        positions[offset + 4] = y;
+        positions[offset + 5] = 0;
+    }
+    for(let iy = 0; iy < PLANE_SEGMENTS; iy++){
+        const a = iy * 2;
+        const b = (iy + 1) * 2;
+        const c = (iy + 1) * 2 + 1;
+        const d = iy * 2 + 1;
+        const offset = iy * 6;
+        indices[offset] = a;
+        indices[offset + 1] = b;
+        indices[offset + 2] = d;
+        indices[offset + 3] = b;
+        indices[offset + 4] = c;
+        indices[offset + 5] = d;
+    }
+    return {
+        positions,
+        indices
+    };
+}
+function perspective(fovDegrees, aspect, near, far) {
+    const f = 1 / Math.tan(fovDegrees * DEG_TO_RAD / 2);
+    const range = 1 / (near - far);
+    return new Float32Array([
+        f / aspect,
+        0,
+        0,
+        0,
+        0,
+        f,
+        0,
+        0,
+        0,
+        0,
+        (far + near) * range,
+        -1,
+        0,
+        0,
+        2 * far * near * range,
+        0
+    ]);
+}
+function orbitView(distance, polarDegrees, azimuthDegrees) {
+    const polar = polarDegrees * DEG_TO_RAD;
+    const azimuth = azimuthDegrees * DEG_TO_RAD;
+    const eye = [
+        distance * Math.sin(polar) * Math.sin(azimuth),
+        distance * Math.cos(polar),
+        distance * Math.sin(polar) * Math.cos(azimuth)
+    ];
+    let zx = eye[0];
+    let zy = eye[1];
+    let zz = eye[2];
+    const zLength = Math.hypot(zx, zy, zz) || 1;
+    zx /= zLength;
+    zy /= zLength;
+    zz /= zLength;
+    let xx = zz;
+    let xy = 0;
+    let xz = -zx;
+    const xLength = Math.hypot(xx, xy, xz) || 1;
+    xx /= xLength;
+    xy /= xLength;
+    xz /= xLength;
+    const yx = zy * xz - zz * xy;
+    const yy = zz * xx - zx * xz;
+    const yz = zx * xy - zy * xx;
+    return new Float32Array([
+        xx,
+        yx,
+        zx,
+        0,
+        xy,
+        yy,
+        zy,
+        0,
+        xz,
+        yz,
+        zz,
+        0,
+        -(xx * eye[0] + xy * eye[1] + xz * eye[2]),
+        -(yx * eye[0] + yy * eye[1] + yz * eye[2]),
+        -(zx * eye[0] + zy * eye[1] + zz * eye[2]),
+        1
+    ]);
+}
+function modelMatrix(position, rotationDegrees) {
+    const a = Math.cos(rotationDegrees[0] * DEG_TO_RAD);
+    const b = Math.sin(rotationDegrees[0] * DEG_TO_RAD);
+    const c = Math.cos(rotationDegrees[1] * DEG_TO_RAD);
+    const d = Math.sin(rotationDegrees[1] * DEG_TO_RAD);
+    const e = Math.cos(rotationDegrees[2] * DEG_TO_RAD);
+    const f = Math.sin(rotationDegrees[2] * DEG_TO_RAD);
+    const ae = a * e;
+    const af = a * f;
+    const be = b * e;
+    const bf = b * f;
+    return new Float32Array([
+        c * e,
+        af + be * d,
+        bf - ae * d,
+        0,
+        -c * f,
+        ae - bf * d,
+        be + af * d,
+        0,
+        d,
+        -b * c,
+        a * c,
+        0,
+        position[0],
+        position[1],
+        position[2],
+        1
+    ]);
+}
+function compile(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader) throw new Error("shader-gradient: could not create shader");
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const log = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw new Error(`shader-gradient: shader failed to compile. ${log}`);
+    }
+    return shader;
+}
+function link(gl, vertexSource, fragmentSource) {
+    const vertex = compile(gl, gl.VERTEX_SHADER, vertexSource);
+    const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource);
+    const program = gl.createProgram();
+    if (!program) throw new Error("shader-gradient: could not create program");
+    gl.attachShader(program, vertex);
+    gl.attachShader(program, fragment);
+    gl.linkProgram(program);
+    gl.deleteShader(vertex);
+    gl.deleteShader(fragment);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        const log = gl.getProgramInfoLog(program);
+        gl.deleteProgram(program);
+        throw new Error(`shader-gradient: program failed to link. ${log}`);
+    }
+    return program;
+}
+function uniformLocations(gl, program, names) {
+    const locations = {};
+    for (const name of names)locations[name] = gl.getUniformLocation(program, name);
+    return locations;
+}
+export function createShaderGradientRenderer(canvas) {
+    const gl = canvas.getContext("webgl2", {
+        antialias: true,
+        alpha: false
+    }) ?? canvas.getContext("webgl", {
+        antialias: true,
+        alpha: false
+    });
+    if (!gl) return null;
+    const plane = createPlane();
+    const meshProgram = link(gl, MESH_VERTEX_SHADER, MESH_FRAGMENT_SHADER);
+    const meshUniforms = uniformLocations(gl, meshProgram, [
+        "uProjectionMatrix",
+        "uViewMatrix",
+        "uModelMatrix",
+        "uTime",
+        "uSpeed",
+        "uNoiseDensity",
+        "uNoiseStrength",
+        "uC1",
+        "uC2",
+        "uC3",
+        "uBrightness",
+        "uFoldRange"
+    ]);
+    const meshPositionAttribute = gl.getAttribLocation(meshProgram, "position");
+    const halftoneProgram = link(gl, QUAD_VERTEX_SHADER, HALFTONE_FRAGMENT_SHADER);
+    const halftoneUniforms = uniformLocations(gl, halftoneProgram, [
+        "tDiffuse",
+        "uRadius",
+        "uRotateR",
+        "uRotateG",
+        "uRotateB",
+        "uScatter",
+        "uWidth",
+        "uHeight"
+    ]);
+    const halftonePositionAttribute = gl.getAttribLocation(halftoneProgram, "position");
+    const positionBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, plane.positions, gl.STATIC_DRAW);
+    const indexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, plane.indices, gl.STATIC_DRAW);
+    const quadBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+        -1,
+        -1,
+        3,
+        -1,
+        -1,
+        3
+    ]), gl.STATIC_DRAW);
+    const targetTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, targetTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const framebuffer = gl.createFramebuffer();
+    let width = 1;
+    let height = 1;
+    const setSize = (nextWidth, nextHeight)=>{
+        width = Math.max(1, Math.floor(nextWidth));
+        height = Math.max(1, Math.floor(nextHeight));
+        canvas.width = width;
+        canvas.height = height;
+        gl.bindTexture(gl.TEXTURE_2D, targetTexture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, targetTexture, 0);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    };
+    const render = (uniforms, time)=>{
+        const aspect = width / height;
+        const halfHeight = Math.min(Math.tan(uniforms.fov * DEG_TO_RAD / 2) * uniforms.cDistance, MAX_VISIBLE_HALF_WIDTH / aspect);
+        const cornerRadius = Math.hypot(halfHeight * aspect, halfHeight);
+        const distance = Math.max(uniforms.cDistance, cornerRadius / Math.tan(MAX_CORNER_RAY_DEGREES * DEG_TO_RAD));
+        const fov = 2 * Math.atan(halfHeight / distance) / DEG_TO_RAD;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, uniforms.grain ? framebuffer : null);
+        gl.viewport(0, 0, width, height);
+        gl.clearColor(uniforms.bgColor[0], uniforms.bgColor[1], uniforms.bgColor[2], 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.useProgram(meshProgram);
+        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+        gl.enableVertexAttribArray(meshPositionAttribute);
+        gl.vertexAttribPointer(meshPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+        gl.uniformMatrix4fv(meshUniforms.uProjectionMatrix, false, perspective(fov, aspect, 0.1, 1000));
+        gl.uniformMatrix4fv(meshUniforms.uViewMatrix, false, orbitView(distance, uniforms.cPolarAngle, uniforms.cAzimuthAngle));
+        gl.uniformMatrix4fv(meshUniforms.uModelMatrix, false, modelMatrix([
+            uniforms.positionX,
+            uniforms.positionY,
+            uniforms.positionZ
+        ], [
+            uniforms.rotationX,
+            uniforms.rotationY,
+            uniforms.rotationZ
+        ]));
+        gl.uniform1f(meshUniforms.uTime, time);
+        gl.uniform1f(meshUniforms.uSpeed, uniforms.uSpeed);
+        gl.uniform1f(meshUniforms.uNoiseDensity, uniforms.uDensity);
+        gl.uniform1f(meshUniforms.uNoiseStrength, uniforms.uStrength);
+        gl.uniform3fv(meshUniforms.uC1, uniforms.color1);
+        gl.uniform3fv(meshUniforms.uC2, uniforms.color2);
+        gl.uniform3fv(meshUniforms.uC3, uniforms.color3);
+        gl.uniform1f(meshUniforms.uBrightness, uniforms.brightness);
+        gl.uniform1f(meshUniforms.uFoldRange, 0.75 * uniforms.uStrength);
+        gl.drawElements(gl.TRIANGLES, plane.indices.length, gl.UNSIGNED_SHORT, 0);
+        if (!uniforms.grain) return;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.viewport(0, 0, width, height);
+        gl.useProgram(halftoneProgram);
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+        gl.enableVertexAttribArray(halftonePositionAttribute);
+        gl.vertexAttribPointer(halftonePositionAttribute, 2, gl.FLOAT, false, 0, 0);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, targetTexture);
+        gl.uniform1i(halftoneUniforms.tDiffuse, 0);
+        gl.uniform1f(halftoneUniforms.uRadius, uniforms.grainRadius);
+        gl.uniform1f(halftoneUniforms.uRotateR, HALFTONE_ROTATION.r);
+        gl.uniform1f(halftoneUniforms.uRotateG, HALFTONE_ROTATION.g);
+        gl.uniform1f(halftoneUniforms.uRotateB, HALFTONE_ROTATION.b);
+        gl.uniform1f(halftoneUniforms.uScatter, HALFTONE_SCATTER);
+        gl.uniform1f(halftoneUniforms.uWidth, width);
+        gl.uniform1f(halftoneUniforms.uHeight, height);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+    };
+    const destroy = ()=>{
+        gl.deleteBuffer(positionBuffer);
+        gl.deleteBuffer(indexBuffer);
+        gl.deleteBuffer(quadBuffer);
+        gl.deleteTexture(targetTexture);
+        gl.deleteFramebuffer(framebuffer);
+        gl.deleteProgram(meshProgram);
+        gl.deleteProgram(halftoneProgram);
+        gl.getExtension("WEBGL_lose_context")?.loseContext();
+    };
+    return {
+        setSize,
+        render,
+        destroy
+    };
+}