FocusGrid

About this Component

Turn any set of images into a responsive mosaic that comes alive under a cursor-following spotlight.

Features:

• Responsive auto-fit grid (adapts columns to container size)

• Even, centered spacing across rows/columns

• Three sampling modes: Repeat / Sequential / Random (static-safe)

• Spotlight modes: Follow Cursor / Centered

• Smooth spring follow (stiffness & damping controls)

• Click pulse ripple (strength & duration)

• Adjustable spotlight radius, falloff & max scale

• Look controls: grayscale, saturation, contrast, opacity

• Optional focus ring with opacity & feather

• Per-tile randomness: jitter & slight rotation (toggle via amount)

• Rounded tile corners (radius control)

• Transparent background option (or custom color)

• Padding, gap, and max tiles limits for layout control

• Reduced-motion fallback for accessibility

• Publish-safe animations (no unsupported transforms)

Responsive, fast—perfect for heroes, portfolios, product walls. Take your sites to the next level