UNPKG

luminomorphism

Version:

A UI design system built around light, blur, ambient motion and perceptual feedback.

174 lines (121 loc) 10.2 kB
# 🌟 Luminomorphism — Documentație în limba română [![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) **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)