Skip to main content

Documentation Index

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

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

Cosmic Developer’s reusable building blocks all live inside components/cosmos/ — a self-contained design system that blends ambient visual effects with practical layout primitives. Each component in this directory has a single, clearly scoped responsibility: either rendering part of the ambient environment (the starfield, aurora, cursor) or providing a structural element (the navigation bar, footer, page wrapper). This separation makes it easy to swap, extend, or disable any one component without affecting the others.

​
Components at a Glance

ComponentFilePurpose
StarfieldBackgroundStarfieldBackground.jsAnimated canvas starfield; particle density scales with viewport area
AuroraBackgroundAuroraBackground.jsFour Framer Motion motion.div glow blobs on infinite looping animations
CustomCursorCustomCursor.jsThree-layer magnetic cursor with spring physics; expands over interactive elements
TeletypeTextTeletypeText.jsCharacter-by-character typing reveal with a blinking aurora-teal caret
PageTransitionPageTransition.jsFramer Motion motion.div wrapper; provides scale + blur enter/exit for every page
NavigationNavigation.jsFixed top bar with logo, active-link indicator, and full-screen overlay nav menu
FooterFooter.jsFixed bottom bar with telemetry copy and an animated rocket icon crossing the viewport

​
Composition by Z-Index

Every cosmos component declares its own stacking context. Components are never nested inside each other in the DOM — they are siblings inside CosmiApp, stacked purely through CSS z-index and position: fixed. The complete layer order from back to front is: 
z-index: -20   StarfieldBackground   canvas, fixed, full viewport
z-index: -10   AuroraBackground      divs, fixed, full viewport, mix-blend-screen
z-index:  10   <main> content        relative, page scroll context
z-index:  50   Navigation            fixed top
z-index:  40   Footer                fixed bottom
z-index: 9997  CustomCursor (trail)  fixed, follows mouse
z-index: 9998  CustomCursor (ring)   fixed, follows mouse
z-index: 9999  CustomCursor (dot)    fixed, follows mouse
All ambient background components carry pointer-events-none, so they never intercept clicks, taps, or keyboard events intended for page content.

​
The glass-panel Utility

The glass-panel class is the central design token that gives cards and panels their characteristic frosted appearance. It is defined in assets/main.css and used on most content surfaces across every page component: 
.glass-panel {
  /* Tailwind utilities, expanded: */
  backdrop-filter: blur(12px);            /* backdrop-blur-md */
  background-color: rgb(10 21 53 / 0.40); /* bg-cosmic-navy/40  */
  border-radius: 0.75rem;                 /* rounded-xl         */
  border: 1px solid rgb(61 214 196 / 0.20); /* border border-aurora-teal/20 */
}
Use glass-panel any time you need a surface that appears to float above the starfield without completely blocking the ambient light of the aurora behind it. The semi-transparent cosmic-navy background ensures readable contrast for text, while the aurora-teal border ties the panel visually into the color system. 
// Typical usage in a page component
<div className="glass-panel p-8 md:p-12 relative overflow-hidden group">
  <h2 className="text-3xl font-heading font-bold mb-4 text-aurora-teal">
    Current Trajectory
  </h2>
  <p className="text-star-dim leading-relaxed">
    Panel content here.
  </p>
</div>
For panels that need a different accent border, override only the border color using a Tailwind modifier. For example, the Skills page uses border-aurora-green/20 and the Work page uses border-aurora-violet/20 to match each section’s color theme. The glass-panel class itself always provides the border shorthand, so your override just needs border-{color}/{opacity} — no need to repeat rounded-xl or backdrop-blur-md.

​
Interactive Elements and Cursor Reactivity

CustomCursor tracks mouseover events and enlarges itself when the pointer enters any element that is:
  • An <a> tag
  • A <button> tag
  • A descendant of <a> or <button>
  • An element (or descendant of an element) carrying the .interactive class
// CustomCursor.js — cursor expansion logic
window.addEventListener("mouseover", (e) => {
  const target = e.target;
  if (
    target.tagName.toLowerCase() === "a"      ||
    target.tagName.toLowerCase() === "button" ||
    target.closest("a")                        ||
    target.closest("button")                   ||
    target.classList.contains("interactive")
  ) {
    setIsHovering(true);
  } else {
    setIsHovering(false);
  }
});
Add className="interactive" to any custom element that should trigger cursor expansion — for example, orbital project cards on the Projects page, skill constellation dots on the Skills page, and form inputs on the Contact page all use this class.

​
TeletypeText Props

TeletypeText is the only cosmos component with user-configurable props. It accepts three:
PropTypeDefaultDescription
textstring—The full string to type out. Required.
classNamestring""Extra Tailwind classes applied to the outer <span>.
delaynumber0Seconds to wait before the typing animation starts.
// Staggered teletype labels, as used on the Home page
<TeletypeText
  text="System Online // Signal Acquired"
  className="font-mono text-aurora-teal tracking-widest uppercase text-sm"
  delay={0.5}
/>
The component types one character every 50 ms via setInterval, and renders a blinking aurora-teal caret (motion.span with opacity: [1, 0] on a 0.5 s infinite loop) until the full string has been revealed.

StarfieldBackground

Canvas-based particle system. Density, speed, and twinkle rate explained.

AuroraBackground

Four animated glow blobs. Color tokens, blend modes, and timing configuration.

CustomCursor

Spring-physics cursor. The .interactive class, scale factors, and layer layout.

TeletypeText

Character-by-character reveal. Props reference and delay staggering patterns.

PageTransition

Framer Motion page wrapper. Enter/exit keyframes and the AnimatePresence contract.

Navigation

Fixed nav bar and overlay menu. The navItems array and active-link detection.

Build docs developers (and LLMs) love

Get started for freeTalk to us