Confirm?

Are you sure you want to proceed?
M
Michael Kaufman

Particle System Following Mouse

Clone & Customize via AI

Blazor Particle Demo renders a cursor-following particle system using absolute-positioned divs and component-scoped CSS. It uses an animation loop and mouse events to spawn and update particles.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Cursor-driven particle emitter created on @onmousemove events. - Per-particle lifecycle, velocity, gravity and opacity decay. - Animation loop that updates particles and triggers re-rendering. - Inline-style particle rendering and a centered information overlay. ## Key components - Razor component with @page and @implements IDisposable. - MouseEventArgs handler via @onmousemove to spawn particles. - Particle inner class (position, velocity, life, Style property). - AnimationLoop using Task.Delay and StateHasChanged. - CancellationTokenSource and Dispose to stop the loop. - Component-scoped CSS file (ParticleFollowDemo.razor.css). ## How it works - Mouse events create Particle instances at clientX/clientY with random velocity, size and HSL color. - AnimationLoop iterates, calls Particle.Update(), collects dead particles, removes them from the list, and calls StateHasChanged to re-render. - Each Particle exposes a Style string used as an inline style for absolute positioning and opacity. - Dispose cancels the token to stop the background loop; no external services or persistence are used. ## Styling - Uses Razor CSS isolation file with a full-viewport .particle-container and absolute .particle elements. - No Tailwind or Bootstrap classes detected; styling is plain CSS with pointer-events:none on particles to preserve mouse interactions. - Layout is responsive by using 100vw/100vh for the container; visual density depends on particle spawn rate. ## Reuse steps 1. Add ParticleFollowDemo.razor and ParticleFollowDemo.razor.css to a Blazor project (Client or Server). 2. No additional NuGet packages required; place the component in a route or reference it from a page. 3. Ensure CSS isolation files are compiled (filename.razor.css) and import namespaces if required. 4. Consider performance improvements: use requestAnimationFrame via JS interop, particle pooling, or canvas rendering for high counts. ## Limitations & next steps - This is a single demo page generated by Instruct UI and does not include app wiring, authentication, or state services. - Server-side Blazor may incur extra SignalR traffic due to frequent StateHasChanged; prefer client-side or JS rendering for heavy animations. - Touch input, resize handling, high-DPI scaling and particle pooling are not implemented and are recommended extensions.