@mrigx/fx 0.1.0

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@mrigx/fx",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/fx.umd.js",
+  "module": "./dist/fx.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/fx.es.js",
+      "require": "./dist/fx.umd.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@mrigx/core": "*",
+    "@mrigx/react": "*"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.7.2",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "@vitejs/plugin-react": "^4.3.4"
+  }
+}

package/src/cursors/caustic-cursor.tsx

@@ -0,0 +1,16 @@
+
+import React, { useEffect, useState } from 'react';
+export function CausticCursor() {
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  useEffect(() => {
+    document.body.style.cursor = 'none';
+    const handleMove = (e: MouseEvent) => setPos({ x: e.clientX, y: e.clientY });
+    window.addEventListener('mousemove', handleMove);
+    return () => { document.body.style.cursor = ''; window.removeEventListener('mousemove', handleMove); };
+  }, []);
+  return (
+    <div className="pointer-events-none fixed top-0 left-0 z-[9999] mix-blend-overlay transition-transform duration-75 ease-out"
+      style={{ transform: `translate3d(${pos.x}px, ${pos.y}px, 0) translate(-50%, -50%)`, width: '40px', height: '40px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%)' }}
+    />
+  );
+}

package/src/cursors/cavitation-cursor.tsx

@@ -0,0 +1,28 @@
+
+import React, { useEffect, useState } from 'react';
+import { useEngine } from '@mrigx/react';
+export function CavitationCursor() {
+  const engine = useEngine();
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  useEffect(() => {
+    let lastTime = 0;
+    document.body.style.cursor = 'none';
+    const handleMove = (e: MouseEvent) => {
+      setPos({ x: e.clientX, y: e.clientY });
+      const now = performance.now();
+      if (now - lastTime < 32) return;
+      lastTime = now;
+      if (engine && engine.triggerDisturbance) {
+        // High strength but very small radius mimics a sharp vacuum drop
+        engine.triggerDisturbance(e.clientX / window.innerWidth, e.clientY / window.innerHeight, -2.0, 0.02);
+      }
+    };
+    window.addEventListener('mousemove', handleMove);
+    return () => { document.body.style.cursor = ''; window.removeEventListener('mousemove', handleMove); };
+  }, [engine]);
+  return (
+    <div className="pointer-events-none fixed top-0 left-0 z-[9999] w-4 h-4 rounded-full bg-black border border-white/20 mix-blend-difference"
+      style={{ transform: `translate3d(${pos.x}px, ${pos.y}px, 0) translate(-50%, -50%)` }}
+    />
+  );
+}

package/src/cursors/glass-rod-cursor.tsx

@@ -0,0 +1,20 @@
+
+import React, { useEffect, useRef } from 'react';
+import { useMrigSurface } from '@mrigx/react';
+export function GlassRodCursor() {
+  const localRef = useRef<any>(null);
+  const mrigRef = useMrigSurface<HTMLDivElement>({ material: 'glass', materialStrength: 1.5, borderRadius: 4 }, localRef);
+  useEffect(() => {
+    document.body.style.cursor = 'none';
+    const handleMove = (e: MouseEvent) => {
+      if (localRef.current) {
+        localRef.current.style.transform = `translate3d(${e.clientX}px, ${e.clientY}px, 0) translate(-50%, -50%)`;
+      }
+    };
+    window.addEventListener('mousemove', handleMove);
+    return () => { document.body.style.cursor = ''; window.removeEventListener('mousemove', handleMove); };
+  }, [localRef]);
+  return (
+    <div ref={mrigRef as any} className="pointer-events-none fixed top-0 left-0 z-[9999] w-1.5 h-8 rounded-sm bg-white/30 mix-blend-overlay shadow-[0_0_10px_rgba(255,255,255,0.5)]" />
+  );
+}

package/src/cursors/lens-cursor.tsx

