novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(animations): converge P1 motion durations to ≤300ms target

Browse Source 
- 151 scripted + 1 manual duration fixes across 46 files
- framer entrance 0.5/0.6s -> 0.3s
- Tailwind hover -> duration-150, entrance -> duration-300
- preserve flip-clock/page-transition per semantic decision
- design-system.ts dead-code deferred
- P1 violations 156 -> 5; P0 remains 0; OK class 249 -> 400
- verified: tsc clean, eslint 0 errors
- verified: 130/130 jest suites, 1573 passed
- verified: visual regression 46/46 zero-pixel diff

Co-Authored-By: 阿睿 <workbuddy@tencent.com>
This commit is contained in:
zhangxiang
2026-09-03 21:34:52 +08:00
co-authored by 阿睿
parent ea74bdc134
commit 495f6d4eca
46 changed files with 151 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/detail/list-page-hero.tsx
+7 -7
View File
@@ -77,7 +77,7 @@ export function ListPageHero({
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
className="max-w-4xl mx-auto text-center"
>
{/* Dynamic Badge */}
@@ -86,7 +86,7 @@ export function ListPageHero({
initial={shouldReduceMotion ? {} : { opacity: 0, scale: 0.95, y: 8 }}
whileInView={{ opacity: 1, scale: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.1, duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
transition={{ delay: 0.1, duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium mb-6 backdrop-blur-sm"
style={{ backgroundColor: badgeStyle.bg, color: badgeStyle.text, border: `1px solid ${badgeStyle.border}` }}
>
@@ -100,7 +100,7 @@ export function ListPageHero({
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.15, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
transition={{ delay: 0.15, duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-6 text-[var(--color-text-primary)]"
>
{title}
@@ -111,7 +111,7 @@ export function ListPageHero({
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.25, duration: 0.65, ease: [0.16, 1, 0.3, 1] }}
transition={{ delay: 0.25, duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
className="text-lg md:text-xl max-w-2xl mx-auto leading-relaxed mb-4 text-[var(--color-text-secondary)]"
>
{subtitle}
@@ -123,7 +123,7 @@ export function ListPageHero({
initial={shouldReduceMotion ? {} : { opacity: 0, y: 18 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.35, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
transition={{ delay: 0.35, duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
className="text-base max-w-xl mx-auto mb-10 text-[var(--color-text-muted)]"
>
{description}
@@ -136,7 +136,7 @@ export function ListPageHero({
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.4, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
transition={{ delay: 0.4, duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
className="flex flex-wrap justify-center gap-8 md:gap-12 mt-12 pt-12 border-t border-[var(--color-border-primary)]"
>
{stats.map((stat, index) => (
@@ -145,7 +145,7 @@ export function ListPageHero({
initial={shouldReduceMotion ? {} : { opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ delay: 0.5 + index * 0.08, duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
transition={{ delay: 0.5 + index * 0.08, duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
className="text-center min-w-[100px]"
>
<div className="text-3xl md:text-4xl font-bold tracking-tight text-[var(--color-text-primary)]">