Spotlight Grid

Spotlight Grid is an interactive React background animation where a cursor-following spotlight highlights a customizable field of dots.

Installation

npm i framer-motion

Steps

Components

Page.tsx

SpotlightGrid.tsx

Select a file to view its code

Dark Mode

This component supports Tailwind CSS dark: variants. To render this component in dark mode, add the dark className to your application's root element (for example, in app/layout.tsx).

Using <html>

<html className="dark">
  ...
</html>

Using <body>

<body className="dark">
  ...
</body>

Props

Property	Default Value	Description
spotlightSize	230	Adjust the cursor radius.
gap	20	The space between the dots (in pixels).
dotSize	2	The radius of the base dots (in pixels).
hoverDotSize	2	The radius of the dots when hovered (in pixels).
dotColor	"#333333"	The color of the base dots.
hoverDotColor	"#ffffff"	The color of the dots when hovered.

Built with Spotlight

See how Spotlight is used across React Vibe blocks, templates, and components. Explore real examples to get ideas for your own projects.

Cognito AI

Federated Learning v3.1 Released

Cognito AI|The Next-Generation AI Lifecycle Platform

Accelerate Innovation with Your Data

Integrated platform for building, training, and deploying
governed AI solutions.

Cognito Al simplifies the complexity of deploying custom Al models. From initial data exploration and annotation to automated model retraining and monitoring, manage your entire Al workflow with full transparency and control, not confusion.

Flux Hero

NEW

A complete SaaS Hero Section with a responsive navbar, animated background, CTA, and built-in dark mode for modern SaaS landing pages.

Hero Section Copy PasteHero Section ComponentSaaS Hero SectionDark Mode

React Vibe

Command Palette