Festivity Hero

Heroes 257

About

3D sphere physics hero section: interactive spheres with dynamic collisions, mouse interaction and breathing motion, opened by a loading animation sequence and a responsive particle system. Use for modern landing page and product launch heroes.

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

Code

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

Usage.tsx

import Component from '../components/ui/festivity-hero'

export default function Default() {
  return (
    <div className="relative w-full h-screen overflow-hidden">
      <Component />
      <div className="absolute top-8 left-8 z-10">
        <h1 className="text-4xl font-bold text-white hide-text" style={{ opacity: 0 }}>
          Interactive 3D Demo
        </h1>
        <p className="text-lg text-gray-300 mt-2 hide-text" style={{ opacity: 0 }}>
          Move your mouse to interact with the spheres
        </p>
      </div>
      <div className="main-txt absolute inset-0 flex items-center justify-center z-10">
        <p className="text-2xl text-white">Loading...</p>
      </div>
    </div>
  )
}