This component no longer exists. It was in react-bits’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-01 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.

Antigravity

react-bits-reactbits/Antigravity-JS-CSS

RemovedComponent

3D antigravity particle field that repels from the cursor with smooth motion.

Live preview

live · rendered by the registry

Rendered by react-bits on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://raw.githubusercontent.com/Mayne19/ui-kit/main/references/free-open-source/react-bits/repo/public/r/Antigravity-JS-CSS.json

Source

Antigravity/Antigravity.jsxraw.githubusercontent.com/Mayne19/ui-kit/main/references/free-open-source/react-bits/repo/public/r/Antigravity-JS-CSS.json

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

What it pulls in

npm packages

@react-three/fiber@^9.3.0
three@^0.167.1

Files it writes

Antigravity/Antigravity.jsx