GlassRefractionHero

Heroes 139

$GlassRefractionHero preview$ Preview

About

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.

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

Code

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

Usage.tsx

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>
  );
}