LimotUse the downloaded HTML file directly. It includes the canvas, styles, and animation script.
<!-- particle-cube.html -->
Paste into your page to runParticle Cube
About Particle Cube
A draggable particle cube continuously selects axes and layers for spring-driven quarter turns. Featuring Dotted cube surfaces and Random layer quarter turns, this effect supports live adjustments, instant previews, and reusable exports in Limot.
Features
- Dotted cube surfaces
- Random layer quarter turns
- Spring animation and grid snapping
- Draggable viewpoint and depth shading
Use cases
- Interactive websites and portfolios
- Exhibition screens and live installations
- Gamified campaigns and immersive pages
Configuration
Synced with the controlsSurface
ParameterCode keyCurrent value
Background color
backgroundColor#111111Color
color#f4f3efDot size
dotSize2pxSize percent
sizePercent100%Structure
ParameterCode keyCurrent value
Cube grid
cubeGrid3Dots per face
dotsPerFace4Rotation
ParameterCode keyCurrent value
X Axis speed
rotation.x2Y Axis speed
rotation.y5Z Axis speed
rotation.z0Drag sensitivity
dragSensitivity1Spring
ParameterCode keyCurrent value
Stiffness
transition.stiffness200Damping
transition.damping20Quality
transition.mass1Integration
Ready to use in your projectAdd the JSX file to your project and import it as a component. Override settings with props.
import ParticleCube from "./ParticleCube.jsx";
<ParticleCube />Add the Vue single-file component to your project, import it, and use it in your template.
import ParticleCube from "./ParticleCube.vue";
<ParticleCube />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.