Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev.void/llms.txt

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

The MissionPatchWall component transforms your project portfolio into a wall of circular mission patches — an aesthetic borrowed from real space-agency mission insignia. Each patch is a fully interactive card rendered as a gradient-filled circle. Hovering applies a 3D tilt effect, and clicking any patch triggers a smooth shared-layout expansion into a full detail modal with project description, tech stack tags, and external links.
This component relies on Framer Motion’s layoutId shared-layout animation. Both the patch card and the expanded modal reference the same layoutId, so Framer Motion automatically morphs the circle into the modal rectangle using a single, continuous animation.

​
Project Data Shape

All projects are stored in a static array (E in the compiled source). Each entry must conform to this object shape: 
{
  id: string,       // Unique identifier, e.g. "p1"
  name: string,     // Display name, e.g. "Nebula UI"
  type: string,     // Category label, e.g. "Component Library"
  desc: string,     // Full project description shown in the modal
  tech: string[],   // Array of technology tags, e.g. ["React", "Tailwind"]
  color: string,    // Tailwind gradient classes, e.g. "from-aurora-teal to-space-900"
  icon: string      // Emoji icon rendered at the center of the patch
}

​
Pre-configured Projects

The wall ships with four projects out of the box:

🌌 Nebula UI

Type: Component LibraryA React component library built for deep-space applications, featuring zero-gravity physics simulations for drag-and-drop interfaces.Tech: React · Framer Motion · TailwindGradient: from-aurora-teal to-space-900

🛰️ Orbit Tracker

Type: Data VisualizationReal-time satellite tracking using WebGL and public orbital data. Renders 10,000+ active satellites at 60fps.Tech: Three.js · WebGL · TypeScriptGradient: from-aurora-pink to-space-900

📡 Quantum Comms

Type: Real-time ChatEnd-to-end encrypted messaging platform utilizing quantum-resistant algorithms for secure interstellar communication.Tech: Node.js · WebSockets · CryptographyGradient: from-aurora-mint to-space-900

🚀 Void Explorer

Type: Web GameA generative roguelike set in an expanding universe with procedurally generated planets, flora, and fauna.Tech: Canvas API · React · Howler.jsGradient: from-indigo-500 to-space-900

​
Patch Card Design

Each patch card is a perfectly circular element (aspect-square rounded-full) laid out in a responsive grid: 
Mobile  → 1 column   (grid-cols-1)
Tablet  → 2 columns  (sm:grid-cols-2)
Desktop → 4 columns  (lg:grid-cols-4)
The layered circle structure from outermost to innermost is:
  1. Outer motion wrapper — carries layoutId for the shared-layout animation and the whileHover: { scale: 1.05 } scale-up effect.
  2. Gradient ring — a bg-gradient-to-br div using the project’s color value, creating a glowing aurora border effect. On hover, the border transitions to border-aurora-light.
  3. Dark inner circle — bg-space-950 with a dashed border-slate-800 border, providing contrast for the icon and text.
  4. Content — the emoji icon, project name in uppercase, and type in small monospace.
The inner gradient div also applies a 3D perspective tilt on hover: 
// Inner gradient div animation
whileHover: { rotateX: 15, rotateY: -15 }
// Parent container
style: { transformStyle: "preserve-3d" }
// Outer wrapper perspective
className: "perspective-[1000px]"

​
Shared-Layout Modal Expansion

Clicking a patch sets the selected project ID in React state. AnimatePresence conditionally renders the modal overlay, and Framer Motion connects the patch to the modal using a matching layoutId: 
// On the patch card
<motion.div layoutId={`patch-container-${project.id}`} onClick={() => setSelected(project.id)}>
  {/* circular patch content */}
</motion.div>

// Inside AnimatePresence, when selected !== null
<motion.div layoutId={`patch-container-${project.id}`}>
  {/* full modal content */}
</motion.div>
Framer Motion automatically animates the geometry, position, border-radius, and size between these two elements — no manual keyframes required.
The modal overlay (fixed inset-0 ... bg-space-950/80 backdrop-blur-sm) is a separate motion.div with its own initial/animate/exit opacity animation. Clicking the overlay calls the same state setter to close the modal. The inner modal card uses onClick: (e) => e.stopPropagation() to prevent accidental dismissal.

​
Modal Layout

The expanded modal is a max-w-2xl card with two visual zones: Gradient Header (h-32)
  • Displays the project color gradient as a full-width banner.
  • An X close button is anchored to the top-right corner.
  • The project emoji icon floats in a circular badge that overhangs the header into the content area (absolute -bottom-10).
Content Body (p-8 pt-14)
  • Project name (large heading) and type (aurora-teal monospace) on the left.
  • GitHub icon button and ExternalLink icon button stacked on the right.
  • Full desc text in a readable paragraph.
  • “Payload Specs” section with tech stack tags rendered as pill badges (rounded-full bg-space-800 border border-space-700).

​
Adding and Editing Projects

1

Locate the data array

Open components/MissionPatchWall.js (or your local source) and find the E array declared near the top of the file, just before the component function.
2

Add a new entry

Append a new object to the array following the data shape above. Choose a unique id (e.g. "p5"), pick a Tailwind gradient for color, and supply an emoji for icon.
{
  id: "p5",
  name: "Pulsar API",
  type: "Backend Service",
  desc: "High-throughput REST and GraphQL API layer built for millisecond response times across distributed nodes.",
  tech: ["Node.js", "GraphQL", "Redis"],
  color: "from-aurora-pink to-space-900",
  icon: "⚡"
}
3

Update the grid if needed

The grid auto-fills columns. If you add a 5th or more patches, consider adjusting the Tailwind grid class on the container from lg:grid-cols-4 to lg:grid-cols-5 or keeping 4 columns for visual symmetry.
4

Link to real URLs

The GitHub and ExternalLink icon buttons inside the modal currently point to href="#". Replace these with your actual repository URL and live demo URL per project, either by adding github and live fields to the data shape or by editing the JSX directly.

​
Customizing Patch Colors

The color field accepts any valid Tailwind gradient direction pair. All gradient colors used in dev.void follow the custom palette:
TokenDescription
from-aurora-tealDeep teal — #0D9488
from-aurora-pinkVibrant pink — used for highlights
from-aurora-mintSoft mint green — #34D399
from-indigo-500Standard Tailwind indigo
to-space-900Near-black space background (used as the gradient terminus)
You can also use via-* tokens to create three-stop gradients, e.g. from-aurora-teal via-aurora-pink to-space-900.
Avoid gradients where both the from- and to- colors are very similar in brightness. The dashed inner border and text must remain legible against the gradient ring. Always test with border-slate-700 contrast before deploying a new patch color.

Build docs developers (and LLMs) love

Get started for freeTalk to us