Iridescence
Pro
An oily rainbow sheen that shifts over time and tilts with the pointer, like a soap bubble in the light.
Every angle
Customize
#ffa585
1
1
React to pointer
Installation
Iridescence is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy iridescence.tsx into components/ui and run npm install motion.
Usage
import { Iridescence } from "@/components/ui/iridescence";
<section className="relative h-[600px]">
<Iridescence tint="#ffa585" amplitude={1} />
</section>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| tint | string | "#ffa585" | Tint mixed into the rainbow, as a hex value. |
| speed | number | 1 | Shimmer speed multiplier. |
| amplitude | number | 1 | How strongly the oily film swirls, from 0 to 2. |
| mouseReact | boolean | true | Let the pointer tilt the sheen. |
| quality | number | 1 | Render resolution from 0.25 to 1. Lower is cheaper. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion