@xpert-ai/plugin-motion 0.1.0

package/dist/assets/upstream/recipes/imported/reflective-card/ReflectiveCard.css

@@ -0,0 +1,182 @@
+.reflective-card-container {
+  position: relative;
+  width: 320px;
+  height: 500px;
+  border-radius: 20px;
+  overflow: hidden;
+  background: #1a1a1a;
+  box-shadow:
+    0 20px 50px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+  isolation: isolate;
+  font-family: 'Inter', sans-serif;
+}
+
+.reflective-svg-filters {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.reflective-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scale(1.2) scaleX(-1);
+
+  filter: saturate(var(--saturation, 0)) contrast(120%) brightness(110%) blur(var(--blur-strength, 12px))
+    url(#metallic-displacement);
+
+  z-index: 0;
+  opacity: 0.9;
+  transition: filter 0.3s ease;
+}
+
+.reflective-noise {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  opacity: var(--roughness, 0.4);
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  mix-blend-mode: overlay;
+}
+
+.reflective-sheen {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.4) 0%,
+    rgba(255, 255, 255, 0.1) 40%,
+    rgba(255, 255, 255, 0) 50%,
+    rgba(255, 255, 255, 0.1) 60%,
+    rgba(255, 255, 255, 0.3) 100%
+  );
+  pointer-events: none;
+  mix-blend-mode: overlay;
+  opacity: var(--metalness, 1);
+}
+
+.reflective-border {
+  position: absolute;
+  inset: 0;
+  border-radius: 20px;
+  padding: 1px;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.8) 0%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.6) 100%
+  );
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  z-index: 20;
+  pointer-events: none;
+}
+
+.reflective-content {
+  position: relative;
+  z-index: 10;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 32px;
+  color: var(--text-color, white);
+  background: var(--overlay-color, rgba(255, 255, 255, 0.05));
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  padding-bottom: 16px;
+}
+
+.security-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  padding: 4px 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.status-icon {
+  opacity: 0.8;
+}
+
+.card-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  align-items: center;
+  text-align: center;
+  gap: 24px;
+  margin-bottom: 2em;
+}
+
+.user-name {
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  margin: 0 0 8px 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.user-role {
+  font-size: 12px;
+  letter-spacing: 0.2em;
+  opacity: 0.7;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  padding-top: 24px;
+}
+
+.id-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.label {
+  font-size: 9px;
+  letter-spacing: 0.1em;
+  opacity: 0.6;
+}
+
+.value {
+  font-family: monospace;
+  font-size: 14px;
+  letter-spacing: 0.05em;
+}
+
+.fingerprint-icon {
+  opacity: 0.4;
+}

package/dist/assets/upstream/recipes/imported/reflective-card/ReflectiveCard.jsx

@@ -0,0 +1,149 @@
+import { useEffect, useRef } from 'react';
+import './ReflectiveCard.css';
+import { Fingerprint, Activity, Lock } from 'lucide-react';
+
+const ReflectiveCard = ({
+  blurStrength = 12,
+  color = 'white',
+  metalness = 1,
+  roughness = 0.4,
+  overlayColor = 'rgba(255, 255, 255, 0.1)',
+  displacementStrength = 20,
+  noiseScale = 1,
+  specularConstant = 1.2,
+  grayscale = 1,
+  glassDistortion = 0,
+  className = '',
+  style = {}
+}) => {
+  const videoRef = useRef(null);
+
+  useEffect(() => {
+    let stream = null;
+
+    const startWebcam = async () => {
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            width: { ideal: 640 },
+            height: { ideal: 480 },
+            facingMode: 'user'
+          }
+        });
+
+        if (videoRef.current) {
+          videoRef.current.srcObject = stream;
+        }
+      } catch (err) {
+        console.error('Error accessing webcam:', err);
+      }
+    };
+
+    startWebcam();
+
+    return () => {
+      if (stream) {
+        stream.getTracks().forEach(track => track.stop());
+      }
+    };
+  }, []);
+
+  const baseFrequency = 0.03 / Math.max(0.1, noiseScale);
+  const saturation = 1 - Math.max(0, Math.min(1, grayscale));
+
+  const cssVariables = {
+    '--blur-strength': `${blurStrength}px`,
+    '--metalness': metalness,
+    '--roughness': roughness,
+    '--overlay-color': overlayColor,
+    '--text-color': color,
+    '--saturation': saturation
+  };
+
+  return (
+    <div className={`reflective-card-container ${className}`} style={{ ...style, ...cssVariables }}>
+      <svg className="reflective-svg-filters" aria-hidden="true">
+        <defs>
+          <filter id="metallic-displacement" x="-20%" y="-20%" width="140%" height="140%">
+            <feTurbulence type="turbulence" baseFrequency={baseFrequency} numOctaves="2" result="noise" />
+            <feColorMatrix in="noise" type="luminanceToAlpha" result="noiseAlpha" />
+            <feDisplacementMap
+              in="SourceGraphic"
+              in2="noise"
+              scale={displacementStrength}
+              xChannelSelector="R"
+              yChannelSelector="G"
+              result="rippled"
+            />
+            <feSpecularLighting
+              in="noiseAlpha"
+              surfaceScale={displacementStrength}
+              specularConstant={specularConstant}
+              specularExponent="20"
+              lightingColor="#ffffff"
+              result="light"
+            >
+              <fePointLight x="0" y="0" z="300" />
+            </feSpecularLighting>
+            <feComposite in="light" in2="rippled" operator="in" result="light-effect" />
+            <feBlend in="light-effect" in2="rippled" mode="screen" result="metallic-result" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"
+              result="solidAlpha"
+            />
+            <feMorphology in="solidAlpha" operator="erode" radius="45" result="erodedAlpha" />
+            <feGaussianBlur in="erodedAlpha" stdDeviation="10" result="blurredMap" />
+            <feComponentTransfer in="blurredMap" result="glassMap">
+              <feFuncA type="linear" slope="0.5" intercept="0" />
+            </feComponentTransfer>
+            <feDisplacementMap
+              in="metallic-result"
+              in2="glassMap"
+              scale={glassDistortion}
+              xChannelSelector="A"
+              yChannelSelector="A"
+              result="final"
+            />
+          </filter>
+        </defs>
+      </svg>
+
+      <video ref={videoRef} autoPlay playsInline muted className="reflective-video" />
+
+      <div className="reflective-noise" />
+      <div className="reflective-sheen" />
+      <div className="reflective-border" />
+
+      <div className="reflective-content">
+        <div className="card-header">
+          <div className="security-badge">
+            <Lock size={14} className="security-icon" />
+            <span>SECURE ACCESS</span>
+          </div>
+          <Activity className="status-icon" size={20} />
+        </div>
+
+        <div className="card-body">
+          <div className="user-info">
+            <h2 className="user-name">ALEXANDER DOE</h2>
+            <p className="user-role">SENIOR DEVELOPER</p>
+          </div>
+        </div>
+
+        <div className="card-footer">
+          <div className="id-section">
+            <span className="label">ID NUMBER</span>
+            <span className="value">8901-2345-6789</span>
+          </div>
+          <div className="fingerprint-section">
+            <Fingerprint size={32} className="fingerprint-icon" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReflectiveCard;

package/dist/assets/upstream/recipes/imported/ribbons/Ribbons.css

@@ -0,0 +1,5 @@
+.ribbons-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}

