Aerodynamic
Fluid dynamics smoke trail with realistic particle physics.
Main Features of Aerodynamic
How to Use Aerodynamic in Next.js
Installation Guide for Aerodynamic
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | bg-zinc-950 | Background color of the component |
title | string | Aerodynamic | Title text displayed |
buttonText | string | Hover Me | Text on the hover button |
fadeOpacity | number | 0.2 | Opacity of the fade effect |
velocityThreshold | number | 0.5 | Velocity threshold for particle spawning |
spawnChance | number | 0.5 | Probability of spawning particles |
particleSizeMin | number | 10 | Minimum particle size |
particleSizeMax | number | 30 | Maximum particle size |
lifeDecay | number | 0.015 | Particle life decay rate |
driftStrength | number | 0.05 | Strength of particle drift |
blurAmount | string | blur(8px) | CSS blur amount for particles |
className | string | Additional CSS classes |
Related Components
When to Use
This production-ready React UI component is ideal for luxury brands, high-end portfolios, and artistic modern web applications. Use this React component when you want to create a fluid, immersive atmosphere that responds to the user's focus and movement.
Best Practices
Optimize for performance in large-scale applications by being mindful of the `spawnChance`; setting it too high can lead to thousands of particles on screen. Follow React best practices by providing a fallback behavior for users who prefer reduced motion. Maintain scalable component architecture by using the `fadeOpacity` prop to balance visual intensity with system performance.
Why This Component Matters in Modern UI Development
Fluid dynamics and particle physics are at the forefront of premium modern UI development. This animated UI component helps you build an interface that feels alive and atmospheric, adding a layer of semantic authority and visual polish to your real-world application architecture.
Frequently Asked Questions
QHow does the smoke simulation work?
The component uses a high-performance canvas-based particle system with realistic velocity decay and drift physics.
QCan I change the smoke color?
Yes, the particles inherit from the background and fade properties, but custom color mapping can be easily added to the draw loop.
QIs it mobile-friendly?
Yes, it supports touch move events, though the intensity of particles is automatically throttled to ensure smooth performance on mobile GPUs.