@xpert-ai/plugin-motion 0.1.0

package/dist/assets/upstream/recipes/imported/evil-eye/EvilEye.jsx

@@ -0,0 +1,266 @@
+import { Renderer, Program, Mesh, Triangle, Texture } from 'ogl';
+import { useEffect, useRef } from 'react';
+import './EvilEye.css';
+
+function hexToVec3(hex) {
+  const h = hex.replace('#', '');
+  return [
+    parseInt(h.slice(0, 2), 16) / 255,
+    parseInt(h.slice(2, 4), 16) / 255,
+    parseInt(h.slice(4, 6), 16) / 255
+  ];
+}
+
+function generateNoiseTexture(size = 256) {
+  const data = new Uint8Array(size * size * 4);
+
+  function hash(x, y, s) {
+    let n = x * 374761393 + y * 668265263 + s * 1274126177;
+    n = Math.imul(n ^ (n >>> 13), 1274126177);
+    return ((n ^ (n >>> 16)) >>> 0) / 4294967296;
+  }
+
+  function noise(px, py, freq, seed) {
+    const fx = (px / size) * freq;
+    const fy = (py / size) * freq;
+    const ix = Math.floor(fx);
+    const iy = Math.floor(fy);
+    const tx = fx - ix;
+    const ty = fy - iy;
+    const w = freq | 0;
+    const v00 = hash(((ix % w) + w) % w, ((iy % w) + w) % w, seed);
+    const v10 = hash((((ix + 1) % w) + w) % w, ((iy % w) + w) % w, seed);
+    const v01 = hash(((ix % w) + w) % w, (((iy + 1) % w) + w) % w, seed);
+    const v11 = hash((((ix + 1) % w) + w) % w, (((iy + 1) % w) + w) % w, seed);
+    return v00 * (1 - tx) * (1 - ty) + v10 * tx * (1 - ty) + v01 * (1 - tx) * ty + v11 * tx * ty;
+  }
+
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      let v = 0;
+      let amp = 0.4;
+      let totalAmp = 0;
+      for (let o = 0; o < 8; o++) {
+        const f = 32 * (1 << o);
+        v += amp * noise(x, y, f, o * 31);
+        totalAmp += amp;
+        amp *= 0.65;
+      }
+      v /= totalAmp;
+      v = (v - 0.5) * 2.2 + 0.5;
+      v = Math.max(0, Math.min(1, v));
+      const val = Math.round(v * 255);
+      const i = (y * size + x) * 4;
+      data[i] = val;
+      data[i + 1] = val;
+      data[i + 2] = val;
+      data[i + 3] = 255;
+    }
+  }
+
+  return data;
+}
+
+const vertexShader = `
+attribute vec2 uv;
+attribute vec2 position;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0, 1);
+}
+`;
+
+const fragmentShader = `
+precision highp float;
+
+uniform float uTime;
+uniform vec3 uResolution;
+uniform sampler2D uNoiseTexture;
+uniform float uPupilSize;
+uniform float uIrisWidth;
+uniform float uGlowIntensity;
+uniform float uIntensity;
+uniform float uScale;
+uniform float uNoiseScale;
+uniform vec2 uMouse;
+uniform float uPupilFollow;
+uniform float uFlameSpeed;
+uniform vec3 uEyeColor;
+uniform vec3 uBgColor;
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy * 2.0 - uResolution.xy) / uResolution.y;
+  uv /= uScale;
+  float ft = uTime * uFlameSpeed;
+
+  float polarRadius = length(uv) * 2.0;
+  float polarAngle = (2.0 * atan(uv.x, uv.y)) / 6.28 * 0.3;
+  vec2 polarUv = vec2(polarRadius, polarAngle);
+
+  vec4 noiseA = texture2D(uNoiseTexture, polarUv * vec2(0.2, 7.0) * uNoiseScale + vec2(-ft * 0.1, 0.0));
+  vec4 noiseB = texture2D(uNoiseTexture, polarUv * vec2(0.3, 4.0) * uNoiseScale + vec2(-ft * 0.2, 0.0));
+  vec4 noiseC = texture2D(uNoiseTexture, polarUv * vec2(0.1, 5.0) * uNoiseScale + vec2(-ft * 0.1, 0.0));
+
+  float distanceMask = 1.0 - length(uv);
+
+  // Inner ring
+  float innerRing = clamp(-1.0 * ((distanceMask - 0.7) / uIrisWidth), 0.0, 1.0);
+  innerRing = (innerRing * distanceMask - 0.2) / 0.28;
+  innerRing += noiseA.r - 0.5;
+  innerRing *= 1.3;
+  innerRing = clamp(innerRing, 0.0, 1.0);
+
+  float outerRing = clamp(-1.0 * ((distanceMask - 0.5) / 0.2), 0.0, 1.0);
+  outerRing = (outerRing * distanceMask - 0.1) / 0.38;
+  outerRing += noiseC.r - 0.5;
+  outerRing *= 1.3;
+  outerRing = clamp(outerRing, 0.0, 1.0);
+
+  innerRing += outerRing;
+
+  // Inner eye
+  float innerEye = distanceMask - 0.1 * 2.0;
+  innerEye *= noiseB.r * 2.0;
+
+  // Pupil with cursor tracking
+  vec2 pupilOffset = uMouse * uPupilFollow * 0.12;
+  vec2 pupilUv = uv - pupilOffset;
+  float pupil = 1.0 - length(pupilUv * vec2(9.0, 2.3));
+  pupil *= uPupilSize;
+  pupil = clamp(pupil, 0.0, 1.0);
+  pupil /= 0.35;
+
+  // Outer eye
+  float outerEyeGlow = 1.0 - length(uv * vec2(0.5, 1.5));
+  outerEyeGlow = clamp(outerEyeGlow + 0.5, 0.0, 1.0);
+  outerEyeGlow += noiseC.r - 0.5;
+  float outerBgGlow = outerEyeGlow;
+  outerEyeGlow = pow(outerEyeGlow, 2.0);
+  outerEyeGlow += distanceMask;
+  outerEyeGlow *= uGlowIntensity;
+  outerEyeGlow = clamp(outerEyeGlow, 0.0, 1.0);
+  outerEyeGlow *= pow(1.0 - distanceMask, 2.0) * 2.5;
+
+  // Outer eye bg glow
+  outerBgGlow += distanceMask;
+  outerBgGlow = pow(outerBgGlow, 0.5);
+  outerBgGlow *= 0.15;
+
+  vec3 color = uEyeColor * uIntensity * clamp(max(innerRing + innerEye, outerEyeGlow + outerBgGlow) - pupil, 0.0, 3.0);
+  color += uBgColor;
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+
+export default function EvilEye({
+  eyeColor = '#FF6F37',
+  intensity = 1.5,
+  pupilSize = 0.6,
+  irisWidth = 0.25,
+  glowIntensity = 0.35,
+  scale = 0.8,
+  noiseScale = 1.0,
+  pupilFollow = 1.0,
+  flameSpeed = 1.0,
+  backgroundColor = '#000000'
+}) {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
+    const gl = renderer.gl;
+    gl.clearColor(0, 0, 0, 0);
+
+    const noiseData = generateNoiseTexture(256);
+    const noiseTexture = new Texture(gl, {
+      image: noiseData,
+      width: 256,
+      height: 256,
+      generateMipmaps: false,
+      flipY: false,
+    });
+    noiseTexture.minFilter = gl.LINEAR;
+    noiseTexture.magFilter = gl.LINEAR;
+    noiseTexture.wrapS = gl.REPEAT;
+    noiseTexture.wrapT = gl.REPEAT;
+
+    const mouse = { x: 0, y: 0, tx: 0, ty: 0 };
+
+    function onMouseMove(e) {
+      const rect = container.getBoundingClientRect();
+      mouse.tx = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+      mouse.ty = -(((e.clientY - rect.top) / rect.height) * 2 - 1);
+    }
+
+    function onMouseLeave() {
+      mouse.tx = 0;
+      mouse.ty = 0;
+    }
+
+    container.addEventListener('mousemove', onMouseMove);
+    container.addEventListener('mouseleave', onMouseLeave);
+
+    let program;
+
+    function resize() {
+      renderer.setSize(container.offsetWidth, container.offsetHeight);
+      if (program) {
+        program.uniforms.uResolution.value = [gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height];
+      }
+    }
+    window.addEventListener('resize', resize);
+    resize();
+
+    const geometry = new Triangle(gl);
+    program = new Program(gl, {
+      vertex: vertexShader,
+      fragment: fragmentShader,
+      uniforms: {
+        uTime: { value: 0 },
+        uResolution: { value: [gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height] },
+        uNoiseTexture: { value: noiseTexture },
+        uPupilSize: { value: pupilSize },
+        uIrisWidth: { value: irisWidth },
+        uGlowIntensity: { value: glowIntensity },
+        uIntensity: { value: intensity },
+        uScale: { value: scale },
+        uNoiseScale: { value: noiseScale },
+        uMouse: { value: [0, 0] },
+        uPupilFollow: { value: pupilFollow },
+        uFlameSpeed: { value: flameSpeed },
+        uEyeColor: { value: hexToVec3(eyeColor) },
+        uBgColor: { value: hexToVec3(backgroundColor) }
+      }
+    });
+
+    const mesh = new Mesh(gl, { geometry, program });
+    container.appendChild(gl.canvas);
+
+    let animationFrameId;
+
+    function update(time) {
+      animationFrameId = requestAnimationFrame(update);
+      mouse.x += (mouse.tx - mouse.x) * 0.05;
+      mouse.y += (mouse.ty - mouse.y) * 0.05;
+      program.uniforms.uMouse.value = [mouse.x, mouse.y];
+      program.uniforms.uTime.value = time * 0.001;
+      renderer.render({ scene: mesh });
+    }
+    animationFrameId = requestAnimationFrame(update);
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      window.removeEventListener('resize', resize);
+      container.removeEventListener('mousemove', onMouseMove);
+      container.removeEventListener('mouseleave', onMouseLeave);
+      container.removeChild(gl.canvas);
+      gl.getExtension('WEBGL_lose_context')?.loseContext();
+    };
+  }, [eyeColor, intensity, pupilSize, irisWidth, glowIntensity, scale, noiseScale, pupilFollow, flameSpeed, backgroundColor]);
+
+  return <div ref={containerRef} className="evil-eye-container" />;
+}

package/dist/assets/upstream/recipes/imported/fade-content/FadeContent.jsx

@@ -0,0 +1,94 @@
+import { useRef, useEffect } from 'react';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+const FadeContent = ({
+  children,
+  container,
+  blur = false,
+  duration = 1000,
+  ease = 'power2.out',
+  delay = 0,
+  threshold = 0.1,
+  initialOpacity = 0,
+  disappearAfter = 0,
+  disappearDuration = 0.5,
+  disappearEase = 'power2.in',
+  onComplete,
+  onDisappearanceComplete,
+  className = '',
+  style,
+  ...props
+}) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    let scrollerTarget = container || document.getElementById('snap-main-container') || null;
+    if (typeof scrollerTarget === 'string') {
+      scrollerTarget = document.querySelector(scrollerTarget);
+    }
+
+    const startPct = (1 - threshold) * 100;
+
+    const getSeconds = val => (typeof val === 'number' && val > 10 ? val / 1000 : val);
+
+    gsap.set(el, {
+      autoAlpha: initialOpacity,
+      filter: blur ? 'blur(10px)' : 'blur(0px)',
+      willChange: 'opacity, filter, transform'
+    });
+
+    const tl = gsap.timeline({
+      paused: true,
+      delay: getSeconds(delay),
+      onComplete: () => {
+        if (onComplete) onComplete();
+        if (disappearAfter > 0) {
+          gsap.to(el, {
+            autoAlpha: initialOpacity,
+            filter: blur ? 'blur(10px)' : 'blur(0px)',
+            delay: getSeconds(disappearAfter),
+            duration: getSeconds(disappearDuration),
+            ease: disappearEase,
+            onComplete: () => onDisappearanceComplete?.()
+          });
+        }
+      }
+    });
+
+    tl.to(el, {
+      autoAlpha: 1,
+      filter: 'blur(0px)',
+      duration: getSeconds(duration),
+      ease: ease
+    });
+
+    const st = ScrollTrigger.create({
+      trigger: el,
+      scroller: scrollerTarget || window,
+      start: `top ${startPct}%`,
+      once: true,
+      onEnter: () => tl.play()
+    });
+
+    return () => {
+      st.kill();
+      tl.kill();
+      gsap.killTweensOf(el);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div ref={ref} className={className} style={style} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default FadeContent;

package/dist/assets/upstream/recipes/imported/falling-text/FallingText.css

@@ -0,0 +1,31 @@
+.falling-text-container {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  text-align: center;
+  padding-top: 2em;
+}
+
+.falling-text-target {
+  display: inline-block;
+}
+
+.word {
+  display: inline-block;
+  margin: 0 2px;
+  user-select: none;
+}
+
+.highlighted {
+  color: cyan;
+  font-weight: bold;
+}
+
+.falling-text-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+}

package/dist/assets/upstream/recipes/imported/falling-text/FallingText.jsx

@@ -0,0 +1,190 @@
+import { useRef, useState, useEffect } from 'react';
+import Matter from 'matter-js';
+import './FallingText.css';
+
+const FallingText = ({
+  className = '',
+  text = '',
+  highlightWords = [],
+  highlightClass = 'highlighted',
+  trigger = 'auto',
+  backgroundColor = 'transparent',
+  wireframes = false,
+  gravity = 1,
+  mouseConstraintStiffness = 0.2,
+  fontSize = '1rem'
+}) => {
+  const containerRef = useRef(null);
+  const textRef = useRef(null);
+  const canvasContainerRef = useRef(null);
+
+  const [effectStarted, setEffectStarted] = useState(false);
+
+  useEffect(() => {
+    if (!textRef.current) return;
+    const words = text.split(' ');
+    const newHTML = words
+      .map(word => {
+        const isHighlighted = highlightWords.some(hw => word.startsWith(hw));
+        return `<span class="word ${isHighlighted ? highlightClass : ''}">${word}</span>`;
+      })
+      .join(' ');
+    textRef.current.innerHTML = newHTML;
+  }, [text, highlightWords, highlightClass]);
+
+  useEffect(() => {
+    if (trigger === 'auto') {
+      setEffectStarted(true);
+      return;
+    }
+    if (trigger === 'scroll' && containerRef.current) {
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setEffectStarted(true);
+            observer.disconnect();
+          }
+        },
+        { threshold: 0.1 }
+      );
+      observer.observe(containerRef.current);
+      return () => observer.disconnect();
+    }
+  }, [trigger]);
+
+  useEffect(() => {
+    if (!effectStarted) return;
+
+    const { Engine, Render, World, Bodies, Runner, Mouse, MouseConstraint } = Matter;
+
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const width = containerRect.width;
+    const height = containerRect.height;
+
+    if (width <= 0 || height <= 0) {
+      return;
+    }
+
+    const engine = Engine.create();
+    engine.world.gravity.y = gravity;
+
+    const render = Render.create({
+      element: canvasContainerRef.current,
+      engine,
+      options: {
+        width,
+        height,
+        background: backgroundColor,
+        wireframes
+      }
+    });
+
+    const boundaryOptions = {
+      isStatic: true,
+      render: { fillStyle: 'transparent' }
+    };
+    const floor = Bodies.rectangle(width / 2, height + 25, width, 50, boundaryOptions);
+    const leftWall = Bodies.rectangle(-25, height / 2, 50, height, boundaryOptions);
+    const rightWall = Bodies.rectangle(width + 25, height / 2, 50, height, boundaryOptions);
+    const ceiling = Bodies.rectangle(width / 2, -25, width, 50, boundaryOptions);
+
+    const wordSpans = textRef.current.querySelectorAll('.word');
+    const wordBodies = [...wordSpans].map(elem => {
+      const rect = elem.getBoundingClientRect();
+
+      const x = rect.left - containerRect.left + rect.width / 2;
+      const y = rect.top - containerRect.top + rect.height / 2;
+
+      const body = Bodies.rectangle(x, y, rect.width, rect.height, {
+        render: { fillStyle: 'transparent' },
+        restitution: 0.8,
+        frictionAir: 0.01,
+        friction: 0.2
+      });
+
+      Matter.Body.setVelocity(body, {
+        x: (Math.random() - 0.5) * 5,
+        y: 0
+      });
+      Matter.Body.setAngularVelocity(body, (Math.random() - 0.5) * 0.05);
+      return { elem, body };
+    });
+
+    wordBodies.forEach(({ elem, body }) => {
+      elem.style.position = 'absolute';
+      elem.style.left = `${body.position.x - body.bounds.max.x + body.bounds.min.x / 2}px`;
+      elem.style.top = `${body.position.y - body.bounds.max.y + body.bounds.min.y / 2}px`;
+      elem.style.transform = 'none';
+    });
+
+    const mouse = Mouse.create(containerRef.current);
+    const mouseConstraint = MouseConstraint.create(engine, {
+      mouse,
+      constraint: {
+        stiffness: mouseConstraintStiffness,
+        render: { visible: false }
+      }
+    });
+    render.mouse = mouse;
+
+    World.add(engine.world, [floor, leftWall, rightWall, ceiling, mouseConstraint, ...wordBodies.map(wb => wb.body)]);
+
+    const runner = Runner.create();
+    Runner.run(runner, engine);
+    Render.run(render);
+
+    const updateLoop = () => {
+      wordBodies.forEach(({ body, elem }) => {
+        const { x, y } = body.position;
+        elem.style.left = `${x}px`;
+        elem.style.top = `${y}px`;
+        elem.style.transform = `translate(-50%, -50%) rotate(${body.angle}rad)`;
+      });
+      Matter.Engine.update(engine);
+      requestAnimationFrame(updateLoop);
+    };
+    updateLoop();
+
+    return () => {
+      Render.stop(render);
+      Runner.stop(runner);
+      if (render.canvas && canvasContainerRef.current) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        canvasContainerRef.current.removeChild(render.canvas);
+      }
+      World.clear(engine.world);
+      Engine.clear(engine);
+    };
+  }, [effectStarted, gravity, wireframes, backgroundColor, mouseConstraintStiffness]);
+
+  const handleTrigger = () => {
+    if (!effectStarted && (trigger === 'click' || trigger === 'hover')) {
+      setEffectStarted(true);
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`falling-text-container ${className}`}
+      onClick={trigger === 'click' ? handleTrigger : undefined}
+      onMouseEnter={trigger === 'hover' ? handleTrigger : undefined}
+      style={{
+        position: 'relative',
+        overflow: 'hidden'
+      }}
+    >
+      <div
+        ref={textRef}
+        className="falling-text-target"
+        style={{
+          fontSize: fontSize,
+          lineHeight: 1.4
+        }}
+      />
+      <div ref={canvasContainerRef} className="falling-text-canvas" />
+    </div>
+  );
+};
+
+export default FallingText;

package/dist/assets/upstream/recipes/imported/faulty-terminal/FaultyTerminal.css

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