Aurora v5.2 · Constellation

Ntizar Aurora

Design System CSS-only con liquid glass real, three.js y OKLCH. 11 packs modulares, 119 componentes, sin build, sin dependencias. Azul y naranja puros — sin morados.

Scroll
11
Packs CSS
119
Componentes
6
Skins
0
Dependencias
243
KB CSS total
Arquitectura

11 packs modulares, carga lo que usas

Core obligatorio + 10 packs opcionales opt-in. Cada pack resuelve un dominio: datos, charts, mapas, 3D, forms, UI, motion, patterns, glass y next-gen.

Core · obligatorio

ntizar.css

Tokens, base, objetos, componentes y utilities en 64 KB. El corazón del sistema: botones, cards, badges, fields, alerts, layout primitives. Todo namespaced .nz.

<!-- 1 link, 0 build --> <link rel="stylesheet" href="ntizar.css"> <body class="nz" data-nz-theme="light">
viz

Three.js ready

Stages full-bleed, aurora-bg animado, orbs, glow-rings y scanlines. Canvas auto-resize, HUD overlays.

next

Liquid Glass

4 capas reales: base translúcida, backdrop saturate, dual inset shadow, borde cromático. OKLCH + multi-axis theming.

data

KPIs, progress, skeletons

Stat-tiles, KPI cards, progress bars, meters, skeletons, avatars, timelines y tags. Todo lo que un dashboard necesita para mostrar datos con estilo.

charts

Chart.js / Apex

Wrappers CSS para Chart.js, ApexCharts y D3. Sparklines, donuts, legends y tooltips.

maps

Leaflet / Mapbox

Styling para mapas interactivos. Pins, popups, overlays HUD y capas.

ui

Overlays completos

Modals, drawers, tabs, accordions, dropdowns, toasts, tooltips y command bars. CSS-only con estado via clases.

forms

Forms avanzados

Switch, OTP, file drop, range, stepper. Inputs accesibles.

motion

Animaciones

Reveal, glow-pulse, shimmer, float, marquee. Respeta reduced-motion.

patterns

Páginas completas

App-shell, hero, pricing, features, FAQ, footer, auth-shell. Componentes de página lista para ensamblar landings y apps.

Identidad

6 skins, multi-axis theming

Cambia toda la identidad con un atributo: data-nz-skin. Más shape, density, motion y color-system via data-*.

Aurora

Azul + naranja · default

Sunset

Naranja cálido

Midnight

Azul profundo oscuro

Ocean

Cian turquesa

Citrus

Amarillo cítrico

Contrast

WCAG AAA

Liquid Glass

Glass real, no blur genérico

4 capas: base translúcida + backdrop saturate + dual inset shadow + borde cromático. Profundidad y reflejos, no solo blur.

Capa 1 · Base

Translúcida

Gradiente blanco sutil con 72% opacidad. Deja ver el fondo sin perder legibilidad.

Capa 2 · Backdrop

Saturate 180%

backdrop-filter: blur(24px) saturate(180%). Aumenta la saturación del fondo difuminado.

Capa 3 · Inset

Dual shadow

Highlight superior + sombra inferior interior. Simula profundidad real del cristal.

Capa 4 · Borde

Cromático

Inset box-shadow con tinte azul + naranja. Reflejo cromático en el borde, sin morado.

Empieza a construir

Un link CSS, cero build, cero dependencias. Aurora se carga desde CDN y no choca con otros sistemas gracias al scope .nz.