feat: Update Motion page to reflect actual implementation
- Document real animation system currently used across the site - Add comprehensive timing scale (200ms, 300ms, 500ms) with actual usage - Include detailed easing functions (ease-out, ease-in-out, cubic-bezier) - Document interactive element animations: • Navigation links with lateral translation and color transitions • Icon scaling and chevron rotation effects • Dropdown slide animations with opacity - Add 3D logo animation specifications: • Multi-axis continuous rotation with requestAnimationFrame • Material color transitions for accessibility themes - Include CSS implementation examples with real code snippets - Update motion principles to reflect performance and accessibility focus - Replace theoretical content with actual brand implementation details 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
@@ -1,53 +1,179 @@
|
|||||||
export default function Motion() {
|
export default function Motion() {
|
||||||
return (
|
return (
|
||||||
<section id="motion" className="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-mulberry-950 from-white to-sand-200">
|
<div className="py-chorus-xxl">
|
||||||
<div className="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
|
<section id="motion" className="pt-chorus-xxl py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-carbon-950 from-white to-sand-200">
|
||||||
|
<div className="px-chorus-lg max-w-7xl mx-auto mb-chorus-lg">
|
||||||
<h2 className="text-h2 mb-chorus-lg">Motion System</h2>
|
<h2 className="text-h2 mb-chorus-lg">Motion System</h2>
|
||||||
|
|
||||||
<div className="py-chorus-lg space-y-chorus-lg">
|
<div className="py-chorus-lg space-y-chorus-lg">
|
||||||
<div className="mb-chorus-lg">
|
<div className="mb-chorus-lg">
|
||||||
<p className="text-lg mb-chorus-md">
|
<p className="text-lg mb-chorus-md">
|
||||||
Animation principles and motion guidelines for the CHORUS brand.
|
The CHORUS motion system creates sophisticated, purposeful animations that enhance usability without overwhelming users.
|
||||||
</p>
|
</p>
|
||||||
<p className="text-carbon-600 dark:text-mulberry-300">
|
<p className="text-carbon-600 dark:text-mulberry-300">
|
||||||
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.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-chorus-lg md:grid-cols-3">
|
<div className="grid gap-chorus-lg md:grid-cols-3">
|
||||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||||
<h3 className="text-h3 mb-chorus-md">Timing</h3>
|
<h3 className="text-h3 mb-chorus-md">Timing Scale</h3>
|
||||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
<div className="space-y-2 text-sm">
|
||||||
Standard duration scales and timing principles for smooth, purposeful animations.
|
<div className="flex justify-between">
|
||||||
</p>
|
<span className="text-carbon-600 dark:text-mulberry-300">Fast</span>
|
||||||
|
<span className="font-mono">200ms</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-carbon-600 dark:text-mulberry-300">Standard</span>
|
||||||
|
<span className="font-mono">300ms</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-carbon-600 dark:text-mulberry-300">Deliberate</span>
|
||||||
|
<span className="font-mono">500ms</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||||
<h3 className="text-h3 mb-chorus-md">Easing</h3>
|
<h3 className="text-h3 mb-chorus-md">Easing Functions</h3>
|
||||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
<div className="space-y-2 text-sm">
|
||||||
Consistent easing curves that create natural, organic motion patterns.
|
<div className="flex justify-between">
|
||||||
</p>
|
<span className="text-carbon-600 dark:text-mulberry-300">Primary</span>
|
||||||
|
<span className="font-mono">ease-out</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-carbon-600 dark:text-mulberry-300">Secondary</span>
|
||||||
|
<span className="font-mono">ease-in-out</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-carbon-600 dark:text-mulberry-300">Emphasis</span>
|
||||||
|
<span className="font-mono">cubic-bezier</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||||
<h3 className="text-h3 mb-chorus-md">Interactions</h3>
|
<h3 className="text-h3 mb-chorus-md">Motion Properties</h3>
|
||||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
<div className="space-y-2 text-sm">
|
||||||
Hover states, transitions, and micro-interactions for enhanced user experience.
|
<div className="text-carbon-600 dark:text-mulberry-300">• Opacity transitions</div>
|
||||||
</p>
|
<div className="text-carbon-600 dark:text-mulberry-300">• Color changes</div>
|
||||||
|
<div className="text-carbon-600 dark:text-mulberry-300">• Background shifts</div>
|
||||||
|
<div className="text-carbon-600 dark:text-mulberry-300">• Transform effects</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||||
|
<div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
|
||||||
|
<h3 className="text-h3 mb-chorus-md">Interactive Elements</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Navigation Links</h4>
|
||||||
|
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Hover states with lateral translation and color transitions</p>
|
||||||
|
<div className="font-mono text-xs text-carbon-500">
|
||||||
|
hover:translate-x-1 transition-all duration-300 ease-out
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Icons & Elements</h4>
|
||||||
|
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Scale transformations on hover with rotation for chevrons</p>
|
||||||
|
<div className="font-mono text-xs text-carbon-500">
|
||||||
|
group-hover:scale-110 transition-transform duration-300
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Dropdowns</h4>
|
||||||
|
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Vertical slide with opacity fade-in</p>
|
||||||
|
<div className="font-mono text-xs text-carbon-500">
|
||||||
|
translateY(-8px) → translateY(0) opacity transition
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
|
<div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
|
||||||
<h3 className="text-h3 mb-chorus-md">Animation Principles</h3>
|
<h3 className="text-h3 mb-chorus-md">3D Logo Animation</h3>
|
||||||
<ul className="space-y-2 text-carbon-600 dark:text-mulberry-300">
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Continuous Rotation</h4>
|
||||||
|
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Subtle multi-axis rotation using requestAnimationFrame</p>
|
||||||
|
<div className="font-mono text-xs text-carbon-500 space-y-1">
|
||||||
|
<div>rotation.x += 0.010</div>
|
||||||
|
<div>rotation.y += -0.010</div>
|
||||||
|
<div>rotation.z += -0.1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Material Transitions</h4>
|
||||||
|
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Dynamic color changes for accessibility themes</p>
|
||||||
|
<div className="font-mono text-xs text-carbon-500">
|
||||||
|
Custom event-driven material updates
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-carbon-900 p-chorus-lg border border-nickel-200 dark:border-carbon-800">
|
||||||
|
<h3 className="text-h3 mb-chorus-md">CSS Implementation</h3>
|
||||||
|
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-2">Global Transition Rule</h4>
|
||||||
|
<div className="bg-carbon-50 dark:bg-carbon-800 p-3 font-mono text-xs overflow-x-auto">
|
||||||
|
<div className="text-eucalyptus-700 dark:text-eucalyptus-300">* {</div>
|
||||||
|
<div className="pl-4 text-carbon-700 dark:text-carbon-300">
|
||||||
|
transition: opacity 200ms ease-out,<br />
|
||||||
|
color 200ms ease-out,<br />
|
||||||
|
background-color 200ms ease-out,<br />
|
||||||
|
border-color 200ms ease-out;
|
||||||
|
</div>
|
||||||
|
<div className="text-eucalyptus-700 dark:text-eucalyptus-300">}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-2">Component Transitions</h4>
|
||||||
|
<div className="bg-carbon-50 dark:bg-carbon-800 p-3 font-mono text-xs overflow-x-auto">
|
||||||
|
<div className="text-ocean-700 dark:text-ocean-300">.nav-link {</div>
|
||||||
|
<div className="pl-4 text-carbon-700 dark:text-carbon-300">
|
||||||
|
transition-all: duration-300 ease-out;<br />
|
||||||
|
&:hover {<br />
|
||||||
|
transform: translateX(4px);<br />
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div className="text-ocean-700 dark:text-ocean-300">}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
|
||||||
|
<h3 className="text-h3 mb-chorus-md">Motion Principles</h3>
|
||||||
|
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-eucalyptus-700 dark:text-eucalyptus-400 mb-2">Design Guidelines</h4>
|
||||||
|
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||||
<li>• Purposeful motion that guides user attention</li>
|
<li>• Purposeful motion that guides user attention</li>
|
||||||
<li>• Smooth transitions that maintain context</li>
|
<li>• Consistent 200-300ms timing for interface elements</li>
|
||||||
<li>• Performance-optimized animations</li>
|
<li>• Ease-out curves for natural, organic feeling</li>
|
||||||
<li>• Accessibility considerations for reduced motion preferences</li>
|
<li>• Subtle transforms that enhance without distracting</li>
|
||||||
|
<li>• Performance-optimized with GPU acceleration</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-coral-700 dark:text-coral-400 mb-2">Accessibility Considerations</h4>
|
||||||
|
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||||
|
<li>• Respects prefers-reduced-motion settings</li>
|
||||||
|
<li>• No flashing or rapid animations</li>
|
||||||
|
<li>• Focus indicators remain clearly visible</li>
|
||||||
|
<li>• Essential information never animation-dependent</li>
|
||||||
|
<li>• Smooth transitions preserve context and orientation</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user