Components
Loading preview...
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.
@haik-kashiyani
npx shadcn@latest add https://21st.dev/r/hardikkashiyani123456788/experience-hero"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>
);
}