LimotUse the downloaded HTML file directly. It includes the canvas, styles, and animation script.
<!-- blackhole.html -->
Paste into your page to runBlack Hole
About Black Hole
A three-dimensional black hole with orbiting particles, simulated gravitational inflow, and a glowing event horizon, rendered live on Canvas. Featuring Particle occlusion with true 3D depth sorting and Toggleable event horizon sphere, this effect supports live adjustments, instant previews, and reusable exports in Limot.
Features
- Particle occlusion with true 3D depth sorting
- Toggleable event horizon sphere
- Adjustable center radius and position
- Multiple particle colors
- Adjustable orbit radius, particle count, and size
- Adjustable tilt and side tilt
- Adjustable trails, orbital speed, and gravitational inflow
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#111111Basics
ParameterCode keyCurrent value
Show center
showCenterOnCenter color
centerColor#000000Void radius
voidRadius40Void x
voidX50%Void y
voidY50%Colors
colors#ffffffLayout
ParameterCode keyCurrent value
Outer radius
outerRadius70Particle count
particleCount1000Particle size
particleSize4Trail
trail50Tilt
tilt20Tilt sideway
tiltSideway160Pull speed
pullSpeed0Animation
ParameterCode keyCurrent value
Orbit speed
orbitSpeed4Integration
Ready to use in your projectAdd the JSX file to your project and import it as a component. Override settings with props.
import Blackhole from "./Blackhole.jsx";
<Blackhole />Add the Vue single-file component to your project, import it, and use it in your template.
import Blackhole from "./Blackhole.vue";
<Blackhole />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.