luminomorphism

# 🌟 Luminomorphism [![npm version](https://img.shields.io/npm/v/luminomorphism.svg)](https://www.npmjs.com/package/luminomorphism) [![License](https://img.shields.io/npm/l/luminomorphism.svg)](https://github.com/victortutu-hub/luminomorphism/blob/main/LICENSE) [![Downloads](https://img.shields.io/npm/dw/luminomorphism.svg)](https://www.npmjs.com/package/luminomorphism) [![GitHub stars](https://img.shields.io/github/stars/victortutu-hub/luminomorphism?style=social)](https://github.com/victortutu-hub/luminomorphism/stargazers) [![Bundle size](https://img.shields.io/bundlephobia/minzip/luminomorphism)](https://bundlephobia.com/result?p=luminomorphism) ![alt text](luminomorphism.png) **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](https://victortutu-hub.github.io/luminomorphism/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](https://victortutu-hub.github.io/luminomorphism/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](https://victortutu-hub.github.io/luminomorphism/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](https://victortutu-hub.github.io/luminomorphism/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](https://victortutu-hub.github.io/luminomorphism/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](https://victortutu-hub.github.io/luminomorphism/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](https://victortutu-hub.github.io/luminomorphism/labs/l-magnetic-cluster-v2.html) ### `<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](https://victortutu-hub.github.io/luminomorphism/labs/l-particle-net-v3.html) ### `<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](https://victortutu-hub.github.io/luminomorphism/labs/l-neural-growth.html) --- ### 🧬 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](https://victortutu-hub.github.io/luminomorphism/labs/l-orbital.html) | | `<l-orbital-quantum>` | Quantum orbital behavior with entropy | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-orbital-quantum.html) | | `<l-orbital-nav>` | Navigation with orbital buttons | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-orbital-nav.html) | | `<l-particle-net>` | Interactive particle field with dynamic linking | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-particle-net.html) | | `<l-particle-net-v3>` | Adaptive particle system with learning and glow memory | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-particle-net-v3.html) | | `<l-neural-growth>` | Organic neural branches with animated synapses | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-neural-growth.html) | | `<l-glow-trail>` | Cursor-following glow trail | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-glow-trail.html) | | `<l-prism-layer>` | Shimmering prismatic layer | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-prism-layer.html) | | `<l-ripple-hover>` | Ripple effect on hover | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-ripple-hover.html) | | `<l-echo-press>` | Expanding echo at click point | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-echo-press.html) | | `<l-magnetic-cluster>` | Particles with magnetic, boid, and physics logic | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-magnetic-cluster.html) | | `<l-quantum-toggle>` | Quantum superposition toggle with particles & wave collapse | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-quantum-toggle.html) | | `<l-morphic-slider>` | Magnetic slider with glow trail & deforming track | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-morphic-slider.html) | | `<l-aurora-modal>` | Aurora-style modal with fluid canvas & particle drift | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-aurora-modal.html) | ### 🧠 Input-Responsive Enhancers | Component | Description | Demo | | ----------------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------- | | `<l-glint-focus>` | Scanning glint animation on focus | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-glint-focus.html) | | `<l-focus-flare>` | Radial light flare on input focus | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-focus-flare.html) | | `<l-focus-ring-magnet>` | Cursor ring that attracts to interactive elements | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-focus-ring-magnet.html) | ### ❄️ Structural & Background Effects | Component | Description | Demo | | ------------------- | ------------------------------------ | --------------------------------------------------------------------------------- | | `<l-depth-frame>` | Simulated depth via layered shadows | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-depth-frame.html) | | `<l-flare-sheen>` | Light sheen passing across element | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-flare-sheen.html) | | `<l-generative-bg>` | Procedural animated background | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-generative-bg.html) | | `<l-hologram>` | Flickering holographic overlay | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-hologram.html) | | `<l-light-ray>` | Animated rays of light | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-light-ray.html) | | `<l-mosaic-grid>` | Grid with shifting luminous patterns | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-mosaic-grid.html) | | `<l-pulse-bubble>` | Glowing pulsing orb | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-pulse-bubble.html) | ### 🖼️ Layout Experiments | Page | Description | Demo | | ------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------ | | `l-gallery.html` | Classic luminomorphic gallery | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-gallery.html) | | `l-gallery-molecule.html` | Molecular-style interactive gallery | [Demo](https://victortutu-hub.github.io/luminomorphism/labs/l-gallery-molecule.html) | --- ## 🔐 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 ```html <script src="dist/l-particle-net.js"></script> <l-particle-net nodes="32" color="#00ffff" speed="0.5"></l-particle-net> ``` --- ## 📦 Installation ```bash 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](MANIFEST.md) --- ## 👨‍💻 Author Created by [Victor Mihai (victortutu-hub)](https://github.com/victortutu-hub) Original concept. Handwritten. MIT Licensed. --- ## 🌐 Translations 🇷🇴 [Romanian Version / Versiunea română](./README.RO.md)