Molten Core
Additive thermal particles creating glowing lava effect.
Main Features of Molten Core
How to Use Molten Core in Next.js
Installation Guide for Molten Core
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | bg-zinc-950 | Background color of the component |
title | string | Molten Core | Title text displayed |
buttonText | string | Hover Me | Text on the hover button |
particlesPerFrame | number | 3 | Number of particles spawned per frame |
velocityThreshold | number | 0.5 | Velocity threshold for particle spawning |
lifeDecay | number | 0.02 | Particle life decay rate |
sizeDecay | number | 0.95 | Particle size decay rate |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for high-energy tech brands, gaming platforms, and experimental Next.js landing pages. This customizable UI component is perfect for creating a 'hot' or 'active' focal point that follows the user's cursor with an additive glow effect.
Best Practices
Follow React best practices by ensuring the `particlesPerFrame` counts are optimized for standard 60fps refresh rates. Maintain consistent spacing within your design system by adjusting the `velocityThreshold` to match the expected scroll and move speed of your users. Optimize for performance by keeping particle `lifeDecay` values relatively high.
Why This Component Matters in Modern UI Development
Thermal and glowing effects add a level of visual weight that is hard to achieve with static elements. This reusable React component gives developers a robust way to implement complex particle blending, helping you build a real-world application architecture that feels dynamic and high-performance.
Frequently Asked Questions
QDoes it support custom shapes?
The current implementation uses circular additive particles, which are the most efficient for creating a soft 'molten' glow.
QIs the glow effect adjustable?
Yes, by adjusting the `particlesPerFrame` and `sizeDecay`, you can create anything from a subtle ember trail to a massive solar flare.
QCan I use it on buttons?
Absolutely! The component is designed to be scoped or global, and works perfectly as a hover-triggered effect for high-impact buttons.