🌟 Luminomorphism

Luminomorphism is a next-generation UI design system that elevates interface elements into living, light-reactive components.
It blends principles of fluid design, sensory feedback, and futuristic motion to transform digital surfaces into luminous experiences.

✨ It's not a visual style — it's a reactive presence.

🚀 What Makes It Unique?

• ✅ 100% original Web Components — built from scratch
• 💡 Inspired by light behavior: dispersion, glow, ripple, reflection
• 🎯 Designed for creative interfaces, UI art, and immersive products
• ⚙️ No frameworks, no dependencies — pure JavaScript + CSS
• 📱 Fully responsive and mobile-ready

🧩 Available Components

🎯 Interactive UI Effects

🧠 Input-Aware Enhancers

🧊 Structural + Background Effects

🖼️ Creative Layout Experiments

🌐 Component Spotlight: <l-magnetic-cluster>

A highly interactive, physics-based component that simulates magnetic clusters of luminous spheres with adaptive logic and visual glow response.

🔧 Attributes

🌈 Adaptive Glow Logic

Each logic mode or combination applies a different glow:

🚀 Usage Example

<script src="dist/l-magnetic-cluster.min.js"></script>

<l-magnetic-cluster
  count="12"
  size="40"
  speed="1.5"
  opacity="0.6"
  verlet="true"
  boids="true"
  magnetic="true">
</l-magnetic-cluster>

✅ Responsive, lightweight and fully standalone — no frameworks or dependencies required.

📄 Live Demo

🧠 Philosophy

Luminomorphism is an interface response, not a decoration.
It’s about how light would behave if it could respond to humans.

⚙️ Getting Started

Use directly in HTML:

<script src="dist/l-orbital.js"></script>

<l-orbital count="12" color="#00ffff" radius="40"></l-orbital>

📦 Installation (soon)

npm install luminomorphism

📁 Folder Overview

luminomorphism/
├── dist/        → All Web Components
├── docs/labs/   → GitHub Pages Demo Files
├── README.md    → English Documentation
├── README.RO.md → Romanian Documentation

👨‍💻 Author

Created by Victor Mihai (victortutu-hub)
Original concept. 100% handcrafted. MIT Licensed.

📄 License

MIT — Open, free, and modifiable.

🌐 Translations

🇷🇴 View in Romanian / Vezi versiunea română

<l-orbital-quantum> – Quantum Orbital Simulation with Entropy + Optical Entanglement

A groundbreaking luminomorphic component that combines visual orbital animation with quantum-inspired behavior. Orbits rotate, pulse, disappear, and reappear at randomized positions influenced by configurable entropy levels.

✨ Key features:

• Continuous rotation with independently pulsing orbs
• Quantum jumps: orbs vanish and reappear at unpredictable angles
• Optical entanglement: another orb reacts with a glow in sync
• Controlled randomness with quantum-entropy
• Fully declarative and framework-free

🔧 Attributes:

🔍 Use Cases:

• Dynamic visual attractors for creative UIs
• Background animation in tech-themed products
• Artistic metaphors for intelligence or unpredictability
• Non-interactive yet expressive visual rhythms

Live Demo

✨ <l-focus-ring-magnet> – Magnetic Focus Ring

A luminomorphic component that displays a glowing magnetic ring which follows the cursor and attaches to nearby interactive elements (button, input, textarea, etc.).
It can pulse when elements are focused and responds to the following attributes:

🧪 You can control it live using native inputs:

<l-focus-ring-magnet id="focusRing" radius="40" color="#00ffff" magnet-range="100" pulse-on-focus></l-focus-ring-magnet>

<input type="color" id="colorPicker" />
<input type="range" id="radiusRange" min="10" max="100" />
<input type="range" id="magnetRange" min="0" max="200" />
<input type="checkbox" id="pulseToggle" checked />

<script>
  const ring = document.getElementById('focusRing');
  document.getElementById('colorPicker').oninput = e => ring.setAttribute('color', e.target.value);
  document.getElementById('radiusRange').oninput = e => ring.setAttribute('radius', e.target.value);
  document.getElementById('magnetRange').oninput = e => ring.setAttribute('magnet-range', e.target.value);
  document.getElementById('pulseToggle').onchange = e =>
    e.target.checked ? ring.setAttribute('pulse-on-focus', '') : ring.removeAttribute('pulse-on-focus');
</script>