Migliori hero blocks 2026: 51 sezioni verificate

La hero è la prima schermata e quasi sempre l’elemento che il browser misura come LCP: conviene trattarla come una decisione di performance. Il catalogo contiene 51 sezioni hero da 6 registry, misurate il 1 novembre 2026, e la tabella le ordina per file perché il peso è la prima cosa che paghi.

Quello che si rompe è il primo secondo. Un’immagine da 2400px servita a un telefono da 390px costa banda e ritarda il disegno; un titolo bianco sopra una foto chiara perde il contrasto appena la foto cambia; un’animazione d’ingresso che parte dopo l’idratazione sposta l’elemento più grande e peggiora il punteggio invece di migliorarlo. Nessuno di questi difetti si vede nell’anteprima del catalogo, che gira su una macchina veloce con la cache calda.

Perché la hero decide l’LCP

L’LCP misura quando il contenuto più grande sopra la piega è visibile: in una landing è quasi sempre l’immagine della hero o il titolo. Se l’immagine viene scoperta tardi, perché è un background CSS, perché è dentro un componente caricato in modo dinamico, perché non ha preload, il browser la scarica dopo il resto. Un blocco hero che usa un div con background-image ti obbliga a un lavoro extra per tornare a un elemento immagine con dimensioni dichiarate.

84 file e 67 dipendenze per 51 sezioni

La categoria somma 84 file, cioè 1,6 per blocco, con 12 sezioni multi-file; le dipendenze npm dichiarate sono 67 e le registry dependency 89. Sono numeri alti per una sola schermata: una hero con varianti animate porta con sé una libreria di movimento e i suoi componenti, e quel costo lo paghi su ogni visita, non solo sulla home. Un blocco a un file con un’immagine e due testi non ha bisogno di niente di tutto questo.

• Numero di file: le varianti animate vivono in file separati e vanno importate anche quando non le usi.
• Dipendenze npm: 67 in totale, quindi leggi quali pacchetti entrano prima di installare.
• Registry dependency: 89 componenti shadcn, spesso già presenti ma in versioni modificate.
• Nome: due righe si chiamano Hero 03 e vengono da publisher diversi, quindi il nome non basta a identificare il blocco.

La tabella, ordinata per file

Le prime righe sono quelle che contengono più parti da adattare, non quelle che convertono meglio. La colonna Registry spiega perché: Shadcn Space pubblica hero con nomi commerciali e tre file, akash3444 pubblica sezioni più asciutte, flx pubblica varianti dello stesso schema. Chi ha fretta legge il nome, chi deve mantenere il codice legge il publisher.

Il budget da fissare prima di scegliere

Prima di aprire una preview, scrivi tre numeri: peso massimo dell’immagine hero, tempo massimo dell’animazione d’ingresso, contrasto minimo del testo sopra il media. Se il blocco non li rispetta senza modifiche, il tempo che risparmi copiandolo lo perdi a togliere quello che hai copiato. Un test onesto è caricare la pagina su Slow 3G e guardare se il titolo compare prima dell’immagine.

• Preload solo sull’immagine LCP, non su tutte le immagini della pagina.
• Video con poster statico: se il poster non funziona da solo, il video è peso senza informazione.
• Testo su gradiente o foto con contrasto verificato nel punto più chiaro, non in media.
• Animazione sotto i 300ms con rispetto di prefers-reduced-motion.

curl "https://ui.eneawork.it/api/blocks/category/hero?limit=10"

Il limite: la categoria nasce dal nome

Un blocco entra in questa lista se il manifest dichiara hero oppure se la parola hero compare nel titolo. Una landing chiamata “Agency Page” con una hero dentro non viene contata, quindi il catalogo sottostima la categoria invece di gonfiarla. Il rovescio è che molti blocchi si chiamano hero-01, hero-02, hero-03 senza dire cosa contengono: il numero non è un’informazione, la preview sì.

Regola di decisione

Se la hero è il tuo LCP, prendi il blocco più semplice che dice cosa vendi e sostituisci lo sfondo con un img a dimensioni dichiarate e priorità alta. Se la hero deve mostrare il prodotto, scegli uno split e usa uno screenshot reale, non un mockup generico. L’alternativa è scriverla a mano: un titolo, un paragrafo, una CTA e un’immagine sono quattro elementi, e nessun blocco batte quel peso. Il blocco conviene quando porta varianti responsive e stati che non vuoi riscrivere, non quando porta solo decorazione.

Le hero stanno su /blocks/category/hero, l’inventario su /blocks, e la Hero 01 di Shadcn Space ha la scheda qui. Per capire cosa alza l’LCP leggi lcp cosa lo peggiora, per le immagini immagini responsive con srcset, e per il confronto tra registry 21st.dev contro shadcnblocks.