Backgrounds & Visuals
Kinetic Heatmap
Thermal gradient with rotating color layers creating a kinetic heatmap effect.
gradientkineticheatmapthermalrotating
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 |