Experience Hero

Heroes 765

About

Elevate your agency's first impression with a high-performance, GSAP-powered hero section. This "Obsidian Vault" design features spatial logic animations, narrative apertures, and an immersive WebGL-ready layout. Optimized for high-conversion with a single-purpose CTA and fully responsive Tailwind structure. Perfect for design engineers who demand Awwwards-level aesthetics without the manual overhead.

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

Code

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

Usage.tsx

"use client";

import { useEffect } from "react";
// Fixed: Using relative path to resolve import-analysis error
import { Component } from "../components/ui/experience-hero";
import Lenis from "lenis";

export default function DemoOne() {
  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      smoothWheel: true,
    });

    function raf(time: number) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);
    return () => lenis.destroy();
  }, []);

  return (
    <div className="dark min-h-screen bg-[#020202] selection:bg-white selection:text-black">
      <main className="relative w-full overflow-x-hidden">
        <Component />
        <div className="fixed inset-0 pointer-events-none bento-mask opacity-10 z-[100]" />
      </main>
    </div>
  );
}