Kinetic Heatmap
Thermal gradient with rotating color layers creating a kinetic heatmap effect.
Main Features of Kinetic Heatmap
How to Use Kinetic Heatmap in Next.js
Installation Guide for Kinetic Heatmap
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #9a3412 | Background color |
layer1From | string | #dc2626 | First layer gradient start color |
layer1Via | string | #f97316 | First layer gradient middle color |
layer1To | string | #eab308 | First layer gradient end color |
layer1Opacity | number | 0.8 | First layer opacity |
layer1Blur | string | 2xl | First layer blur |
layer1Rotate | number | 360 | First layer rotation |
layer1Scale | number[] | [1, 1.2, 1] | First layer scale animation |
layer1Duration | number | 15 | First layer animation duration |
layer2From | string | transparent | Second layer gradient start color |
layer2Via | string | #581c87 | Second layer gradient middle color |
layer2To | string | #1e3a8a | Second layer gradient end color |
layer2Opacity | number | 0.6 | Second layer opacity |
layer2Blur | string | 3xl | Second layer blur |
layer2Rotate | number | -360 | Second layer rotation |
layer2Scale | number[] | [1.2, 1, 1.2] | Second layer scale animation |
layer2Duration | number | 20 | Second layer animation duration |
scanlineColor | string | rgba(0,0,0,0.2) | Scanline color |
scanlineSpacing | string | 4px | Scanline spacing |
scanlineSize | string | 100% 4px | Scanline size |
grainOpacity | number | 0.3 | Grain overlay opacity |
grainBaseFrequency | string | 0.65 | Grain base frequency |
grainOctaves | number | 3 | Grain octaves |
title | string | Thermal | Title text |
className | string | Additional CSS classes |
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QCan I change the 'heat' colors?
Yes, both the primary 'hot' layer and the secondary 'cool' layer have independent gradient props (from/via/to).
QWhat are the scanlines?
They are optional horizontal lines that add a technical, 'monitor' feel to the background, reinforcing the data-viz aesthetic.
QDo the layers rotate in opposite directions?
Yes, they rotate in opposite directions at different speeds to create a complex, evolving pattern that never repeats.