LimotUse the downloaded HTML file directly. It includes the canvas, styles, and animation script.
<!-- magnetic-field.html -->
Paste into your page to runMagnetic Field
About Magnetic Field
Fine dipole field lines gently breathe between two poles while particles flow along their curves. Featuring Two-pole fine-line composition and Arc-length particle flow, this effect supports live adjustments, instant previews, and reusable exports in Limot.
Features
- Two-pole fine-line composition
- Arc-length particle flow
- Gentle deterministic pole motion
- Light and dark appearance
Use cases
- Website heroes and brand landing pages
- Product demos and launch pages
- Video intros and social media assets
Configuration
Synced with the controlsSurface
ParameterCode keyCurrent value
Background color
backgroundColor#111111Line color
lineColor#f4f3efParticle color
dotColor#f4f3efLine width
lineWidth0.7pxField
ParameterCode keyCurrent value
Scale
scale94%Lines per side
lineCount18Pole separation
poleDistance100%Pole size
poleSize4pxMotion
ParameterCode keyCurrent value
Flow speed
speed1Pole drift
drift2%Particle density
particleCount2Particle size
particleSize1.9pxIntegration
Ready to use in your projectAdd the JSX file to your project and import it as a component. Override settings with props.
import MagneticField from "./MagneticField.jsx";
<MagneticField />Add the Vue single-file component to your project, import it, and use it in your template.
import MagneticField from "./MagneticField.vue";
<MagneticField />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.