prism-glass-pro-redesign

name	prism-glass-pro-redesign
description	Complete procedure for applying Prism Glass Pro glassmorphism theme to a Tailwind/React/Electron app
source	auto-skill
extracted_at	2026-06-06T10:38:00.000Z

Prism Glass Pro Redesign

When to use

When transforming a Tailwind + React app to a dark glassmorphism aesthetic with cyan/purple neon accents, frameless window, Material Symbols icons, and Three.js globe.

Core colors

• background-deep: #05050A
• primary-fixed (cyan): #14fbfb
• secondary-container (purple): #7000ff
• accent-magenta: #FF0055
• status-success: #4ade80
• on-surface (text): #dbe4e3
• on-surface-variant (muted): #b9cac9
• text-muted: #8B949E
• border-glass: rgba(255, 255, 255, 0.15)
• surface-glass: rgba(255, 255, 255, 0.05)
• surface-glass-hover: rgba(255, 255, 255, 0.1)

Essential CSS classes (globals.css)

.glass-panel { background: rgba(255,255,255,0.05); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.15); }
.glass-header { same as glass-panel but border-bottom }
.glass-nav { same as glass-panel but border-right }
.shimmer { position:relative; overflow:hidden; }
.shimmer::after { content:''; position:absolute; top:0; left:-150%; width:50%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent); animation:shimmer 4s infinite linear; }
.input-glass { color:#dbe4e3 !important; background-color:rgba(0,0,0,0.2) !important; border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:0.5rem 1rem; font-family:'Outfit',sans-serif; }
.input-glass:focus { border-color:rgba(20,251,251,0.5); box-shadow:0 0 0 3px rgba(20,251,251,0.1); }
.btn-cyan { background:#14fbfb; color:#002020; box-shadow:0 0 20px rgba(20,251,251,0.4); border-radius:12px; padding:0.5rem 1rem; font-weight:600; }
.btn-glass { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); color:#b9cac9; }
.nav-link { color:rgba(185,202,201,0.7); font-weight:500; padding:12px 16px; border-radius:12px; }
.nav-link:hover { background:rgba(255,255,255,0.1); color:#dbe4e3; }
.nav-link.active { background:rgba(255,255,255,0.1); color:#14fbfb; border-right:2px solid #14fbfb; }
.badge-glass { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:#b9cac9; text-transform:uppercase; font-size:10px; }
.badge-cyan { background:rgba(20,251,251,0.1); border-color:rgba(20,251,251,0.2); color:#14fbfb; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; }
.drag-region { -webkit-app-region:drag; }
.drag-region button,.drag-region input,.drag-region select,.drag-region a { -webkit-app-region:no-drag; }

Prism background effect

<div class="prism-bg">
  <div class="prism-glow-1" />  <!-- cyan radial gradient, blur(80px), pulse-glow animation -->
  <div class="prism-glow-2" />  <!-- purple radial gradient, blur(80px), pulse-glow reverse -->
</div>

Both .prism-glow-1 and .prism-glow-2 use position:absolute with large radial gradients and blur. Animated with @keyframes pulse-glow.

Fonts (in index.html)

<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />

Icon migration: Lucide → Material Symbols

Replace all lucide-react imports with Material Symbols spans:

<span className="material-symbols-outlined">icon_name</span>

Common mappings: Clipboard→content_copy, MessageSquare→chat, Zap→bolt/auto_awesome, Star→star, Settings→settings, Trash2→delete, Plus→add, Search→search, X→close, Camera→camera, Info→info, ExternalLink→open_in_new

Frameless Electron window

In electron/main.js BrowserWindow config:

frame: false,
titleBarStyle: 'hidden',

Add .drag-region CSS to header for window dragging, with no-drag on interactive elements.

Three.js Globe integration

• Dependencies: three, three-globe
• Render at high resolution (300×300) then CSS transform:scale() down to desired display size
• Add arc lines, orbit ring, and glow points for visual appeal
• Use try/catch for atmosphere API (three-globe v2 uses setters: globe.showAtmosphere = true)
• Wrap in container with drop-shadow filter for cyan glow

Tailwind config additions

Add all Prism colors as custom colors, Outfit/JetBrains Mono as font families, display-lg/headline-md/body-lg/body-sm/label-xs/code-snippet font sizes, and glow shadows.

Key mistakes to avoid

• Never use old CSS variable classes (bg-surface, border-border/50, card, text-text, text-text-muted, badge-text, badge-code, input-field)
• Don't import lucide-react anywhere
• Frame must be false to avoid double title bar
• Input text needs explicit color (white-on-white happens without !important)
• Globe positioning: use absolute positioning outside flex flow to avoid overflow clipping
• Transform pages must replace all old class references (SmartPastePage textareas, selects, labels)