Motion Usage

Motion is a signal, not decoration. Every animation below includes the intended purpose, a live sample, and the implementation code.

UI Motion

Button hover

Gives tactile feedback. The button brightens on hover and presses down on active.

.xn-button {
  transition: filter 150ms ease-out, transform 100ms ease-out;
}
.xn-button:hover { filter: brightness(1.2); }
.xn-button:active { transform: translateY(1px); }

Focus ring

Highlights keyboard focus with a Nexa Cluster 1000 glow. No motion on mouse click.

.xn-focus {
  transition: box-shadow 150ms ease-out;
}
.xn-focus:focus-visible {
  box-shadow: 0 0 0 2px var(--color-nexa-cluster-1000);
}

Progress pulse

Shows an ongoing process. Opacity and scale breathe to avoid visual fatigue.

@keyframes xn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.9); }
}

Celestial orbit

A planet with a rotating ring. Use for cosmic, premium, or system-level loading states.

.xn-orbit {
  transform: rotateX(70deg);
  animation: xn-orbit 2s linear infinite;
}
@keyframes xn-orbit {
  to { transform: rotateX(70deg) rotateZ(360deg); }
}

XEVOR NEXA

Entrance fade

Brings content onto the screen with a small upward drift. Keeps momentum forward.

@keyframes xn-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

Loading progress

A determinate ring with a percentage label. The number gives users a sense of completion.

// JS sets the percentage and strokeDashoffset each frame
var pct = Math.round(t * 100);
label.textContent = pct + '%';
fill.style.strokeDashoffset = 176 * (1 - t);

Error shake

Communicates a failed action without changing color alone. Short bursts with a pause between them.

.xn-shake {
  animation: xn-shake 3s ease-in-out infinite;
}
@keyframes xn-shake {
  0%, 16%, 100% { transform: translateX(0); }
  2%, 6%, 10%, 14% { transform: translateX(-6px); }
  4%, 8%, 12% { transform: translateX(6px); }
}

Skeleton shimmer

Placeholder loading for content. The sheen moves left to right to show the page is alive.

.xn-skeleton-line {
  background: var(--void-700);
  overflow: hidden;
}
.xn-skeleton-line::after {
  background: linear-gradient(90deg, transparent, var(--text-secondary), transparent);
  opacity: 0.25;
  transform: translateX(-100%);
  animation: xn-shimmer 1.5s linear infinite;
}

Saved successfully

Toast slide

A confirmation message enters from the side, holds, and exits. Keeps users informed without blocking.

@keyframes xn-toast {
  0%, 100% { opacity: 0; transform: translateX(40px); }
  20%, 80% { opacity: 1; transform: translateX(0); }
}

Switch toggle

A binary state change. The knob slides and the track fills to confirm the new state.

.xn-switch:checked + .xn-track {
  background: var(--color-xevor-flare-1000);
}
.xn-knob { transition: transform 150ms ease-out; }
.xn-switch:checked + .xn-track .xn-knob {
  transform: translateX(20px);
}

Hero entrance

Large content blocks enter in a staggered sequence. Use for page heroes and feature sections.

.xn-hero-line {
  opacity: 0;
  transform: translateY(20px);
  animation: xn-hero-in 1.8s ease-out infinite;
}
.xn-hero-line:nth-child(1) { animation-delay: 0s; }
.xn-hero-line:nth-child(2) { animation-delay: 0.15s; }

Discover
Build
Launch
Scale

Staggered list

List items reveal one at a time. Keeps focus and gives content a sense of arrival.

.xn-stagger li {
  opacity: 0;
  transform: translateX(-20px);
  animation: xn-stagger 2s ease-out infinite;
}
.xn-stagger li:nth-child(2) { animation-delay: 0.2s; }

Pull to refresh

An arrow pulls down, snaps back, and repeats. Signals that a release will trigger a reload.

.xn-pull-arrow {
  animation: xn-pull 2.2s ease-in-out infinite;
}
@keyframes xn-pull {
  0%, 100% { transform: translateY(50px) rotate(-180deg); }
  30% { transform: translateY(0) rotate(0deg); }
}

Advancement begins XEVOR NEXA Build with certainty Scale with trust

Ticker / pull quote

A horizontally scrolling message rail. Use for announcements, quotes, or live data ticks.

.xn-ticker {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: xn-ticker 10s linear infinite;
}

Upload complete.

Micro-copy typing

Status text types itself into view. Use for short confirmations and terminal-style feedback.

.xn-typing {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--text-secondary);
  animation: xn-typing 2.8s steps(16) infinite,
             xn-blink 0.8s step-end infinite;
}

Modal entrance

A backdrop fades in while a panel scales and slides into center. No JavaScript required.

.xn-modal-state:checked ~ .xn-backdrop { opacity: 1; pointer-events: auto; }
.xn-modal-state:checked ~ .xn-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

Snap slider

A knob snaps between predefined positions. Use for filters, zoom steps, or segmented controls.

.xn-snap-knob {
  transform: translateX(-50%);
  animation: xn-snap 3.5s ease-in-out infinite;
}
@keyframes xn-snap {
  0%, 100% { left: 0%; }
  50% { left: 66%; }
}

Tilt me

3-D card tilt

The card follows the cursor with a subtle perspective tilt. Re-centers on mouse leave.

.xn-tilt-card {
  transform: perspective(600px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition: transform 0.1s ease-out;
}
// JS sets --rx and --ry on mousemove

Confetti burst

A radial burst of particles for celebrations and success states. Pure CSS with custom properties.

.xn-confetti span {
  --angle: 0deg;
  --dist: 50px;
  --color: var(--color-xevor-flare-1000);
  background: var(--color);
  animation: xn-confetti 1.2s ease-out infinite;
  animation-delay: calc(var(--i) * 0.05s);
}

Lottie-style micro-illustration

A small SVG element with looping, sequenced scale animations. Use for status beacons and empty states.

.xn-lottie-ring {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 1;
  animation: xn-lottie-ring 1.8s ease-out infinite;
}

Logo lockup motions

PENDING Logo motion specimens are placeholders and need to be fixed: pulse timing, dashed ring rotation, and thermal glow still need approval.

Sovereign Loop pulse

Whole icon pulses with a soft glow to signal authority and active state.

.sovereign-loop {
  animation: pulse-slow 3s ease-in-out infinite;
}

Kinetic Engine rotation

Dashed rings rotate 360° over 20 s while the bars pulse to indicate progress.

/* Pending: dashed rings rotate 360° over 20 s */
.kinetic-engine {
  animation: pulse-slow 3s ease-in-out infinite;
}

Thermal Core pulse

Whole icon pulses with glow to suggest warmth and energy distribution.

.thermal-core {
  animation: pulse-slow 3s ease-in-out infinite;
}

Absolute Algorithm pulse

Internal bars pulse to show deterministic, ordered processing.

.absolute-algorithm .bars {
  animation: pulse-slow 3s ease-in-out infinite;
}

Do & Don't

Do keep transitions under 300 ms and respect prefers-reduced-motion.

Don't use long bounces, flashing loops, or motion that blocks reading.

PENDING Product motion audit, performance testing on low-power devices, and prefers-reduced-motion tests are pending.