@@ -0,0 +1,20 @@
+
+import React, { useEffect, useRef } from 'react';
+import { useMrigSurface } from '@mrigx/react';
+export function LensCursor() {
+  const localRef = useRef<any>(null);
+  const mrigRef = useMrigSurface<HTMLDivElement>({ material: 'crystal', materialStrength: 2.0, borderRadius: 9999 }, localRef);
+  useEffect(() => {
+    document.body.style.cursor = 'none';
+    const handleMove = (e: MouseEvent) => {
+      if (localRef.current) {
+        localRef.current.style.transform = `translate3d(${e.clientX}px, ${e.clientY}px, 0) translate(-50%, -50%)`;
+      }
+    };
+    window.addEventListener('mousemove', handleMove);
+    return () => { document.body.style.cursor = ''; window.removeEventListener('mousemove', handleMove); };
+  }, [localRef]);
+  return (
+    <div ref={mrigRef as any} className="pointer-events-none fixed top-0 left-0 z-[9999] w-16 h-16 rounded-full border border-white/20 bg-white/5" />
+  );
+}

package/src/cursors/magnetic-cursor.tsx

@@ -0,0 +1,20 @@
+
+import React, { useEffect } from 'react';
+import { useEngine } from '@mrigx/react';
+export function MagneticCursor() {
+  const engine = useEngine();
+  useEffect(() => {
+    let lastTime = 0;
+    const handleMove = (e: MouseEvent) => {
+      const now = performance.now();
+      if (now - lastTime < 16) return;
+      lastTime = now;
+      if (engine && engine.triggerDisturbance) {
+        engine.triggerDisturbance(e.clientX / window.innerWidth, e.clientY / window.innerHeight, 1.5, 0.08);
+      }
+    };
+    window.addEventListener('mousemove', handleMove);
+    return () => window.removeEventListener('mousemove', handleMove);
+  }, [engine]);
+  return null; // Invisible, pure fluid interaction
+}

package/src/cursors/prismatic-cursor.tsx

@@ -0,0 +1,20 @@
+
+import React, { useEffect, useRef } from 'react';
+import { useMrigSurface } from '@mrigx/react';
+export function PrismaticCursor() {
+  const localRef = useRef<any>(null);
+  const mrigRef = useMrigSurface<HTMLDivElement>({ material: 'glass', materialStrength: 2.5, borderRadius: 4 }, localRef);
+  useEffect(() => {
+    document.body.style.cursor = 'none';
+    const handleMove = (e: MouseEvent) => {
+      if (localRef.current) {
+        localRef.current.style.transform = `translate3d(${e.clientX}px, ${e.clientY}px, 0) translate(-50%, -50%)`;
+      }
+    };
+    window.addEventListener('mousemove', handleMove);
+    return () => { document.body.style.cursor = ''; window.removeEventListener('mousemove', handleMove); };
+  }, [localRef]);
+  return (
+    <div ref={mrigRef as any} className="pointer-events-none fixed top-0 left-0 z-[9999] w-8 h-8 rounded border border-white/40 bg-white/10" />
+  );
+}

package/src/cursors/tension-cursor.tsx

@@ -0,0 +1,26 @@
+
+import React, { useEffect } from 'react';
+export function TensionCursor() {
+  useEffect(() => {
+    const handleMove = (e: MouseEvent) => {
+      const elements = document.querySelectorAll('p, h1, h2, h3, a, button');
+      elements.forEach((el) => {
+        const rect = el.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const distX = e.clientX - centerX;
+        const distY = e.clientY - centerY;
+        const distance = Math.sqrt(distX * distX + distY * distY);
+        if (distance < 150) {
+           const pull = (150 - distance) / 15;
+           (el as HTMLElement).style.transform = `translate(${distX > 0 ? pull : -pull}px, ${distY > 0 ? pull : -pull}px)`;
+        } else {
+           (el as HTMLElement).style.transform = 'translate(0px, 0px)';
+        }
+      });
+    };
+    window.addEventListener('mousemove', handleMove);
+    return () => window.removeEventListener('mousemove', handleMove);
+  }, []);
+  return null;
+}

