Design that
moves.

Rules that keep every screen — web, Android, iOS — feeling like one product.

Brand, semantic and surface tokens. Surfaces step in three elevation levels; text in three emphasis levels.

Brand

Semantic

Surfaces & text (current theme)

Sora for UI and display (400–800). JetBrains Mono for data, labels, code. Scale ratio 1.25.

// Platform mapping
Web      font-family: 'Sora', sans-serif / 'JetBrains Mono', monospace
Android  FontFamily(Font(R.font.sora)) via Compose Typography
iOS      Font.custom("Sora", size:) registered in Info.plist

4pt base grid — the bars below animate in with scaleX, which is exactly how progress and dividers should enter too.

Radius scale

Buttons md · inputs md · cards lg · modals & sheets xl · chips full. Nested radius = parent radius − padding.

Motion in Volt has a grammar. Three layers, four easings, five durations — and one hard rule: every animation must answer a question the user has.

The three layers

Easing tokens

Duration & stagger tokens

Hard rules

The exact recipes running on this page — each demo is live, replayable, and pasted below as code. This page's hero, belt, counters and reveals are these same recipes.

Recipe code — copy these

// 1 · WORD-MASK REVEAL — split, wrap, slide up inside a mask
function splitWords(el) {
  el.innerHTML = el.innerText.split(" ").map(w =>
    `<span style="display:inline-block;overflow:hidden;padding-bottom:.12em">
       <span class="w" style="display:inline-block;transform:translateY(110%)">${w}</span></span>`
  ).join(" ");
}
gsap.to(el.querySelectorAll(".w"), {
  y: 0, duration: 1, stagger: 0.05, ease: "power4.out",
  scrollTrigger: { trigger: el, start: "top 80%", toggleActions: "play none none reverse" }
});

// 2 · DROP-IN CLUSTER — hero cards falling into place
gsap.set(".fcard", { y: -700, rotation: 25, opacity: 0, scale: 0.7 });
tl.to(".fcard", {
  y: 0, opacity: 1, scale: 1, rotation: (i, el) => el.dataset.rot,
  duration: 1.1, ease: "back.out(1.4)",
  stagger: { each: 0.08, from: "center" }
}, 0.8);  // position offset — overlaps the previous tween

// 3 · COUNT-UP STAT — tween a plain object, render on update
ScrollTrigger.create({
  trigger: el, start: "top 85%", once: true,
  onEnter: () => {
    const o = { v: 0 };
    gsap.to(o, { v: target, duration: 2, ease: "power2.out",
      onUpdate: () => el.textContent = Math.floor(o.v) });
  }
});

// 4 · 3D TILT + ELASTIC RELEASE — cursor position → rotation
card.addEventListener("mousemove", (e) => {
  const r = card.getBoundingClientRect();
  const px = (e.clientX - r.left) / r.width - 0.5;
  const py = (e.clientY - r.top) / r.height - 0.5;
  gsap.to(card, { rotateY: px * 14, rotateX: -py * 14, scale: 1.05,
    transformPerspective: 800, duration: 0.4, ease: "power2.out" });
});
card.addEventListener("mouseleave", () =>
  gsap.to(card, { rotateX: 0, rotateY: 0, scale: 1,
    duration: 0.8, ease: "elastic.out(1, 0.6)" }));

// 5 · LERP LOOP — cursor follow / parallax; k = 0.05 heavy, 0.2 snappy
let x = 0, tx = 0;
addEventListener("mousemove", e => tx = e.clientX);
(function loop() {
  x += (tx - x) * 0.1;                    // the entire trick
  el.style.translate = `${x}px 0`;
  requestAnimationFrame(loop);
})();

// 6 · INFINITE BELT — clone once, drift, wrap by one copy's width
track.append(...[...track.children].map(c => c.cloneNode(true)));
const cycle = track.scrollWidth / 2;
let x = 0, paused = false;
(function frame(t) {
  if (!paused && !reducedMotion) x -= SPEED * dt(t);
  track.style.transform = `translate3d(${x % cycle}px,0,0)`;
  requestAnimationFrame(frame);
})();
// hover → paused = true · pointerdown/move → x += dx (drag scrub)

// 7 · MAGNETIC BUTTON — pull toward cursor, elastic snap home
btn.addEventListener("mousemove", (e) => {
  const r = btn.getBoundingClientRect();
  gsap.to(btn, { x: (e.clientX - r.left - r.width/2) * 0.3,
                 y: (e.clientY - r.top - r.height/2) * 0.3, duration: 0.3 });
});
btn.addEventListener("mouseleave", () =>
  gsap.to(btn, { x: 0, y: 0, duration: 0.7, ease: "elastic.out(1, 0.5)" }));

