LimotUse the downloaded HTML file directly. It includes the canvas, styles, and animation script.
<!-- particle-breath.html -->
Paste into your page to runParticle Breath
About Particle Breath
A soft folded volume of fine particles gently inhales and exhales as traveling waves deform its surface in place. Featuring Organic folded particle surface and Local breathing waves, this effect supports live adjustments, instant previews, and reusable exports in Limot.
Features
- Organic folded particle surface
- Local breathing waves
- Stable fine-point sampling
- Deterministic standalone animation
Use cases
- Website heroes and brand landing pages
- Product demos and launch pages
- Video intros and social media assets
Configuration
Synced with the controlsAppearance
ParameterCode keyCurrent value
Background color
backgroundColor#111111Particle color
dotColor#f4f3efScale
scale100%Particle size
particleSize1pxOpacity
opacity85%Breathing
ParameterCode keyCurrent value
Particle density
particleCount8500Speed
speed1Breath strength
breathStrength75%Integration
Ready to use in your projectAdd the JSX file to your project and import it as a component. Override settings with props.
import ParticleBreath from "./ParticleBreath.jsx";
<ParticleBreath />Add the Vue single-file component to your project, import it, and use it in your template.
import ParticleBreath from "./ParticleBreath.vue";
<ParticleBreath />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.