Magnifying Portal
Circular mask expands to reveal content with zoom effect.
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 |
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
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.
FAQ
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.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.