Antigravity

1import { Canvas, useFrame, useThree } from '@react-three/fiber';
2import React, { useMemo, useRef } from 'react';
3import * as THREE from 'three';
4 
5interface AntigravityProps {
6  count?: number;
7  magnetRadius?: number;
8  ringRadius?: number;
9  waveSpeed?: number;
10  waveAmplitude?: number;
11  particleSize?: number;
12  lerpSpeed?: number;
13  color?: string;
14  autoAnimate?: boolean;
15  particleVariance?: number;
16  rotationSpeed?: number;
17  depthFactor?: number;
18  pulseSpeed?: number;
19  particleShape?: 'capsule' | 'sphere' | 'box' | 'tetrahedron';
20  fieldStrength?: number;
21}
22 
23const AntigravityInner: React.FC<AntigravityProps> = ({
24  count = 300,
25  magnetRadius = 10,
26  ringRadius = 10,
27  waveSpeed = 0.4,
28  waveAmplitude = 1,
29  particleSize = 2,
30  lerpSpeed = 0.1,
31  color = '#FF9FFC',
32  autoAnimate = false,
33  particleVariance = 1,
34  rotationSpeed = 0,
35  depthFactor = 1,
36  pulseSpeed = 3,
37  particleShape = 'capsule',
38  fieldStrength = 10
39}) => {
40  const meshRef = useRef<THREE.InstancedMesh>(null);
41  const { viewport } = useThree();
42  const dummy = useMemo(() => new THREE.Object3D(), []);
43 
44  const lastMousePos = useRef({ x: 0, y: 0 });
45  const lastMouseMoveTime = useRef(0);
46  const virtualMouse = useRef({ x: 0, y: 0 });
47 
48  const particles = useMemo(() => {
49    const temp = [];
50    const width = viewport.width || 100;
51    const height = viewport.height || 100;
52 
53    for (let i = 0; i < count; i++) {
54      const t = Math.random() * 100;
55      const factor = 20 + Math.random() * 100;
56      const speed = 0.01 + Math.random() / 200;
57      const xFactor = -50 + Math.random() * 100;
58      const yFactor = -50 + Math.random() * 100;
59      const zFactor = -50 + Math.random() * 100;
60 
61      const x = (Math.random() - 0.5) * width;
62      const y = (Math.random() - 0.5) * height;
63      const z = (Math.random() - 0.5) * 20;
64 
65      const randomRadiusOffset = (Math.random() - 0.5) * 2;
66 
67      temp.push({
68        t,
69        factor,
70        speed,
71        xFactor,
72        yFactor,
73        zFactor,
74        mx: x,
75        my: y,
76        mz: z,
77        cx: x,
78        cy: y,
79        cz: z,
80        vx: 0,
81        vy: 0,
82        vz: 0,
83        randomRadiusOffset
84      });
85    }
86    return temp;
87  }, [count, viewport.width, viewport.height]);
88 
89  useFrame(state => {
90    const mesh = meshRef.current;
91    if (!mesh) return;
92 
93    const { viewport: v, pointer: m } = state;
94 
95    const mouseDist = Math.sqrt(Math.pow(m.x - lastMousePos.current.x, 2) + Math.pow(m.y - lastMousePos.current.y, 2));
96 
97// … truncated