Hover editoriale tipografico Registration Flip

Prova l’esperimento

960 × 640

Dentro l’esperimento

Cos’è Registration Flip?

Una parola d’archivio trasforma il fuori registro tipografico in un gesto hover: le lettere ruotano una dopo l’altra e mostrano un secondo livello color lampone, mantenendo una presenza editoriale netta e controllata.

Come funziona

Ogni lettera contiene due livelli sovrapposti con lo stesso carattere e il retro nascosto. Hover, focus da tastiera o attivazione touch ruotano i glifi sull’asse orizzontale con un breve ritardo progressivo, rivelando il livello lampone dietro all’inchiostro originale.

Dove usarlo

Archivi di moda e cultura con un segnale di navigazione testuale distintivo
Indici di portfolio in cui una parola deve reagire senza trasformarsi in una card
Interfacce per campagne editoriali che usano la tipografia come materia visiva principale

Accessibilità

L’interazione usa un pulsante nativo con etichetta accessibile, focus da tastiera visibile, stato aria-pressed e messaggio live per la conferma locale. I livelli tipografici visibili sono nascosti alle tecnologie assistive per evitare letture duplicate. Con la riduzione del movimento cambia lo stato, ma non parte la transizione.

Prestazioni

L’effetto utilizza sette piccole animazioni transform e nessuna risorsa esterna, filtro, misurazione del layout o richiesta di rete. L’hover è gestito interamente dal CSS; JavaScript serve solo a fissare lo stato su touch e ad aggiornare il messaggio.

Il codice

Esplora e copia il codice originale. Nell’anteprima le etichette vengono tradotte, mentre nel sorgente restano quelle originali (di solito inglesi). Per i testi dinamici usa AuroraLabI18n.t(chiave, testoPredefinito).

<main class="scene">
  <button class="registration-word" type="button" aria-pressed="false" aria-describedby="interaction-status">
    <span class="sr-only" data-ali-i18n="copy_1">Open archive</span>
    <span class="wordmark" aria-hidden="true">
      <span class="glyph" style="--i:0"><span>A</span><span>A</span></span>
      <span class="glyph" style="--i:1"><span>R</span><span>R</span></span>
      <span class="glyph" style="--i:2"><span>C</span><span>C</span></span>
      <span class="glyph" style="--i:3"><span>H</span><span>H</span></span>
      <span class="glyph" style="--i:4"><span>I</span><span>I</span></span>
      <span class="glyph" style="--i:5"><span>V</span><span>V</span></span>
      <span class="glyph" style="--i:6"><span>E</span><span>E</span></span>
    </span>
  </button>
  <span class="interaction-status" id="interaction-status" aria-live="polite" hidden></span>
</main>

:root{
  --stage:#F1EDE6;
  --ink:#16131A;
  --muted:#5E5765;
  --raspberry:#DF284D;
  --violet:#62447D;
  --gold:#F5BA09;
}
*{box-sizing:border-box}
html,body{margin:0;min-width:100%;min-height:100%;background:var(--stage)}
body{min-height:100vh;overflow:hidden;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.scene{
  min-height:100vh;
  width:100%;
  display:grid;
  place-items:center;
  padding:clamp(28px,8vw,90px);
  background:var(--stage);
}
.registration-word{
  position:relative;
  display:inline-flex;
  max-width:100%;
  padding:0;
  border:0;
  color:var(--ink);
  background:transparent;
  cursor:pointer;
  perspective:900px;
  outline:none;
}
.wordmark{
  display:flex;
  align-items:baseline;
  font:400 clamp(3.2rem,11.5vw,9.5rem)/.82 Georgia,"Times New Roman",serif;
  letter-spacing:-.085em;
}
.glyph{
  position:relative;
  display:inline-block;
  width:.63em;
  height:1em;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.76,0,.18,1);
  transition-delay:calc(var(--i) * 38ms);
}
.glyph span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  backface-visibility:hidden;
}
.glyph span:last-child{
  color:var(--raspberry);
  transform:rotateX(180deg);
}
.registration-word:hover .glyph,
.registration-word:focus-visible .glyph,
.registration-word[aria-pressed="true"] .glyph{
  transform:rotateX(180deg);
}
.registration-word:focus-visible{
  outline:1px solid var(--violet);
  outline-offset:clamp(10px,2vw,18px);
}
.interaction-status{
  position:absolute;
  top:calc(50% + clamp(4.5rem,13vw,8.5rem));
  color:var(--muted);
  font:500 .66rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@media (max-width:480px){
  .scene{place-items:center start;padding-inline:9vw}
  .wordmark{font-size:clamp(2.9rem,16vw,5.2rem);letter-spacing:-.09em}
  .interaction-status{top:calc(50% + 5.3rem);font-size:.58rem}
}
@media (prefers-reduced-motion:reduce){
  .glyph{transition:none}
}

var target = document.querySelector('.registration-word');
var status = document.querySelector('.interaction-status');

function copy(key, fallback) {
  return window.AuroraLabI18n && typeof window.AuroraLabI18n.t === 'function'
    ? window.AuroraLabI18n.t(key, fallback)
    : fallback;
}

if (target) {
  target.addEventListener('click', function () {
    var active = target.getAttribute('aria-pressed') === 'true';
    target.setAttribute('aria-pressed', String(!active));
    if (status) {
      status.hidden = false;
      status.textContent = active
        ? copy('copy_3', 'Archive unselected')
        : copy('copy_2', 'Archive selected');
    }
  });
}