diff --git a/brand-assets/brand-style-guide-site/src/app/motion/page.tsx b/brand-assets/brand-style-guide-site/src/app/motion/page.tsx index 0a0ec86..8a41065 100644 --- a/brand-assets/brand-style-guide-site/src/app/motion/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/motion/page.tsx @@ -1,53 +1,179 @@ export default function Motion() { return ( -
-
+
+
+

Motion System

- Animation principles and motion guidelines for the CHORUS brand. + The CHORUS motion system creates sophisticated, purposeful animations that enhance usability without overwhelming users.

- Define easing curves, timing functions, and animation patterns that reinforce the CHORUS brand personality. + Our implementation focuses on performance, accessibility, and consistent timing that reinforces the premium CHORUS brand personality.

-
-

Timing

-

- Standard duration scales and timing principles for smooth, purposeful animations. -

+
+

Timing Scale

+
+
+ Fast + 200ms +
+
+ Standard + 300ms +
+
+ Deliberate + 500ms +
+
-
-

Easing

-

- Consistent easing curves that create natural, organic motion patterns. -

+
+

Easing Functions

+
+
+ Primary + ease-out +
+
+ Secondary + ease-in-out +
+
+ Emphasis + cubic-bezier +
+
-
-

Interactions

-

- Hover states, transitions, and micro-interactions for enhanced user experience. -

+
+

Motion Properties

+
+
• Opacity transitions
+
• Color changes
+
• Background shifts
+
• Transform effects
+
-
-

Animation Principles

-
    -
  • • Purposeful motion that guides user attention
    • -
  • • Smooth transitions that maintain context
    • -
  • • Performance-optimized animations
    • -
  • • Accessibility considerations for reduced motion preferences
    • -
+
+
+

Interactive Elements

+
+
+

Navigation Links

+

Hover states with lateral translation and color transitions

+
+ hover:translate-x-1 transition-all duration-300 ease-out +
+
+
+

Icons & Elements

+

Scale transformations on hover with rotation for chevrons

+
+ group-hover:scale-110 transition-transform duration-300 +
+
+
+

Dropdowns

+

Vertical slide with opacity fade-in

+
+ translateY(-8px) → translateY(0) opacity transition +
+
+
+
+ +
+

3D Logo Animation

+
+
+

Continuous Rotation

+

Subtle multi-axis rotation using requestAnimationFrame

+
+
rotation.x += 0.010
+
rotation.y += -0.010
+
rotation.z += -0.1
+
+
+
+

Material Transitions

+

Dynamic color changes for accessibility themes

+
+ Custom event-driven material updates +
+
+
+
+
+ +
+

CSS Implementation

+
+
+

Global Transition Rule

+
+
* {
+
+ transition: opacity 200ms ease-out,
+             color 200ms ease-out,
+             background-color 200ms ease-out,
+             border-color 200ms ease-out; +
+
}
+
+
+
+

Component Transitions

+
+
.nav-link {
+
+ transition-all: duration-300 ease-out;
+ &:hover {
+   transform: translateX(4px);
+ } +
+
}
+
+
+
+
+ +
+

Motion Principles

+
+
+

Design Guidelines

+
    +
  • • Purposeful motion that guides user attention
    • +
  • • Consistent 200-300ms timing for interface elements
    • +
  • • Ease-out curves for natural, organic feeling
    • +
  • • Subtle transforms that enhance without distracting
    • +
  • • Performance-optimized with GPU acceleration
    • +
+
+
+

Accessibility Considerations

+
    +
  • • Respects prefers-reduced-motion settings
    • +
  • • No flashing or rapid animations
    • +
  • • Focus indicators remain clearly visible
    • +
  • • Essential information never animation-dependent
    • +
  • • Smooth transitions preserve context and orientation
    • +
+
+
+
); } \ No newline at end of file