Holographic Shimmer
Color noise overlay with gradient creating a holographic shimmer effect.
Main Features of Holographic Shimmer
How to Use Holographic Shimmer in Next.js
Installation Guide for Holographic Shimmer
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #0f172a | Background color |
gradientFrom | string | #6366f1 | Gradient start color |
gradientVia | string | #a855f7 | Gradient middle color |
gradientTo | string | #ec4899 | Gradient end color |
noiseOpacity | number | 0.5 | Noise overlay opacity |
noiseBaseFrequency | string | 1.5 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
noiseAnimationDuration | number | 0.1 | Noise animation duration |
shimmerOpacity | number | 0.3 | Shimmer overlay opacity |
shimmerColor | string | #ffffff | Shimmer color |
text | string | Holographic | Text label |
textGradientFrom | string | #6366f1 | Text gradient start color |
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 adjust the shimmer speed?
Yes, you can control the frequency of the holographic noise via `noiseAnimationDuration` and the intensity via `shimmerOpacity`.
QHow do I change the colors?
The background uses a 3-point gradient (`gradientFrom`, `gradientVia`, `gradientTo`) which you can customize to match your brand's holographic palette.
QDoes it support gradient text?
Yes, this component includes built-in props for matching holographic gradient text that sits perfectly on top of the background.