"Each action by the user makes the interface unfold and evolve, much like walking through a series of interconnected rooms."

• One primary action per view. Two equally weighted CTAs = failure. Make everything else secondary.
• Progressive disclosure over feature dumps. Layered trays, step-by-step flows, expandable sections. Never show a 12-field form when 3 steps of 4 fields works.
• Context-preserving overlays over full-page navigations. Sheets/trays/modals that overlay the current context keep users oriented. Full-screen transitions displace them.
• Vary heights of stacked layers. Each subsequent sheet/tray must be a visibly different height so the progression is unmistakably clear. Never stack two identical-height layers.
• Every sheet/tray/modal needs a title and dismiss action. Users must always know what they're looking at and how to get back.
• Trays adapt to context. A tray appearing within a dark-themed flow should adopt a darker color scheme. The visual environment follows the user.
• Trays can launch full-screen flows. A compact tray is a valid entry point for a multi-step full-screen experience — don't force a binary choice between "tray" and "page."
• Use trays for transient actions; full screens for persistent destinations. Confirmations, warnings, and contextual info = tray. Settings, core content = full screen.

// GOOD: Progressive tray — compact, focused, context-aware
<Sheet>
  <SheetTrigger>Confirm Send</SheetTrigger>
  <SheetContent className="h-[45vh]"> {/* height varies from parent */}
    <SheetHeader>
      <SheetTitle>Review Transaction</SheetTitle>
      <DismissButton />
    </SheetHeader>
    {/* Core info only — no extras */}
    <Button>Send $42.00</Button>
  </SheetContent>
</Sheet>

"We fly instead of teleport."

• No instant show/hide. Every element that appears or disappears must animate. Pick a transition that makes spatial sense — fade, slide, scale, morph.
• Shared element transitions. If an element exists in both State A and State B (a card that expands, a button that becomes a sheet), it must visually travel between them. Never unmount and remount — morph.
• Directional consistency. Navigate right (next step, next tab) → content enters from right. Go back → content enters from left. Tabs to the left of current slide left. This builds spatial memory.
• Text morphing over instant replacement. When button labels change (e.g., "Continue" → "Confirm"), animate the transition. Identify shared letter sequences ("Con") — keep them fixed while the rest morphs. Use torph (

  npm i torph

  ) — dependency-free, works with React/Vue/Svelte. Crossfade is the minimum fallback; shared-letter morphing is the ideal.
• Partial text changes: only animate what changes. If a sentence gains or loses a word, keep the unchanged portion static. Animating unchanged text creates jarring redundancy.
• Persistent elements stay put. If a header, card, or component persists across a transition, it must NOT animate out and back in. Only the changing parts move.
• Loading states travel to their destination. A spinner doesn't just sit where triggered — it moves to where the user will look for results (e.g., after submitting a transaction, the spinner migrates to the activity tab icon).
• Micro-directional cues. Chevrons, arrows, and carets should animate to reflect the action taken. A

  →

  becomes a

  ←

  on back-navigation. An accordion chevron rotates on expand.
• Unified interpolation. All visual elements driven by the same data should share the same lerp/easing. This makes the interface feel like one thing breathing rather than a bunch of parts updating independently. When the value changes, the line, the label, the axis, and the badge should all move as one.

// Text morphing — use torph
import { TextMorph } from 'torph/react';
<TextMorph>{label}</TextMorph>  // handles shared-letter animation automatically

// Directional tab transitions
const direction = newIndex > currentIndex ? 1 : -1;
<motion.div
  key={currentTab}
  initial={{ x: direction * 20, opacity: 0 }}
  animate={{ x: 0, opacity: 1 }}
  exit={{ x: -direction * 20, opacity: 0 }}
  transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
/>

// Shared element: card → detail view
<motion.div
  layoutId={`card-${id}`}
  className={isExpanded ? "fixed inset-0 rounded-none" : "rounded-xl"}
  transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
/>

cubic-bezier(0.16, 1, 0.3, 1)

ease-in

cubic-bezier(0.4, 0, 1, 1)

"Mastering delight is mastering selective emphasis."

Delight ↑
        |         *  (rare features: theatrical)
        |       *
        |     *
        |   * *  (medium: memorable)
        | * *
        |* *  *  (frequent: subtle)
        +------------------→ Feature frequency

• Polish everything equally. The settings page, the empty state, the error screen — all receive the same care as the hero section. One unpolished corner makes the whole feel unpolished. "Like a fancy restaurant with a dirty bathroom."
• Easter eggs reward exploration. Hide moments in unexpected places. They create stories users share. Key: place them in features used just enough that discovery feels like reward, not annoyance.
• Celebrate completions. Significant actions (backup, onboarding, first transaction) deserve confetti, a custom animation, a satisfying sound — not a green checkmark.
• Make destructive actions satisfying. Deleting items? They tumble into a trash can with a sound effect. Destructive ≠ unpleasant.
• Animate numbers and live charts. Values that change (prices, counts, balances) should count/flip/morph. Commas should shift position smoothly as numbers grow — never just swap. For real-time line charts, use liveline (

  npm i liveline

  ) — one canvas, no dependencies beyond React 18, 60fps interpolation. For 60fps value overlays, update the DOM directly rather than through React state to avoid re-render overhead.
