diff --git a/.claude/skills/frontend-design/reference/motion-design.md b/.claude/skills/frontend-design/reference/motion-design.md index 1ca0d70ce..eff2788b4 100644 --- a/.claude/skills/frontend-design/reference/motion-design.md +++ b/.claude/skills/frontend-design/reference/motion-design.md @@ -74,6 +74,22 @@ This is not optional. Vestibular disorders affect ~35% of adults over 40. **What to preserve**: Functional animations like progress bars, loading spinners (slowed down), and focus indicators should still work—just without spatial movement. +## Perceived Performance + +**Nobody cares how fast your site is—just how fast it feels.** Perception can be as effective as actual performance. + +**The 80ms threshold**: Our brains buffer sensory input for ~80ms to synchronize perception. Anything under 80ms feels instant and simultaneous. This is your target for micro-interactions. + +**Active vs passive time**: Passive waiting (staring at a spinner) feels longer than active engagement. Strategies to shift the balance: + +- **Preemptive start**: Begin transitions immediately while loading (iOS app zoom, skeleton UI). Users perceive work happening. +- **Early completion**: Show content progressively—don't wait for everything. Video buffering, progressive images, streaming HTML. +- **Optimistic UI**: Update the interface immediately, handle failures gracefully. Instagram likes work offline—the UI updates instantly, syncs later. Use for low-stakes actions; avoid for payments or destructive operations. + +**Easing affects perceived duration**: Ease-in (accelerating toward completion) makes tasks feel shorter because the peak-end effect weights final moments heavily. Ease-out feels satisfying for entrances, but ease-in toward a task's end compresses perceived time. + +**Caution**: Too-fast responses can decrease perceived value. Users may distrust instant results for complex operations (search, analysis). Sometimes a brief delay signals "real work" is happening. + ## Performance Don't use `will-change` preemptively—only when animation is imminent (`:hover`, `.animating`). For scroll-triggered animations, use Intersection Observer instead of scroll events; unobserve after animating once. Create motion tokens for consistency (durations, easings, common transitions). diff --git a/dist/claude-code/.claude/skills/frontend-design/reference/motion-design.md b/dist/claude-code/.claude/skills/frontend-design/reference/motion-design.md index 1ca0d70ce..eff2788b4 100644 --- a/dist/claude-code/.claude/skills/frontend-design/reference/motion-design.md +++ b/dist/claude-code/.claude/skills/frontend-design/reference/motion-design.md @@ -74,6 +74,22 @@ This is not optional. Vestibular disorders affect ~35% of adults over 40. **What to preserve**: Functional animations like progress bars, loading spinners (slowed down), and focus indicators should still work—just without spatial movement. +## Perceived Performance + +**Nobody cares how fast your site is—just how fast it feels.** Perception can be as effective as actual performance. + +**The 80ms threshold**: Our brains buffer sensory input for ~80ms to synchronize perception. Anything under 80ms feels instant and simultaneous. This is your target for micro-interactions. + +**Active vs passive time**: Passive waiting (staring at a spinner) feels longer than active engagement. Strategies to shift the balance: + +- **Preemptive start**: Begin transitions immediately while loading (iOS app zoom, skeleton UI). Users perceive work happening. +- **Early completion**: Show content progressively—don't wait for everything. Video buffering, progressive images, streaming HTML. +- **Optimistic UI**: Update the interface immediately, handle failures gracefully. Instagram likes work offline—the UI updates instantly, syncs later. Use for low-stakes actions; avoid for payments or destructive operations. + +**Easing affects perceived duration**: Ease-in (accelerating toward completion) makes tasks feel shorter because the peak-end effect weights final moments heavily. Ease-out feels satisfying for entrances, but ease-in toward a task's end compresses perceived time. + +**Caution**: Too-fast responses can decrease perceived value. Users may distrust instant results for complex operations (search, analysis). Sometimes a brief delay signals "real work" is happening. + ## Performance Don't use `will-change` preemptively—only when animation is imminent (`:hover`, `.animating`). For scroll-triggered animations, use Intersection Observer instead of scroll events; unobserve after animating once. Create motion tokens for consistency (durations, easings, common transitions). diff --git a/dist/codex/AGENTS.frontend-design.md b/dist/codex/AGENTS.frontend-design.md index 4d8c360f9..353e2d1eb 100644 --- a/dist/codex/AGENTS.frontend-design.md +++ b/dist/codex/AGENTS.frontend-design.md @@ -340,6 +340,22 @@ This is not optional. Vestibular disorders affect ~35% of adults over 40. **What to preserve**: Functional animations like progress bars, loading spinners (slowed down), and focus indicators should still work—just without spatial movement. +## Perceived Performance + +**Nobody cares how fast your site is—just how fast it feels.** Perception can be as effective as actual performance. + +**The 80ms threshold**: Our brains buffer sensory input for ~80ms to synchronize perception. Anything under 80ms feels instant and simultaneous. This is your target for micro-interactions. + +**Active vs passive time**: Passive waiting (staring at a spinner) feels longer than active engagement. Strategies to shift the balance: + +- **Preemptive start**: Begin transitions immediately while loading (iOS app zoom, skeleton UI). Users perceive work happening. +- **Early completion**: Show content progressively—don't wait for everything. Video buffering, progressive images, streaming HTML. +- **Optimistic UI**: Update the interface immediately, handle failures gracefully. Instagram likes work offline—the UI updates instantly, syncs later. Use for low-stakes actions; avoid for payments or destructive operations. + +**Easing affects perceived duration**: Ease-in (accelerating toward completion) makes tasks feel shorter because the peak-end effect weights final moments heavily. Ease-out feels satisfying for entrances, but ease-in toward a task's end compresses perceived time. + +**Caution**: Too-fast responses can decrease perceived value. Users may distrust instant results for complex operations (search, analysis). Sometimes a brief delay signals "real work" is happening. + ## Performance Don't use `will-change` preemptively—only when animation is imminent (`:hover`, `.animating`). For scroll-triggered animations, use Intersection Observer instead of scroll events; unobserve after animating once. Create motion tokens for consistency (durations, easings, common transitions). diff --git a/dist/cursor/.cursor/rules/frontend-design.md b/dist/cursor/.cursor/rules/frontend-design.md index 4d8c360f9..353e2d1eb 100644 --- a/dist/cursor/.cursor/rules/frontend-design.md +++ b/dist/cursor/.cursor/rules/frontend-design.md @@ -340,6 +340,22 @@ This is not optional. Vestibular disorders affect ~35% of adults over 40. **What to preserve**: Functional animations like progress bars, loading spinners (slowed down), and focus indicators should still work—just without spatial movement. +## Perceived Performance + +**Nobody cares how fast your site is—just how fast it feels.** Perception can be as effective as actual performance. + +**The 80ms threshold**: Our brains buffer sensory input for ~80ms to synchronize perception. Anything under 80ms feels instant and simultaneous. This is your target for micro-interactions. + +**Active vs passive time**: Passive waiting (staring at a spinner) feels longer than active engagement. Strategies to shift the balance: + +- **Preemptive start**: Begin transitions immediately while loading (iOS app zoom, skeleton UI). Users perceive work happening. +- **Early completion**: Show content progressively—don't wait for everything. Video buffering, progressive images, streaming HTML. +- **Optimistic UI**: Update the interface immediately, handle failures gracefully. Instagram likes work offline—the UI updates instantly, syncs later. Use for low-stakes actions; avoid for payments or destructive operations. + +**Easing affects perceived duration**: Ease-in (accelerating toward completion) makes tasks feel shorter because the peak-end effect weights final moments heavily. Ease-out feels satisfying for entrances, but ease-in toward a task's end compresses perceived time. + +**Caution**: Too-fast responses can decrease perceived value. Users may distrust instant results for complex operations (search, analysis). Sometimes a brief delay signals "real work" is happening. + ## Performance Don't use `will-change` preemptively—only when animation is imminent (`:hover`, `.animating`). For scroll-triggered animations, use Intersection Observer instead of scroll events; unobserve after animating once. Create motion tokens for consistency (durations, easings, common transitions). diff --git a/dist/gemini/GEMINI.frontend-design.md b/dist/gemini/GEMINI.frontend-design.md index 4d8c360f9..353e2d1eb 100644 --- a/dist/gemini/GEMINI.frontend-design.md +++ b/dist/gemini/GEMINI.frontend-design.md @@ -340,6 +340,22 @@ This is not optional. Vestibular disorders affect ~35% of adults over 40. **What to preserve**: Functional animations like progress bars, loading spinners (slowed down), and focus indicators should still work—just without spatial movement. +## Perceived Performance + +**Nobody cares how fast your site is—just how fast it feels.** Perception can be as effective as actual performance. + +**The 80ms threshold**: Our brains buffer sensory input for ~80ms to synchronize perception. Anything under 80ms feels instant and simultaneous. This is your target for micro-interactions. + +**Active vs passive time**: Passive waiting (staring at a spinner) feels longer than active engagement. Strategies to shift the balance: + +- **Preemptive start**: Begin transitions immediately while loading (iOS app zoom, skeleton UI). Users perceive work happening. +- **Early completion**: Show content progressively—don't wait for everything. Video buffering, progressive images, streaming HTML. +- **Optimistic UI**: Update the interface immediately, handle failures gracefully. Instagram likes work offline—the UI updates instantly, syncs later. Use for low-stakes actions; avoid for payments or destructive operations. + +**Easing affects perceived duration**: Ease-in (accelerating toward completion) makes tasks feel shorter because the peak-end effect weights final moments heavily. Ease-out feels satisfying for entrances, but ease-in toward a task's end compresses perceived time. + +**Caution**: Too-fast responses can decrease perceived value. Users may distrust instant results for complex operations (search, analysis). Sometimes a brief delay signals "real work" is happening. + ## Performance Don't use `will-change` preemptively—only when animation is imminent (`:hover`, `.animating`). For scroll-triggered animations, use Intersection Observer instead of scroll events; unobserve after animating once. Create motion tokens for consistency (durations, easings, common transitions). diff --git a/source/skills/frontend-design/reference/motion-design.md b/source/skills/frontend-design/reference/motion-design.md index 1ca0d70ce..eff2788b4 100644 --- a/source/skills/frontend-design/reference/motion-design.md +++ b/source/skills/frontend-design/reference/motion-design.md @@ -74,6 +74,22 @@ This is not optional. Vestibular disorders affect ~35% of adults over 40. **What to preserve**: Functional animations like progress bars, loading spinners (slowed down), and focus indicators should still work—just without spatial movement. +## Perceived Performance + +**Nobody cares how fast your site is—just how fast it feels.** Perception can be as effective as actual performance. + +**The 80ms threshold**: Our brains buffer sensory input for ~80ms to synchronize perception. Anything under 80ms feels instant and simultaneous. This is your target for micro-interactions. + +**Active vs passive time**: Passive waiting (staring at a spinner) feels longer than active engagement. Strategies to shift the balance: + +- **Preemptive start**: Begin transitions immediately while loading (iOS app zoom, skeleton UI). Users perceive work happening. +- **Early completion**: Show content progressively—don't wait for everything. Video buffering, progressive images, streaming HTML. +- **Optimistic UI**: Update the interface immediately, handle failures gracefully. Instagram likes work offline—the UI updates instantly, syncs later. Use for low-stakes actions; avoid for payments or destructive operations. + +**Easing affects perceived duration**: Ease-in (accelerating toward completion) makes tasks feel shorter because the peak-end effect weights final moments heavily. Ease-out feels satisfying for entrances, but ease-in toward a task's end compresses perceived time. + +**Caution**: Too-fast responses can decrease perceived value. Users may distrust instant results for complex operations (search, analysis). Sometimes a brief delay signals "real work" is happening. + ## Performance Don't use `will-change` preemptively—only when animation is imminent (`:hover`, `.animating`). For scroll-triggered animations, use Intersection Observer instead of scroll events; unobserve after animating once. Create motion tokens for consistency (durations, easings, common transitions).