package/src/effects/optical-abyss.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useEngine } from '@mrigx/react';
+
+export function OpticalAbyss({ intensity = 1.0, parallax = 1.0 }: { intensity?: number, parallax?: number }) {
+  const engine = useEngine();
+  
+  useEffect(() => {
+    if (engine) {
+      engine.setConfig({ abyssIntensity: intensity, parallaxIntensity: parallax });
+      return () => {
+        engine.setConfig({ abyssIntensity: 0.0, parallaxIntensity: 1.0 });
+      };
+    }
+  }, [engine, intensity, parallax]);
+  
+  return null;
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from './materials/abyss-surface';
+export * from './materials/glass-surface';
+export * from './materials/ripple-surface';
+export * from './effects/optical-abyss';
+export * from './cursors/caustic-cursor';
+export * from './cursors/cavitation-cursor';
+export * from './cursors/glass-rod-cursor';
+export * from './cursors/lens-cursor';
+export * from './cursors/magnetic-cursor';
+export * from './cursors/prismatic-cursor';
+export * from './cursors/tension-cursor';

package/src/materials/abyss-surface.tsx

@@ -0,0 +1,14 @@
+
+import React, { forwardRef } from 'react';
+import { useMrigSurface } from '@mrigx/react';
+
+export const AbyssSurface = forwardRef<any, { as?: React.ElementType, materialStrength?: number, borderRadius?: number, children?: React.ReactNode, className?: string, [key: string]: any }>(({ as, materialStrength = 1.0, borderRadius = 16, children, className = "", ...props }, ref) => {
+  const Component = as || 'div';
+  const internalRef = useMrigSurface({ material: 'abyss', materialStrength, borderRadius }, ref);
+  return (
+    <Component ref={internalRef as any} className={className} {...props}>
+      {children}
+    </Component>
+  );
+});
+AbyssSurface.displayName = "AbyssSurface";

package/src/materials/glass-surface.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+import { useMrigSurface } from '@mrigx/react';
+import type { OpticalMaterial } from '@mrigx/core';
+
+export const GlassSurface = forwardRef<any, { as?: React.ElementType, material?: OpticalMaterial, materialStrength?: number, borderRadius?: number, children?: React.ReactNode, className?: string, [key: string]: any }>(({ as, material = 'glass', materialStrength = 1.0, borderRadius = 16, children, className = "", ...props }, ref) => {
+  const Component = as || 'div';
+  const internalRef = useMrigSurface({ material, materialStrength, borderRadius }, ref);
+  return (
+    <Component ref={internalRef as any} className={className} {...props}>
+      {children}
+    </Component>
+  );
+});
+GlassSurface.displayName = "GlassSurface";

package/src/materials/ripple-surface.tsx

@@ -0,0 +1,23 @@
+
+import React, { forwardRef } from 'react';
+import { useMrigSurface, useMrigInteraction } from '@mrigx/react';
+
+export const RippleSurface = forwardRef<any, { as?: React.ElementType, material?: number | string, materialStrength?: number, borderRadius?: number, children?: React.ReactNode, className?: string, onClick?: (e: any) => void, [key: string]: any }>(({ as, material = 1, materialStrength = 1.5, borderRadius = 8, children, className = "", onClick, ...props }, ref) => {
+  const Component = as || 'div';
+  const internalRef = useMrigSurface({ material, materialStrength, borderRadius }, ref);
+  const { pulseCenter } = useMrigInteraction();
+  return (
+    <Component 
+      ref={internalRef as any} 
+      className={className} 
+      onClick={(e: any) => {
+        pulseCenter(e.currentTarget, 0.4);
+        onClick?.(e);
+      }}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+});
+RippleSurface.displayName = "RippleSurface";

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "."
+  },
+  "include": [
+    "src"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+import url from 'url';
+
+const dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+export default defineConfig({
+  publicDir: false,
+  plugins: [
+    react(),
+    dts({ 
+      include: ['src/**/*'], 
+      outDir: 'dist', 
+      insertTypesEntry: true, 
+      tsconfigPath: './tsconfig.json' 
+    })
+  ],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    lib: {
+      entry: resolve(dirname, 'src/index.ts'),
+      name: 'MrigFx',
+      fileName: (format) => 'fx.' + format + '.js'
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@mrigx/core', '@mrigx/react'],
+      output: {
+        globals: {
+          'react': 'React',
+          'react-dom': 'ReactDOM',
+          '@mrigx/core': 'MrigCore',
+          '@mrigx/react': 'MrigReact'
+        }
+      }
+    }
+  }
+});