Void Energy

Every AI-built app looks the same. This is the fix.

40+ components, 3 physics presets, 12 atmospheres, density scaling — one codebase, zero rebuilds. Drop in the token layer and every surface adapts.

12 Atmospheres 3 Physics Presets Runtime Theming Density Scaling

Switch the atmosphere — every element on this page adapts.

Create Your Own

Type a vibe, get a complete atmosphere. AI-powered theme generation.

Your Components. Our Materials.

These elements are standard HTML — buttons, inputs, cards. Void Energy applies the surface physics, palette, and typography. Switch the atmosphere and watch the same markup transform.

Surface Card

This card uses surface-raised — a floating surface with physics-aware shadows, borders, and optional backdrop blur.

Primary text Secondary text Tertiary text

Success Error Premium System

Interactive Elements

Auto-play

Shuffle

Every button, input, and chip reads from the same CSS custom properties. The atmosphere changes the values — the components never change.

Active physics: glass — Translucent surfaces, glow shadows, spring easing, backdrop blur. Each atmosphere defines its own physics preset and typography.

Density Scaling

Every spacing value flows through a global density coefficient. One setting — every gap, padding, and control height adapts.

Density

Compact Standard Relaxed

Sample Card

This card's padding, gaps, and control heights all scale with the density setting above. The content stays the same — only the whitespace changes.

Primary text Secondary text Tertiary text

Use Cases

Compact — data-heavy dashboards, admin panels, tables with many rows
Standard — balanced default, general-purpose applications
Relaxed — reading experiences, accessibility, content-focused layouts

Density is a user preference, independent of the active atmosphere. All 12 atmospheres respect the same density setting.

How It Works

Register & Switch

// Register a custom atmosphere
voidEngine.registerTheme('brand', {
  mode: 'dark',
  physics: 'glass',
  palette: {
    'bg-canvas':      '#060816',
    'bg-surface':     'rgba(20, 24, 44, 0.72)',
    'energy-primary': '#6ee7ff',
    'text-main':      '#f8fafc',
  }
});

// Switch — every component adapts instantly
voidEngine.setAtmosphere('brand');

Your Component Styles

/* Your existing CSS — just use the tokens */
.card {
  background: var(--bg-surface);
  border: var(--physics-border-width) solid
    var(--border-color);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-float);
  color: var(--text-main);
}

.card:hover {
  border-color: var(--energy-primary);
  box-shadow: var(--shadow-lift);
}

What You Get

12 built-in atmospheres with complete palettes
3 physics presets (glass, flat, retro)
Runtime theme engine with scoped & temporary themes
Density scaling (compact / standard / relaxed)
Token pipeline & build tooling
Physics-aware transitions & animations

What You Build

Token aliasing — map your CSS properties to Void's semantic tokens (--bg-surface, --energy-primary, etc.)
Component style mapping — update your component styles to read from CSS custom properties instead of hardcoded values
Custom atmospheres — define palettes that match your brand identity using the token contract

Interactive Sandbox

Try the components below. Modals, toasts, animated chips — all reacting to the active atmosphere.

Feedback Patterns

Chip Variants

Spacing

Typography

Color

Style

Tag

From the makers of CoNexus — an AI-powered interactive storytelling platform where the UI adapts to the mood of the story.

Explore the Component Library