Uilora Logo
Uilora.
Join
Uilora Logo
Uilora.
Join

Ghostly Focus

Interactive mouse-following blur effect with spotlight reveal.

Main Features of Ghostly Focus

How to Use Ghostly Focus in Next.js

Installation Guide for Ghostly Focus

Props

Customize the component with these props

PropertyTypeDefaultDescription
backgroundColor
string#171717Background color
baseBlobColor
string#262626Base blob color
baseBlobSize
string16remBase blob size
baseBlobBlur
string80pxBase blob blur
baseBlob1Position
stringtop-10 left-10First base blob position
baseBlob2Position
stringbottom-10 right-10Second base blob position
focusBlobColor
stringrgba(255, 255, 255, 0.05)Focus blob color
focusBlobSize
string500pxFocus blob size
focusBlobBlur
string60pxFocus blob blur
springStiffness
number50Spring physics stiffness
springDamping
number20Spring physics damping
noiseOpacity
number0.2Noise overlay opacity
noiseBaseFrequency
string1.5Noise base frequency
noiseOctaves
number3Noise octaves
text
stringFocusText label
textColor
stringrgba(255, 255, 255, 0.9)Text color
className
stringAdditional CSS classes
PreviousSilken Mesh
NextGlass Bricks

When to Use

Excellent for interactive hero sections, case studies, and Next.js portfolios that want to guide the user's attention. Use this React component for a 'spotlight' effect where the background is blurred everywhere except near the cursor.

Best Practices

Follow React best practices by pairing this with high-quality background images or complex textures. Maintain consistent spacing within your design system by keeping the spotlight size proportional to your content. Optimize for performance by using hardware-accelerated mask-image properties.

Why This Component Matters in Modern UI Development

Focus-based interactions improve user engagement by reward mouse movement. This customizable UI component helpsคุณ build an interface that feels tactile and responsive, adding a layer of mystery and polish to your project.

Frequently Asked Questions

QCan I adjust the focus size?

Yes, the `focusBlobSize` prop allows you to increase or decrease the diameter of the 'clear' area.

QDoes it work well with text?

It's perfect for text-heavy layouts where you want the user to 'discover' content as they explore with their mouse.

QIs the movement smooth?

Yes, it uses Framer Motion's spring physics to ensure the spotlight follows the cursor with a natural, lag-free elasticity.

Ghostly Focus - React Blur & Glassmorphism Effects | Uilora