aurora-hero

1"use client";
2 
3import React, { useState } from "react";
4import { cn } from "@/lib/utils";
5 
6export interface AuroraHeroProps extends React.HTMLAttributes<HTMLDivElement> {
7  /** The main title text to display with the glass displacement effect. */
8  title?: string;
9  /** Whether to show the toggle switch for background modes. */
10  showSwitch?: boolean;
11}
12 
13export function AuroraHero({
14  title = "An awesome title",
15  className,
16  ...props
17}: AuroraHeroProps) {
18 
19  // Safely URL-encoded SVG string for the fluted glass effect
20  const filterImageHref = "data:image/svg+xml," + encodeURIComponent(`
21    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' color-interpolation-filters='sRGB'>
22      <g>
23        <rect width='1' height='1' fill='black' />
24        <rect width='1' height='1' fill='url(#red)' style='mix-blend-mode:screen' />
25        <rect width='1' height='1' fill='url(#green)' style='mix-blend-mode:screen' />
26        <rect width='1' height='1' fill='url(#yellow)' style='mix-blend-mode:screen' />
27      </g>
28      <defs>
29        <radialGradient id='yellow' cx='0' cy='0' r='1' >
30          <stop stop-color='yellow' />
31          <stop stop-color='yellow' offset='1' stop-opacity='0' />
32        </radialGradient>
33        <radialGradient id='green' cx='1' cy='0' r='1' >
34          <stop stop-color='green' />
35          <stop stop-color='green' offset='1' stop-opacity='0' />
36        </radialGradient>
37        <radialGradient id='red' cx='0' cy='1' r='1' >
38          <stop stop-color='red' />
39          <stop stop-color='red' offset='1' stop-opacity='0' />
40        </radialGradient>
41      </defs>
42    </svg>
43  `);
44 
45  return (
46    <section
47      className={cn("aurora-hero-wrapper w-full min-h-[400px] h-[500px] sm:h-[600px] relative overflow-hidden", className)}
48      {...props}
49    >
50      <style>{`
51        .aurora-hero-wrapper {
52          --stripe-color: #000;
53          --bg-filter: blur(10px) opacity(50%) saturate(200%);
54          background: var(--stripe-color);
55          font-family: Inter, sans-serif;
56        }
57        :is(.dark) .aurora-hero-wrapper {
58          --stripe-color: #fff;
59          --bg-filter: blur(10px) invert(100%);
60        }
61        @keyframes smoothBg {
62          from { background-position: 50% 50%, 50% 50%; }
63          to { background-position: 350% 50%, 350% 50%; }
64        }
65        .aurora-hero-bg {
66          width: 100%;
67          height: 100%;
68          position: absolute;
69          inset: 0;
70          --stripes: repeating-linear-gradient(
71// … truncated