Aurora Hero — Sharp Glassmorphism

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

<!--
Snippet Name: Aurora Hero — Sharp Glassmorphism
Description: Vibrant premium hero — multiple large blurred gradient blobs (fuchsia/indigo/cyan) drift and blend over a dark mesh while a frosted-glass headline panel floats on top.
Author: DevSnips Contributors
Usage Example: Drop into any app shell as a premium landing hero. Pure CSS blobs; no images.
-->
<section class="sg-mesh relative overflow-hidden text-white" data-aurora="sg">

  <!-- Aurora blobs -->
  <div class="pointer-events-none absolute inset-0 -z-0 overflow-hidden" aria-hidden="true">
    <span class="sg-blob absolute left-[6%] top-[8%] h-[34rem] w-[34rem] rounded-full bg-fuchsia-500/55 blur-[110px]" style="animation-delay:0s"></span>
    <span class="sg-blob absolute right-[4%] top-[-6%] h-[30rem] w-[30rem] rounded-full bg-indigo-500/55 blur-[110px]" style="animation-delay:-6s"></span>
    <span class="sg-blob absolute bottom-[-12%] left-[28%] h-[32rem] w-[32rem] rounded-full bg-cyan-400/45 blur-[110px]" style="animation-delay:-12s"></span>
    <span class="sg-blob absolute right-[18%] bottom-[2%] h-[26rem] w-[26rem] rounded-full bg-purple-500/50 blur-[110px]" style="animation-delay:-9s"></span>
  </div>

  <!-- Grain overlay -->
  <div class="sg-grain pointer-events-none absolute inset-0" aria-hidden="true"></div>

  <!-- Content -->
  <div class="relative z-10 mx-auto flex max-w-6xl flex-col items-center px-6 py-28 text-center sm:py-36">

    <!-- Frosted-glass headline panel -->
    <div class="sg-panel relative w-full max-w-3xl overflow-hidden rounded-2xl border border-white/20 bg-white/10 px-6 py-10 shadow-[0_8px_40px_-12px_rgba(99,102,241,0.45)] backdrop-blur-2xl sm:px-10 sm:py-14">
      <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/50 to-transparent" aria-hidden="true"></div>

      <p class="sg-mono mb-6 inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-[11px] text-white/80 backdrop-blur">
        <span class="sg-dot"></span> Premium / Aurora
      </p>

      <h1 class="font-sora text-5xl font-bold leading-[1.02] tracking-tight sm:text-7xl">
        Interfaces that
        <span class="bg-gradient-to-r from-fuchsia-300 via-white to-cyan-200 bg-clip-text text-transparent">bloom light.</span>
      </h1>

      <p class="mx-auto mt-6 max-w-xl font-sora text-[16px] leading-relaxed text-white/70 sm:text-[17px]">
        A living aurora — fuchsia, indigo, and cyan blobs drift and blend over a dark mesh while a frosted-glass panel floats above. Pure CSS, reduced-motion safe.
      </p>

      <div class="mt-9 flex flex-col items-center gap-3 sm:flex-row">
        <button type="button" class="sg-glow flex items-center gap-2 rounded-xl border border-white/30 bg-gradient-to-r from-fuchsia-500 to-indigo-500 px-6 py-3 font-sora text-[13px] font-semibold text-white transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/60">
          Start building
          <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
        </button>
        <button type="button" class="flex items-center gap-2 rounded-xl border border-white/20 bg-white/10 px-6 py-3 font-sora text-[13px] font-medium text-white backdrop-blur transition-colors hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/60">
          View snippets
        </button>
      </div>

      <p class="sg-mono mt-8 text-[11px] text-white/50">
        // 120+ components · 3 design systems · zero dependencies
      </p>
    </div>
  </div>

  <style>
    [data-aurora="sg"] .sg-mesh {
      background:
        radial-gradient(at 18% 18%, rgba(236,72,153,0.55) 0px, transparent 50%),
        radial-gradient(at 82% 12%, rgba(99,102,241,0.55) 0px, transparent 50%),
        radial-gradient(at 75% 78%, rgba(34,211,238,0.45) 0px, transparent 50%),
        radial-gradient(at 22% 82%, rgba(168,85,247,0.5) 0px, transparent 50%),
        #0b0a1f;
      background-size: 180% 180%;
      animation: sg-pan 18s ease-in-out infinite alternate;
    }
    @keyframes sg-pan { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
    [data-aurora="sg"] .sg-dot { display: inline-block; height: 6px; width: 6px; border-radius: 9999px; background: #6ee7ff; box-shadow: 0 0 8px #6ee7ff; }
    [data-aurora="sg"] .sg-glow { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 20px -4px rgba(168,85,247,0.5); }
    [data-aurora="sg"] .font-sora { font-family: 'Sora', sans-serif; }
    [data-aurora="sg"] .sg-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
    [data-aurora="sg"] .sg-grain::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .06;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    [data-aurora="sg"] .sg-blob {
      animation: sg-drift 20s ease-in-out infinite alternate;
      will-change: transform;
      mix-blend-mode: screen;
    }
    @keyframes sg-drift {
      0% { transform: translate3d(0, 0, 0) scale(1); }
      100% { transform: translate3d(4%, -3%, 0) scale(1.12); }
    }
    @media (prefers-reduced-motion: reduce) {
      [data-aurora="sg"] .sg-blob { animation: none; }
      [data-aurora="sg"] .sg-mesh { animation: none; }
    }
  </style>
</section>