Spatial Mesh Sign In

signin

Interactive spatial background mesh with glowing input focus borders.

#signin#spatial#mesh#3d

Live Interactive Preview

SPATIAL

Component Source Code

Select language in the dropdown

SpatialLogin.tsx

1'use client';
2
3import React from 'react';
4import { KeyRound, Sparkles } from 'lucide-react';
5
6export default function SpatialLogin() {
7  return (
8    <div className="relative w-full max-w-md rounded-3xl border border-cyan-500/30 bg-slate-950 p-6 sm:p-8 text-white shadow-[0_0_50px_rgba(6,182,212,0.15)]">
9      <div className="flex items-center justify-between mb-6 sm:mb-8">
10        <div className="flex items-center gap-2">
11          <Sparkles className="h-5 w-5 text-cyan-400 animate-spin-slow" />
12          <span className="font-extrabold tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">SPATIAL</span>
13        </div>
14        <KeyRound className="h-5 w-5 text-slate-500" />
15      </div>
16
17      <form onSubmit={(e) => e.preventDefault()} className="space-y-4">
18        <div>
19          <label className="block text-xs font-semibold text-cyan-300/90 mb-1">Spatial ID</label>
20          <input
21            type="text"
22            placeholder="node_8492"
23            className="w-full rounded-xl border border-cyan-500/30 bg-cyan-950/20 py-2.5 px-4 text-sm text-cyan-100 placeholder:text-cyan-600 outline-none focus:border-cyan-400 focus:ring-1 focus:ring-cyan-400"
24          />
25        </div>
26
27        <div>
28          <label className="block text-xs font-semibold text-cyan-300/90 mb-1">Secret Key</label>
29          <input
30            type="password"
31            placeholder="••••••••••••"
32            className="w-full rounded-xl border border-cyan-500/30 bg-cyan-950/20 py-2.5 px-4 text-sm text-cyan-100 placeholder:text-cyan-600 outline-none focus:border-cyan-400 focus:ring-1 focus:ring-cyan-400"
33          />
34        </div>
35
36        <button className="w-full rounded-xl bg-cyan-500 hover:bg-cyan-400 active:scale-98 py-3 text-sm font-bold text-slate-950 shadow-lg shadow-cyan-500/25 transition">
37          Authorize Session
38        </button>
39      </form>
40    </div>
41  );
42}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/signin/SpatialLogin.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import SpatialMeshSignIn from '@/components/signin/SpatialLogin';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <SpatialMeshSignIn />
7    </main>
8  );
9}