Comms Console: Glassmorphic Terminal-Styled Contact Form

The CommsConsole component is the contact section of dev.void, styled as a spacecraft communications terminal. It wraps a standard HTML form in a glass-panel container with aurora-teal borders, a monospaced type system, and a simulated three-state transmission sequence — giving even a simple contact form a distinctive, mission-control feel.

Terminal Aesthetic

The outer container is a rounded panel that combines glassmorphism with a subtle teal glow:

<div className="glass-panel rounded-xl overflow-hidden border border-aurora-teal/30 shadow-[0_0_50px_rgba(13,148,136,0.1)] relative">

Title Bar

A dark header bar (bg-space-900 border-b border-aurora-teal/30) sits above the form and mimics a desktop terminal window:

Left side — a Lucide Terminal icon (w-5 h-5 text-aurora-teal) followed by the text "Comms Link Established" in font-mono text-sm text-slate-300 tracking-widest uppercase (the uppercase CSS class renders it visually as COMMS LINK ESTABLISHED).
Right side — three macOS-style traffic-light circles (red / yellow / green at 50 % opacity). The green dot carries animate-pulse to suggest an active connection.

Corner Bracket Decorations

Four absolutely positioned div elements inside the <form> create L-shaped bracket decorations at each corner of the form body, using two-side border utilities:

{/* top-left */}
<div className="absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-aurora-teal/30 m-4 pointer-events-none" />
{/* top-right */}
<div className="absolute top-0 right-0 w-8 h-8 border-t-2 border-r-2 border-aurora-teal/30 m-4 pointer-events-none" />
{/* bottom-left */}
<div className="absolute bottom-0 left-0 w-8 h-8 border-b-2 border-l-2 border-aurora-teal/30 m-4 pointer-events-none" />
{/* bottom-right */}
<div className="absolute bottom-0 right-0 w-8 h-8 border-b-2 border-r-2 border-aurora-teal/30 m-4 pointer-events-none" />

All four carry pointer-events-none so they never interfere with form interaction.

Label Style

Every field label uses the same monospaced terminal style:

<label className="font-mono text-xs text-aurora-teal uppercase tracking-widest">
  Field Name
</label>

Input / Textarea Style

All inputs and the textarea share a consistent dark-panel look with a teal focus ring:

w-full bg-space-950/50 border border-slate-700 rounded p-3 text-slate-200
font-sans focus:outline-none focus:border-aurora-teal focus:ring-1
focus:ring-aurora-teal transition-all

The textarea additionally has resize-none to prevent users from distorting the terminal layout.

Form Fields

The form contains three required fields. The first two sit side-by-side in a two-column grid on md+ screens; the textarea spans the full width below them.

Field Label	Type	Required	Placeholder
Origin Identifier	`text`	✅	`Name / Callsign`
Return Frequency	`email`	✅	`Email Address`
Payload	`textarea` (5 rows)	✅	`Enter message contents...`