package/dist/assets/upstream/recipes/imported/ribbons/Ribbons.jsx

@@ -0,0 +1,237 @@
+import { useEffect, useRef } from 'react';
+import { Renderer, Transform, Vec3, Color, Polyline } from 'ogl';
+
+import './Ribbons.css';
+
+const Ribbons = ({
+  colors = ['#FC8EAC'],
+  baseSpring = 0.03,
+  baseFriction = 0.9,
+  baseThickness = 30,
+  offsetFactor = 0.05,
+  maxAge = 500,
+  pointCount = 50,
+  speedMultiplier = 0.6,
+  enableFade = false,
+  enableShaderEffect = false,
+  effectAmplitude = 2,
+  backgroundColor = [0, 0, 0, 0]
+}) => {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const renderer = new Renderer({ dpr: window.devicePixelRatio || 2, alpha: true });
+    const gl = renderer.gl;
+    if (Array.isArray(backgroundColor) && backgroundColor.length === 4) {
+      gl.clearColor(backgroundColor[0], backgroundColor[1], backgroundColor[2], backgroundColor[3]);
+    } else {
+      gl.clearColor(0, 0, 0, 0);
+    }
+
+    gl.canvas.style.position = 'absolute';
+    gl.canvas.style.top = '0';
+    gl.canvas.style.left = '0';
+    gl.canvas.style.width = '100%';
+    gl.canvas.style.height = '100%';
+    container.appendChild(gl.canvas);
+
+    const scene = new Transform();
+    const lines = [];
+
+    const vertex = `
+      precision highp float;
+      
+      attribute vec3 position;
+      attribute vec3 next;
+      attribute vec3 prev;
+      attribute vec2 uv;
+      attribute float side;
+      
+      uniform vec2 uResolution;
+      uniform float uDPR;
+      uniform float uThickness;
+      uniform float uTime;
+      uniform float uEnableShaderEffect;
+      uniform float uEffectAmplitude;
+      
+      varying vec2 vUV;
+      
+      vec4 getPosition() {
+          vec4 current = vec4(position, 1.0);
+          vec2 aspect = vec2(uResolution.x / uResolution.y, 1.0);
+          vec2 nextScreen = next.xy * aspect;
+          vec2 prevScreen = prev.xy * aspect;
+          vec2 tangent = normalize(nextScreen - prevScreen);
+          vec2 normal = vec2(-tangent.y, tangent.x);
+          normal /= aspect;
+          normal *= mix(1.0, 0.1, pow(abs(uv.y - 0.5) * 2.0, 2.0));
+          float dist = length(nextScreen - prevScreen);
+          normal *= smoothstep(0.0, 0.02, dist);
+          float pixelWidthRatio = 1.0 / (uResolution.y / uDPR);
+          float pixelWidth = current.w * pixelWidthRatio;
+          normal *= pixelWidth * uThickness;
+          current.xy -= normal * side;
+          if(uEnableShaderEffect > 0.5) {
+            current.xy += normal * sin(uTime + current.x * 10.0) * uEffectAmplitude;
+          }
+          return current;
+      }
+      
+      void main() {
+          vUV = uv;
+          gl_Position = getPosition();
+      }
+    `;
+
+    const fragment = `
+      precision highp float;
+      uniform vec3 uColor;
+      uniform float uOpacity;
+      uniform float uEnableFade;
+      varying vec2 vUV;
+      void main() {
+          float fadeFactor = 1.0;
+          if(uEnableFade > 0.5) {
+              fadeFactor = 1.0 - smoothstep(0.0, 1.0, vUV.y);
+          }
+          gl_FragColor = vec4(uColor, uOpacity * fadeFactor);
+      }
+    `;
+
+    function resize() {
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      renderer.setSize(width, height);
+      lines.forEach(line => line.polyline.resize());
+    }
+    window.addEventListener('resize', resize);
+
+    const center = (colors.length - 1) / 2;
+    colors.forEach((color, index) => {
+      const spring = baseSpring + (Math.random() - 0.5) * 0.05;
+      const friction = baseFriction + (Math.random() - 0.5) * 0.05;
+      const thickness = baseThickness + (Math.random() - 0.5) * 3;
+      const mouseOffset = new Vec3(
+        (index - center) * offsetFactor + (Math.random() - 0.5) * 0.01,
+        (Math.random() - 0.5) * 0.1,
+        0
+      );
+
+      const line = {
+        spring,
+        friction,
+        mouseVelocity: new Vec3(),
+        mouseOffset
+      };
+
+      const count = pointCount;
+      const points = [];
+      for (let i = 0; i < count; i++) {
+        points.push(new Vec3());
+      }
+      line.points = points;
+
+      line.polyline = new Polyline(gl, {
+        points,
+        vertex,
+        fragment,
+        uniforms: {
+          uColor: { value: new Color(color) },
+          uThickness: { value: thickness },
+          uOpacity: { value: 1.0 },
+          uTime: { value: 0.0 },
+          uEnableShaderEffect: { value: enableShaderEffect ? 1.0 : 0.0 },
+          uEffectAmplitude: { value: effectAmplitude },
+          uEnableFade: { value: enableFade ? 1.0 : 0.0 }
+        }
+      });
+      line.polyline.mesh.setParent(scene);
+      lines.push(line);
+    });
+
+    resize();
+
+    const mouse = new Vec3();
+    function updateMouse(e) {
+      let x, y;
+      const rect = container.getBoundingClientRect();
+      if (e.changedTouches && e.changedTouches.length) {
+        x = e.changedTouches[0].clientX - rect.left;
+        y = e.changedTouches[0].clientY - rect.top;
+      } else {
+        x = e.clientX - rect.left;
+        y = e.clientY - rect.top;
+      }
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      mouse.set((x / width) * 2 - 1, (y / height) * -2 + 1, 0);
+    }
+    container.addEventListener('mousemove', updateMouse);
+    container.addEventListener('touchstart', updateMouse);
+    container.addEventListener('touchmove', updateMouse);
+
+    const tmp = new Vec3();
+    let frameId;
+    let lastTime = performance.now();
+    function update() {
+      frameId = requestAnimationFrame(update);
+      const currentTime = performance.now();
+      const dt = currentTime - lastTime;
+      lastTime = currentTime;
+
+      lines.forEach(line => {
+        tmp.copy(mouse).add(line.mouseOffset).sub(line.points[0]).multiply(line.spring);
+        line.mouseVelocity.add(tmp).multiply(line.friction);
+        line.points[0].add(line.mouseVelocity);
+
+        for (let i = 1; i < line.points.length; i++) {
+          if (isFinite(maxAge) && maxAge > 0) {
+            const segmentDelay = maxAge / (line.points.length - 1);
+            const alpha = Math.min(1, (dt * speedMultiplier) / segmentDelay);
+            line.points[i].lerp(line.points[i - 1], alpha);
+          } else {
+            line.points[i].lerp(line.points[i - 1], 0.9);
+          }
+        }
+        if (line.polyline.mesh.program.uniforms.uTime) {
+          line.polyline.mesh.program.uniforms.uTime.value = currentTime * 0.001;
+        }
+        line.polyline.updateGeometry();
+      });
+
+      renderer.render({ scene });
+    }
+    update();
+
+    return () => {
+      window.removeEventListener('resize', resize);
+      container.removeEventListener('mousemove', updateMouse);
+      container.removeEventListener('touchstart', updateMouse);
+      container.removeEventListener('touchmove', updateMouse);
+      cancelAnimationFrame(frameId);
+      if (gl.canvas && gl.canvas.parentNode === container) {
+        container.removeChild(gl.canvas);
+      }
+    };
+  }, [
+    colors,
+    baseSpring,
+    baseFriction,
+    baseThickness,
+    offsetFactor,
+    maxAge,
+    pointCount,
+    speedMultiplier,
+    enableFade,
+    enableShaderEffect,
+    effectAmplitude,
+    backgroundColor
+  ]);
+
+  return <div ref={containerRef} className="ribbons-container" />;
+};
+
+export default Ribbons;

package/dist/assets/upstream/recipes/imported/ripple-grid/RippleGrid.css

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