Animations & Motion
Magnifying Portal
Circular mask expands to reveal content with zoom effect.
scrollrevealportalmaskzoom
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
image | string | https://images.unsplash.com/photo-1493246507139-91e8fad9978e?q=80&w=1000&auto=format&fit=crop | Image URL |
backgroundColor | string | bg-black | Background color of the component |
containerHeight | string | h-[200vh] | Height of the container |
backgroundText | string | FOCUS | Background text displayed |
backgroundTextColor | string | text-neutral-800 | Color of background text |
backgroundTextSize | string | text-[15vw] | Size of background text |
imageWidth | string | w-[80vw] | Width of the image |
imageHeight | string | h-[80vh] | Height of the image |
maskSizeRange | [string, string] | ["0%", "200%"] | Mask size range |
imageScaleRange | [number, number] | [2, 1] | Image scale range |
scrollOffset | [string, string] | ["start end", "end end"] | Scroll offset configuration |
cardTitle | string | The Vista | Title text on the card |
cardDescription | string | Optical scaling creates simulated depth. | Description text on the card |
cardBgColor | string | bg-white | Background color of the card |
cardTextColor | string | text-black | Text color of the card |
className | string | Additional CSS classes |