A futuristic UI toolkit with 400+ design tokens, 40+ components, and 30+ animations. Light and dark mode built-in. Zero dependencies. Pure CSS + vanilla JavaScript.
Every component adapts seamlessly between light and dark mode. Toggle the theme from the navbar to see it live.
Light Mode
All modules operational. Signal strong.
Dark Mode
All modules operational. Signal strong.
Everything you need to build immersive interfaces, shipped as a single drop-in package with full light and dark mode support.
400+ CSS custom properties covering colors, typography, spacing, shadows, glows, and gradients. Every token adapts to light and dark mode automatically.
--ge-cyan: #00f0ff
Buttons, cards, forms, modals, tabs, dropdowns, tables, badges, alerts, progress bars, loaders, code blocks, and 30+ more pieces.
.ge-btn .ge-card .ge-input
30+ keyframe animations, scroll-triggered reveals, hover effects, staggered delays, and transition utilities. Respects prefers-reduced-motion.
data-ge-animate="slide-up"
Grid backgrounds, scanlines, glitch text, glass morphism, hologram scans, radial glows, noise textures, corner accents, and 25+ more FX classes.
.ge-fx-glass .ge-fx-glitch
Theme toggling, modals, toasts, typewriter effect, scroll spy, smooth scrolling, counter animations, and glitch text scramble.
GodsEye.toggleTheme()
Pure CSS and vanilla JavaScript. No build tools, no npm install, no frameworks required. Drop the files in, link them, and start building immediately.
Just link & go
Interactive demos of real components built with the design system.
A card with a cyan glow border that intensifies on hover. Built with .ge-card-glow.
Glass morphism with backdrop blur and translucent surface. Built with .ge-fx-glass.
Lifts on hover with smooth transitions. Built with .ge-fx-lift.
Table
| Status | Module | Latency | Uptime |
|---|---|---|---|
| Core Engine | 12ms | 99.98% | |
| Signal Processor | 87ms | 97.21% | |
| Satellite Relay | 340ms | 82.40% | |
| Telemetry Feed | 24ms | 99.72% |
Badges
Alerts
Glitch Text
GOD'S EYEGradient Text
SPECTRUMText Glow
RADIANCEGlass Morphism
Frosted PanelStatus Indicators
Corner Accents
FramedThree carefully chosen font families for display, body, and code. Sized and weighted for clarity at every scale.
Display
Syne
Headings, titles, and hero text. Bold and geometric.
.ge-font-display
Body
Inter
Body text, descriptions, and UI elements. Clean and readable.
.ge-font-body
Code
Space Mono
Code, data, labels, and monospace accents. Technical precision.
.ge-font-mono
Heading Scale
Text Utilities
.ge-text-color-cyan
.ge-text-color-magenta
.ge-text-color-yellow
.ge-fx-gradient-text
.ge-fx-text-glow
A curated palette of primary, accent, and semantic colors with alpha variants for layering.
Primary & Accent
--ge-cyan
#00f0ff
--ge-magenta
#ff00aa
--ge-yellow
#ffe600
Semantic
--ge-success
#00e676
--ge-error
#ff1744
--ge-warning
#ffab00
--ge-info
#2979ff
Alpha Variants (Cyan)
10%
30%
50%
Alpha Variants (Magenta)
10%
30%
50%
Fluid animations that bring every element to life. Each box demonstrates a CSS animation class.
.ge-animate-float
.ge-animate-pulse
.ge-animate-glow
.ge-animate-bounce
.ge-animate-rotate
.ge-animate-shake
.ge-animate-shimmer
.ge-animate-border-glow
Drop-in CSS classes for glitch, glass, glow, scan, noise, and more. No JavaScript required.
Glitch Text
DISRUPT.ge-fx-glitch
Gradient Text
PRISMATIC.ge-fx-gradient-text
Text Glow
LUMINOUS.ge-fx-text-glow
Glass Morphism
Frosted.ge-fx-glass
Corner Accents
Framed.ge-fx-corners
Grid Background
Matrix.ge-fx-grid
Scanlines
Retro.ge-fx-scanlines
Noise Texture
Grain.ge-fx-noise
Status Indicators
.ge-fx-status
No build step. No package manager. Just link the files and go.
<!DOCTYPE html> <html lang="en" data-theme="dark"> <head> <!-- 1. Add the stylesheets --> <link rel="stylesheet" href="css/variables.css"> <link rel="stylesheet" href="css/foundation.css"> <link rel="stylesheet" href="css/components.css"> <link rel="stylesheet" href="css/animations.css"> <link rel="stylesheet" href="css/effects.css"> </head> <body class="ge-fx-noise"> <!-- 2. Use components --> <button class="ge-btn">Launch</button> <!-- 3. Add the script before </body> --> <script src="js/gods-eye.js"></script> <script>GodsEye.init();</script> </body> </html>
<!-- A glowing card with scroll animation --> <div class="ge-card ge-card-glow" data-ge-animate="slide-up"> <h3 class="ge-fx-gradient-text">Hello, Operator</h3> <p>Your interface is ready.</p> <button class="ge-btn"> Launch System </button> </div> <!-- Toggle theme via JS --> <script> GodsEye.toggleTheme(); GodsEye.toast('Theme switched', { type: 'success' }); </script>
Built with accessibility and performance as first-class priorities. No compromises.
All animations respect prefers-reduced-motion. Users who prefer less motion get a static but complete experience.
Text meets 4.5:1 AA contrast ratios in both light and dark themes. Interactive elements are clearly distinguishable.
Every interactive element has :focus-visible styling. Full keyboard navigation with clear, visible focus indicators.
No JS framework, no build step, no dependencies. The entire system is approximately 28KB gzipped. Pure CSS + vanilla JavaScript.
Drop in the CSS, initialize the JS, and start building futuristic interfaces in minutes. No setup required.