@xpert-ai/plugin-motion 0.1.0

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

@@ -0,0 +1,239 @@
+import { useRef, useEffect } from 'react';
+import { Renderer, Camera, Transform, Program, Mesh, Geometry } from 'ogl';
+
+import './PlasmaWave.css';
+
+function hexToRgb(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  return [r, g, b];
+}
+
+const VERT = /* glsl */ `
+attribute vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const FRAG = /* glsl */ `
+precision mediump float;
+uniform float iTime;
+uniform vec2  iResolution;
+uniform vec2  uOffset;
+uniform float uRotation;
+uniform float uFocalLength;
+uniform float uSpeed1;
+uniform float uSpeed2;
+uniform float uDir2;
+uniform float uBend1;
+uniform float uBend2;
+uniform vec3  uColor1;
+uniform vec3  uColor2;
+
+const float lt   = 0.3;
+const float pi   = 3.14159;
+const float pi2  = 6.28318;
+const float pi_2 = 1.5708;
+#define MAX_STEPS 14
+
+void mainImage(out vec4 C, in vec2 U) {
+  float t = iTime * pi;
+  float s = 1.0;
+  float d = 0.0;
+  vec2  R = iResolution;
+
+  vec3 o = vec3(0.0, 0.0, -7.0);
+  vec3 u = normalize(vec3((U - 0.5 * R) / R.y, uFocalLength));
+  vec2 k = vec2(0.0);
+  vec3 p;
+
+  float t1 = t * 0.7;
+  float t2 = t * 0.9;
+  float tSpeed1 = t * uSpeed1;
+  float tSpeed2 = t * uSpeed2 * uDir2;
+
+  for (int i = 0; i < MAX_STEPS; ++i) {
+    p = o + u * d;
+    p.x -= 15.0;
+
+    float px = p.x;
+    float wob1 = uBend1 + sin(t1 + px * 0.8) * 0.1;
+    float wob2 = uBend2 + cos(t2 + px * 1.1) * 0.1;
+
+    float px2 = px + pi_2;
+    vec2 sinOffset = sin(vec2(px, px2) + tSpeed1) * wob1;
+    vec2 cosOffset = cos(vec2(px, px2) + tSpeed2) * wob2;
+
+    vec2 yz = p.yz;
+    float pxLt = px + lt;
+    k.x = max(pxLt, length(yz - sinOffset) - lt);
+    k.y = max(pxLt, length(yz - cosOffset) - lt);
+
+    float current = min(k.x, k.y);
+    s = min(s, current);
+    if (s < 0.001 || d > 300.0) break;
+    d += s * 0.7;
+  }
+
+  float sqrtD = sqrt(d);
+  vec3 raw = max(cos(d * pi2) - s * sqrtD - vec3(k, 0.0), 0.0);
+  raw.gb += 0.1;
+  float maxC = max(raw.r, max(raw.g, raw.b));
+  if (maxC < 0.15) discard;
+  raw = raw * 0.4 + raw.brg * 0.6 + raw * raw;
+  float lum = dot(raw, vec3(0.299, 0.587, 0.114));
+  float w1 = max(0.0, 1.0 - k.x * 2.0);
+  float w2 = max(0.0, 1.0 - k.y * 2.0);
+  float wt = w1 + w2 + 0.001;
+  vec3 c = (uColor1 * w1 + uColor2 * w2) / wt * lum * 3.5;
+  C = vec4(c, 1.0);
+}
+
+void main() {
+  vec2 coord = gl_FragCoord.xy + uOffset;
+  coord -= 0.5 * iResolution;
+  float c = cos(uRotation), s = sin(uRotation);
+  coord = mat2(c, -s, s, c) * coord;
+  coord += 0.5 * iResolution;
+
+  vec4 color;
+  mainImage(color, coord);
+  gl_FragColor = color;
+}
+`;
+
+export default function PlasmaWave(props) {
+  const {
+    xOffset = 0,
+    yOffset = 0,
+    rotationDeg = 0,
+    focalLength = 0.8,
+    speed1 = 0.05,
+    speed2 = 0.05,
+    dir2 = 1.0,
+    bend1 = 1,
+    bend2 = 0.5,
+    colors = ['#A855F7', '#06B6D4']
+  } = props;
+
+  const propsRef = useRef(props);
+  propsRef.current = props;
+
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const ctn = containerRef.current;
+    if (!ctn) return;
+
+    const renderer = new Renderer({
+      alpha: true,
+      dpr: Math.min(window.devicePixelRatio, 1.5),
+      antialias: false,
+      depth: false,
+      stencil: false,
+      premultipliedAlpha: false,
+      preserveDrawingBuffer: false,
+      powerPreference: 'high-performance'
+    });
+
+    const gl = renderer.gl;
+    gl.clearColor(0, 0, 0, 0);
+    ctn.appendChild(gl.canvas);
+
+    const camera = new Camera(gl);
+    const scene = new Transform();
+
+    const geometry = new Geometry(gl, {
+      position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) }
+    });
+
+    const uniformOffset = new Float32Array([xOffset, yOffset]);
+    const uniformResolution = new Float32Array([1, 1]);
+    const c1 = hexToRgb(colors[0]);
+    const c2 = hexToRgb(colors[1]);
+
+    const program = new Program(gl, {
+      vertex: VERT,
+      fragment: FRAG,
+      uniforms: {
+        iTime: { value: 0 },
+        iResolution: { value: uniformResolution },
+        uOffset: { value: uniformOffset },
+        uRotation: { value: (rotationDeg * Math.PI) / 180 },
+        uFocalLength: { value: focalLength },
+        uSpeed1: { value: speed1 },
+        uSpeed2: { value: speed2 },
+        uDir2: { value: dir2 },
+        uBend1: { value: bend1 },
+        uBend2: { value: bend2 },
+        uColor1: { value: c1 },
+        uColor2: { value: c2 }
+      }
+    });
+
+    new Mesh(gl, { geometry, program }).setParent(scene);
+
+    function resize() {
+      if (!ctn) return;
+      const { width, height } = ctn.getBoundingClientRect();
+      renderer.setSize(width, height);
+      uniformResolution[0] = width * renderer.dpr;
+      uniformResolution[1] = height * renderer.dpr;
+      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+
+    const ro = new ResizeObserver(resize);
+    ro.observe(ctn);
+    resize();
+
+    const startTime = performance.now();
+    let animateId;
+
+    const update = (now) => {
+      const {
+        xOffset: xOff = 0,
+        yOffset: yOff = 0,
+        rotationDeg: rot = 0,
+        focalLength: fLen = 0.8,
+        speed1: s1 = 0.05,
+        speed2: s2 = 0.05,
+        dir2: d2 = 1.0,
+        bend1: b1 = 1,
+        bend2: b2 = 0.5,
+        colors: cols = ['#A855F7', '#06B6D4']
+      } = propsRef.current;
+
+      uniformOffset[0] = xOff;
+      uniformOffset[1] = yOff;
+      program.uniforms.iTime.value = (now - startTime) * 0.001;
+      program.uniforms.uRotation.value = (rot * Math.PI) / 180;
+      program.uniforms.uFocalLength.value = fLen;
+      program.uniforms.uSpeed1.value = s1;
+      program.uniforms.uSpeed2.value = s2;
+      program.uniforms.uDir2.value = d2;
+      program.uniforms.uBend1.value = b1;
+      program.uniforms.uBend2.value = b2;
+      program.uniforms.uColor1.value = hexToRgb(cols[0]);
+      program.uniforms.uColor2.value = hexToRgb(cols[1]);
+
+      renderer.render({ scene, camera });
+      animateId = requestAnimationFrame(update);
+    };
+
+    animateId = requestAnimationFrame(update);
+
+    return () => {
+      cancelAnimationFrame(animateId);
+      ro.disconnect();
+      if (ctn && gl.canvas.parentNode === ctn) {
+        ctn.removeChild(gl.canvas);
+      }
+      gl.getExtension('WEBGL_lose_context')?.loseContext();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <div ref={containerRef} className="plasma-wave-container" />;
+}

package/dist/assets/upstream/recipes/imported/prism/Prism.css

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

package/dist/assets/upstream/recipes/imported/prism/Prism.jsx

@@ -0,0 +1,436 @@
+import { useEffect, useRef } from 'react';
+import { Renderer, Triangle, Program, Mesh } from 'ogl';
+import './Prism.css';
+
+const Prism = ({
+  height = 3.5,
+  baseWidth = 5.5,
+  animationType = 'rotate',
+  glow = 1,
+  offset = { x: 0, y: 0 },
+  noise = 0.5,
+  transparent = true,
+  scale = 3.6,
+  hueShift = 0,
+  colorFrequency = 1,
+  hoverStrength = 2,
+  inertia = 0.05,
+  bloom = 1,
+  suspendWhenOffscreen = false,
+  timeScale = 0.5
+}) => {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const H = Math.max(0.001, height);
+    const BW = Math.max(0.001, baseWidth);
+    const BASE_HALF = BW * 0.5;
+    const GLOW = Math.max(0.0, glow);
+    const NOISE = Math.max(0.0, noise);
+    const offX = offset?.x ?? 0;
+    const offY = offset?.y ?? 0;
+    const SAT = transparent ? 1.5 : 1;
+    const SCALE = Math.max(0.001, scale);
+    const HUE = hueShift || 0;
+    const CFREQ = Math.max(0.0, colorFrequency || 1);
+    const BLOOM = Math.max(0.0, bloom || 1);
+    const RSX = 1;
+    const RSY = 1;
+    const RSZ = 1;
+    const TS = Math.max(0, timeScale || 1);
+    const HOVSTR = Math.max(0, hoverStrength || 1);
+    const INERT = Math.max(0, Math.min(1, inertia || 0.12));
+
+    const dpr = Math.min(2, window.devicePixelRatio || 1);
+    const renderer = new Renderer({
+      dpr,
+      alpha: transparent,
+      antialias: false
+    });
+    const gl = renderer.gl;
+    gl.disable(gl.DEPTH_TEST);
+    gl.disable(gl.CULL_FACE);
+    gl.disable(gl.BLEND);
+
+    Object.assign(gl.canvas.style, {
+      position: 'absolute',
+      inset: '0',
+      width: '100%',
+      height: '100%',
+      display: 'block'
+    });
+    container.appendChild(gl.canvas);
+
+    const vertex = /* glsl */ `
+      attribute vec2 position;
+      void main() {
+        gl_Position = vec4(position, 0.0, 1.0);
+      }
+    `;
+
+    const fragment = /* glsl */ `
+      precision highp float;
+
+      uniform vec2  iResolution;
+      uniform float iTime;
+
+      uniform float uHeight;
+      uniform float uBaseHalf;
+      uniform mat3  uRot;
+      uniform int   uUseBaseWobble;
+      uniform float uGlow;
+      uniform vec2  uOffsetPx;
+      uniform float uNoise;
+      uniform float uSaturation;
+      uniform float uScale;
+      uniform float uHueShift;
+      uniform float uColorFreq;
+      uniform float uBloom;
+      uniform float uCenterShift;
+      uniform float uInvBaseHalf;
+      uniform float uInvHeight;
+      uniform float uMinAxis;
+      uniform float uPxScale;
+      uniform float uTimeScale;
+
+      vec4 tanh4(vec4 x){
+        vec4 e2x = exp(2.0*x);
+        return (e2x - 1.0) / (e2x + 1.0);
+      }
+
+      float rand(vec2 co){
+        return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453123);
+      }
+
+      float sdOctaAnisoInv(vec3 p){
+        vec3 q = vec3(abs(p.x) * uInvBaseHalf, abs(p.y) * uInvHeight, abs(p.z) * uInvBaseHalf);
+        float m = q.x + q.y + q.z - 1.0;
+        return m * uMinAxis * 0.5773502691896258;
+      }
+
+      float sdPyramidUpInv(vec3 p){
+        float oct = sdOctaAnisoInv(p);
+        float halfSpace = -p.y;
+        return max(oct, halfSpace);
+      }
+
+      mat3 hueRotation(float a){
+        float c = cos(a), s = sin(a);
+        mat3 W = mat3(
+          0.299, 0.587, 0.114,
+          0.299, 0.587, 0.114,
+          0.299, 0.587, 0.114
+        );
+        mat3 U = mat3(
+           0.701, -0.587, -0.114,
+          -0.299,  0.413, -0.114,
+          -0.300, -0.588,  0.886
+        );
+        mat3 V = mat3(
+           0.168, -0.331,  0.500,
+           0.328,  0.035, -0.500,
+          -0.497,  0.296,  0.201
+        );
+        return W + U * c + V * s;
+      }
+
+      void main(){
+        vec2 f = (gl_FragCoord.xy - 0.5 * iResolution.xy - uOffsetPx) * uPxScale;
+
+        float z = 5.0;
+        float d = 0.0;
+
+        vec3 p;
+        vec4 o = vec4(0.0);
+
+        float centerShift = uCenterShift;
+        float cf = uColorFreq;
+
+        mat2 wob = mat2(1.0);
+        if (uUseBaseWobble == 1) {
+          float t = iTime * uTimeScale;
+          float c0 = cos(t + 0.0);
+          float c1 = cos(t + 33.0);
+          float c2 = cos(t + 11.0);
+          wob = mat2(c0, c1, c2, c0);
+        }
+
+        const int STEPS = 100;
+        for (int i = 0; i < STEPS; i++) {
+          p = vec3(f, z);
+          p.xz = p.xz * wob;
+          p = uRot * p;
+          vec3 q = p;
+          q.y += centerShift;
+          d = 0.1 + 0.2 * abs(sdPyramidUpInv(q));
+          z -= d;
+          o += (sin((p.y + z) * cf + vec4(0.0, 1.0, 2.0, 3.0)) + 1.0) / d;
+        }
+
+        o = tanh4(o * o * (uGlow * uBloom) / 1e5);
+
+        vec3 col = o.rgb;
+        float n = rand(gl_FragCoord.xy + vec2(iTime));
+        col += (n - 0.5) * uNoise;
+        col = clamp(col, 0.0, 1.0);
+
+        float L = dot(col, vec3(0.2126, 0.7152, 0.0722));
+        col = clamp(mix(vec3(L), col, uSaturation), 0.0, 1.0);
+
+        if(abs(uHueShift) > 0.0001){
+          col = clamp(hueRotation(uHueShift) * col, 0.0, 1.0);
+        }
+
+        gl_FragColor = vec4(col, o.a);
+      }
+    `;
+
+    const geometry = new Triangle(gl);
+    const iResBuf = new Float32Array(2);
+    const offsetPxBuf = new Float32Array(2);
+
+    const program = new Program(gl, {
+      vertex,
+      fragment,
+      uniforms: {
+        iResolution: { value: iResBuf },
+        iTime: { value: 0 },
+        uHeight: { value: H },
+        uBaseHalf: { value: BASE_HALF },
+        uUseBaseWobble: { value: 1 },
+        uRot: { value: new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]) },
+        uGlow: { value: GLOW },
+        uOffsetPx: { value: offsetPxBuf },
+        uNoise: { value: NOISE },
+        uSaturation: { value: SAT },
+        uScale: { value: SCALE },
+        uHueShift: { value: HUE },
+        uColorFreq: { value: CFREQ },
+        uBloom: { value: BLOOM },
+        uCenterShift: { value: H * 0.25 },
+        uInvBaseHalf: { value: 1 / BASE_HALF },
+        uInvHeight: { value: 1 / H },
+        uMinAxis: { value: Math.min(BASE_HALF, H) },
+        uPxScale: {
+          value: 1 / ((gl.drawingBufferHeight || 1) * 0.1 * SCALE)
+        },
+        uTimeScale: { value: TS }
+      }
+    });
+    const mesh = new Mesh(gl, { geometry, program });
+
+    const resize = () => {
+      const w = container.clientWidth || 1;
+      const h = container.clientHeight || 1;
+      renderer.setSize(w, h);
+      iResBuf[0] = gl.drawingBufferWidth;
+      iResBuf[1] = gl.drawingBufferHeight;
+      offsetPxBuf[0] = offX * dpr;
+      offsetPxBuf[1] = offY * dpr;
+      program.uniforms.uPxScale.value = 1 / ((gl.drawingBufferHeight || 1) * 0.1 * SCALE);
+    };
+    const ro = new ResizeObserver(resize);
+    ro.observe(container);
+    resize();
+
+    const rotBuf = new Float32Array(9);
+    const setMat3FromEuler = (yawY, pitchX, rollZ, out) => {
+      const cy = Math.cos(yawY),
+        sy = Math.sin(yawY);
+      const cx = Math.cos(pitchX),
+        sx = Math.sin(pitchX);
+      const cz = Math.cos(rollZ),
+        sz = Math.sin(rollZ);
+      const r00 = cy * cz + sy * sx * sz;
+      const r01 = -cy * sz + sy * sx * cz;
+      const r02 = sy * cx;
+
+      const r10 = cx * sz;
+      const r11 = cx * cz;
+      const r12 = -sx;
+
+      const r20 = -sy * cz + cy * sx * sz;
+      const r21 = sy * sz + cy * sx * cz;
+      const r22 = cy * cx;
+
+      out[0] = r00;
+      out[1] = r10;
+      out[2] = r20;
+      out[3] = r01;
+      out[4] = r11;
+      out[5] = r21;
+      out[6] = r02;
+      out[7] = r12;
+      out[8] = r22;
+      return out;
+    };
+
+    const NOISE_IS_ZERO = NOISE < 1e-6;
+    let raf = 0;
+    const t0 = performance.now();
+    const startRAF = () => {
+      if (raf) return;
+      raf = requestAnimationFrame(render);
+    };
+    const stopRAF = () => {
+      if (!raf) return;
+      cancelAnimationFrame(raf);
+      raf = 0;
+    };
+
+    const rnd = () => Math.random();
+    const wX = (0.3 + rnd() * 0.6) * RSX;
+    const wY = (0.2 + rnd() * 0.7) * RSY;
+    const wZ = (0.1 + rnd() * 0.5) * RSZ;
+    const phX = rnd() * Math.PI * 2;
+    const phZ = rnd() * Math.PI * 2;
+
+    let yaw = 0,
+      pitch = 0,
+      roll = 0;
+    let targetYaw = 0,
+      targetPitch = 0;
+    const lerp = (a, b, t) => a + (b - a) * t;
+
+    const pointer = { x: 0, y: 0, inside: true };
+    const onMove = e => {
+      const ww = Math.max(1, window.innerWidth);
+      const wh = Math.max(1, window.innerHeight);
+      const cx = ww * 0.5;
+      const cy = wh * 0.5;
+      const nx = (e.clientX - cx) / (ww * 0.5);
+      const ny = (e.clientY - cy) / (wh * 0.5);
+      pointer.x = Math.max(-1, Math.min(1, nx));
+      pointer.y = Math.max(-1, Math.min(1, ny));
+      pointer.inside = true;
+    };
+    const onLeave = () => {
+      pointer.inside = false;
+    };
+    const onBlur = () => {
+      pointer.inside = false;
+    };
+
+    let onPointerMove = null;
+    if (animationType === 'hover') {
+      onPointerMove = e => {
+        onMove(e);
+        startRAF();
+      };
+      window.addEventListener('pointermove', onPointerMove, { passive: true });
+      window.addEventListener('mouseleave', onLeave);
+      window.addEventListener('blur', onBlur);
+      program.uniforms.uUseBaseWobble.value = 0;
+    } else if (animationType === '3drotate') {
+      program.uniforms.uUseBaseWobble.value = 0;
+    } else {
+      program.uniforms.uUseBaseWobble.value = 1;
+    }
+
+    const render = t => {
+      const time = (t - t0) * 0.001;
+      program.uniforms.iTime.value = time;
+
+      let continueRAF = true;
+
+      if (animationType === 'hover') {
+        const maxPitch = 0.6 * HOVSTR;
+        const maxYaw = 0.6 * HOVSTR;
+        targetYaw = (pointer.inside ? -pointer.x : 0) * maxYaw;
+        targetPitch = (pointer.inside ? pointer.y : 0) * maxPitch;
+        const prevYaw = yaw;
+        const prevPitch = pitch;
+        const prevRoll = roll;
+        yaw = lerp(prevYaw, targetYaw, INERT);
+        pitch = lerp(prevPitch, targetPitch, INERT);
+        roll = lerp(prevRoll, 0, 0.1);
+        program.uniforms.uRot.value = setMat3FromEuler(yaw, pitch, roll, rotBuf);
+
+        if (NOISE_IS_ZERO) {
+          const settled =
+            Math.abs(yaw - targetYaw) < 1e-4 && Math.abs(pitch - targetPitch) < 1e-4 && Math.abs(roll) < 1e-4;
+          if (settled) continueRAF = false;
+        }
+      } else if (animationType === '3drotate') {
+        const tScaled = time * TS;
+        yaw = tScaled * wY;
+        pitch = Math.sin(tScaled * wX + phX) * 0.6;
+        roll = Math.sin(tScaled * wZ + phZ) * 0.5;
+        program.uniforms.uRot.value = setMat3FromEuler(yaw, pitch, roll, rotBuf);
+        if (TS < 1e-6) continueRAF = false;
+      } else {
+        rotBuf[0] = 1;
+        rotBuf[1] = 0;
+        rotBuf[2] = 0;
+        rotBuf[3] = 0;
+        rotBuf[4] = 1;
+        rotBuf[5] = 0;
+        rotBuf[6] = 0;
+        rotBuf[7] = 0;
+        rotBuf[8] = 1;
+        program.uniforms.uRot.value = rotBuf;
+        if (TS < 1e-6) continueRAF = false;
+      }
+
+      renderer.render({ scene: mesh });
+      if (continueRAF) {
+        raf = requestAnimationFrame(render);
+      } else {
+        raf = 0;
+      }
+    };
+
+    if (suspendWhenOffscreen) {
+      const io = new IntersectionObserver(entries => {
+        const vis = entries.some(e => e.isIntersecting);
+        if (vis) startRAF();
+        else stopRAF();
+      });
+      io.observe(container);
+      startRAF();
+      container.__prismIO = io;
+    } else {
+      startRAF();
+    }
+
+    return () => {
+      stopRAF();
+      ro.disconnect();
+      if (animationType === 'hover') {
+        if (onPointerMove) window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('mouseleave', onLeave);
+        window.removeEventListener('blur', onBlur);
+      }
+      if (suspendWhenOffscreen) {
+        const io = container.__prismIO;
+        if (io) io.disconnect();
+        delete container.__prismIO;
+      }
+      if (gl.canvas.parentElement === container) container.removeChild(gl.canvas);
+    };
+  }, [
+    height,
+    baseWidth,
+    animationType,
+    glow,
+    noise,
+    offset?.x,
+    offset?.y,
+    scale,
+    transparent,
+    hueShift,
+    colorFrequency,
+    timeScale,
+    hoverStrength,
+    inertia,
+    bloom,
+    suspendWhenOffscreen
+  ]);
+
+  return <div className="prism-container" ref={containerRef} />;
+};
+
+export default Prism;

package/dist/assets/upstream/recipes/imported/prismatic-burst/PrismaticBurst.css

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