🌟 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

🧠 New Components in v1.1.16

<l-quantum-toggle>

A luminomorphic toggle with quantum superposition visuals, particles and wave-collapse transition.
Attributes: checked, disabled, size, color-on, color-off, quantum-mode, transition-speed, particle-count, superposition-enabled, label, glow-intensity.
Emits: change with { checked: boolean }.
Demo: labs/l-quantum-toggle.html
File: dist/l-quantum-toggle.min.js (no deps).

<l-morphic-slider>

A magnetic, glow-traced slider with track deformation, trail particles, keyboard control and ARIA-friendly focus states.
Attributes: value, min, max, step, disabled, color, track-deform, trail-enabled, magnetic-strength, glow-intensity, orientation, label.
Emits: slide-start, change, slide-end.
Demo: labs/l-morphic-slider.html
File: dist/l-morphic-slider.min.js.

<l-aurora-modal>

A fullscreen-capable modal with aurora borealis layers, fluid canvas waves and particle drift; backdrop blur and entrance animations included.
Attributes: open, size, aurora-intensity, aurora-speed, color-palette, backdrop-blur, close-on-backdrop, particle-count, animation-type, glow-intensity.
Emits: modal-open, modal-close.
Demo: labs/l-aurora-modal.html
File: dist/l-aurora-modal.min.js.

🧠 New Components in v1.1.15

<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.

🧠 Input-Responsive Enhancers

❄️ Structural & Background Effects

🖼️ Layout Experiments

🔐 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.md for 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.

🌐 Translations

🇷🇴 Romanian Version / Versiunea română