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

perf(motion): 营销页入场动效时长收敛至 300ms

Browse Source 
对齐 CONTEXT.md 动效四原则：入场 200-300ms、硬上限 700ms。

- 5 个营销页共 45 处 duration 由 0.8 / 1 收敛为 0.3
- 审计基线：P0 硬违规 99 → 54，P1 164 → 163，P2 持平 28
- 改动 100% 为 transition duration，零文案变更
This commit is contained in:
zhangxiang
2026-09-03 17:36:34 +08:00
parent a8eae9606e
commit 8fb5aae076
5 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/about/about-content-v4.tsx
+12 -12
View File
@@ -54,7 +54,7 @@ function HeroSection({ data }: { data: AboutData }) {
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.1, ease: EASE_OUT }}
transition={{ duration: 0.3, delay: 0.1, ease: EASE_OUT }}
className="text-sm font-mono tracking-[0.15em] text-text-muted mb-8"
>
{data.heroSubtitle || ''}
@@ -63,7 +63,7 @@ function HeroSection({ data }: { data: AboutData }) {
<motion.h1
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, delay: 0.2, ease: EASE_OUT }}
transition={{ duration: 0.3, delay: 0.2, ease: EASE_OUT }}
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-ink leading-[0.88] tracking-tightest mb-10 sm:mb-12 md:mb-16"
>
{titleLines.map((line, i) => (
@@ -77,7 +77,7 @@ function HeroSection({ data }: { data: AboutData }) {
style={{ transformOrigin: 'left' }}
initial={{ scaleX: 0 }}
animate={{ scaleX: 1 }}
transition={{ duration: 0.8, delay: 1.2, ease: EASE_OUT }}
transition={{ duration: 0.3, delay: 1.2, ease: EASE_OUT }}
/>
</span>
</span>
@@ -91,7 +91,7 @@ function HeroSection({ data }: { data: AboutData }) {
<motion.p
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.5, ease: EASE_OUT }}
transition={{ duration: 0.3, delay: 0.5, ease: EASE_OUT }}
className="text-lg md:text-xl text-text-secondary max-w-2xl leading-relaxed mb-12 sm:mb-16"
>
{data.heroDescription || ''}
@@ -100,7 +100,7 @@ function HeroSection({ data }: { data: AboutData }) {
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.7, ease: EASE_OUT }}
transition={{ duration: 0.3, delay: 0.7, ease: EASE_OUT }}
className="flex flex-col sm:flex-row gap-4 sm:gap-6"
>
<CTAButton href={data.heroPrimaryCtaHref || '#'} className="min-h-[52px] touch-manipulation">
@@ -161,7 +161,7 @@ function WhoWeAreSection({ data }: { data: AboutData }) {
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-80px' }}
transition={{ duration: 0.8, ease: EASE_OUT }}
transition={{ duration: 0.3, ease: EASE_OUT }}
className="lg:col-span-5"
>
<div className="flex items-center gap-4 mb-6">
@@ -190,7 +190,7 @@ function WhoWeAreSection({ data }: { data: AboutData }) {
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-80px' }}
transition={{ duration: 0.8, delay: 0.15, ease: EASE_OUT }}
transition={{ duration: 0.3, delay: 0.15, ease: EASE_OUT }}
className="lg:col-span-7"
>
<div className="flex items-center gap-4 mb-6">
@@ -240,7 +240,7 @@ function MilestonesSection({ data }: { data: AboutData }) {
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-80px' }}
transition={{ duration: 0.8, ease: EASE_OUT }}
transition={{ duration: 0.3, ease: EASE_OUT }}
className="max-w-3xl mb-16 sm:mb-20 md:mb-24"
>
<div className="flex items-center gap-4 mb-6">
@@ -303,7 +303,7 @@ function CertificationsSection({ data }: { data: AboutData }) {
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-80px' }}
transition={{ duration: 0.8, ease: EASE_OUT }}
transition={{ duration: 0.3, ease: EASE_OUT }}
className="max-w-3xl"
>
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
@@ -336,7 +336,7 @@ function CertificationsSection({ data }: { data: AboutData }) {
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-80px' }}
transition={{ duration: 0.8, ease: EASE_OUT }}
transition={{ duration: 0.3, ease: EASE_OUT }}
>
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
Certifications
@@ -370,7 +370,7 @@ function CertificationsSection({ data }: { data: AboutData }) {
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-80px' }}
transition={{ duration: 0.8, delay: 0.15, ease: EASE_OUT }}
transition={{ duration: 0.3, delay: 0.15, ease: EASE_OUT }}
>
<div className="text-sm font-mono tracking-[0.2em] text-text-muted uppercase mb-6">
Partners
@@ -411,7 +411,7 @@ function CTASection({ data }: { data: AboutData }) {
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-80px' }}
transition={{ duration: 0.8, ease: EASE_OUT }}
transition={{ duration: 0.3, ease: EASE_OUT }}
className="max-w-3xl"
>
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-ink tracking-tight leading-[0.95] mb-8">