Uilora Dynamic ASCII
A liquid-flow ASCII dot grid that reacts to mouse movement and features dynamic brightness.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| color1 | string | #020310 | Background color |
| color2 | string | #7dd3fc | Character color |
| gridSize | number | 70 | Number of characters across |
| speed | number | 1.0 | Animation speed |
| flowStrength | number | 1.0 | How much the dots move/offset |
| mouseInfluence | number | 0.5 | Cursor push strength |
When to Use
Perfect for developer tools, technical landing pages, or any site that wants a 'terminal' or 'matrix' vibe with a modern, liquid twist.
Best Practices
Keep the `gridSize` high (70+) for a dense, high-tech look, or lower (20-40) for a more abstract, chunky retro aesthetic.
Why This Component Matters
ASCII art is a staple of early computing culture. Bringing it into the modern era with fluid simulations and WebGL interaction creates a powerful bridge between nostalgic tech and cutting-edge design.
FAQ
QCan I change the character used?
This version is hardcoded to dots for performance and aesthetic consistency, but the brightness modulation creates a convincing character-like effect.
QHow do I make it more responsive to mouse?
Increase the `mouseInfluence` prop to make the grid warp more aggressively around the cursor.
QDoes it scale to full screen?
Yes, the grid density automatically adjusts based on the container size to maintain the desired `gridSize`.
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.