Magnifying Portal
Circular mask expands to reveal content with zoom effect.
Main Features of Magnifying Portal
How to Use Magnifying Portal in Next.js
Installation Guide for Magnifying Portal
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 |
Related Components
When to Use
Perfect for SaaS landing pages and creative brand portfolios that want to emphasize a 'focal point.' This customizable UI component is great for zooming into specific details of a product or a landscape image as the user scrolls down the page.
Best Practices
Optimize for performance in large-scale applications by lazy-loading the high-resolution image used in the portal. Maintain consistent spacing within your design system by adjusting the `imageWidth` and `imageHeight` to fit your layout. Follow React best practices by pairing the zoom effect with meaningful `cardTitle` content.
Why This Component Matters in Modern UI Development
Masking and portal effects are at the forefront of modern UI design. This reusable React component provides a sophisticated way to manage focus and attention, adding semantic authority and visual depth to your real-world application architecture.
Frequently Asked Questions
QCan the portal be a different shape?
The current implementation uses a circular mask, but you can easily modify the CSS clip-path to support squares, stars, or custom SVG paths.
QHow much can the image zoom?
The `imageScaleRange` prop lets you define the start and end zoom levels, typically ranging from 2x down to 1x for a natural feel.
QDoes it support hover interaction as well?
This component is primarily scroll-driven for cinematic effect, but hover-based displacement can be added for extra interactivity.