Recipes are notes; choreography is the song. How this very page sequences its load, and the template to reuse.

// The template — one timeline, position offsets, ambient after
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
tl.to(".chrome",  { opacity: 1, duration: 0.8 }, 0.1)
  .to(".title .w", { y: 0, duration: 0.9, stagger: 0.08 }, 0.3)
  .to(".cluster", { ...dropIn }, 0.8)     // overlaps, never waits
  .to(".sub, .cta", { opacity: 1, y: 0, duration: 0.8 }, 1.6)
  .add(startAmbientLoops, 2.2);
// Below the fold: gsap.from(section, {...}) with scrollTrigger per section.
// Rule of thumb: the whole load story ≤ 2.5s; user can scroll immediately.

Platform mapping

Seven variants, five sizes. Solid is the single primary action per screen. Primary CTAs get the magnetic treatment; everything presses to scale .96.

Variants

Sizes & states

Volt focus ring on every control. Errors shake once (400ms) then hold — motion marks the moment, color marks the state.

Chips for status, alerts for page-level messages. Live states pulse (L3 ambient); alerts slide-fade in from -8px.

Every card here has the 3D tilt recipe attached — hover them. Reveal is y:80 + fade with 0.12 stagger; release is elastic.

Tabs use a sliding glider — one element that springs between positions — instead of per-tab background swaps.

Four overlay species, one rule: the overlay adapts to the viewport, not the other way round. The same "Delete project?" dialog below is a centered modal on desktop and morphs into a bottom sheet under 640px — resize or open on a phone to see it.

Live demos

Desktop → mobile mapping

A pattern designed for a pointer must translate to a thumb. This table is the law for every Volt product:

Motion spec per overlay

Recipe — adaptive dialog & drag-to-dismiss

/* One dialog, two behaviours — CSS does the morph, JS stays identical */
.dialog { /* desktop: centered card */
  border-radius: var(--r-xl);
  transform: scale(.9) translateY(24px);
}
.open .dialog { transform: scale(1) translateY(0); }

@media (max-width: 640px) {
  .dialog-scrim { place-items: end stretch; }   /* pin to bottom */
  .dialog {
    width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;  /* sheet corners */
    padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom));
    transform: translateY(100%);                /* slide, don't scale */
  }
  .open .dialog { transform: translateY(0); }
  .dialog .grabber { display: block; }          /* affordance appears */
  .dialog .actions { flex-direction: column-reverse; } /* primary → bottom */
}

// Drag-to-dismiss: follow the finger 1:1 down, resist up,
// release past 25% (or a fast flick) → dismiss, else spring back
sheet.addEventListener("pointerdown", e => {
  startY = e.clientY; dragging = true; vel = 0;
  scrim.classList.add("dragging");        // kills the CSS transition
});
sheet.addEventListener("pointermove", e => {
  if (!dragging) return;
  const dy = e.clientY - startY;
  vel = e.clientY - lastY; lastY = e.clientY;
  // downward 1:1, upward rubber-band at 12%
  sheet.style.transform = `translateY(${dy > 0 ? dy : dy * 0.12}px)`;
  scrim.style.opacity = 1 - Math.max(0, dy) / sheet.offsetHeight; // scrim tracks drag
});
sheet.addEventListener("pointerup", () => {
  dragging = false; scrim.classList.remove("dragging");
  const dy = lastY - startY;
  if (dy > sheet.offsetHeight * 0.25 || vel > 14) close();  // distance OR velocity
  else sheet.style.transform = "";       // spring back via CSS
});

Progress fills scale from the left with shimmer on top. Skeletons sweep. Table rows reveal with a tight stagger.

The screens nobody designs are the ones users meet first. Anatomy is fixed: icon → title → one line of copy → one primary action. Never more than one CTA, never a paragraph, never a dead end.

The five species

Which state when — the loading ladder

Copy rules

Motion spec

// Empty states enter gently — they're an anticlimax, not a hero moment.
// Icon → title → copy → CTA, tight stagger, small distance:
gsap.from(empty.children, {
  y: 16, opacity: 0, duration: 0.6, stagger: 0.08, ease: "power3.out"
});
// First-use icon gets an L3 ambient float (it's the only thing on screen):
gsap.to(".empty-ico", { y: -6, duration: 2.6, ease: "sine.inOut", yoyo: true, repeat: -1 });
// Retry: button → loading state in place; on success the real content
// replaces the empty with the normal list-stagger reveal. On another
// failure, shake the empty card once (the input error recipe, reused).

Code blocks are UI too. JetBrains Mono 12.5/1.75, theme-aware token palette (volt keywords), header with filename + language + working copy button, gutter line numbers, line highlights, diff rows, and a terminal variant.

