🚀 Integrazione rapida, controllo completo

Un componente LED riutilizzabile, senza complicazioni

Usa Linea LED Menu come base per una navigazione distintiva: scegli colori, velocità, icone e comportamento dei nodi senza ricostruire l'interfaccia da zero.

PASSO 1

Importa il componente

Aggiungi il componente dalla cartella components/ del progetto e passa gli elementi di navigazione che vuoi visualizzare:

PASSO 2

Adattalo al tuo brand

Personalizza tinta neon HSL (accent), colore flash (flash), durata sweep (sweepDuration) e callback di click.

⚛️ App.jsx (Esempio Completo React)

import React from 'react';
import { LedLineMenu } from './components';

export default function App() {
  const menuItems = [
    { label: 'HOME', href: '/', active: true },
    { label: 'FEATURES', href: '/features' },
    { label: 'SOLUTIONS', href: '/solutions' },
    { label: 'ABOUT', href: '/about' },
    { label: 'CONTACT', href: '/contact' }
  ];

  return (
    <LedLineMenu
      items={menuItems}
      accent="hsl(197 100% 70%)"
      flash="#0055ff"
      sweepDuration="6.1s"
      glowIntensity={1}
      onNodeClick={(item) => console.log(item)}
    />
  );
}

⚡

Animazioni CSS leggere

La linea, il flare e gli stati dei nodi usano CSS e trasformazioni pensate per mantenere l'interazione fluida.

🎨

SVG scalabili

Le icone vettoriali restano nitide su schermi ad alta densità e si adattano ai diversi set di contenuto.

📱

Responsive per touch

Spaziature, etichette e nodi sono progettati per restare leggibili e raggiungibili anche su viewport ridotte.