feat: polish motion with stronger easing, press feedback and reduced motion

- Override Tailwind ease-out/ease-in-out with stronger curves, add ease-drawer
- hoverOnlyWhenSupported so hover styles never stick on touch devices
- Replace transition-all with explicit properties across the public UI
- Press feedback via active:scale-[0.97] instead of hover:scale-105
- Global prefers-reduced-motion handling (CSS + MotionConfig reducedMotion="user")
- Mobile menu is a real drawer: stays mounted, inert when closed, Escape closes
- Progress and music bars animate scaleX/scaleY instead of width/height
- Fix undefined animate-spin-slow, contain hero CTA shine with overflow-hidden

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
denshooter
2026-10-15 18:31:58 +02:00
parent 8c3c4ec1d0
commit c847a456a3
20 changed files with 178 additions and 123 deletions
+6 -6
View File
@@ -130,8 +130,8 @@ export default function ActivityFeed({
key={quoteIndex}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.5 }}
exit={{ opacity: 0, y: -6, filter: "blur(2px)", transition: { duration: 0.2, ease: [0.23, 1, 0.32, 1] } }}
transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
className="space-y-4"
>
<p className="text-base sm:text-lg md:text-xl lg:text-2xl font-light leading-tight text-stone-400 dark:text-stone-400 italic">
@@ -207,14 +207,14 @@ export default function ActivityFeed({
{[0, 1, 2].map((i) => (
<motion.div
key={i}
animate={{ height: ["20%", "100%", "20%"] }}
animate={{ scaleY: [0.2, 1, 0.2] }}
transition={{
duration: 0.8,
repeat: Infinity,
delay: i * 0.2,
ease: "easeInOut"
}}
className="w-[2px] bg-[#1DB954] rounded-full"
className="w-[2px] h-full origin-bottom bg-[#1DB954] rounded-full"
/>
))}
</div>
@@ -225,12 +225,12 @@ export default function ActivityFeed({
rel="noopener noreferrer"
className="flex gap-4 relative z-10"
>
<div className="w-16 h-16 rounded-lg overflow-hidden shrink-0 shadow-md relative group-hover:shadow-xl transition-shadow duration-500">
<div className="w-16 h-16 rounded-lg overflow-hidden shrink-0 shadow-md relative group-hover:shadow-xl transition-shadow duration-300">
<Image
src={data.music.albumArt}
alt="Album Art"
fill
className="object-cover transition-transform duration-700 group-hover:scale-110"
className="object-cover transition-transform duration-500 ease-out group-hover:scale-105"
sizes="64px"
/>
</div>