Token palette (current theme)

Full block — filename, copy, line numbers, highlighted lines

Diff block — reviews & changelogs

Terminal block

Rules

Recipe — the copy interaction & a 12-line highlighter

// Copy with confirmation state (and stripped gutters/markers)
async function copyCode(btn) {
  const lines = btn.closest(".code-block").querySelectorAll(".ln:not(.del)");
  await navigator.clipboard.writeText([...lines].map(l => l.innerText).join("\n"));
  btn.classList.add("done"); btn.textContent = "✓ Copied";
  setTimeout(() => { btn.classList.remove("done"); btn.textContent = "⧉ Copy"; }, 1600);
}

// Minimal regex highlighter — order matters: comments, strings first
function highlight(src) {
  return src
    .replace(/(\/\/.*)/g, '<i class="tk-c">$1</i>')
    .replace(/("[^"]*"|'[^']*'|`[^`]*`)/g, '<i class="tk-s">$1</i>')
    .replace(/\b(const|let|function|return|import|export|if|else|for|await|async)\b/g,
             '<i class="tk-k">$1</i>')
    .replace(/\b(\d+\.?\d*)\b/g, '<i class="tk-n">$1</i>')
    .replace(/(\w+)(?=\()/g, '<i class="tk-f">$1</i>');
}
// Production: use Shiki (build-time, theme-perfect) or highlight.js (runtime).
// Map --tok-* variables onto the Shiki theme so dark/light stays one token set.

One menu surface, four mounts: a dropdown anchored to a trigger, a context menu at the pointer, a menubar with roving focus, and the ⌘K palette. Shortcuts are rendered as real kbd keys, not text.

Keyboard keys

Accordions animate grid-template-rows: 0fr → 1fr, so height animation needs no JS measurement and never jumps. Resizable panels, scroll areas and carousels all keep their own scroll/drag state.

Carousel

The composition primitives: a field owns label + description + validation, an input group owns addons, a button group owns segmented actions. Everything below is keyboard-complete.

A real table: filter, sortable headers, header checkbox with indeterminate state, row menus, pagination. Charts are hand-built SVG on the live palette — thin marks, recessive grid, hover crosshair, and identity never carried by colour alone.

Charts

Whole screens assembled from the components above — the shadcn login-04, dashboard-01 and sidebar-07 shapes, rebuilt on Volt tokens. Remix restyles the blocks too, which is the real test of a token system.

Login · split with art panel

Dashboard · sidebar that collapses to icons

Pricing · with a billing-period toggle

Two reference devices rendered at their actual logical resolutions — iPhone 16 Pro at 402×874pt and Pixel 9 Pro at 427×952dp — then scaled to fit. Every bar height, inset and control inside these frames is the real platform value, annotated on the right.

Points, dp & pixels — the only conversion you need

Design in pt/dp, never px. A 44pt button is 132 physical px on an iPhone 16 Pro but 88px on an SE — same finger, same logical size. Android density buckets: mdpi 1x · hdpi 1.5x · xhdpi 2x · xxhdpi 3x · xxxhdpi 4x.

The frames — real metrics, annotated

Platform metric sheet

Copy-paste starting points, motion included. Single source of truth: the CSS variables in this file.

Web — CSS + GSAP setup

:root {
  --volt: rgb(161 255 20);  --ink: rgb(19 19 19);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
gsap.registerPlugin(ScrollTrigger);

Android — Compose

val Volt = Color(0xFFA1FF14); val Ink = Color(0xFF131313)
val DarkColors = darkColorScheme(primary = Volt, onPrimary = Ink,
  background = Color(0xFF0B0D08), surface = Color(0xFF121509))
val LightColors = lightColorScheme(primary = Volt, onPrimary = Ink,
  background = Color(0xFFF7F9F2), surface = Color.White)

// Motion tokens
val SpringPop = spring<Float>(dampingRatio = 0.6f, stiffness = Spring.StiffnessMedium)
val EaseOut = tween<Float>(250, easing = CubicBezierEasing(.22f, 1f, .36f, 1f))
// Press: scale animateFloatAsState(if (pressed) 0.96f else 1f, SpringPop)

iOS — SwiftUI

extension Color {
  static let volt = Color(red: 161/255, green: 1, blue: 20/255)
  static let ink = Color(red: 19/255, green: 19/255, blue: 19/255)
}
extension Animation {
  static let voltSpring = Animation.spring(response: 0.35, dampingFraction: 0.65)
  static let voltEaseOut = Animation.timingCurve(0.22, 1, 0.36, 1, duration: 0.25)
}
Button("Explore") { }.scaleEffect(pressed ? 0.96 : 1)
  .animation(.voltSpring, value: pressed)