X-Ray Lens
A blue lens that follows the cursor and shows a second headline underneath.
Features
- A lens follows the cursor and reveals a hidden headline
- Drifts on its own on touch screens, so the effect still shows
- Both headlines are read by screen readers
- Rests still for reduced motion
Best for: Brands with a punchline: say the polite thing up front and let visitors discover the bold one.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | The headline everyone reads. |
| hiddenTitle | string | - | The headline the lens reveals. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The blue button. |
| secondaryCta | { label: string; href: string } | - | Optional second button. |
| eyebrow | ReactNode | - | Optional line above the headline. |
| className | string | - | Extra classes for the section. |
FAQ
Is the X-Ray Lens interactive section free to use?
Yes. X-Ray Lens is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does X-Ray Lens work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use X-Ray Lens in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does X-Ray Lens need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is X-Ray Lens accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.