Motion & Interaction

Transitions, transforms, hover effects, menu open animations, cursor, and reduced-motion support.

Item Hover Transitions

No transition (default)

coffee

Smooth (0.4s ease)

coffee

/* Instant hover (default) — no --alap-transition set */

/* Smooth color + background transition */
--alap-transition: background 0.4s ease, color 0.4s ease;

Hover Transform: Slide

Items slide right on hover: bridges

--alap-hover-transform: translateX(6px);
--alap-transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease;

Hover Transform: Scale

Items grow slightly on hover: bridges

--alap-hover-transform: scale(1.03);
--alap-transition: transform 0.12s ease;

Hover Opacity

Dim hovered

coffee

--alap-hover-opacity

Dim all others

coffee

--alap-dim-unhovered

/* Dim the hovered item itself */
--alap-hover-opacity: 0.4;

/* Dim everything except the hovered item */
--alap-dim-unhovered: 0.4;

Hover Border (Accent Bar)

Left accent appears on hover: bridges

Uses --alap-hover-shadow: inset 3px 0 0 color instead of a real border to avoid layout shift.

/* Using inset box-shadow (no layout shift) */
--alap-hover-shadow: inset 3px 0 0 #3b82f6;
--alap-transition: box-shadow 0.1s ease, background 0.4s ease;

Menu Container Transitions

--alap-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--alap-menu-hover-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
--alap-menu-transition: box-shadow 0.3s ease;

Menu Open Animation

The web component uses display: none/block (not animatable). To enable open/close transitions, override with opacity + visibility via ::part(menu). This is a consumer-side opt-in.

Fade + Slide Up

bridges

Fade + Scale

cars

/* Fade + slide — override display with opacity/visibility */
.fade-slide::part(menu) {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s,
              transform 0.2s ease;
}
.fade-slide[aria-expanded="true"]::part(menu) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

Cursor

pointer (default)

coffee

default (arrow)

coffee

--alap-cursor: pointer;   /* hand — default */
--alap-cursor: default;   /* arrow */

Reduced Motion

Always respect prefers-reduced-motion. Wrap any transition properties in a media query:

alap-link {
  --alap-transition: background 0.4s ease, color 0.4s ease,
                     transform 0.4s ease;
  --alap-hover-transform: translateX(4px);
  --alap-menu-transition: box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  alap-link {
    --alap-transition: none;
    --alap-hover-transform: none;
    --alap-menu-transition: none;
  }
}