@xpert-ai/plugin-motion 0.1.0

package/assets/upstream/recipes/imported/pixel-card/PixelCard.jsx

@@ -0,0 +1,241 @@
+import { useEffect, useRef } from 'react';
+import './PixelCard.css';
+
+class Pixel {
+  constructor(canvas, context, x, y, color, speed, delay) {
+    this.width = canvas.width;
+    this.height = canvas.height;
+    this.ctx = context;
+    this.x = x;
+    this.y = y;
+    this.color = color;
+    this.speed = this.getRandomValue(0.1, 0.9) * speed;
+    this.size = 0;
+    this.sizeStep = Math.random() * 0.4;
+    this.minSize = 0.5;
+    this.maxSizeInteger = 2;
+    this.maxSize = this.getRandomValue(this.minSize, this.maxSizeInteger);
+    this.delay = delay;
+    this.counter = 0;
+    this.counterStep = Math.random() * 4 + (this.width + this.height) * 0.01;
+    this.isIdle = false;
+    this.isReverse = false;
+    this.isShimmer = false;
+  }
+
+  getRandomValue(min, max) {
+    return Math.random() * (max - min) + min;
+  }
+
+  draw() {
+    const centerOffset = this.maxSizeInteger * 0.5 - this.size * 0.5;
+    this.ctx.fillStyle = this.color;
+    this.ctx.fillRect(this.x + centerOffset, this.y + centerOffset, this.size, this.size);
+  }
+
+  appear() {
+    this.isIdle = false;
+    if (this.counter <= this.delay) {
+      this.counter += this.counterStep;
+      return;
+    }
+    if (this.size >= this.maxSize) {
+      this.isShimmer = true;
+    }
+    if (this.isShimmer) {
+      this.shimmer();
+    } else {
+      this.size += this.sizeStep;
+    }
+    this.draw();
+  }
+
+  disappear() {
+    this.isShimmer = false;
+    this.counter = 0;
+    if (this.size <= 0) {
+      this.isIdle = true;
+      return;
+    } else {
+      this.size -= 0.1;
+    }
+    this.draw();
+  }
+
+  shimmer() {
+    if (this.size >= this.maxSize) {
+      this.isReverse = true;
+    } else if (this.size <= this.minSize) {
+      this.isReverse = false;
+    }
+    if (this.isReverse) {
+      this.size -= this.speed;
+    } else {
+      this.size += this.speed;
+    }
+  }
+}
+
+function getEffectiveSpeed(value, reducedMotion) {
+  const min = 0;
+  const max = 100;
+  const throttle = 0.001;
+  const parsed = parseInt(value, 10);
+
+  if (parsed <= min || reducedMotion) {
+    return min;
+  } else if (parsed >= max) {
+    return max * throttle;
+  } else {
+    return parsed * throttle;
+  }
+}
+
+const VARIANTS = {
+  default: {
+    activeColor: null,
+    gap: 5,
+    speed: 35,
+    colors: '#f8fafc,#f1f5f9,#cbd5e1',
+    noFocus: false
+  },
+  blue: {
+    activeColor: '#e0f2fe',
+    gap: 10,
+    speed: 25,
+    colors: '#e0f2fe,#7dd3fc,#0ea5e9',
+    noFocus: false
+  },
+  yellow: {
+    activeColor: '#fef08a',
+    gap: 3,
+    speed: 20,
+    colors: '#fef08a,#fde047,#eab308',
+    noFocus: false
+  },
+  pink: {
+    activeColor: '#fecdd3',
+    gap: 6,
+    speed: 80,
+    colors: '#fecdd3,#fda4af,#e11d48',
+    noFocus: true
+  }
+};
+
+export default function PixelCard({ variant = 'default', gap, speed, colors, noFocus, className = '', children }) {
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const pixelsRef = useRef([]);
+  const animationRef = useRef(null);
+  const timePreviousRef = useRef(performance.now());
+  const reducedMotion = useRef(window.matchMedia('(prefers-reduced-motion: reduce)').matches).current;
+
+  const variantCfg = VARIANTS[variant] || VARIANTS.default;
+  const finalGap = gap ?? variantCfg.gap;
+  const finalSpeed = speed ?? variantCfg.speed;
+  const finalColors = colors ?? variantCfg.colors;
+  const finalNoFocus = noFocus ?? variantCfg.noFocus;
+
+  const initPixels = () => {
+    if (!containerRef.current || !canvasRef.current) return;
+
+    const rect = containerRef.current.getBoundingClientRect();
+    const width = Math.floor(rect.width);
+    const height = Math.floor(rect.height);
+    const ctx = canvasRef.current.getContext('2d');
+
+    canvasRef.current.width = width;
+    canvasRef.current.height = height;
+    canvasRef.current.style.width = `${width}px`;
+    canvasRef.current.style.height = `${height}px`;
+
+    const colorsArray = finalColors.split(',');
+    const pxs = [];
+    for (let x = 0; x < width; x += parseInt(finalGap, 10)) {
+      for (let y = 0; y < height; y += parseInt(finalGap, 10)) {
+        const color = colorsArray[Math.floor(Math.random() * colorsArray.length)];
+
+        const dx = x - width / 2;
+        const dy = y - height / 2;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const delay = reducedMotion ? 0 : distance;
+
+        pxs.push(new Pixel(canvasRef.current, ctx, x, y, color, getEffectiveSpeed(finalSpeed, reducedMotion), delay));
+      }
+    }
+    pixelsRef.current = pxs;
+  };
+
+  const doAnimate = fnName => {
+    animationRef.current = requestAnimationFrame(() => doAnimate(fnName));
+    const timeNow = performance.now();
+    const timePassed = timeNow - timePreviousRef.current;
+    const timeInterval = 1000 / 60;
+
+    if (timePassed < timeInterval) return;
+    timePreviousRef.current = timeNow - (timePassed % timeInterval);
+
+    const ctx = canvasRef.current?.getContext('2d');
+    if (!ctx || !canvasRef.current) return;
+
+    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+
+    let allIdle = true;
+    for (let i = 0; i < pixelsRef.current.length; i++) {
+      const pixel = pixelsRef.current[i];
+      pixel[fnName]();
+      if (!pixel.isIdle) {
+        allIdle = false;
+      }
+    }
+    if (allIdle) {
+      cancelAnimationFrame(animationRef.current);
+    }
+  };
+
+  const handleAnimation = name => {
+    cancelAnimationFrame(animationRef.current);
+    animationRef.current = requestAnimationFrame(() => doAnimate(name));
+  };
+
+  const onMouseEnter = () => handleAnimation('appear');
+  const onMouseLeave = () => handleAnimation('disappear');
+  const onFocus = e => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    handleAnimation('appear');
+  };
+  const onBlur = e => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    handleAnimation('disappear');
+  };
+
+  useEffect(() => {
+    initPixels();
+    const observer = new ResizeObserver(() => {
+      initPixels();
+    });
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(animationRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [finalGap, finalSpeed, finalColors, finalNoFocus]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`pixel-card ${className}`}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onFocus={finalNoFocus ? undefined : onFocus}
+      onBlur={finalNoFocus ? undefined : onBlur}
+      tabIndex={finalNoFocus ? -1 : 0}
+    >
+      <canvas className="pixel-canvas" ref={canvasRef} />
+      {children}
+    </div>
+  );
+}

