v1.3.3
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
Graviton
Creates a magnetic particle field that forms a dynamic ring around your cursor. Features 3D instanced particles using Three.js with multiple shape options including capsules, spheres, boxes, and tetrahedrons. Particles are attracted to a magnetic field and orbit with wave-like motion, depth effects, and pulsating animations. Supports auto-animation mode when the mouse is idle or outside the container.
Graviton
Move your mouse to attract the particles into a magnetic ring.
Particles
Total number of particles in the scene. Higher values create denser fields but require more GPU resources. For best performance, keep below 500 on mobile devices.
Default: 300
Base scale multiplier for all particles. Larger particles are more visible but may overlap. Works in combination with pulse effects.
Default: 2
Geometry used for each particle. Capsules create elongated pill shapes that align toward the cursor. Spheres are classic round particles. Boxes give a geometric feel. Tetrahedrons add angular, crystal-like appearance.
Default: capsule
Size variation between particles during pulse animation. Higher values create more dynamic size differences. Set to 0 for uniform particle sizes.
Default: 1
Color applied to all particles. Supports hex, RGB, and HSL formats. Bright colors work best against dark backgrounds.
Default: #FF9FFC (pink)
Magnetic Field
Distance from cursor where particles start being attracted. Particles outside this radius float freely. Larger values create wider attraction zones.
Default: 10
Distance from cursor where attracted particles orbit. This defines the size of the particle ring that forms around your mouse.
Default: 10
How tightly particles are held in the ring formation. Higher values create more uniform rings with less deviation. Lower values allow particles to spread out more naturally.
Default: 10
Animation
Speed of the wave motion that ripples through particles in the ring. Higher values create faster, more energetic waves.
Default: 0.4
Intensity of the wave displacement. Higher values make particles move further in and out from the ring center. Also affects Z-axis depth motion.
Default: 1
How quickly particles move toward their target positions. Lower values create smoother, more delayed motion. Higher values make particles snap into place faster.
Default: 0.1
Speed at which the entire particle ring rotates around the cursor. Set to 0 for no rotation. Positive values rotate clockwise.
Default: 0
Frequency of the size pulsation effect on particles. Higher values create faster breathing-like animations.
Default: 3
Multiplier for Z-axis depth positioning. Higher values spread particles further in 3D space. Set to 0 for a flat 2D appearance.
Default: 1
Auto Animation
Enable automatic cursor movement when the mouse is idle or outside the container. The virtual cursor follows a smooth figure-eight pattern to keep the effect alive.
Default: Off
Time in milliseconds before auto-animation kicks in after mouse stops moving. Only applies when Auto Animate is enabled.
Default: 2000
Performance
This element uses WebGL with Three.js instanced meshes for efficient particle rendering. Features perspective camera with 35° FOV, custom capsule geometry generation, and per-frame matrix updates for smooth 60fps animation. Uses ResizeObserver for responsive container adaptation. Very resource intensive due to 3D rendering pipeline - limit to 1 instance per page. Reduce particle count on mobile devices or low-end hardware for better performance.