Enterprise UI that moves like it means it — 126 animated components, from data grids to gauges, shipped as native Web Components.
🌐 Live demo & docs → auroralib.com
Everything above is aurora — the draggable tiles, the chart, the gauges, the badges, and the frozen-column grid. It's live on the landing page.
aurora ships as native Web Components (custom elements), so it works in any stack — React,
Vue, Svelte, or plain HTML — with no wrapper and no config. Styles are encapsulated in Shadow DOM and
themed with CSS variables; motion is powered by GSAP, and the 3D components use Three.js.
Highlights beyond the usual suspects:
- Enterprise data: a full grid (multi-sort, operator filters, grouping, frozen columns, virtualization, edit validation, CSV + Excel export via an in-house OOXML writer), TreeList, PivotGrid, ListView, Scheduler with four views, and a drag-editable Gantt
- 25+ form editors, all form-associated via ElementInternals and tied together by
<aurora-form>'s validation harness - In-house encoders: QR codes (Reed-Solomon, spec mask scoring) and Code 128 barcodes, both verified bit-for-bit against reference implementations
- Composition all the way down: the wizard composes the stepper, the date-time picker composes the calendar, the org chart composes avatars, the dropdown-tree composes the treeview
npm install @lasitospt/auroraimport '@lasitospt/aurora' // registers the core components
import '@lasitospt/aurora/three' // registers the Three.js components (3D deps load only here)Then use the elements anywhere:
<aurora-text><h1>Motion, built in.</h1></aurora-text>
<aurora-magnetic strength="0.5">
<aurora-button>Hover me</aurora-button>
</aurora-magnetic>
<aurora-tilt max="14">
<div class="card">Tilt me toward your cursor.</div>
</aurora-tilt>
<aurora-marquee speed="80">GSAP · Three.js · Web Components · </aurora-marquee>
<aurora-scene color="#6d5cff" speed="1.2"></aurora-scene>Because they're standard custom elements, you write them the same way in JSX, Vue templates, or HTML.
Every component has a documentation and tutorial page.
| Component | What it does |
|---|---|
<aurora-barcode> ↗ |
Code 128 barcodes from an in-house, spec-verified encoder |
<aurora-chart> ↗ |
Grouped bars, multi-series lines, and donuts on a DPR-aware canvas |
<aurora-chat> ↗ |
A conversation view with sided bubbles, avatar initials, a typing indicator, and a composer |
<aurora-gantt> ↗ |
Project timelines |
<aurora-gauge> ↗ |
Arc, circular, and linear gauges in one SVG element |
<aurora-grid> ↗ |
A virtualized enterprise data grid: multi-column sorting, filtering, global search, paging, … |
<aurora-listview> ↗ |
A templated, data-bound list |
<aurora-orgchart> ↗ |
Reporting lines from nested data |
<aurora-pivotgrid> ↗ |
Cross flat records into a matrix |
<aurora-qrcode> ↗ |
A dependency-free QR generator |
<aurora-scheduler> ↗ |
A week-view scheduler: day columns over hour rows, time-positioned events with accent colors… |
<aurora-sparkline> ↗ |
A tiny inline chart that draws itself into view |
<aurora-tilelayout> ↗ |
A dashboard grid |
<aurora-treelist> ↗ |
A hierarchical data grid |
| Component | What it does |
|---|---|
<aurora-autocomplete> ↗ |
A type-to-filter suggestion input: matches highlight as you type, arrows and Enter select, E… |
<aurora-calendar> ↗ |
A month-view calendar with a Monday-first grid, an outlined today, ISO value, and a complete… |
<aurora-checkbox> ↗ |
A form-associated checkbox whose check draws itself on |
<aurora-colorpalette> ↗ |
A fixed swatch grid for brand-constrained picking |
<aurora-colorpicker> ↗ |
A full HSV picker built from CSS gradients |
<aurora-dateinput> ↗ |
Type a date without a popup |
<aurora-datepicker> ↗ |
A date input that opens the aurora-calendar in a popup |
<aurora-daterange> ↗ |
Pick a span in one grid: first click starts it, second ends it (reversed picks swap themselv… |
<aurora-datetimepicker> ↗ |
Calendar and clock in one popup |
<aurora-dropdowntree> ↗ |
A select whose popup is a full treeview |
<aurora-durationpicker> ↗ |
Type a duration as hh:mm:ss |
<aurora-editor> ↗ |
A contenteditable editor with a stateful toolbar |
<aurora-form> ↗ |
A validation harness for every aurora editor |
<aurora-input> ↗ |
A text field with an animated focus underline; form-associated and event-transparent |
<aurora-listbox> ↗ |
The classic dual-list pattern |
<aurora-masked> ↗ |
A pattern-masked input: define the shape once (# digit, A letter, * alphanumeric), literals … |
<aurora-multicolumncombobox> ↗ |
A combobox that drops a table |
<aurora-multiselect> ↗ |
A pick-many dropdown: selections become removable chips, the popup is a checkbox list, and t… |
<aurora-numeric> ↗ |
A numeric spinner with honest math: typed values are clamped to min/max and snapped to the s… |
<aurora-otp> ↗ |
A segmented code input that behaves the way users expect: typing advances, Backspace retreat… |
<aurora-radiogroup> ↗ |
A WAI-ARIA radio group |
<aurora-rating> ↗ |
A star rating that pops as you pick. Any glyph, any scale, keyboard-rateable, and it submits… |
<aurora-select> ↗ |
An animated dropdown list. Options come from child elements or the options property… |
<aurora-signature> ↗ |
A signature pad that draws smoothed SVG strokes and submits them with your form as a data URL |
<aurora-slider> ↗ |
A draggable, keyboard-accessible range slider with role="slider" and honest min/max/step math |
<aurora-switch> ↗ |
An animated toggle with role="switch" |
<aurora-textarea> ↗ |
A textarea that grows with its content and counts characters live against maxlength |
<aurora-timepicker> ↗ |
An HH:MM input with scrollable hour and minute columns; the minute increment is yours to set… |
<aurora-upload> ↗ |
A drag-and-drop file zone with keyboard browsing, animated per-file rows, size limits with e… |
<aurora-rangeslider> ↗ |
Two thumbs, one range |
<aurora-combobox> ↗ |
Between a select and an autocomplete: filter the list as you type, or let users commit value… |
| Component | What it does |
|---|---|
<aurora-actionsheet> ↗ |
A bottom sheet of actions |
<aurora-appbar> ↗ |
A sticky frosted-glass header with three slot regions |
<aurora-bottomnav> ↗ |
A frosted bottom bar with one active destination |
<aurora-breadcrumb> ↗ |
A breadcrumb trail with a custom separator; the last item is the current page and hrefless c… |
<aurora-button> ↗ |
The themeable base button |
<aurora-buttongroup> ↗ |
A segmented control: options in, one active segment out, with aria-pressed state and a pop o… |
<aurora-chips> ↗ |
A chip list for filters and tags: single or multiple selection with a pop, optional remove b… |
<aurora-command> ↗ |
A ⌘K command palette: global hotkey, type-to-filter over labels and keywords, arrow/Enter/Es… |
<aurora-contextmenu> ↗ |
Right-click menus for any element |
<aurora-fab> ↗ |
A floating action button |
<aurora-menu> ↗ |
An animated dropdown with arrow-key roving, Escape-with-focus-restore, and outside-click close |
<aurora-splitbutton> ↗ |
A primary action with an attached dropdown of alternatives |
<aurora-stepper> ↗ |
Multi-step progress with accent-filled connectors, checkmarked completed steps, and a pop on… |
<aurora-tabs> ↗ |
Tabbed panels with an animated active indicator and the WAI-ARIA tabs keyboard pattern (arro… |
<aurora-toolbar> ↗ |
A responsive toolbar |
<aurora-treeview> ↗ |
Hierarchical navigation from a nested items array |
<aurora-wizard> ↗ |
Multi-step flows with a built-in stepper, animated direction-aware transitions, and a cancel… |
| Component | What it does |
|---|---|
<aurora-accordion> ↗ |
A collapsible panel with animated height and correct aria-expanded state |
<aurora-avatar> ↗ |
Image avatars that never break: no src (or a failed load) falls back to initials on a gradie… |
<aurora-badge> ↗ |
Notification badges that pop when the count changes |
<aurora-confetti> ↗ |
A celebration cannon on a full-viewport canvas |
<aurora-drawer> ↗ |
A side panel sliding from either edge with the modal’s focus discipline: Tab trap, Escape, f… |
<aurora-loader> ↗ |
Indeterminate spinners in three flavors |
<aurora-modal> ↗ |
An animated dialog with real focus discipline: focus moves in on open, Tab is trapped at sha… |
<aurora-popover> ↗ |
An anchored floating panel for rich contextual content |
<aurora-progressbar> ↗ |
A determinate bar that tweens to every value change with a live percentage |
<aurora-skeleton> ↗ |
Shimmering loading placeholders |
<aurora-splitter> ↗ |
Two resizable panes and a draggable divider |
<aurora-toaster> ↗ |
A glassmorphic toast stack with variant icon badges, an optional title, and a progress hairl… |
<aurora-tooltip> ↗ |
A one-line hover/focus tooltip with four placements |
<aurora-videoplayer> ↗ |
Custom chrome over native video |
<aurora-window> ↗ |
A floating window you can drag by its title bar |
| Component | What it does |
|---|---|
<aurora-glitch> ↗ |
An RGB-split, slice-clipped glitch burst over text |
<aurora-scramble> ↗ |
Text decodes through random glyphs, left to right |
<aurora-shine> ↗ |
A soft highlight sweeps across text on a loop |
<aurora-text> ↗ |
Masked text that rises into view on scroll |
<aurora-typewriter> ↗ |
Types its text behind a blinking accent caret when scrolled into view |
| Component | What it does |
|---|---|
<aurora-carousel> ↗ |
Drag or swipe with GSAP inertia and slide snapping; arrow keys and a programmatic API included |
<aurora-compare> ↗ |
A before/after slider |
<aurora-dock> ↗ |
Children magnify as the cursor approaches |
<aurora-flip> ↗ |
A 3D flip between two faces |
<aurora-magnetic> ↗ |
Wrapped content is pulled toward the cursor as it approaches and springs back on leave |
<aurora-marquee> ↗ |
A seamless infinite scroller |
<aurora-orbit> ↗ |
Children revolve around optional slot="center" content |
<aurora-parallax> ↗ |
Children with data-depth drift toward the pointer at their own depth and settle back on leave |
<aurora-ripple> ↗ |
A soft ripple expands from the pointer on press, clipped to the wrapper’s radius |
<aurora-sortable> ↗ |
Drag-to-reorder for anything |
<aurora-tilt> ↗ |
3D perspective tilt that follows the pointer across the surface and eases back on leave |
| Component | What it does |
|---|---|
<aurora-counter> ↗ |
A number that counts up when seen |
<aurora-cursor> ↗ |
A trailing glow ring that follows the pointer and grows over interactive elements |
<aurora-progress> ↗ |
A fixed gradient hairline at the top of the viewport tracking reading position |
<aurora-reveal> ↗ |
Fades and rises any content the first time it scrolls into view |
<aurora-timeline> ↗ |
A vertical milestone timeline |
| Component | What it does |
|---|---|
<aurora-beam> ↗ |
A luminous beam travelling the border of any card, continuously |
<aurora-lens> ↗ |
An image that liquifies toward the cursor with a chromatic fringe |
<aurora-nebula> ↗ |
The aurora-borealis backdrop from this site’s hero |
<aurora-particles> ↗ |
A drifting GPU particle field with additive glow, a two-tone gradient, and pointer parallax |
<aurora-scene> ↗ |
A rotating wireframe icosahedron backdrop |
<aurora-spotlight> ↗ |
A card whose interior glow and 1px border beam follow the cursor |
<aurora-wave> ↗ |
A wireframe ocean |
Every component reads CSS custom properties (with sensible fallbacks). Set them on :root or on any
ancestor — they pierce the shadow boundary:
:root {
--aurora-accent: #6d5cff;
--aurora-accent-hover: #5a49e0;
--aurora-radius: 0.6rem;
}All components respect prefers-reduced-motion and disable animation when the user asks for it.
A full showcase with live components and copy-paste docs is deployed at auroralib.com.
To run it locally:
cd site
npm install
npm run devOr open the standalone example (after npm run build at the root):
npx serve # then open examples/index.htmlnpm run lint && npm run typecheck && npm run test && npm run buildTests run in happy-dom, so custom-element registration, attributes, and Shadow DOM structure are
verified in CI.
MIT © Pedro Lascasas Pinto