AuroraHero: Full-Viewport Animated Landing Section

AuroraHero is the first thing visitors encounter on the dev.void portfolio — a full-viewport landing section that layers two animated aurora blobs behind a centered headline, tagline, and pair of call-to-action buttons. Everything is hardcoded in the JSX, so customising the portfolio means editing the strings and button labels directly in AuroraHero.js.

Visual Structure

The component renders a single <section> with min-h-[90vh] and flexbox centering. It is divided into three stacking layers along the z-axis:

z-index	Layer	Contents
`z-0`	Aurora background	Two `motion.div` aurora blobs
`z-10`	Text content	Pre-title, headline, subheadline, CTA buttons
(absolute)	Scroll indicator	”Descend” label + gradient line

The outer <section> carries overflow-hidden, so the aurora blobs (which are wider than the viewport) are safely clipped without triggering a horizontal scrollbar.

Aurora Background Layers

Both blobs sit inside an absolute inset-0 container with pointer-events-none so they never interfere with clicks.

Layer 1 — Slow drift

<motion.div
  className="absolute top-1/4 left-[-10%] w-[120%] h-[60vh]
             bg-aurora-gradient opacity-60 aurora-filter
             mix-blend-screen rounded-full blur-3xl"
  animate={{ y: [0, -30, 20, 0], scale: [1, 1.05, 0.95, 1], rotate: [0, 2, -2, 0] }}
  transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
/>

Fills 120 % of the viewport width so the colour bleeds edge-to-edge.
mix-blend-screen lets the blob interact additively with the dark background, producing the characteristic aurora glow rather than a flat overlay.
The keyframe sequence is a 4-point loop: drift up 30 px, drift down 20 px, return — giving the impression of slow, organic breathing.

Layer 2 — Faster cross-drift

<motion.div
  className="absolute top-1/3 left-[10%] w-[80%] h-[40vh]
             bg-gradient-to-r from-aurora-mint/20 via-aurora-teal/40 to-aurora-pink/20
             opacity-50 aurora-filter mix-blend-screen rounded-full blur-2xl"
  animate={{ y: [0, 40, -10, 0], x: [0, -30, 30, 0] }}
  transition={{ duration: 15, repeat: Infinity, ease: "easeInOut", delay: 2 }}
/>

Narrower blob (80 % wide) positioned slightly lower — the two blobs overlap near the vertical centre.
Adds horizontal x movement so the gradient colour shifts left-to-right across the hero.
delay: 2 seconds means it starts mid-cycle relative to Layer 1, preventing the blobs from always peaking at the same moment.

The blur-3xl / blur-2xl Tailwind classes are key to the softness. Reducing them to blur-xl sharpens the glow and gives a more neon look, while removing blur entirely reveals the hard gradient shapes.

Text Entrance Animations

All text content lives inside a single motion.div that fades up as a unit, with the CTA buttons on their own motion.div so they can be staggered separately.

Text container

<motion.div
  initial={{ opacity: 0, y: 30 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 1, delay: 0.2 }}
>
  {/* pre-title, h1, h2, buttons */}
</motion.div>

CTA button row

<motion.div
  className="flex flex-col sm:flex-row items-center justify-center gap-6"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ delay: 0.8, duration: 1 }}
>
  {/* buttons */}
</motion.div>

Scroll indicator

<motion.div
  className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ delay: 1.5, duration: 1 }}
>
  <span className="font-mono text-[10px] text-slate-500 tracking-[0.2em] uppercase">
    Descend
  </span>
  <div className="w-[1px] h-12 bg-gradient-to-b from-aurora-teal to-transparent" />
</motion.div>

The full entrance sequence unfolds over ~2.5 s:

0.2 s — text container enters

The pre-title, headline, and subheadline translate up 30 px and fade from opacity 0 to 1 over 1 s.

0.8 s — CTA buttons fade in

The button row fades in independently over 1 s, giving it a slight stagger relative to the headline.

1.5 s — scroll indicator appears

“Descend” and the gradient line fade in, by which point the rest of the content is fully visible.

Rendered Content

All strings are hardcoded in AuroraHero.js. Here is a map of every piece of text and where it lives:

{/* Pre-title — monospaced connection status */}
<p className="font-mono text-aurora-mint tracking-[0.3em] uppercase text-sm mb-6">
  Establishing Connection...
</p>

{/* Main headline with gradient fill */}
<h1 className="font-sans text-6xl md:text-8xl font-bold tracking-tighter ...">
  <span className="text-transparent bg-clip-text bg-gradient-to-r
                   from-slate-100 via-aurora-light to-slate-300">
    Alex Vance        {/* ← your name */}
  </span>
</h1>

