Aurora Hero — Vercel

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

<!--
Snippet Name: Aurora Hero — Vercel
Description: Restrained premium dark hero with a single slowly-drifting conic/radial aurora glow, hairline borders, monochrome type, and a teal status accent.
Author: DevSnips Contributors
Usage Example: Drop into any app shell as a premium dark landing hero. Pure CSS glow; no images.
-->
<section class="relative isolate overflow-hidden border-b border-white/[0.07] bg-[#050505] text-white" data-aurora="vc">

  <!-- Grid backdrop -->
  <div class="vc-grid-bg pointer-events-none absolute inset-x-0 top-0 h-[620px] opacity-70" aria-hidden="true"></div>

  <!-- Aurora: single soft conic glow that drifts -->
  <div class="pointer-events-none absolute left-1/2 top-[-18%] -z-10 h-[680px] w-[680px] -translate-x-1/2" aria-hidden="true">
    <div class="vc-aurora absolute inset-0 rounded-full opacity-60 blur-3xl"
         style="background:conic-gradient(from 180deg at 50% 50%, rgba(80,227,194,0.18), rgba(255,255,255,0.05) 30%, rgba(80,227,194,0.10) 55%, rgba(255,255,255,0.03) 80%, rgba(80,227,194,0.18))"></div>
    <div class="absolute inset-0 rounded-full opacity-50 blur-3xl"
         style="background:radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,0.10), transparent 70%)"></div>
  </div>

  <!-- Content -->
  <div class="relative mx-auto flex max-w-6xl flex-col items-center px-6 py-28 text-center sm:py-36">
    <p class="vc-mono mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] text-white/50">
      <span class="vc-dot"></span> Premium / Aurora
    </p>

    <h1 class="font-g text-5xl font-semibold leading-[1.02] tracking-tight sm:text-7xl">
      Interfaces that
      <span class="bg-gradient-to-r from-white via-white to-white/40 bg-clip-text text-transparent">drift light.</span>
    </h1>

    <p class="mt-6 max-w-xl font-g text-[16px] leading-relaxed text-white/50 sm:text-[17px]">
      A refined, monochrome aurora — a single soft glow that breathes across the dark. Hairline borders, generous space, and one teal accent. Pure CSS, reduced-motion safe.
    </p>

    <div class="mt-9 flex flex-col items-center gap-3 sm:flex-row">
      <button type="button" class="vc-mono flex items-center gap-2 rounded-lg border border-white/10 bg-white px-5 py-2.5 text-[13px] font-medium text-black transition-colors hover:bg-white/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40">
        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="vc-mono flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.03] px-5 py-2.5 text-[13px] text-white/80 transition-colors hover:bg-white/[0.06] hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30">
        View snippets
      </button>
    </div>

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

  <style>
    [data-aurora="vc"] .vc-grid-bg {
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(80% 60% at 50% 0%, #000 40%, transparent 100%);
      -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 40%, transparent 100%);
    }
    [data-aurora="vc"] .vc-dot {
      display: inline-block; height: 6px; width: 6px; border-radius: 9999px;
      background: #50e3c2; box-shadow: 0 0 8px #50e3c2; vertical-align: middle;
    }
    [data-aurora="vc"] .vc-mono { font-family: 'Geist Mono', ui-monospace, monospace; }
    [data-aurora="vc"] .font-g { font-family: 'Geist', sans-serif; }
    [data-aurora="vc"] .vc-aurora {
      animation: vc-drift 18s ease-in-out infinite alternate;
      will-change: transform, filter;
    }
    @keyframes vc-drift {
      0% { transform: translate3d(-6%, 0, 0) scale(1); }
      100% { transform: translate3d(6%, 3%, 0) scale(1.08); }
    }
    @media (prefers-reduced-motion: reduce) {
      [data-aurora="vc"] .vc-aurora { animation: none; }
    }
  </style>
</section>