LimotUse the downloaded HTML file directly. It includes the canvas, styles, and animation script.
<!-- ParticleSphere.html -->
Paste into your page to runParticle Sphere
About Particle Sphere
A three-dimensional sphere of thousands of glowing particles responds to dragging and cursor movement. Featuring Fibonacci uniform distribution and Auto rotation and drag inertia, this effect supports live adjustments, instant previews, and reusable exports in Limot.
Features
- Fibonacci uniform distribution
- Auto rotation and drag inertia
- Cursor repulsion
- High-DPI Canvas rendering
Use cases
- Interactive websites and portfolios
- Exhibition screens and live installations
- Gamified campaigns and immersive pages
Configuration
Synced with the controlsBackground
ParameterCode keyCurrent value
Background color
backgroundColor#111111Layout
ParameterCode keyCurrent value
Particle count
particlesCount10000Particle size
particleScale4Sphere scale
scale10Animation
ParameterCode keyCurrent value
Rotation direction
rotationDirectionclockwiseSpeed
speed20Enable dragging
dragOnSmoothness
smoothing7Drag speed
dragSpeed5Pause on hover
stopOnHoverOffInteraction
ParameterCode keyCurrent value
Cursor interaction
cursorOnOnCursor radius
cursorRadiusUI75pxCursor strength
cursorStrengthUI10Click strength
clickForce5Color
ParameterCode keyCurrent value
Sphere color
sphereColor#f4f3efIntegration
Ready to use in your projectAdd the JSX file to your project and import it as a component. Override settings with props.
import Particlesphere from "./Particlesphere.jsx";
<Particlesphere />Add the Vue single-file component to your project, import it, and use it in your template.
import Particlesphere from "./Particlesphere.vue";
<Particlesphere />Exports include your current settings. React and Vue components also accept the configuration keys below as props.
Customize in real time, copy standalone code, or export MP4, GIF, and PNG with optional transparency.