{/* Two-column row */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  {/* Origin Identifier */}
  <div className="space-y-2">
    <label className="font-mono text-xs text-aurora-teal uppercase tracking-widest">
      Origin Identifier
    </label>
    <input type="text" required placeholder="Name / Callsign" ... />
  </div>

  {/* Return Frequency */}
  <div className="space-y-2">
    <label className="font-mono text-xs text-aurora-teal uppercase tracking-widest">
      Return Frequency
    </label>
    <input type="email" required placeholder="Email Address" ... />
  </div>
</div>

{/* Full-width textarea */}
<div className="space-y-2">
  <label className="font-mono text-xs text-aurora-teal uppercase tracking-widest">
    Payload
  </label>
  <textarea required rows={5} placeholder="Enter message contents..." ... />
</div>

Three-State Submission Flow

The component manages submission state with a single useState call:

const [a, s] = React.useState("idle");
// a = current state: "idle" | "transmitting" | "sent"
// s = setState dispatcher

idle

Default state. The button reads Transmit with a Lucide Send icon and responds to hover styles (hover:bg-aurora-teal/40 hover:box-glow). The button is fully enabled.

transmitting

Set immediately on form.onSubmit. The button label changes to Encoding… and a Framer Motion div sweeps a teal overlay (bg-aurora-teal/30) across the button from left to right on a 1 s infinite loop. The button is disabled (cursor-not-allowed opacity-80).

sent

Set after a 2 s setTimeout. The button label changes to Signal Sent and the animated overlay stops. The button remains disabled, giving the user clear visual confirmation.

The submit handler t in the source drives all three transitions:

const t = (o) => {
  o.preventDefault();
  s("transmitting");
  setTimeout(() => s("sent"), 2000);
};

The transmit button’s conditional rendering in full:

<button
  type="submit"
  disabled={a !== "idle"}
  className={`relative overflow-hidden px-8 py-3 rounded bg-aurora-teal/20
    border border-aurora-teal text-aurora-light font-mono text-sm
    tracking-widest uppercase transition-all flex items-center gap-2
    ${a === "idle" ? "hover:bg-aurora-teal/40 hover:box-glow" : "opacity-80 cursor-not-allowed"}`}
>
  {a === "idle" && <><SendIcon className="w-4 h-4" /> Transmit</>}
  {a === "transmitting" && "Encoding..."}
  {a === "sent" && "Signal Sent"}

  {a === "transmitting" && (
    <motion.div
      className="absolute inset-0 bg-aurora-teal/30"
      initial={{ x: "-100%" }}
      animate={{ x: "100%" }}
      transition={{ duration: 1, repeat: Infinity }}
    />
  )}
</button>

Footer Status Bar

Below the submit button, two hardcoded status labels are rendered in font-mono text-xs text-slate-500:

<div className="font-mono text-xs text-slate-500">
  ENCRYPTION: ACTIVE <br />
  LATENCY: 42ms
</div>

These are purely decorative display labels — they are not connected to any live telemetry.

Wiring Up Real Form Submission

The form currently only simulates a network request. The submit handler t calls o.preventDefault(), sets the state to "transmitting", and then resolves to "sent" after a hardcoded setTimeout of 2 000 ms. No data is sent to any server or third-party service.

To connect the form to a real backend, replace the setTimeout mock with a fetch POST. The example below targets a Formspree endpoint, but the same pattern works for any REST API or form service (EmailJS, Web3Forms, your own Express route, etc.).

Collect field values with refs or controlled state

Add useState hooks (or useRef) for each field so you can read the values on submit.

const [name, setName]       = React.useState("");
const [email, setEmail]     = React.useState("");
const [message, setMessage] = React.useState("");

Bind them to the inputs:

<input
  type="text"
  value={name}
  onChange={(e) => setName(e.target.value)}
  ...
/>

Replace the submit handler

Swap the existing t function for one that calls your endpoint. Keep the "transmitting" / "sent" state transitions so the UI feedback still works.

const t = async (o) => {
  o.preventDefault();
  s("transmitting");

  try {
    const res = await fetch("https://formspree.io/f/YOUR_FORM_ID", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, email, message }),
    });

    if (!res.ok) throw new Error("Transmission failed");
    s("sent");
  } catch (err) {
    console.error(err);
    // Reset to idle so the user can retry
    s("idle");
  }
};

Handle the error state (optional)

Add an "error" value to the state union and render an appropriate message in the button or below the form so users know if their message did not go through.

// State: "idle" | "transmitting" | "sent" | "error"
{a === "error" && <p className="font-mono text-xs text-red-400">TRANSMISSION FAILED — RETRY</p>}

Reset the form after sending (optional)

After s("sent"), clear the controlled field values so the form is blank if the user wants to send another message.

s("sent");
setName("");
setEmail("");
setMessage("");

If you prefer a zero-backend setup, Formspree and Web3Forms both accept a standard fetch POST to a unique endpoint URL — no server code required. Simply create a free form, copy the endpoint, and drop it into the fetch call above.

Layout & Navigation

Hero & Profile

Portfolio Sections

Social & Contact

Comms Console: Glassmorphic Terminal-Styled Contact Form

Terminal Aesthetic

Title Bar

Corner Bracket Decorations

Label Style

Input / Textarea Style

Form Fields

Three-State Submission Flow

idle

transmitting

sent

Footer Status Bar

Wiring Up Real Form Submission

Build docs developers (and LLMs) love

Layout & Navigation

Hero & Profile

Portfolio Sections

Social & Contact

Documentation Index

​Terminal Aesthetic

​Title Bar

​Corner Bracket Decorations

​Label Style

​Input / Textarea Style

​Form Fields

​Three-State Submission Flow

idle

transmitting

sent

​Footer Status Bar

​Wiring Up Real Form Submission

Build docs developers (and LLMs) love

Terminal Aesthetic

Title Bar

Corner Bracket Decorations

Label Style

Input / Textarea Style

Form Fields

Three-State Submission Flow

Footer Status Bar

Wiring Up Real Form Submission