luminomorphism
Version:
A UI design system built around light, blur, ambient motion and perceptual feedback.
174 lines (121 loc) • 10.2 kB
Markdown
# 🌟 Luminomorphism — Documentație în limba română
[](https://www.npmjs.com/package/luminomorphism)
[](https://github.com/victortutu-hub/luminomorphism/blob/main/LICENSE)
[](https://www.npmjs.com/package/luminomorphism)
[](https://github.com/victortutu-hub/luminomorphism/stargazers)
[](https://bundlephobia.com/result?p=luminomorphism)
**Luminomorphism** este o bibliotecă UI care transformă elementele de interfață în entități vizuale interactive, strălucitoare și reactive. Inspirată de lumină, memorie și mișcare, introduce o nouă categorie de componente web: **interfețe vii**.
> ✨ Nu este o temă sau un framework — este cogniție vizuală reactivă.
---
## 🚀 De ce Luminomorphism?
* ✅ Web Components 100% originale
* 🔥 Lumina este comportament, nu decor
* 🎯 Ideal pentru UI expresive, creative și futuriste
* ⚙️ Fără dependențe — doar JavaScript și CSS pur
* 📱 Optimizat pentru mobil și performanță
---
## 🧩 Componente Publicate
## 🧠 Componente noi în v1.1.16
### `<l-quantum-toggle>`
Toggle luminomorfic cu **superpoziție cuantică**, particule și efect de colaps al funcției de undă.
Atribute: `checked`, `disabled`, `size`, `color-on`, `color-off`, `quantum-mode`, `transition-speed`, `particle-count`, `superposition-enabled`, `label`, `glow-intensity`.
Emite: `change` cu `{ checked: boolean }`.
**Demo:** [labs/l-quantum-toggle.html](https://victortutu-hub.github.io/luminomorphism/labs/l-quantum-toggle.html)
**Fișier:** `dist/l-quantum-toggle.min.js`.
### `<l-morphic-slider>`
Slider cu **deformare a trasei**, **urmă luminoasă**, control din tastatură și focus ARIA-friendly.
Atribute: `value`, `min`, `max`, `step`, `disabled`, `color`, `track-deform`, `trail-enabled`, `magnetic-strength`, `glow-intensity`, `orientation`, `label`.
Emite: `slide-start`, `change`, `slide-end`.
**Demo:** [labs/l-morphic-slider.html](https://victortutu-hub.github.io/luminomorphism/labs/l-morphic-slider.html)
**Fișier:** `dist/l-morphic-slider.min.js`.
### `<l-aurora-modal>`
Modal cu **efect de auroră boreală**, valuri fluide pe canvas și particule; include blur pe backdrop și animații de intrare.
Atribute: `open`, `size`, `aurora-intensity`, `aurora-speed`, `color-palette`, `backdrop-blur`, `close-on-backdrop`, `particle-count`, `animation-type`, `glow-intensity`.
Emite: `modal-open`, `modal-close`.
**Demo:** [labs/l-aurora-modal.html](https://victortutu-hub.github.io/luminomorphism/labs/l-aurora-modal.html)
**Fișier:** `dist/l-aurora-modal.min.js`.
## 🧠 Componente noi în v1.1.15
### `<l-luminous-field>`
Simulări de câmp luminos (electromagnetic, gravitațional, cuantic) cu particule, rezonanță opțională și memorie temporală.
**Demo:** [labs/l-luminous-field.html](https://victortutu-hub.github.io/luminomorphism/labs/l-luminous-field.html)
### `<l-morphic-card>`
Card 3D cu atracție magnetică, glow adaptiv, flip față/spate și efecte de click ripple. Emite evenimente: `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>`
Indicator de progres tip rețea neurală, cu noduri stratificate, conexiuni animate și impulsuri care „călătoresc”; suportă stări (`loading|success|error|idle`).
**Demo:** [labs/l-neural-progress.html](https://victortutu-hub.github.io/luminomorphism/labs/l-neural-progress.html)
### 🎯 Interactive Fundamentale
| 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) |
### 🧠 Componente pentru Focus & Input
| Componentă | Descriere | Demo |
| ----------------------- | ---------------------------------------------------------------------------- | ------------------------------------------ |
| `<l-glint-focus>` | Reflexie în mișcare la focus | [Demo](docs/labs/l-glint-focus.html) |
| `<l-focus-flare>` | Flare radial la focus pe input | [Demo](docs/labs/l-focus-flare.html) |
| `<l-focus-ring-magnet>` | Inel magnetic care urmărește cursorul și se atașează la elemente interactive | [Demo](docs/labs/l-focus-ring-magnet.html) |
### 🧊 Efecte Structurale și de Fundal
| Componentă | Descriere | Demo |
| ------------------- | ----------------------------------------- | -------------------------------------- |
| `<l-depth-frame>` | Profunzime simulată cu umbre stratificate | [Demo](docs/labs/l-depth-frame.html) |
| `<l-flare-sheen>` | Reflexie luminoasă în mișcare | [Demo](docs/labs/l-flare-sheen.html) |
| `<l-generative-bg>` | Fundal procedural animat | [Demo](docs/labs/l-generative-bg.html) |
| `<l-hologram>` | Suprapunere holografică cu flicker | [Demo](docs/labs/l-hologram.html) |
| `<l-light-ray>` | Razele de lumină animate pe suprafață | [Demo](docs/labs/l-light-ray.html) |
| `<l-mosaic-grid>` | Grilă cu modele luminoase dinamice | [Demo](docs/labs/l-mosaic-grid.html) |
| `<l-pulse-bubble>` | Bulă pulsatorie cu strălucire | [Demo](docs/labs/l-pulse-bubble.html) |
### 🖼️ Experimente Vizuale
| Pagină | Descriere | Demo |
| ------------------------- | -------------------------------- | ----------------------------------------- |
| `l-gallery.html` | Galerie luminomorfică clasică | [Demo](docs/labs/l-gallery.html) |
| `l-gallery-molecule.html` | Galerie interactivă tip moleculă | [Demo](docs/labs/l-gallery-molecule.html) |
---
## 🔐 Componente Protejate
Unele componente precum `<l-magnetic-cluster>` sau `l-particle-net-v3` sunt publicate doar în versiuni minificate/obfuscate.
> 🔒 Codul este complet funcțional, dar sursa nu este publică. Detalii în `LICENSE.COMPONENTS.md`.
---
## 🧪 Exemplu de Utilizare
```html
<script src="dist/l-particle-net.js"></script>
<l-particle-net nodes="32" color="#00ffff" speed="0.5"></l-particle-net>
```
---
## 📦 Instalare
```bash
npm install luminomorphism
```
---
## 📁 Structură Proiect
```
luminomorphism/
├── dist/ → Componente minificate pentru producție
├── docs/labs/ → Demo-uri publice pentru GitHub Pages
├── README.md → Documentație în engleză
├── README.RO.md → Această documentație
├── MANIFEST.md → Manifestul Luminomorphism (EN + RO)
```
---
## 💡 Filosofie
> Lumina este percepție. Interacțiunea este memorie. Animația este prezență.
> Luminomorphism nu e decor — e cogniție vizuală.
Citește manifestul complet: [MANIFEST.md](MANIFEST.md)
---
## 👨💻 Autor
Creat de [Victor Mihai (victortutu-hub)](https://github.com/victortutu-hub)
Concept original. Scris manual. Licențiat MIT.
---
## 🌐 Alte limbi
🇬🇧 [Versiunea în engleză / English version](./README.md)