Lens Portal
A moving circular aperture reveals hidden layers of a narrative world under a dark mask.
When to Use
Perfect for tech-focused landing pages, 'under the hood' sections, and modern web applications that want to emphasize precision and discovery. Use this React component to reveal a 'blueprint' or a secondary image as the user scrolls an aperture lens across the screen.
Best Practices
Optimize for performance in large-scale applications by keeping the masked layer simple. Follow React best practices by using high-contrast colors for the lens border. Maintain scalable component architecture by allowing the lens size to be responsive to different screen resolutions.
Why This Component Matters
Precision masking and interactive 'viewports' are a hallmark of high-end modern UI design. This production-ready component helps you build an interface that feels like a tool or a high-tech instrument, adding semantic authority to your real-world application architecture.
FAQ
QCan the lens move automatically?
The lens move is primarily scroll-driven for narrative impact, but it can be easily adapted to follow the mouse cursor on hover.
QWhat should I reveal under the lens?
Highly detailed content like circuit boards, code snippets, or high-fidelity product internals works best for this effect.
QIs it compatible with mobile?
Yes, the lens movement is mapped to vertical scroll progress, ensuring the reveal effect is clear on vertical screens.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.