A highly polished custom cursor that acts like a magnifying glass. It perfectly maps the background image inside the lens and applies a scale transformation, simulating a true physical glass refraction effect directly over your content.
Live Preview
Explore the
Details
Hover over this section to magnify and distort the background image with a stunning glassmorphism lens.
Installation
npx kinetic-ui-cli@latest add refraction-cursorUsage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { RefractionCursor } from "@/components/creative/refraction-cursor";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { RefractionCursor } from "@/components/creative/refraction-cursor";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<RefractionCursor
imageUrl="example"
lensSize{10}
magnification{10}
>
<div>Content goes here</div>
</RefractionCursor>
</div>
);
}