SpotlightBackground

Heroes 233

About

A dramatic, animated background composed of multiple soft “spotlight” blobs that glide and rotate to create depth and movement. Ideal for hero sections or immersive UI backdrops.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds SpotlightBackground to your project and fits it to your theme.

Code

How SpotlightBackground is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import React from "react";
import { motion } from "framer-motion";
import SpotlightBackground from "@/components/ui/spotlight-background";

const DemoOne = () => {
  return (
    <SpotlightBackground>
      <motion.div
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{
          delay: 0.3,
          duration: 0.8,
          ease: "easeInOut",
        }}
        className="spotlight-inner"
      >
        <h1 className="spotlight-title">
          Spotlight Background
        </h1>
        <p className="spotlight-description">
          A dramatic and eye-catching animated background effect.
        </p>
        <button className="spotlight-button">
          Get Started
        </button>
      </motion.div>
    </SpotlightBackground>
  );
};

export default DemoOne;