Interactive Hero Backgrounds

Heroes 519

About

Minimal dark hero section with 3D physics-based floating spheres and a centered email signup for dynamic user engagement.

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

Code

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

Usage.tsx

import React from 'react';
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { InteractiveHero } from "@/components/ui/interactive-hero-backgrounds"; // Adjust import path as needed

// The ThemeProvider wrapper component
function ThemeProvider({ children, ...props }: { children: React.ReactNode; [key: string]: any }) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

const InteractiveHeroDemo = () => {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
        <InteractiveHero
            brandName="21st"
            heroTitle="Interactive Hero Backgrounds"
            heroDescription="Engage users with dynamic, physics-based animations that respond to their every move. Built with React, Three.js, and shadcn/ui."
            emailPlaceholder="Enter your email"
            // You can customize the ballpit animation properties here
            ballpitConfig={{
                count: 150,
                gravity: 0.5,
                friction: 0.99,
                minSize: 0.4,
                maxSize: 0.9,
                lightIntensity: 4,
            }}
        />
    </ThemeProvider>
  );
};

export default InteractiveHeroDemo;