Components
GlassRefractionHero
A fullscreen, glass-refraction style hero with animated blue gradient blobs, subtle vertical glass strips, staggered gradient title animation, description, and configurable primary/secondary CTAs. Designed for dramatic, immersive landing pages and product intros; supports children override for custom content.
import GlassRefractionHero from "@/components/ui/glass-refraction-hero";
const settings = {
title: "Glass Refraction",
description:
"Experience the beauty of light bending through glass with our stunning refraction effects.",
primaryLabel: "Get Started",
secondaryLabel: "Learn More",
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<GlassRefractionHero
title={s.title}
description={s.description}
primaryAction={{ label: s.primaryLabel, onClick: () => {} }}
secondaryAction={{ label: s.secondaryLabel, onClick: () => {} }}
/>
</div>
);
}