Package Exports
- luminomorphism
- luminomorphism/dist/luminomorph.min.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (luminomorphism) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
๐ Luminomorphism
Luminomorphism is a UI design library that turns interface elements into interactive, glowing, behavior-rich visual entities. Inspired by light, memory, and motion, it introduces a new category of web components: living interfaces.
โจ It's not a theme or framework. It's reactive visual cognition.
๐ Why Luminomorphism?
- โ 100% original Web Components
- ๐ฆ Light is behavior, not decoration
- ๐จ Ideal for expressive, creative, and futuristic UIs
- โ๏ธ Zero dependencies โ pure JS + CSS
- ๐ฑ Mobile-ready and performance-optimized
๐งฐ Published Components
<l-luminous-field>
Interactive luminous-field simulations (electromagnetic, gravitational, quantum) with particles, optional resonance, and temporal memory.
Demo: labs/l-luminous-field.html
<l-morphic-card>
3D card with magnetic attraction, adaptive glow, front/back flip, and click ripple effects. Emits custom events: card-hover, card-click, card-flip.
Demo: labs/l-morphic-card.html
<l-neural-progress>
Neural networkโstyle progress indicator with layered nodes, animated connections, and traveling pulses; supports states (loading|success|error|idle).
Demo: labs/l-neural-progress.html
๐ง New Component in v1.1.11
<l-magnetic-cluster>
A multi-agent simulation with magnetic fields, quantum behavior, and emotional contagion. Particles respond to the cursor and to each other using behaviors like boids logic, quantum tunneling, breathing rhythm, and memory echoes.
- ๐งฒ Magnetic attraction/repulsion with Verlet integration
- ๐งฌ Quantum state flipping, entanglement, and trace particles
- ๐ฎ Emotional states with collective field dominance and mutation
- ๐ซง Echoes of past positions to simulate temporal memory
Demo: Demo
<l-particle-net-v3>
An advanced particle system that integrates temporal memory, field reactivity, and a learning mechanism. Each node accumulates excitation history and connection density to determine whether it has "learned" โ changing its glow dynamically.
- ๐ง Interaction-based learning and memory
- ๐ Adaptive motion fields with user or autopilot input
- โจ Visual differentiation of learned vs. unlearned particles via dynamic glow
Demo: Demo
<l-neural-growth>
A biologically-inspired component that simulates neural branching and synapse formation in real time. It is the first UI component of its kind to dynamically grow connections, pulsate energy, and display visual memory through glow-enhanced animation.
- ๐งฌ Procedural neuron growth
- ๐ Animated bidirectional synapses with flowing light
- โก Emergent structure and interaction-driven memory
No dependencies. Rendered via 2D canvas with glow-enhanced animation. Optimized for ambient dark interfaces.
Demo: ๐ Demo
๐งฌ About Innovation & Originality
While similar visual techniques (e.g., branching animations, canvas glow, sinusoidal pulse) have appeared in isolated demos or experiments,
<l-neural-growth>represents a novel synthesis: the first known reusable Web Component to procedurally simulate neural growth, animated synapses, and memory-like glow dynamics โ all wrapped into a native, zero-dependency UI element.This originality is not in any single technique, but in the coherent behavioral design: an interactive system where visual structure grows, connects, remembers, and reacts โ forming a living presence on screen.
Whether seen as art, interface design, or simulation,
<l-neural-growth>contributes a distinct category of interface logic: a biologically-inspired, reactive, and memory-infused UI component.
| Component | Description | Demo |
|---|---|---|
<l-orbital> |
Circular glowing orbs | Demo |
<l-orbital-quantum> |
Quantum orbital behavior with entropy | Demo |
<l-orbital-nav> |
Navigation with orbital buttons | Demo |
<l-particle-net> |
Interactive particle field with dynamic linking | Demo |
<l-particle-net-v3> |
Adaptive particle system with learning and glow memory | Demo |
<l-neural-growth> |
Organic neural branches with animated synapses | Demo |
<l-glow-trail> |
Cursor-following glow trail | Demo |
<l-prism-layer> |
Shimmering prismatic layer | Demo |
<l-ripple-hover> |
Ripple effect on hover | Demo |
<l-echo-press> |
Expanding echo at click point | Demo |
<l-magnetic-cluster> |
Particles with magnetic, boid, and physics logic | Demo |
๐ง Input-Responsive Enhancers
| Component | Description | Demo |
|---|---|---|
<l-glint-focus> |
Scanning glint animation on focus | Demo |
<l-focus-flare> |
Radial light flare on input focus | Demo |
<l-focus-ring-magnet> |
Cursor ring that attracts to interactive elements | Demo |
โ๏ธ Structural & Background Effects
| Component | Description | Demo |
|---|---|---|
<l-depth-frame> |
Simulated depth via layered shadows | Demo |
<l-flare-sheen> |
Light sheen passing across element | Demo |
<l-generative-bg> |
Procedural animated background | Demo |
<l-hologram> |
Flickering holographic overlay | Demo |
<l-light-ray> |
Animated rays of light | Demo |
<l-mosaic-grid> |
Grid with shifting luminous patterns | Demo |
<l-pulse-bubble> |
Glowing pulsing orb | Demo |
๐ผ๏ธ Layout Experiments
| Page | Description | Demo |
|---|---|---|
l-gallery.html |
Classic luminomorphic gallery | Demo |
l-gallery-molecule.html |
Molecular-style interactive gallery | Demo |
๐ Protected Components
Some components like <l-magnetic-cluster> and l-particle-net-v3, l-particle-net are distributed only as minified versions to preserve innovation.
๐ These are fully functional and safe to use in projects, but source code is not public. See
LICENSE.COMPONENTS.mdfor more.
๐งช Usage Example
<script src="dist/l-particle-net.js"></script>
<l-particle-net nodes="32" color="#00ffff" speed="0.5"></l-particle-net>๐ฆ Installation
npm install luminomorphism๐ Project Structure
luminomorphism/
โโโ dist/ โ Production-ready components (.min.js)
โโโ docs/labs/ โ Live demos for GitHub Pages
โโโ README.md โ English Documentation
โโโ README.RO.md โ Romanian Documentation
โโโ MANIFEST.md โ Design Manifesto (EN + RO)๐ก Philosophy
Light is perception. Interaction is memory. Animation is presence. Luminomorphism is not decorative โ it's cognitive.
Read the full manifesto: MANIFEST.md
๐จโ๐ป Author
Created by Victor Mihai (victortutu-hub) Original concept. Handwritten. MIT Licensed.