Open source126 componentsMIT

Enterprise UI that moves like it means it.

126 components — data grids to gauges, schedulers to signature pads — shipped as native Web Components with GSAP motion built in. React, Vue, Svelte, or plain HTML. No wrappers. No config.

Explore components Star on GitHub
$ npm install @lasitospt/aurora

01 · Philosophy

No wrappers.

No lock-in.

Just the platform, in motion.

Framework UI kits chain your interface to their runtime. aurora ships native custom elements instead — animated by GSAP, themed by CSS custom properties, accessible by default, and at home in any stack you'll use next.

Components
kB Core, gzipped
fps GSAP motion
Import

02 · Features

Polish, without the platform tax.

01

Write once, render anywhere.

One custom element works identically in React, Vue, Svelte and plain HTML. No wrappers, no adapters, no rewrites when you switch stacks.

<aurora-button>Works everywhere</aurora-button>
02

Industrial-grade motion.

Every interaction runs on GSAP — interruptible, springy, 60 fps.
03

3D on your terms.

Three.js lives behind a separate entry. Skip it, and it never ships.

import '@lasitospt/aurora/three'
04

Real form controls.

ElementInternals under the hood — aurora inputs submit with a plain <form> exactly like natives. These two are live:

05

Theme with one variable.

CSS custom properties pierce the shadow boundary. Pick an accent — the button re-themes instantly:

Instantly themed
06

Accessible by default.

Focus traps, roving tabindex, ARIA roles and prefers-reduced-motion — wired in, not bolted on.

03 · In practice

One import. A whole product.

Everything below is aurora — the tiles, the grid, the chart, the gauges, the badges. Drag a tile by its header. Sort the grid. It's all live.

Open Resolved

Data grid

<aurora-grid>
The first of the enterprise track: click headers to sort (asc → desc → off), type in the filter row, page through, select rows with checkboxes. 
<aurora-grid filterable striped selectable="multiple" page-size="4"></aurora-grid>

grid.columns = [
  { field: 'name', title: 'Project' },
  { field: 'stars', title: 'Stars', align: 'right', formatter: (v) => `★ ${v}` },
]
grid.data = rows

Command palette

<aurora-command>
The full ⌘K experience: global hotkey, type-to-filter, arrow keys, Enter to run, focus restore. Try ⌘K right now — it drives this page.
Open palette ⌘K 
<aurora-command hotkey="k">
  <button data-value="docs" data-keywords="manual">📖 Open docs</button>
  <button data-value="deploy">🚀 Deploy</button>
</aurora-command>

Toasts

<aurora-toaster>
An animated notification stack — toasts spring in, pause on hover, dismiss on click. One line: AuroraToaster.show(…).
Success Default Error 
import { AuroraToaster } from '@lasitospt/aurora'

AuroraToaster.show('Everything is live.', {
  title: 'Changes saved',
  variant: 'success',
})

Nebula

<aurora-nebula>
The hero of this page — an aurora-borealis backdrop as a ~2 kB raw-WebGL shader. No 3D library, DPR-capped, pauses off-screen, still frame under prefers-reduced-motion. 
<aurora-nebula color="#6d5cff" color2="#22d3ee" speed="1"></aurora-nebula>

Lens

<aurora-lens>
Move your cursor over the image — it liquifies toward the pointer with a chromatic fringe. A real <img> underneath keeps a11y, SEO and no-WebGL environments intact. 
<aurora-lens src="/hero.jpg" alt="…" strength="1"></aurora-lens>

Text reveal

<aurora-text>
Masked rise on scroll into view — by="chars" for a per-character headline cascade, by="words" (default) for word blocks.
Motion, built in. 
<aurora-text by="chars" stagger="0.03">
  Motion, built in.
</aurora-text>

Form controls

<aurora-input> <aurora-switch> <aurora-slider>
Form-associated via ElementInternals — they submit with a real <form>.
Volume 
<form>
  <aurora-input  name="email"      label="Email" type="email"></aurora-input>
  <aurora-switch name="newsletter" checked></aurora-switch>
  <aurora-slider name="volume" min="0" max="100" value="70"></aurora-slider>
</form>

Particles

<aurora-particles>
A drifting GPU particle field with additive glow and pointer parallax, colored along a two-tone gradient. Also on the aurora/three entry.
loading three.js… 
<aurora-particles count="2200" color="#6d5cff" color2="#22d3ee">
</aurora-particles>
View all 126 components → The full catalogue, grouped by category — every demo live.

05 · Install

Up and running in two lines.

Install & import

Components register themselves on import.

npm install @lasitospt/aurora
// registers the core components
import '@lasitospt/aurora'

// registers <aurora-scene> (pulls in Three.js only here)
import '@lasitospt/aurora/three'

Use anywhere

Standard custom elements — the markup is identical across frameworks.

// React — no wrapper needed
export function Hero() {
  return (
    <aurora-text stagger="0.06">
      <h1>Motion, built in.</h1>
    </aurora-text>
  )
}

06 · Theming

One accent, everywhere.

Set your tokens

CSS custom properties cross the shadow boundary. Sensible fallbacks mean you only override what you need. 

:root {
  --aurora-accent: #6d5cff;
  --aurora-accent-hover: #5a49e0;
  --aurora-surface: #16161f;
  --aurora-fg: #ececf2;
  --aurora-border: rgba(255, 255, 255, 0.14);
}

Common variables

A few of the tokens the components read.

Variable Purpose
--aurora-accent Primary accent
--aurora-surface Modal / panel background
--aurora-border Dividers & outlines
--aurora-muted Secondary text