@xpert-ai/plugin-motion 0.1.0

package/dist/assets/upstream/recipes/imported/pixel-trail/PixelTrail.jsx

@@ -0,0 +1,139 @@
+/* eslint-disable react/no-unknown-property */
+import { useMemo } from 'react';
+import { Canvas, useThree } from '@react-three/fiber';
+import { shaderMaterial, useTrailTexture } from '@react-three/drei';
+import * as THREE from 'three';
+
+import './PixelTrail.css';
+
+const GooeyFilter = ({ id = 'goo-filter', strength = 10 }) => {
+  return (
+    <svg className="goo-filter-container">
+      <defs>
+        <filter id={id}>
+          <feGaussianBlur in="SourceGraphic" stdDeviation={strength} result="blur" />
+          <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
+          <feComposite in="SourceGraphic" in2="goo" operator="atop" />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
+
+const DotMaterial = shaderMaterial(
+  {
+    resolution: new THREE.Vector2(),
+    mouseTrail: null,
+    gridSize: 100,
+    pixelColor: new THREE.Color('#ffffff')
+  },
+  `
+    varying vec2 vUv;
+    void main() {
+      gl_Position = vec4(position.xy, 0.0, 1.0);
+    }
+  `,
+  `
+    uniform vec2 resolution;
+    uniform sampler2D mouseTrail;
+    uniform float gridSize;
+    uniform vec3 pixelColor;
+
+    vec2 coverUv(vec2 uv) {
+      vec2 s = resolution.xy / max(resolution.x, resolution.y);
+      vec2 newUv = (uv - 0.5) * s + 0.5;
+      return clamp(newUv, 0.0, 1.0);
+    }
+
+    float sdfCircle(vec2 p, float r) {
+        return length(p - 0.5) - r;
+    }
+
+    void main() {
+      vec2 screenUv = gl_FragCoord.xy / resolution;
+      vec2 uv = coverUv(screenUv);
+
+      vec2 gridUv = fract(uv * gridSize);
+      vec2 gridUvCenter = (floor(uv * gridSize) + 0.5) / gridSize;
+
+      float trail = texture2D(mouseTrail, gridUvCenter).r;
+
+      gl_FragColor = vec4(pixelColor, trail);
+    }
+  `
+);
+
+function Scene({ gridSize, trailSize, maxAge, interpolate, easingFunction, pixelColor }) {
+  const size = useThree(s => s.size);
+  const viewport = useThree(s => s.viewport);
+
+  const dotMaterial = useMemo(() => new DotMaterial(), []);
+  dotMaterial.uniforms.pixelColor.value = new THREE.Color(pixelColor);
+
+  const [trail, onMove] = useTrailTexture({
+    size: 512,
+    radius: trailSize,
+    maxAge: maxAge,
+    interpolate: interpolate || 0.1,
+    ease: easingFunction || (x => x)
+  });
+
+  if (trail) {
+    trail.minFilter = THREE.NearestFilter;
+    trail.magFilter = THREE.NearestFilter;
+    trail.wrapS = THREE.ClampToEdgeWrapping;
+    trail.wrapT = THREE.ClampToEdgeWrapping;
+  }
+
+  const scale = Math.max(viewport.width, viewport.height) / 2;
+
+  return (
+    <mesh scale={[scale, scale, 1]} onPointerMove={onMove}>
+      <planeGeometry args={[2, 2]} />
+      <primitive
+        object={dotMaterial}
+        gridSize={gridSize}
+        resolution={[size.width * viewport.dpr, size.height * viewport.dpr]}
+        mouseTrail={trail}
+      />
+    </mesh>
+  );
+}
+
+export default function PixelTrail({
+  gridSize = 40,
+  trailSize = 0.1,
+  maxAge = 250,
+  interpolate = 5,
+  easingFunction = x => x,
+  canvasProps = {},
+  glProps = {
+    antialias: false,
+    powerPreference: 'high-performance',
+    alpha: true
+  },
+  gooeyFilter,
+  color = '#ffffff',
+  className = ''
+}) {
+  return (
+    <>
+      {gooeyFilter && <GooeyFilter id={gooeyFilter.id} strength={gooeyFilter.strength} />}
+      <Canvas
+        {...canvasProps}
+        gl={glProps}
+        className={`pixel-canvas ${className}`}
+        style={gooeyFilter && { filter: `url(#${gooeyFilter.id})` }}
+      >
+        <Scene
+          gridSize={gridSize}
+          trailSize={trailSize}
+          maxAge={maxAge}
+          interpolate={interpolate}
+          easingFunction={easingFunction}
+          pixelColor={color}
+        />
+      </Canvas>
+    </>
+  );
+}

package/dist/assets/upstream/recipes/imported/pixel-transition/PixelTransition.css

@@ -0,0 +1,43 @@
+.pixelated-image-card {
+  background-color: #222;
+  color: var(--color-primary, #fff);
+  border-radius: 15px;
+  border: 2px solid #fff;
+  width: 300px;
+  max-width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.pixelated-image-card__default,
+.pixelated-image-card__active,
+.pixelated-image-card__pixels {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.pixelated-image-card__active {
+  z-index: 2;
+}
+
+.pixelated-image-card__active {
+  display: none;
+}
+
+.pixelated-image-card__pixels {
+  pointer-events: none;
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.pixelated-image-card__pixel {
+  display: none;
+  position: absolute;
+}

package/dist/assets/upstream/recipes/imported/pixel-transition/PixelTransition.jsx

@@ -0,0 +1,128 @@
+import { useRef, useEffect, useState } from 'react';
+import { gsap } from 'gsap';
+import './PixelTransition.css';
+
+function PixelTransition({
+  firstContent,
+  secondContent,
+  gridSize = 7,
+  pixelColor = 'currentColor',
+  animationStepDuration = 0.3,
+  once = false,
+  aspectRatio = '100%',
+  className = '',
+  style = {}
+}) {
+  const containerRef = useRef(null);
+  const pixelGridRef = useRef(null);
+  const activeRef = useRef(null);
+  const delayedCallRef = useRef(null);
+
+  const [isActive, setIsActive] = useState(false);
+
+  const isTouchDevice =
+    'ontouchstart' in window || navigator.maxTouchPoints > 0 || window.matchMedia('(pointer: coarse)').matches;
+
+  useEffect(() => {
+    const pixelGridEl = pixelGridRef.current;
+    if (!pixelGridEl) return;
+
+    pixelGridEl.innerHTML = '';
+
+    for (let row = 0; row < gridSize; row++) {
+      for (let col = 0; col < gridSize; col++) {
+        const pixel = document.createElement('div');
+        pixel.classList.add('pixelated-image-card__pixel');
+        pixel.style.backgroundColor = pixelColor;
+
+        const size = 100 / gridSize;
+        pixel.style.width = `${size}%`;
+        pixel.style.height = `${size}%`;
+        pixel.style.left = `${col * size}%`;
+        pixel.style.top = `${row * size}%`;
+        pixelGridEl.appendChild(pixel);
+      }
+    }
+  }, [gridSize, pixelColor]);
+
+  const animatePixels = activate => {
+    setIsActive(activate);
+
+    const pixelGridEl = pixelGridRef.current;
+    const activeEl = activeRef.current;
+    if (!pixelGridEl || !activeEl) return;
+
+    const pixels = pixelGridEl.querySelectorAll('.pixelated-image-card__pixel');
+    if (!pixels.length) return;
+
+    gsap.killTweensOf(pixels);
+    if (delayedCallRef.current) {
+      delayedCallRef.current.kill();
+    }
+
+    gsap.set(pixels, { display: 'none' });
+
+    const totalPixels = pixels.length;
+    const staggerDuration = animationStepDuration / totalPixels;
+
+    gsap.to(pixels, {
+      display: 'block',
+      duration: 0,
+      stagger: {
+        each: staggerDuration,
+        from: 'random'
+      }
+    });
+
+    delayedCallRef.current = gsap.delayedCall(animationStepDuration, () => {
+      activeEl.style.display = activate ? 'block' : 'none';
+      activeEl.style.pointerEvents = activate ? 'none' : '';
+    });
+
+    gsap.to(pixels, {
+      display: 'none',
+      duration: 0,
+      delay: animationStepDuration,
+      stagger: {
+        each: staggerDuration,
+        from: 'random'
+      }
+    });
+  };
+
+  const handleEnter = () => {
+    if (!isActive) animatePixels(true);
+  };
+  const handleLeave = () => {
+    if (isActive && !once) animatePixels(false);
+  };
+  const handleClick = () => {
+    if (!isActive) animatePixels(true);
+    else if (isActive && !once) animatePixels(false);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`pixelated-image-card ${className}`}
+      style={style}
+      onMouseEnter={!isTouchDevice ? handleEnter : undefined}
+      onMouseLeave={!isTouchDevice ? handleLeave : undefined}
+      onClick={isTouchDevice ? handleClick : undefined}
+      onFocus={!isTouchDevice ? handleEnter : undefined}
+      onBlur={!isTouchDevice ? handleLeave : undefined}
+      tabIndex={0}
+    >
+      <div style={{ paddingTop: aspectRatio }} />
+      <div className="pixelated-image-card__default" aria-hidden={isActive}>
+        {firstContent}
+      </div>
+      <div className="pixelated-image-card__active" ref={activeRef} aria-hidden={!isActive}>
+        {secondContent}
+      </div>
+      <div className="pixelated-image-card__pixels" ref={pixelGridRef} />
+    </div>
+  );
+}
+
+export default PixelTransition;

package/dist/assets/upstream/recipes/imported/plasma/Plasma.css

@@ -0,0 +1,6 @@
+.plasma-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}

package/dist/assets/upstream/recipes/imported/plasma/Plasma.jsx

@@ -0,0 +1,240 @@
+import { useEffect, useRef } from 'react';
+import { Renderer, Program, Mesh, Triangle } from 'ogl';
+import './Plasma.css';
+
+const hexToRgb = hex => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return [1, 0.5, 0.2];
+  return [parseInt(result[1], 16) / 255, parseInt(result[2], 16) / 255, parseInt(result[3], 16) / 255];
+};
+
+const vertex = `#version 300 es
+precision highp float;
+in vec2 position;
+in vec2 uv;
+out vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const fragment = `#version 300 es
+precision highp float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform vec3 uCustomColor;
+uniform float uUseCustomColor;
+uniform float uSpeed;
+uniform float uDirection;
+uniform float uScale;
+uniform float uOpacity;
+uniform vec2 uMouse;
+uniform float uMouseInteractive;
+out vec4 fragColor;
+
+void mainImage(out vec4 o, vec2 C) {
+  vec2 center = iResolution.xy * 0.5;
+  C = (C - center) / uScale + center;
+  
+  vec2 mouseOffset = (uMouse - center) * 0.0002;
+  C += mouseOffset * length(C - center) * step(0.5, uMouseInteractive);
+  
+  float i, d, z, T = iTime * uSpeed * uDirection;
+  vec3 O, p, S;
+
+  for (vec2 r = iResolution.xy, Q; ++i < 60.; O += o.w/d*o.xyz) {
+    p = z*normalize(vec3(C-.5*r,r.y)); 
+    p.z -= 4.; 
+    S = p;
+    d = p.y-T;
+    
+    p.x += .4*(1.+p.y)*sin(d + p.x*0.1)*cos(.34*d + p.x*0.05); 
+    Q = p.xz *= mat2(cos(p.y+vec4(0,11,33,0)-T)); 
+    z+= d = abs(sqrt(length(Q*Q)) - .25*(5.+S.y))/3.+8e-4; 
+    o = 1.+sin(S.y+p.z*.5+S.z-length(S-p)+vec4(2,1,0,8));
+  }
+  
+  o.xyz = tanh(O/1e4);
+}
+
+bool finite1(float x){ return !(isnan(x) || isinf(x)); }
+vec3 sanitize(vec3 c){
+  return vec3(
+    finite1(c.r) ? c.r : 0.0,
+    finite1(c.g) ? c.g : 0.0,
+    finite1(c.b) ? c.b : 0.0
+  );
+}
+
+void main() {
+  vec4 o = vec4(0.0);
+  mainImage(o, gl_FragCoord.xy);
+  vec3 rgb = sanitize(o.rgb);
+  
+  float intensity = (rgb.r + rgb.g + rgb.b) / 3.0;
+  vec3 customColor = intensity * uCustomColor;
+  vec3 finalColor = mix(rgb, customColor, step(0.5, uUseCustomColor));
+  
+  float alpha = length(rgb) * uOpacity;
+  fragColor = vec4(finalColor, alpha);
+}`;
+
+export const Plasma = ({
+  color = '#ffffff',
+  speed = 1,
+  direction = 'forward',
+  scale = 1,
+  opacity = 1,
+  mouseInteractive = true
+}) => {
+  const containerRef = useRef(null);
+  const mousePos = useRef({ x: 0, y: 0 });
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const containerEl = containerRef.current;
+
+    const useCustomColor = color ? 1.0 : 0.0;
+    const customColorRgb = color ? hexToRgb(color) : [1, 1, 1];
+
+    const directionMultiplier = direction === 'reverse' ? -1.0 : 1.0;
+
+    let renderer;
+    try {
+      renderer = new Renderer({
+        webgl: 2,
+        alpha: true,
+        antialias: false,
+        dpr: Math.min(window.devicePixelRatio || 1, 2)
+      });
+    } catch {
+      return;
+    }
+    const gl = renderer.gl;
+    if (!gl) return;
+    const canvas = gl.canvas;
+    canvas.style.display = 'block';
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    containerEl.appendChild(canvas);
+
+    const geometry = new Triangle(gl);
+
+    const program = new Program(gl, {
+      vertex: vertex,
+      fragment: fragment,
+      uniforms: {
+        iTime: { value: 0 },
+        iResolution: { value: new Float32Array([1, 1]) },
+        uCustomColor: { value: new Float32Array(customColorRgb) },
+        uUseCustomColor: { value: useCustomColor },
+        uSpeed: { value: speed * 0.4 },
+        uDirection: { value: directionMultiplier },
+        uScale: { value: scale },
+        uOpacity: { value: opacity },
+        uMouse: { value: new Float32Array([0, 0]) },
+        uMouseInteractive: { value: mouseInteractive ? 1.0 : 0.0 }
+      }
+    });
+
+    const mesh = new Mesh(gl, { geometry, program });
+
+    const handleMouseMove = e => {
+      if (!mouseInteractive) return;
+      const rect = containerEl.getBoundingClientRect();
+      mousePos.current.x = e.clientX - rect.left;
+      mousePos.current.y = e.clientY - rect.top;
+      const mouseUniform = program.uniforms.uMouse.value;
+      mouseUniform[0] = mousePos.current.x;
+      mouseUniform[1] = mousePos.current.y;
+    };
+
+    if (mouseInteractive) {
+      containerEl.addEventListener('mousemove', handleMouseMove);
+    }
+
+    const setSize = () => {
+      const rect = containerEl.getBoundingClientRect();
+      const width = Math.max(1, Math.floor(rect.width));
+      const height = Math.max(1, Math.floor(rect.height));
+      renderer.setSize(width, height);
+      const res = program.uniforms.iResolution.value;
+      res[0] = gl.drawingBufferWidth;
+      res[1] = gl.drawingBufferHeight;
+    };
+
+    const ro = new ResizeObserver(setSize);
+    ro.observe(containerEl);
+    setSize();
+
+    let raf = 0;
+    let contextLost = false;
+    let isVisible = true;
+    const t0 = performance.now();
+
+    const loop = t => {
+      if (contextLost || !isVisible) return;
+      let timeValue = (t - t0) * 0.001;
+      if (direction === 'pingpong') {
+        const pingpongDuration = 10;
+        const segmentTime = timeValue % pingpongDuration;
+        const isForward = Math.floor(timeValue / pingpongDuration) % 2 === 0;
+        const u = segmentTime / pingpongDuration;
+        const smooth = u * u * (3 - 2 * u);
+        const pingpongTime = isForward ? smooth * pingpongDuration : (1 - smooth) * pingpongDuration;
+        program.uniforms.uDirection.value = 1.0;
+        program.uniforms.iTime.value = pingpongTime;
+      } else {
+        program.uniforms.iTime.value = timeValue;
+      }
+      renderer.render({ scene: mesh });
+      raf = requestAnimationFrame(loop);
+    };
+
+    const handleContextLost = (e) => {
+      e.preventDefault();
+      contextLost = true;
+      cancelAnimationFrame(raf);
+    };
+    const handleContextRestored = () => {
+      contextLost = false;
+      if (isVisible) {
+        cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(loop);
+      }
+    };
+    canvas.addEventListener('webglcontextlost', handleContextLost);
+    canvas.addEventListener('webglcontextrestored', handleContextRestored);
+
+    const io = new IntersectionObserver(([entry]) => {
+      const wasVisible = isVisible;
+      isVisible = entry.isIntersecting;
+      if (isVisible && !wasVisible && !contextLost) {
+        cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(loop);
+      }
+    }, { threshold: 0 });
+    io.observe(containerEl);
+
+    raf = requestAnimationFrame(loop);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      io.disconnect();
+      canvas.removeEventListener('webglcontextlost', handleContextLost);
+      canvas.removeEventListener('webglcontextrestored', handleContextRestored);
+      if (mouseInteractive && containerEl) {
+        containerEl.removeEventListener('mousemove', handleMouseMove);
+      }
+      try {
+        containerEl?.removeChild(canvas);
+      } catch {}
+    };
+  }, [color, speed, direction, scale, opacity, mouseInteractive]);
+
+  return <div ref={containerRef} className="plasma-container" />;
+};
+
+export default Plasma;

package/dist/assets/upstream/recipes/imported/plasma-wave/PlasmaWave.css

@@ -0,0 +1,4 @@
+.plasma-wave-container {
+  width: 100%;
+  height: 100%;
+}