• Empty states are first impressions. An animated arrow pointing toward the create button, a floating illustration, a warm message. Never "No items yet" with nothing else.
• Sound design amplifies physicality. Completion sounds, subtle interaction feedback. Sound reinforces reward and makes actions feel real.
• Drag-and-drop should feel satisfying. Stacking animations, smooth reorder, visual feedback on lift. Reordering items should feel better than the result deserves.

// Animated number with smooth comma shifting
function AnimatedNumber({ value }) {
  const spring = useSpring(value, { stiffness: 80, damping: 20 });
  return <motion.span>{useTransform(spring, v => Math.round(v).toLocaleString())}</motion.span>;
}

// Real-time chart — liveline handles interpolation, momentum arrows, scrub, theming
import { Liveline } from 'liveline';
<div style={{ height: 200 }}>
  <Liveline
    data={history}           // [{ time, value }]
    value={latestValue}      // current number
    momentum                 // directional arrows (green/red/grey)
    showValue                // 60fps DOM overlay, no re-renders
    color="#3b82f6"          // derives full palette from one color
  />
</div>

// Satisfying empty state
function EmptyState() {
  return (
    <div className="flex flex-col items-center gap-4 py-16">
      <motion.div animate={{ y: [0, -8, 0] }} transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}>
        <IllustrationIcon />
      </motion.div>
      <p className="text-muted">Nothing here yet</p>
      <motion.div animate={{ x: [0, 5, 0] }} transition={{ repeat: Infinity, duration: 1.5 }}>
        <ArrowRight className="inline mr-1" /> Create your first item
      </motion.div>
    </div>
  );
}

// Confetti on significant completion
function CompletionScreen() {
  useEffect(() => { playSound('success'); }, []);
  return (
    <motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }}
      transition={{ type: "spring", damping: 15, stiffness: 200 }}>
      <ConfettiExplosion />
      <h2>You're all set!</h2>
    </motion.div>
  );
}

• Each screen has ONE clear primary action
• Complex flows broken into digestible steps
• Information revealed progressively, not all at once
• Context preserved during transitions (overlays > navigations)
• Stacked layers are visibly different heights
• Every overlay has a title and dismiss action
• User always knows where they are and how to go back

• Zero instant show/hide — everything animates
• Shared elements morph between states (not unmount/remount)
• Directional transitions match spatial logic
• Persistent elements don't redundantly animate
• Text changes use torph or crossfade minimum
• Only the changing part of partial text updates animates
• Loading states move to where results will appear
• Micro-directional cues on chevrons and arrows
• Elements driven by same data share the same lerp/easing (unified interpolation)
• Default easing is

  cubic-bezier(0.16, 1, 0.3, 1)

• Frequent features have subtle micro-interactions
• Infrequent features have memorable moments
• Empty states are designed, not afterthoughts
• Completions are celebrated (not just a checkmark)
• Numbers animate when they change
• At least one easter egg or hidden moment
• All corners equally polished — no dirty bathrooms
• At least one moment makes someone say "oh, that's nice"

• No generic AI aesthetics (Inter font, purple gradients, cookie-cutter layouts)
• Typography is intentional — display + body pairing
• Color palette has a dominant color with sharp accents
• Spacing is generous and consistent
• Interface feels like a physical space, not a slideshow
• Every pixel looks placed by someone who cares

1. Static tab switches. No directional slide = digital whiplash.
2. Modals that pop from nowhere. Grow from trigger or slide from edge. Never just

   opacity: 0 → 1

   centered.
3. Skeleton screens that don't match the real layout. If the skeleton has 3 bars and the content has 5 lines, you've broken the illusion.
4. Redundant animations. A persistent header that fades out and back in during a page transition. Persistent = stays.
5. Linear easing. Nothing in the physical world moves linearly.
6. "No items" empty text. First impression. Treat it like one.
7. Uniform sizing in stacked layers. Two sheets the same height = no sense of depth or progression.
8. Toasts for important outcomes. Toasts = background info. Success/error/completion = inline, contextual, animated.
9. Forms that are just stacked inputs. Step-by-step with transitions between them.
10. Buttons that don't respond to interaction. Hover, active, and focus states. Always.
11. Animating unchanged text. If only one word changes in a sentence, only that word moves.
12. Spinner left at origin after action. Move it to where the user will look for the result.

1. Read this before every UI task. Not after. Before.
2. Apply pillars in order. Simplicity → Fluidity → Delight. You can't polish a bad layout with animations.
3. Run the checklist before delivering.
4. Pair with

   frontend-design

   skill for visual aesthetics (typography, color, layout). This skill handles feel and interaction quality.
5. When in doubt, animate. Easier to tone down than to add life to a dead interface.
6. Record and review at 0.5x. Slow motion reveals every teleport, every jarring cut, every missed opportunity.