Registration Flip Editorial Hover Type

Live preview

960 × 640

Behind the interaction

What is Registration Flip?

A single archive label borrows from print registration: each letter flips independently to reveal a raspberry reverse, creating a composed fashion-editorial hover gesture without a card, underline, or decorative frame.

How it works

Every letter contains two backface-hidden layers with the same character. Hover, keyboard focus, or the pinned touch state rotates the individual glyphs on the X axis with a short stagger, exposing the raspberry layer behind the original ink.

Where to use it

Fashion and culture archives with a distinctive text-only navigation cue
Portfolio indexes where a wordmark should respond without becoming a card
Editorial campaign interfaces using typography as the primary visual material

Accessibility

The interaction is a native button with an accessible archive label, visible keyboard focus, aria-pressed state, and a live local status message. The visible letter layers are hidden from assistive technology to prevent duplicate reading. Reduced-motion users receive the state change without transition.

Performance

The effect uses seven small transform animations and no external assets, filters, layout measurement, or network requests. Pointer hover is handled entirely by CSS; JavaScript only manages the touch-friendly pinned state and status text.

Source code

Explore and copy the original source. Interactive previews apply localized labels, while source code keeps the original strings (usually English). For translated dynamic labels in a project, use AuroraLabI18n.t(key, fallback).

<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');
    }
  });
}