Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/aurora-cosmos/llms.txt

Use this file to discover all available pages before exploring further.

The Home page (/) is the first thing visitors see: a near-full-viewport hero that draws the eye immediately with a custom animated SVG name treatment, a short punchy tagline, and two CTA buttons. Every element enters with a Framer Motion staggered sequence so the page feels alive, not static. The two background layers — AuroraBackground and Starfield — are shared across all pages and render behind the content as fixed decorative elements.

​
Layout overview

The hero is a single <div> flex-column set to min-h-[80vh], centred both horizontally and vertically. It divides into two logical blocks:
  1. Name / SVG treatment — An <svg viewBox="0 0 800 200"> renders a multi-point path that traces an abstract cosmic shape, then animates pathLength from 0 → 1 over three seconds. Glow dots appear at each vertex with a staggered delay: 2 + index * 0.1 entrance. The name itself (SARAH DEV in the template) overlays the SVG as an absolutely-positioned <h1> with a gradient clip from white → aurora-turquoise → cosmic-violet.
  2. Subtitle and CTAs — Below the SVG block, a motion.div enters with initial={{ opacity: 0, y: 20 }} and animate={{ opacity: 1, y: 0 }} at delay: 4, duration: 0.8. Inside it sits: a pill badge (glass-panel with Terminal icon and a status string), a <p> tagline in text-slate-300, and the two CTA buttons.
The delay: 3.5 and delay: 4 values on the text blocks are intentionally long — they wait for the SVG path animation to finish. If you shorten the path animation duration (default 3), reduce the text delays to match so the page doesn’t feel sluggish.

​
Framer Motion animations

SVG path draw

The hero name path uses initial={{ pathLength: 0, opacity: 0 }} → animate={{ pathLength: 1, opacity: 0.3 }} over duration: 3, ease: "easeInOut". This creates the “constellation drawing itself” effect.

Vertex dots

Thirteen motion.circle elements stagger in at delay: 2 + index * 0.1, duration: 0.5 with initial={{ scale: 0, opacity: 0 }} → animate={{ scale: 1, opacity: 1 }}. Each dot has a cyan drop-shadow glow class.

Name overlay

The <h1> enters via a wrapping motion.div at delay: 3.5, duration: 1 from y: 20 to y: 0 with opacity 0 → 1.

CTA block

The subtitle and buttons share a single motion.div at delay: 4, duration: 0.8 with the same y: 20 → 0 entrance. Buttons have whileHover={{ scale: 1.05 }} and whileTap={{ scale: 0.95 }} for tactile feedback.

​
Color tokens used

ElementToken / class
Name gradientfrom-white via-aurora-turquoise to-cosmic-violet
SVG path strokeurl(#aurora-gradient) — teal #14b8a6 → turquoise #5eead4 → violet
Glow dotstext-aurora-turquoise, drop-shadow-[0_0_8px_rgba(94,234,212,0.8)]
Primary CTA buttonbg-gradient-to-r from-aurora-teal to-cosmic-violet
Secondary CTA buttonglass-panel (glassmorphism panel)
Status pillglass-panel, border-aurora-teal/30, text-aurora-turquoise
Taglinetext-slate-300

​
CTA buttons

The primary button links to /projects and uses a gradient fill. The secondary links to /about and uses the glass-panel style. Both are wrapped in React Router <Link> components: 
// Primary CTA — links to the Projects page
<Link to="/projects">
  <motion.button
    whileHover={{ scale: 1.05, boxShadow: "0 0 20px rgba(94, 234, 212, 0.4)" }}
    whileTap={{ scale: 0.95 }}
    className="px-8 py-4 bg-gradient-to-r from-aurora-teal to-cosmic-violet
               rounded-xl font-display font-bold text-white
               flex items-center space-x-2 group"
  >
    <span>Press Start to Engage Warp</span>
    <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
  </motion.button>
</Link>

// Secondary CTA — links to the About page
<Link to="/about">
  <motion.button
    whileHover={{ scale: 1.05 }}
    whileTap={{ scale: 0.95 }}
    className="px-8 py-4 glass-panel rounded-xl font-display font-bold
               text-white hover:bg-white/10 transition-colors"
  >
    View Trajectory Logs
  </motion.button>
</Link>

​
Customization guide

1

Replace your name

The hero component is compiled into assets/main.js. To change the name, fork the original source and find the <h1> inside the motion.div at delay: 3.5, then rebuild. Change "SARAH DEV" to your own display name. The gradient is applied via text-transparent bg-clip-text bg-gradient-to-r from-white via-aurora-turquoise to-cosmic-violet — no other changes needed for the text color to work.
<h1 className="text-5xl sm:text-7xl font-display font-bold
               text-transparent bg-clip-text
               bg-gradient-to-r from-white via-aurora-turquoise to-cosmic-violet
               text-center">
  YOUR NAME {/* ← change this */}
</h1>
2

Update the status badge

The pill badge above the tagline shows a live-status style indicator. Change the <span> text to your own current focus:
<div className="inline-flex items-center space-x-2 glass-panel px-4 py-2
                rounded-full mb-8 border-aurora-teal/30">
  <Terminal size={16} className="text-aurora-turquoise" />
  <span className="font-mono text-sm text-aurora-turquoise">
    Open to new missions {/* ← change this */}
  </span>
</div>
3

Rewrite the tagline

The <p> below the badge is your elevator pitch. Keep it to 1–2 sentences and use text-slate-300 text-xl sm:text-2xl font-light leading-relaxed to preserve the visual weight:
<p className="text-xl sm:text-2xl text-slate-300 mb-10 font-light leading-relaxed">
  Your tagline goes here. {/* ← change this */}
</p>
4

Relabel the CTA buttons

Change the button label strings and update the <Link to="..."> targets if needed. Both buttons are in the flex flex-col sm:flex-row container directly below the tagline.
5

Adjust animation timing

All delays assume the SVG path animation runs for 3 seconds. If you remove or simplify the SVG, set the name <h1> delay to 0.2 and the CTA block delay to 0.5 for a quicker entrance.
The SVG viewBox="0 0 800 200" path can be replaced with any decorative stroke path — try your initials drawn as a single continuous stroke for a more personal touch. Keep fill="transparent" and set stroke="url(#aurora-gradient)" to retain the aurora color effect.

Build docs developers (and LLMs) love

Get started for freeTalk to us