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
@@ -69,7 +69,7 @@ export default function ProjectDetailClient({
|
||||
onClick={handleBack}
|
||||
className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-12 group bg-transparent border-none cursor-pointer"
|
||||
>
|
||||
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
|
||||
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform duration-200 ease-out" />
|
||||
<span className="font-bold uppercase tracking-widest text-xs">
|
||||
{tCommon("back")}
|
||||
</span>
|
||||
@@ -127,11 +127,11 @@ export default function ProjectDetailClient({
|
||||
|
||||
{project.live && project.live !== "#" && (
|
||||
|
||||
<a href={project.live} target="_blank" rel="noopener noreferrer" className="flex items-center justify-between w-full p-5 bg-white text-stone-900 rounded-2xl font-black hover:scale-105 transition-transform group">
|
||||
<a href={project.live} target="_blank" rel="noopener noreferrer" className="flex items-center justify-between w-full p-5 bg-white text-stone-900 rounded-2xl font-black active:scale-[0.97] transition-transform duration-150 ease-out group">
|
||||
|
||||
<span>{project.button_live_label || tDetail("liveDemo")}</span>
|
||||
|
||||
<ExternalLink size={20} className="group-hover:translate-x-1 transition-transform" />
|
||||
<ExternalLink size={20} className="group-hover:translate-x-1 transition-transform duration-200 ease-out" />
|
||||
|
||||
</a>
|
||||
|
||||
|
||||
@@ -70,7 +70,7 @@ export default function ProjectsPageClient({
|
||||
href={`/${locale}`}
|
||||
className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-10 group"
|
||||
>
|
||||
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
|
||||
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform duration-200 ease-out" />
|
||||
<span className="font-bold uppercase tracking-widest text-xs">{tCommon("backToHome")}</span>
|
||||
</Link>
|
||||
|
||||
@@ -89,7 +89,7 @@ export default function ProjectsPageClient({
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => setSelectedCategory(cat)}
|
||||
className={`px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest transition-all ${
|
||||
className={`px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97] ${
|
||||
selectedCategory === cat
|
||||
? "bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900"
|
||||
: "bg-white dark:bg-stone-900 text-stone-500 border border-stone-200 dark:border-stone-800"
|
||||
@@ -106,7 +106,7 @@ export default function ProjectsPageClient({
|
||||
placeholder={tList("searchPlaceholder")}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-2xl py-4 pl-12 pr-6 focus:outline-none focus:ring-2 focus:ring-liquid-mint/30 transition-all shadow-sm"
|
||||
className="w-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-2xl py-4 pl-12 pr-6 focus:outline-none focus:ring-2 focus:ring-liquid-mint/30 transition-[border-color,box-shadow,background-color] duration-150 ease-out shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,12 +125,12 @@ export default function ProjectsPageClient({
|
||||
))
|
||||
) : (
|
||||
filteredProjects.map((project) => (
|
||||
<motion.div key={project.id} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
|
||||
<motion.div key={project.id} initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-60px" }} transition={{ duration: 0.5, ease: [0.23, 1, 0.32, 1] }}>
|
||||
<Link href={`/${locale}/projects/${project.slug}`} className="group block h-full">
|
||||
<div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm h-full hover:shadow-xl transition-all flex flex-col">
|
||||
<div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm h-full hover:shadow-xl transition-shadow duration-300 ease-out flex flex-col">
|
||||
{project.imageUrl ? (
|
||||
<div className="relative aspect-[16/10] rounded-[2rem] overflow-hidden mb-8 border-4 border-stone-50 dark:border-stone-800 shadow-lg">
|
||||
<Image src={project.imageUrl} alt={project.title} fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
|
||||
<Image src={project.imageUrl} alt={project.title} fill className="object-cover group-hover:scale-[1.03] transition-transform duration-500 ease-out" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative aspect-[16/10] rounded-[2rem] overflow-hidden mb-8 border-4 border-stone-50 dark:border-stone-800 shadow-lg">
|
||||
@@ -146,7 +146,7 @@ export default function ProjectsPageClient({
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="text-3xl font-black text-stone-900 dark:text-white uppercase tracking-tight">{project.title}</h3>
|
||||
<div className="w-12 h-12 rounded-full bg-stone-50 dark:bg-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 transition-all">
|
||||
<div className="w-12 h-12 rounded-full bg-stone-50 dark:bg-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 transition-colors duration-200">
|
||||
<ArrowUpRight size={20} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user