@xpert-ai/plugin-motion 0.1.0

package/dist/assets/upstream/recipes/imported/flowing-menu/FlowingMenu.jsx

@@ -0,0 +1,165 @@
+import { useRef, useEffect, useState } from 'react';
+import { gsap } from 'gsap';
+
+import './FlowingMenu.css';
+
+function FlowingMenu({
+  items = [],
+  speed = 15,
+  textColor = '#fff',
+  bgColor = '#120F17',
+  marqueeBgColor = '#fff',
+  marqueeTextColor = '#120F17',
+  borderColor = '#fff'
+}) {
+  return (
+    <div className="menu-wrap" style={{ backgroundColor: bgColor }}>
+      <nav className="menu">
+        {items.map((item, idx) => (
+          <MenuItem
+            key={idx}
+            {...item}
+            speed={speed}
+            textColor={textColor}
+            marqueeBgColor={marqueeBgColor}
+            marqueeTextColor={marqueeTextColor}
+            borderColor={borderColor}
+          />
+        ))}
+      </nav>
+    </div>
+  );
+}
+
+function MenuItem({ link, text, image, speed, textColor, marqueeBgColor, marqueeTextColor, borderColor }) {
+  const itemRef = useRef(null);
+  const marqueeRef = useRef(null);
+  const marqueeInnerRef = useRef(null);
+  const animationRef = useRef(null);
+  const [repetitions, setRepetitions] = useState(4);
+
+  const animationDefaults = { duration: 0.6, ease: 'expo' };
+
+  const findClosestEdge = (mouseX, mouseY, width, height) => {
+    const topEdgeDist = distMetric(mouseX, mouseY, width / 2, 0);
+    const bottomEdgeDist = distMetric(mouseX, mouseY, width / 2, height);
+    return topEdgeDist < bottomEdgeDist ? 'top' : 'bottom';
+  };
+
+  const distMetric = (x, y, x2, y2) => {
+    const xDiff = x - x2;
+    const yDiff = y - y2;
+    return xDiff * xDiff + yDiff * yDiff;
+  };
+
+  useEffect(() => {
+    const calculateRepetitions = () => {
+      if (!marqueeInnerRef.current) return;
+
+      // Get the first marquee part to measure content width
+      const marqueeContent = marqueeInnerRef.current.querySelector('.marquee__part');
+      if (!marqueeContent) return;
+
+      const contentWidth = marqueeContent.offsetWidth;
+      const viewportWidth = window.innerWidth;
+
+      // Calculate how many copies we need to fill viewport + extra for seamless loop
+      // We need at least 2, but calculate based on content vs viewport
+      const needed = Math.ceil(viewportWidth / contentWidth) + 2;
+      setRepetitions(Math.max(4, needed));
+    };
+
+    calculateRepetitions();
+    window.addEventListener('resize', calculateRepetitions);
+    return () => window.removeEventListener('resize', calculateRepetitions);
+  }, [text, image]);
+
+  useEffect(() => {
+    const setupMarquee = () => {
+      if (!marqueeInnerRef.current) return;
+
+      const marqueeContent = marqueeInnerRef.current.querySelector('.marquee__part');
+      if (!marqueeContent) return;
+
+      const contentWidth = marqueeContent.offsetWidth;
+      if (contentWidth === 0) return;
+
+      if (animationRef.current) {
+        animationRef.current.kill();
+      }
+
+      // Animate exactly one content width for seamless loop
+      animationRef.current = gsap.to(marqueeInnerRef.current, {
+        x: -contentWidth,
+        duration: speed,
+        ease: 'none',
+        repeat: -1
+      });
+    };
+
+    // Small delay to ensure DOM is ready after repetitions update
+    const timer = setTimeout(setupMarquee, 50);
+
+    return () => {
+      clearTimeout(timer);
+      if (animationRef.current) {
+        animationRef.current.kill();
+      }
+    };
+  }, [text, image, repetitions, speed]);
+
+  const handleMouseEnter = ev => {
+    if (!itemRef.current || !marqueeRef.current || !marqueeInnerRef.current) return;
+    const rect = itemRef.current.getBoundingClientRect();
+    const x = ev.clientX - rect.left;
+    const y = ev.clientY - rect.top;
+    const edge = findClosestEdge(x, y, rect.width, rect.height);
+
+    gsap
+      .timeline({ defaults: animationDefaults })
+      .set(marqueeRef.current, { y: edge === 'top' ? '-101%' : '101%' }, 0)
+      .set(marqueeInnerRef.current, { y: edge === 'top' ? '101%' : '-101%' }, 0)
+      .to([marqueeRef.current, marqueeInnerRef.current], { y: '0%' }, 0);
+  };
+
+  const handleMouseLeave = ev => {
+    if (!itemRef.current || !marqueeRef.current || !marqueeInnerRef.current) return;
+    const rect = itemRef.current.getBoundingClientRect();
+    const x = ev.clientX - rect.left;
+    const y = ev.clientY - rect.top;
+    const edge = findClosestEdge(x, y, rect.width, rect.height);
+
+    gsap
+      .timeline({ defaults: animationDefaults })
+      .to(marqueeRef.current, { y: edge === 'top' ? '-101%' : '101%' }, 0)
+      .to(marqueeInnerRef.current, { y: edge === 'top' ? '101%' : '-101%' }, 0);
+  };
+
+  return (
+    <div className="menu__item" ref={itemRef} style={{ borderColor }}>
+      <a
+        className="menu__item-link"
+        href={link}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        style={{ color: textColor }}
+      >
+        {text}
+      </a>
+      <div className="marquee" ref={marqueeRef} style={{ backgroundColor: marqueeBgColor }}>
+        <div className="marquee__inner-wrap">
+          <div className="marquee__inner" ref={marqueeInnerRef} aria-hidden="true">
+            {[...Array(repetitions)].map((_, idx) => (
+              <div className="marquee__part" key={idx} style={{ color: marqueeTextColor }}>
+                <span>{text}</span>
+                <div className="marquee__img" style={{ backgroundImage: `url(${image})` }} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FlowingMenu;

package/dist/assets/upstream/recipes/imported/fluid-glass/FluidGlass.jsx

@@ -0,0 +1,277 @@
+/* eslint-disable react/no-unknown-property */
+import * as THREE from 'three';
+import { useRef, useState, useEffect, memo } from 'react';
+import { Canvas, createPortal, useFrame, useThree } from '@react-three/fiber';
+import {
+  useFBO,
+  useGLTF,
+  useScroll,
+  Image,
+  Scroll,
+  Preload,
+  ScrollControls,
+  MeshTransmissionMaterial,
+  Text
+} from '@react-three/drei';
+import { easing } from 'maath';
+
+export default function FluidGlass({ mode = 'lens', lensProps = {}, barProps = {}, cubeProps = {} }) {
+  const Wrapper = mode === 'bar' ? Bar : mode === 'cube' ? Cube : Lens;
+  const rawOverrides = mode === 'bar' ? barProps : mode === 'cube' ? cubeProps : lensProps;
+
+  const {
+    navItems = [
+      { label: 'Home', link: '' },
+      { label: 'About', link: '' },
+      { label: 'Contact', link: '' }
+    ],
+    ...modeProps
+  } = rawOverrides;
+
+  return (
+    <Canvas camera={{ position: [0, 0, 20], fov: 15 }} gl={{ alpha: true }}>
+      <ScrollControls damping={0.2} pages={3} distance={0.4}>
+        {mode === 'bar' && <NavItems items={navItems} />}
+        <Wrapper modeProps={modeProps}>
+          <Scroll>
+            <Typography />
+            <Images />
+          </Scroll>
+          <Scroll html />
+          <Preload />
+        </Wrapper>
+      </ScrollControls>
+    </Canvas>
+  );
+}
+
+const ModeWrapper = memo(function ModeWrapper({
+  children,
+  glb,
+  geometryKey,
+  lockToBottom = false,
+  followPointer = true,
+  modeProps = {},
+  ...props
+}) {
+  const ref = useRef();
+  const { nodes } = useGLTF(glb);
+  const buffer = useFBO();
+  const { viewport: vp } = useThree();
+  const [scene] = useState(() => new THREE.Scene());
+  const geoWidthRef = useRef(1);
+
+  useEffect(() => {
+    const geo = nodes[geometryKey]?.geometry;
+    geo.computeBoundingBox();
+    geoWidthRef.current = geo.boundingBox.max.x - geo.boundingBox.min.x || 1;
+  }, [nodes, geometryKey]);
+
+  useFrame((state, delta) => {
+    const { gl, viewport, pointer, camera } = state;
+    const v = viewport.getCurrentViewport(camera, [0, 0, 15]);
+
+    const destX = followPointer ? (pointer.x * v.width) / 2 : 0;
+    const destY = lockToBottom ? -v.height / 2 + 0.2 : followPointer ? (pointer.y * v.height) / 2 : 0;
+    easing.damp3(ref.current.position, [destX, destY, 15], 0.15, delta);
+
+    if (modeProps.scale == null) {
+      const maxWorld = v.width * 0.9;
+      const desired = maxWorld / geoWidthRef.current;
+      ref.current.scale.setScalar(Math.min(0.15, desired));
+    }
+
+    gl.setRenderTarget(buffer);
+    gl.render(scene, camera);
+    gl.setRenderTarget(null);
+
+    // Background Color
+    gl.setClearColor(0x5227ff, 1);
+  });
+
+  const { scale, ior, thickness, anisotropy, chromaticAberration, ...extraMat } = modeProps;
+
+  return (
+    <>
+      {createPortal(children, scene)}
+      <mesh scale={[vp.width, vp.height, 1]}>
+        <planeGeometry />
+        <meshBasicMaterial map={buffer.texture} transparent />
+      </mesh>
+      <mesh ref={ref} scale={scale ?? 0.15} rotation-x={Math.PI / 2} geometry={nodes[geometryKey]?.geometry} {...props}>
+        <MeshTransmissionMaterial
+          buffer={buffer.texture}
+          ior={ior ?? 1.15}
+          thickness={thickness ?? 5}
+          anisotropy={anisotropy ?? 0.01}
+          chromaticAberration={chromaticAberration ?? 0.1}
+          {...extraMat}
+        />
+      </mesh>
+    </>
+  );
+});
+
+function Lens({ modeProps, ...p }) {
+  return <ModeWrapper glb="/assets/3d/lens.glb" geometryKey="Cylinder" followPointer modeProps={modeProps} {...p} />;
+}
+
+function Cube({ modeProps, ...p }) {
+  return <ModeWrapper glb="/assets/3d/cube.glb" geometryKey="Cube" followPointer modeProps={modeProps} {...p} />;
+}
+
+function Bar({ modeProps = {}, ...p }) {
+  const defaultMat = {
+    transmission: 1,
+    roughness: 0,
+    thickness: 10,
+    ior: 1.15,
+    color: '#ffffff',
+    attenuationColor: '#ffffff',
+    attenuationDistance: 0.25
+  };
+
+  return (
+    <ModeWrapper
+      glb="/assets/3d/bar.glb"
+      geometryKey="Cube"
+      lockToBottom
+      followPointer={false}
+      modeProps={{ ...defaultMat, ...modeProps }}
+      {...p}
+    />
+  );
+}
+
+function NavItems({ items }) {
+  const group = useRef();
+  const { viewport, camera } = useThree();
+
+  const DEVICE = {
+    mobile: { max: 639, spacing: 0.2, fontSize: 0.035 },
+    tablet: { max: 1023, spacing: 0.24, fontSize: 0.035 },
+    desktop: { max: Infinity, spacing: 0.3, fontSize: 0.035 }
+  };
+  const getDevice = () => {
+    const w = window.innerWidth;
+    return w <= DEVICE.mobile.max ? 'mobile' : w <= DEVICE.tablet.max ? 'tablet' : 'desktop';
+  };
+
+  const [device, setDevice] = useState(getDevice());
+
+  useEffect(() => {
+    const onResize = () => setDevice(getDevice());
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const { spacing, fontSize } = DEVICE[device];
+
+  useFrame(() => {
+    if (!group.current) return;
+    const v = viewport.getCurrentViewport(camera, [0, 0, 15]);
+    group.current.position.set(0, -v.height / 2 + 0.2, 15.1);
+
+    group.current.children.forEach((child, i) => {
+      child.position.x = (i - (items.length - 1) / 2) * spacing;
+    });
+  });
+
+  const handleNavigate = link => {
+    if (!link) return;
+    link.startsWith('#') ? (window.location.hash = link) : (window.location.href = link);
+  };
+
+  return (
+    <group ref={group} renderOrder={10}>
+      {items.map(({ label, link }) => (
+        <Text
+          key={label}
+          fontSize={fontSize}
+          color="white"
+          anchorX="center"
+          anchorY="middle"
+          depthWrite={false}
+          outlineWidth={0}
+          outlineBlur="20%"
+          outlineColor="#000"
+          outlineOpacity={0.5}
+          depthTest={false}
+          renderOrder={10}
+          onClick={e => {
+            e.stopPropagation();
+            handleNavigate(link);
+          }}
+          onPointerOver={() => (document.body.style.cursor = 'pointer')}
+          onPointerOut={() => (document.body.style.cursor = 'auto')}
+        >
+          {label}
+        </Text>
+      ))}
+    </group>
+  );
+}
+
+function Images() {
+  const group = useRef();
+  const data = useScroll();
+  const { height } = useThree(s => s.viewport);
+
+  useFrame(() => {
+    group.current.children[0].material.zoom = 1 + data.range(0, 1 / 3) / 3;
+    group.current.children[1].material.zoom = 1 + data.range(0, 1 / 3) / 3;
+    group.current.children[2].material.zoom = 1 + data.range(1.15 / 3, 1 / 3) / 2;
+    group.current.children[3].material.zoom = 1 + data.range(1.15 / 3, 1 / 3) / 2;
+    group.current.children[4].material.zoom = 1 + data.range(1.15 / 3, 1 / 3) / 2;
+  });
+
+  return (
+    <group ref={group}>
+      <Image position={[-2, 0, 0]} scale={[3, height / 1.1, 1]} url="/assets/demo/cs1.webp" />
+      <Image position={[2, 0, 3]} scale={3} url="/assets/demo/cs2.webp" />
+      <Image position={[-2.05, -height, 6]} scale={[1, 3, 1]} url="/assets/demo/cs3.webp" />
+      <Image position={[-0.6, -height, 9]} scale={[1, 2, 1]} url="/assets/demo/cs1.webp" />
+      <Image position={[0.75, -height, 10.5]} scale={1.5} url="/assets/demo/cs2.webp" />
+    </group>
+  );
+}
+
+function Typography() {
+  const DEVICE = {
+    mobile: { fontSize: 0.2 },
+    tablet: { fontSize: 0.4 },
+    desktop: { fontSize: 0.6 }
+  };
+  const getDevice = () => {
+    const w = window.innerWidth;
+    return w <= 639 ? 'mobile' : w <= 1023 ? 'tablet' : 'desktop';
+  };
+
+  const [device, setDevice] = useState(getDevice());
+
+  useEffect(() => {
+    const onResize = () => setDevice(getDevice());
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  const { fontSize } = DEVICE[device];
+
+  return (
+    <Text
+      position={[0, 0, 12]}
+      fontSize={fontSize}
+      letterSpacing={-0.05}
+      outlineWidth={0}
+      outlineBlur="20%"
+      outlineColor="#000"
+      outlineOpacity={0.5}
+      color="white"
+      anchorX="center"
+      anchorY="middle"
+    >
+      React Bits
+    </Text>
+  );
+}

package/dist/assets/upstream/recipes/imported/flying-posters/FlyingPosters.css

@@ -0,0 +1,13 @@
+.posters-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 2;
+}
+
+.posters-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}