package/assets/upstream/recipes/imported/pixel-snow/PixelSnow.css

@@ -0,0 +1,16 @@
+.pixel-snow-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  contain: layout style paint;
+}
+
+.pixel-snow-container canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  transform: translateZ(0);
+  will-change: transform;
+  backface-visibility: hidden;
+}

package/assets/upstream/recipes/imported/pixel-snow/PixelSnow.jsx

@@ -0,0 +1,356 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  Color,
+  Mesh,
+  OrthographicCamera,
+  PlaneGeometry,
+  Scene,
+  ShaderMaterial,
+  Vector2,
+  Vector3,
+  WebGLRenderer
+} from 'three';
+
+import './PixelSnow.css';
+
+const vertexShader = `
+void main() {
+  gl_Position = vec4(position, 1.0);
+}
+`;
+
+const fragmentShader = `
+precision mediump float;
+
+uniform float uTime;
+uniform vec2 uResolution;
+uniform float uFlakeSize;
+uniform float uMinFlakeSize;
+uniform float uPixelResolution;
+uniform float uSpeed;
+uniform float uDepthFade;
+uniform float uFarPlane;
+uniform vec3 uColor;
+uniform float uBrightness;
+uniform float uGamma;
+uniform float uDensity;
+uniform float uVariant;
+uniform float uDirection;
+
+// Precomputed constants
+#define PI 3.14159265
+#define PI_OVER_6 0.5235988
+#define PI_OVER_3 1.0471976
+#define INV_SQRT3 0.57735027
+#define M1 1597334677U
+#define M2 3812015801U
+#define M3 3299493293U
+#define F0 2.3283064e-10
+
+// Optimized hash - inline multiplication
+#define hash(n) (n * (n ^ (n >> 15)))
+#define coord3(p) (uvec3(p).x * M1 ^ uvec3(p).y * M2 ^ uvec3(p).z * M3)
+
+// Precomputed camera basis vectors (normalized vec3(1,1,1), vec3(1,0,-1))
+const vec3 camK = vec3(0.57735027, 0.57735027, 0.57735027);
+const vec3 camI = vec3(0.70710678, 0.0, -0.70710678);
+const vec3 camJ = vec3(-0.40824829, 0.81649658, -0.40824829);
+
+// Precomputed branch direction
+const vec2 b1d = vec2(0.574, 0.819);
+
+vec3 hash3(uint n) {
+  uvec3 hashed = hash(n) * uvec3(1U, 511U, 262143U);
+  return vec3(hashed) * F0;
+}
+
+float snowflakeDist(vec2 p) {
+  float r = length(p);
+  float a = atan(p.y, p.x);
+  a = abs(mod(a + PI_OVER_6, PI_OVER_3) - PI_OVER_6);
+  vec2 q = r * vec2(cos(a), sin(a));
+  float dMain = max(abs(q.y), max(-q.x, q.x - 1.0));
+  float b1t = clamp(dot(q - vec2(0.4, 0.0), b1d), 0.0, 0.4);
+  float dB1 = length(q - vec2(0.4, 0.0) - b1t * b1d);
+  float b2t = clamp(dot(q - vec2(0.7, 0.0), b1d), 0.0, 0.25);
+  float dB2 = length(q - vec2(0.7, 0.0) - b2t * b1d);
+  return min(dMain, min(dB1, dB2)) * 10.0;
+}
+
+void main() {
+  // Precompute reciprocals to avoid division
+  float invPixelRes = 1.0 / uPixelResolution;
+  float pixelSize = max(1.0, floor(0.5 + uResolution.x * invPixelRes));
+  float invPixelSize = 1.0 / pixelSize;
+  
+  vec2 fragCoord = floor(gl_FragCoord.xy * invPixelSize);
+  vec2 res = uResolution * invPixelSize;
+  float invResX = 1.0 / res.x;
+
+  vec3 ray = normalize(vec3((fragCoord - res * 0.5) * invResX, 1.0));
+  ray = ray.x * camI + ray.y * camJ + ray.z * camK;
+
+  // Precompute time-based values
+  float timeSpeed = uTime * uSpeed;
+  float windX = cos(uDirection) * 0.4;
+  float windY = sin(uDirection) * 0.4;
+  vec3 camPos = (windX * camI + windY * camJ + 0.1 * camK) * timeSpeed;
+  vec3 pos = camPos;
+
+  // Precompute ray reciprocal for strides
+  vec3 absRay = max(abs(ray), vec3(0.001));
+  vec3 strides = 1.0 / absRay;
+  vec3 raySign = step(ray, vec3(0.0));
+  vec3 phase = fract(pos) * strides;
+  phase = mix(strides - phase, phase, raySign);
+
+  // Precompute for intersection test
+  float rayDotCamK = dot(ray, camK);
+  float invRayDotCamK = 1.0 / rayDotCamK;
+  float invDepthFade = 1.0 / uDepthFade;
+  float halfInvResX = 0.5 * invResX;
+  vec3 timeAnim = timeSpeed * 0.1 * vec3(7.0, 8.0, 5.0);
+
+  float t = 0.0;
+  for (int i = 0; i < 128; i++) {
+    if (t >= uFarPlane) break;
+    
+    vec3 fpos = floor(pos);
+    uint cellCoord = coord3(fpos);
+    float cellHash = hash3(cellCoord).x;
+
+    if (cellHash < uDensity) {
+      vec3 h = hash3(cellCoord);
+      
+      // Optimized flake position calculation
+      vec3 sinArg1 = fpos.yzx * 0.073;
+      vec3 sinArg2 = fpos.zxy * 0.27;
+      vec3 flakePos = 0.5 - 0.5 * cos(4.0 * sin(sinArg1) + 4.0 * sin(sinArg2) + 2.0 * h + timeAnim);
+      flakePos = flakePos * 0.8 + 0.1 + fpos;
+
+      float toIntersection = dot(flakePos - pos, camK) * invRayDotCamK;
+      
+      if (toIntersection > 0.0) {
+        vec3 testPos = pos + ray * toIntersection - flakePos;
+        float testX = dot(testPos, camI);
+        float testY = dot(testPos, camJ);
+        vec2 testUV = abs(vec2(testX, testY));
+        
+        float depth = dot(flakePos - camPos, camK);
+        float flakeSize = max(uFlakeSize, uMinFlakeSize * depth * halfInvResX);
+        
+        // Avoid branching with step functions where possible
+        float dist;
+        if (uVariant < 0.5) {
+          dist = max(testUV.x, testUV.y);
+        } else if (uVariant < 1.5) {
+          dist = length(testUV);
+        } else {
+          float invFlakeSize = 1.0 / flakeSize;
+          dist = snowflakeDist(vec2(testX, testY) * invFlakeSize) * flakeSize;
+        }
+
+        if (dist < flakeSize) {
+          float flakeSizeRatio = uFlakeSize / flakeSize;
+          float intensity = exp2(-(t + toIntersection) * invDepthFade) *
+                           min(1.0, flakeSizeRatio * flakeSizeRatio) * uBrightness;
+          gl_FragColor = vec4(uColor * pow(vec3(intensity), vec3(uGamma)), 1.0);
+          return;
+        }
+      }
+    }
+
+    float nextStep = min(min(phase.x, phase.y), phase.z);
+    vec3 sel = step(phase, vec3(nextStep));
+    phase = phase - nextStep + strides * sel;
+    t += nextStep;
+    pos = mix(pos + ray * nextStep, floor(pos + ray * nextStep + 0.5), sel);
+  }
+
+  gl_FragColor = vec4(0.0);
+}
+`;
+
+export default function PixelSnow({
+  color = '#ffffff',
+  flakeSize = 0.01,
+  minFlakeSize = 1.25,
+  pixelResolution = 200,
+  speed = 1.25,
+  depthFade = 8,
+  farPlane = 20,
+  brightness = 1,
+  gamma = 0.4545,
+  density = 0.3,
+  variant = 'square',
+  direction = 125,
+  className = '',
+  style = {}
+}) {
+  const containerRef = useRef(null);
+  const animationRef = useRef(0);
+  const isVisibleRef = useRef(true);
+  const rendererRef = useRef(null);
+  const materialRef = useRef(null);
+  const resizeTimeoutRef = useRef(null);
+
+  // Memoize shader variant value
+  const variantValue = useMemo(() => {
+    return variant === 'round' ? 1.0 : variant === 'snowflake' ? 2.0 : 0.0;
+  }, [variant]);
+
+  // Memoize color conversion
+  const colorVector = useMemo(() => {
+    const threeColor = new Color(color);
+    return new Vector3(threeColor.r, threeColor.g, threeColor.b);
+  }, [color]);
+
+  // Debounced resize handler
+  const handleResize = useCallback(() => {
+    if (resizeTimeoutRef.current) {
+      clearTimeout(resizeTimeoutRef.current);
+    }
+    resizeTimeoutRef.current = window.setTimeout(() => {
+      const container = containerRef.current;
+      const renderer = rendererRef.current;
+      const material = materialRef.current;
+      if (!container || !renderer || !material) return;
+
+      const w = container.offsetWidth;
+      const h = container.offsetHeight;
+      renderer.setSize(w, h);
+      material.uniforms.uResolution.value.set(w, h);
+    }, 100);
+  }, []);
+
+  // Visibility observer
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        isVisibleRef.current = entry.isIntersecting;
+      },
+      { threshold: 0 }
+    );
+
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  // Main Three.js setup - only runs once
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const scene = new Scene();
+    const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const renderer = new WebGLRenderer({
+      antialias: false,
+      alpha: true,
+      premultipliedAlpha: false,
+      powerPreference: 'high-performance',
+      stencil: false,
+      depth: false
+    });
+
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.setSize(container.offsetWidth, container.offsetHeight);
+    renderer.setClearColor(0x000000, 0);
+    container.appendChild(renderer.domElement);
+    rendererRef.current = renderer;
+
+    const material = new ShaderMaterial({
+      vertexShader,
+      fragmentShader,
+      uniforms: {
+        uTime: { value: 0 },
+        uResolution: { value: new Vector2(container.offsetWidth, container.offsetHeight) },
+        uFlakeSize: { value: flakeSize },
+        uMinFlakeSize: { value: minFlakeSize },
+        uPixelResolution: { value: pixelResolution },
+        uSpeed: { value: speed },
+        uDepthFade: { value: depthFade },
+        uFarPlane: { value: farPlane },
+        uColor: { value: colorVector.clone() },
+        uBrightness: { value: brightness },
+        uGamma: { value: gamma },
+        uDensity: { value: density },
+        uVariant: { value: variantValue },
+        uDirection: { value: (direction * Math.PI) / 180 }
+      },
+      transparent: true
+    });
+    materialRef.current = material;
+
+    const geometry = new PlaneGeometry(2, 2);
+    scene.add(new Mesh(geometry, material));
+
+    window.addEventListener('resize', handleResize);
+
+    const startTime = performance.now();
+    const animate = () => {
+      animationRef.current = requestAnimationFrame(animate);
+
+      // Only render if visible
+      if (isVisibleRef.current) {
+        material.uniforms.uTime.value = (performance.now() - startTime) * 0.001;
+        renderer.render(scene, camera);
+      }
+    };
+    animate();
+
+    return () => {
+      cancelAnimationFrame(animationRef.current);
+      window.removeEventListener('resize', handleResize);
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+      if (container.contains(renderer.domElement)) {
+        container.removeChild(renderer.domElement);
+      }
+      renderer.dispose();
+      renderer.forceContextLoss();
+      geometry.dispose();
+      material.dispose();
+      rendererRef.current = null;
+      materialRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleResize]); // Only recreate scene when handleResize changes
+
+  // Update material uniforms when props change
+  useEffect(() => {
+    const material = materialRef.current;
+    if (!material) return;
+
+    material.uniforms.uFlakeSize.value = flakeSize;
+    material.uniforms.uMinFlakeSize.value = minFlakeSize;
+    material.uniforms.uPixelResolution.value = pixelResolution;
+    material.uniforms.uSpeed.value = speed;
+    material.uniforms.uDepthFade.value = depthFade;
+    material.uniforms.uFarPlane.value = farPlane;
+    material.uniforms.uBrightness.value = brightness;
+    material.uniforms.uGamma.value = gamma;
+    material.uniforms.uDensity.value = density;
+    material.uniforms.uVariant.value = variantValue;
+    material.uniforms.uDirection.value = (direction * Math.PI) / 180;
+    material.uniforms.uColor.value.copy(colorVector);
+  }, [
+    flakeSize,
+    minFlakeSize,
+    pixelResolution,
+    speed,
+    depthFade,
+    farPlane,
+    brightness,
+    gamma,
+    density,
+    variantValue,
+    direction,
+    colorVector
+  ]);
+
+  return <div ref={containerRef} className={`pixel-snow-container ${className}`} style={style} />;
+}

package/assets/upstream/recipes/imported/pixel-trail/PixelTrail.css

@@ -0,0 +1,10 @@
+.goo-filter-container {
+  position: absolute;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.pixel-canvas {
+  position: absolute;
+  z-index: 1;
+}