Aurora Hero — Neo-Brutalism

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

<!--
Snippet Name: Aurora Hero — Neo-Brutalism
Description: Brutalist take on an aurora hero — sharp-edged flat-color blocks with offset shadows drift on a slow marquee behind a hard-bordered headline and CTA.
Author: DevSnips Contributors
Usage Example: Drop into any app shell as a premium landing hero. Pure CSS color-block aurora; no images.
-->
<section class="relative overflow-hidden border-2 border-black bg-[#FFFDF5] text-black" data-aurora="nb">

  <!-- Brutalist grid backdrop -->
  <div class="nb-grid-bg pointer-events-none absolute inset-0 opacity-[0.06]" aria-hidden="true"></div>

  <!-- Aurora: sharp-edged color blocks (marquee drift) -->
  <div class="pointer-events-none absolute inset-x-0 top-0 h-[420px] overflow-hidden" aria-hidden="true">
    <div class="nb-aurora-track absolute inset-y-0 left-0 flex items-center gap-10 pl-10">
      <span class="h-56 w-56 shrink-0 border-2 border-black bg-[#FF4FA3] shadow-[8px_8px_0_0_#000]"></span>
      <span class="h-72 w-44 shrink-0 border-2 border-black bg-[#FFE600] shadow-[8px_8px_0_0_#000]"></span>
      <span class="h-48 w-72 shrink-0 border-2 border-black bg-[#00C2FF] shadow-[8px_8px_0_0_#000]"></span>
      <span class="h-64 w-64 shrink-0 border-2 border-black bg-[#00E676] shadow-[8px_8px_0_0_#000]"></span>
      <span class="h-40 w-80 shrink-0 border-2 border-black bg-[#FF4FA3] shadow-[8px_8px_0_0_#000]"></span>
      <span class="h-60 w-52 shrink-0 border-2 border-black bg-[#FFE600] shadow-[8px_8px_0_0_#000]"></span>
      <!-- duplicate set for seamless loop -->
      <span class="h-56 w-56 shrink-0 border-2 border-black bg-[#FF4FA3] shadow-[8px_8px_0_0_#000]"></span>
      <span class="h-72 w-44 shrink-0 border-2 border-black bg-[#FFE600] shadow-[8px_8px_0_0_#000]"></span>
      <span class="h-48 w-72 shrink-0 border-2 border-black bg-[#00C2FF] shadow-[8px_8px_0_0_#000]"></span>
      <span class="h-64 w-64 shrink-0 border-2 border-black bg-[#00E676] shadow-[8px_8px_0_0_#000]"></span>
      <span class="h-40 w-80 shrink-0 border-2 border-black bg-[#FF4FA3] shadow-[8px_8px_0_0_#000]"></span>
      <span class="h-60 w-52 shrink-0 border-2 border-black bg-[#FFE600] shadow-[8px_8px_0_0_#000]"></span>
    </div>
    <!-- soft vignette so blocks fade behind text -->
    <div class="absolute inset-0 bg-[#FFFDF5]" style="mask-image:linear-gradient(to bottom,transparent 0%,#FFFDF5 78%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#FFFDF5 78%)"></div>
  </div>

  <!-- Content -->
  <div class="relative mx-auto flex max-w-6xl flex-col items-center px-5 py-24 text-center sm:px-8 sm:py-32">
    <p class="inline-flex items-center gap-2 border-2 border-black bg-white px-3 py-1 font-mono text-[11px] font-bold uppercase tracking-wider shadow-[3px_3px_0_0_#000]">
      <span class="inline-block h-2 w-2 border border-black bg-[#00E676]"></span>
      Premium / Aurora
    </p>

    <h1 class="mt-6 font-archivo text-5xl font-extrabold uppercase leading-[0.92] tracking-tight sm:text-7xl">
      Ship interfaces
      <span class="mt-2 inline-block border-2 border-black bg-[#FFE600] px-3 py-1 shadow-[6px_6px_0_0_#000]">that glow.</span>
    </h1>

    <p class="mt-6 max-w-xl font-archivo text-[16px] font-medium leading-relaxed text-black/70 sm:text-[17px]">
      A brutalist aurora — sharp color blocks drift across a grid while hard borders and offset shadows hold the line. Pure CSS, no images, reduced-motion safe.
    </p>

    <div class="mt-9 flex flex-col items-center gap-3 sm:flex-row">
      <button type="button" class="flex items-center gap-2 border-2 border-black bg-black px-6 py-3.5 font-archivo text-sm font-extrabold uppercase tracking-tight text-white shadow-[6px_6px_0_0_#FFE600] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#FFE600] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#FFE600] focus-visible:ring-offset-2">
        Start building
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
      </button>
      <button type="button" class="flex items-center gap-2 border-2 border-black bg-white px-6 py-3.5 font-archivo text-sm font-bold uppercase tracking-tight shadow-[6px_6px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">
        View snippets
      </button>
    </div>

    <p class="mt-8 font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">
      // 120+ components · 3 design systems · zero dependencies
    </p>
  </div>

  <style>
    [data-aurora="nb"] .nb-grid-bg {
      background-image:
        linear-gradient(#000 1px, transparent 1px),
        linear-gradient(90deg, #000 1px, transparent 1px);
      background-size: 28px 28px;
      background-position: -1px -1px;
    }
    [data-aurora="nb"] .nb-aurora-track {
      animation: nb-slide 26s linear infinite;
      will-change: transform;
    }
    @keyframes nb-slide {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
      [data-aurora="nb"] .nb-aurora-track { animation: none; }
    }
  </style>
</section>