{/* Subheadline / tagline */}
<h2 className="font-serif italic text-2xl md:text-4xl text-slate-300 mb-10 font-light">
  Architecting nebulas of code in the digital void.  {/* ← your tagline */}
</h2>

The headline <span> also contains an absolutely-positioned sibling <span> with a blur-xl teal glow that pulses via the animate-[pulse_4s_ease-in-out_infinite] class — this gives the name a soft halo effect.

CTA Buttons

{/* Primary — teal ghost */}
<button className="px-8 py-3 rounded-full bg-aurora-teal/10 border border-aurora-teal/50
                   text-aurora-light font-mono text-sm tracking-widest uppercase
                   hover:bg-aurora-teal/20 hover:box-glow transition-all duration-300">
  Initiate Sequence
</button>

{/* Secondary — neutral outline */}
<button className="px-8 py-3 rounded-full bg-transparent border border-slate-700
                   text-slate-400 font-mono text-sm tracking-widest uppercase
                   hover:border-slate-500 hover:text-slate-200 transition-all duration-300">
  View Telemetry
</button>

Both buttons are currently non-functional — they have no onClick handlers and no href. To wire them up, replace <button> with a React Router <Link> or add an onClick prop that scrolls to the relevant section.

Example of wiring “Initiate Sequence” to scroll to a projects section:

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

<button onClick={() => navigate("/projects")} ...>
  Initiate Sequence
</button>

Home Page Integration

AuroraHero is rendered at the root / route inside a wrapper <div className="w-full">. Immediately below it, main.js renders a hardcoded quote section:

function Home() {
  return (
    <div className="w-full">
      <AuroraHero />

      {/* Quote section — also hardcoded in main.js, NOT in AuroraHero.js */}
      <section className="py-32 px-6 max-w-4xl mx-auto text-center">
        <h3 className="font-serif italic text-3xl text-aurora-teal mb-6">
          "The universe is under no obligation to make sense to you,
           but your code should."
        </h3>
        <p className="font-mono text-slate-400 text-sm leading-relaxed">
          SIGNAL INTERCEPTED // SECTOR 4G // AWAITING FURTHER INSTRUCTIONS
        </p>
      </section>
    </div>
  );
}

The quote and its flavour text live in the Home component inside main.js, not inside AuroraHero.js. Update them there.

Customisation Reference

Name & Tagline

Edit the <h1> and <h2> strings in AuroraHero.js. The gradient on the name is pure Tailwind — swap via-aurora-light to any colour token to change the midpoint hue.

Pre-title Status Text

The "Establishing Connection..." monospaced label is its own <p> directly above the <h1>. Change it to any status string you like.

CTA Button Labels

Both button texts are inline strings. Change "Initiate Sequence" and "View Telemetry" to whatever suits your routing.

Aurora Colours

Layer 1 uses the bg-aurora-gradient CSS custom property. Layer 2 uses inline Tailwind gradient stops (aurora-mint, aurora-teal, aurora-pink). Adjust opacity fractions (e.g. /20, /40) for subtlety.

Animation Speed

Change duration: 20 and duration: 15 on the two layers to speed up or slow down the aurora drift. Higher values = more languid movement.

Scroll Indicator Text

The "Descend" label is a <span> inside the absolute-positioned scroll indicator motion.div at the bottom of the component.

Layout & Navigation

Hero & Profile

Portfolio Sections

Social & Contact

AuroraHero: Full-Viewport Animated Landing Section

Visual Structure

Aurora Background Layers

Layer 1 — Slow drift

Layer 2 — Faster cross-drift

Text Entrance Animations

Text container

CTA button row

Scroll indicator

Rendered Content

CTA Buttons

Home Page Integration

Customisation Reference

Name & Tagline

Pre-title Status Text

CTA Button Labels

Aurora Colours

Animation Speed

Scroll Indicator Text

Build docs developers (and LLMs) love

Layout & Navigation

Hero & Profile

Portfolio Sections

Social & Contact

Documentation Index

​Visual Structure

​Aurora Background Layers

​Layer 1 — Slow drift

​Layer 2 — Faster cross-drift

​Text Entrance Animations

​Text container

​CTA button row

​Scroll indicator

​Rendered Content

​CTA Buttons

​Home Page Integration

​Customisation Reference

Name & Tagline

Pre-title Status Text

CTA Button Labels

Aurora Colours

Animation Speed

Scroll Indicator Text

Build docs developers (and LLMs) love

Visual Structure

Aurora Background Layers

Layer 1 — Slow drift

Layer 2 — Faster cross-drift

Text Entrance Animations

Text container

CTA button row

Scroll indicator

Rendered Content

CTA Buttons

Home Page Integration

Customisation Reference