Skip to main content

Documentation Index

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

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

HudFrame is a content-wrapper component that gives any block of content the visual treatment of a spacecraft Heads-Up Display (HUD) panel. Borrowed from the aesthetic vocabulary of mission-control interfaces and fighter-pilot cockpits, it applies a distinctive bordered frame (hud-border), a frosted semi-transparent dark background, and an optional floating title label in the top-left corner. Every section panel on the sys-core site — projects, skills, writing, and contact — is wrapped in a HudFrame to maintain a consistent mission-control identity across all pages.

​
Visual Role

The HUD aesthetic treats the user’s screen as if it were a spacecraft instrument panel: content areas become distinct readouts separated by glowing borders, with terse monospace labels identifying each module. HudFrame achieves this with:
  • hud-border — a custom Tailwind utility that renders the characteristic HUD corner-accent border (typically a cyan or off-white geometric frame).
  • bg-space-black/80 — an 80 % opaque space-black background that lets the nebula and starfield bleed through slightly, preserving depth.
  • backdrop-blur-sm — a subtle frosted-glass blur on whatever sits behind the panel, reinforcing the sense that the panel is a physical object floating in front of the cosmos.
  • Floating title label — when the title prop is provided, a small monospace string formatted as [TITLE] floats at top: -3 on the panel’s border line, rendered against a solid bg-space-black background so it appears to break the frame — a classic HUD annotation technique.

​
Usage

Wrap any content block with <HudFrame> to apply the panel styling. Pass a title to label the module, and use className to append positioning or sizing utilities. 
import HudFrame from "../../components/cosmic/HudFrame.js";

// Basic panel with a title label
export default function SkillsSection() {
  return (
    <HudFrame title="INSTRUMENT PANEL" className="relative">
      <p className="text-off-white font-mono text-sm">
        Skill data rendered here...
      </p>
    </HudFrame>
  );
}

// Panel without a title — clean frame only
import HudFrame from "../../components/cosmic/HudFrame.js";

export default function ContactPanel() {
  return (
    <HudFrame className="relative max-w-lg mx-auto">
      <form>
        {/* contact form fields */}
      </form>
    </HudFrame>
  );
}

​
Props

​
children
ReactNode
required
The content to render inside the HUD panel. Any valid React children are accepted — text, form elements, data visualisations, or nested components.
​
title
string
An optional panel title displayed as a floating monospace label ([TITLE]) positioned at the top-left border edge. Rendered in text-cyan-signal with tracking-widest for the classic HUD annotation look. Omit this prop for a clean, unlabelled frame.
​
className
string
default:"\"\""
Additional Tailwind classes appended to the outer wrapper <div>. Use this to control width, margin, grid placement, or any layout concerns. The relative class is required on the wrapper when using the title prop (so the absolutely-positioned label offsets correctly from the panel border).
When using the title prop, ensure the outer wrapper or a parent element has position: relative. Without it, the floating [TITLE] label will escape the panel and anchor to the nearest positioned ancestor, which may cause it to appear in the wrong place on the page.

​
Implementation Notes

​
hud-border utility

The hud-border class is a custom CSS utility defined in the project’s global stylesheet. It renders the characteristic HUD corner-accent treatment — typically a thin border with highlighted corner segments, echoing the bracket-style indicators found on aircraft HUD overlays and science-fiction UI design. The exact border colour and corner geometry are defined in the Tailwind config and global CSS.

​
Title label technique

The floating title is implemented as an absolutely-positioned sibling rendered before children: 
// Simplified from source
{title && (
  <div className="absolute -top-3 left-4 bg-space-black px-2 text-xs font-mono text-cyan-signal tracking-widest">
    [{title}]
  </div>
)}
The bg-space-black background on the label punches a gap in the border line so the text appears to sit on the border rather than above it — a small but effective detail that reinforces the HUD aesthetic.

​
Backdrop blur and transparency

The bg-space-black/80 + backdrop-blur-sm combination is intentional: full opacity would hide the starfield and nebula layers completely, destroying the sense of depth. At 80 % opacity with a light blur, the panel reads clearly as a distinct surface while the cosmic environment glows softly through it.
When stacking multiple HudFrame panels in a grid layout, you can differentiate them by passing distinct title labels — NAVIGATION, PROPULSION, LIFE SUPPORT, COMMS — matching the skill group IDs from the skills data. This reinforces the spacecraft subsystem metaphor across the whole Skills section.

Build docs developers (and LLMs) love

Get started for freeTalk to us