Components
Loading preview...
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.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/glass-refraction-heroimport { GlassRefractionHero } from "@/components/ui/glass-refraction-hero";
export default function GlassRefractionHeroDemo() {
return (
<GlassRefractionHero
title="Glass Refraction Design"
description="Experience the beauty of light refraction through glass with animated blue gradient blobs"
primaryAction={{
label: "Explore Now",
onClick: () => console.log("Primary action clicked"),
}}
secondaryAction={{
label: "Learn More",
onClick: () => console.log("Secondary action clicked"),
}}
/>
);
}