Cursor Lens
Cursor lens feature grid with magnifying glass effects.
Main Features of Cursor Lens
How to Use Cursor Lens in Next.js
Installation Guide for Cursor Lens
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
features | Array<{title: string, description: string}> | [{title: 'Vision', description: 'Seeing beyond the visible spectrum.'}, ...] | Array of feature items with title and description. |
backgroundColor | string | #f5f5f4 | Background color (hex, rgb, or hsl). |
lensColor | string | #f97316 | Lens reveal color (hex, rgb, or hsl). |
gridText | string | Create | Text to repeat in background grid. |
gridTextCount | number | 100 | Number of times to repeat grid text. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
View Component
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
View Component
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
View Component
When to Use
Ideal for creative studios, experimental art projects, and Next.js portfolios that want an interactive 'Cursor Lens' aesthetic. Use this feature grid for an Engaging experience where modules light up and 'activate' based on cursor movement.
Best Practices
Maintain scalable component architecture by keeping the grid items centered. Follow React best practices by using Framer Motion for the lens reveal. Optimize for performance by managed the background text pattern repeats.
Why This Component Matters in Modern UI Development
Interactive lens triggers create a sense of direct engagement and playfulness. This production-ready UI template helpsคุณ build an interface that feels responsive and unique, turning a standard cursor into a tool for visual discovery.
Frequently Asked Questions
QHow does the 'Lens' work?
The component tracks the cursor to localized mask coordinates, creating a physical 'Spotlight' lens that follows the user across the feature grid.
QCan I adjust the colors?
Yes, both the background and the primary lens-reveal color can be customized to match your project's specific brand theme.
QDoes it work with touch?
The lens responds to touch-move events, though it's most impactful as a mouse-driven cursor magnifying glass for high-fidelity desktop browsing.