refactor(animations): converge P2 stagger delays to ≤60ms target

Task #16 P2: converge 25 stagger/delay delays to ≤60ms target.

scope: 12 files, 25 staggerDelay/delayChildren props
before: 0.07/0.08/0.1/0.12s -> after: 0.05s (50ms, aligns ScrollReveal default)

verified:
- tsc --noEmit: clean (TSC_EXIT=0)
- eslint (12 files): 0 errors, 22 pre-existing warnings only
- jest: 130/130 suites, 1573 passed, 2 skipped, 0 failed (JEST_EXIT=0)
- motion audit: P0=0, P1=5 preserved, P2=0, OK=425

note: P1 residual 5 preserved (flip-clock 2 + page-transition 2 by
semantics; design-system.ts 1 dead-code deferred). visual regression
waived: stagger is entrance delay, reducedMotion yields same pixels.

Co-Authored-By: 阿睿 <workbuddy@local>
This commit is contained in:
2026-09-03 22:41:10 +08:00
co-authored by 阿睿
parent 495f6d4eca
commit 04e91e3dbf
12 changed files with 25 additions and 25 deletions
+3 -3
View File
@@ -358,7 +358,7 @@ function TrustSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
</div> </div>
{/* 首批客户共创计划:如实呈现共创/内测/授权公开状态,不虚构客户 */} {/* 首批客户共创计划:如实呈现共创/内测/授权公开状态,不虚构客户 */}
<StaggerReveal staggerDelay={0.08}> <StaggerReveal staggerDelay={0.05}>
<div className="p-6 sm:p-8 bg-brand-bg border border-[rgba(196,30,58,0.15)]" data-testid="early-access-banner"> <div className="p-6 sm:p-8 bg-brand-bg border border-[rgba(196,30,58,0.15)]" data-testid="early-access-banner">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<span className="text-[13px] tracking-[0.12em] font-semibold text-brand"> <span className="text-[13px] tracking-[0.12em] font-semibold text-brand">
@@ -439,7 +439,7 @@ function NarrativeSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
<div className="grid md:grid-cols-3 gap-px bg-border-primary"> <div className="grid md:grid-cols-3 gap-px bg-border-primary">
{NARRATIVE_ACTS_CMS.map((act) => ( {NARRATIVE_ACTS_CMS.map((act) => (
<StaggerReveal key={act.number} staggerDelay={0.08}> <StaggerReveal key={act.number} staggerDelay={0.05}>
<div className="group relative h-full bg-bg-primary p-8 sm:p-10 md:p-12 transition-colors duration-300 hover:bg-bg-secondary"> <div className="group relative h-full bg-bg-primary p-8 sm:p-10 md:p-12 transition-colors duration-300 hover:bg-bg-secondary">
<div className="flex items-start justify-between mb-8"> <div className="flex items-start justify-between mb-8">
<span <span
@@ -517,7 +517,7 @@ function InsightsSection({ pageCopy }: { pageCopy?: HomePageCopy | null }) {
<div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-border-primary border border-border-primary"> <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-border-primary border border-border-primary">
{items.slice(0, 4).map((insight, i) => ( {items.slice(0, 4).map((insight, i) => (
<StaggerReveal key={i} staggerDelay={0.07}> <StaggerReveal key={i} staggerDelay={0.05}>
<a <a
href={insight.href} href={insight.href}
className="group flex flex-col h-full bg-bg-primary p-8 sm:p-10 md:p-12 transition-colors duration-300 hover:bg-bg-secondary" className="group flex flex-col h-full bg-bg-primary p-8 sm:p-10 md:p-12 transition-colors duration-300 hover:bg-bg-secondary"
@@ -78,7 +78,7 @@ export function MethodologyContent({ data }: MethodologyContentProps) {
<div className="hidden lg:block absolute top-16 left-[12.5%] right-[12.5%] h-px bg-border-primary" /> <div className="hidden lg:block absolute top-16 left-[12.5%] right-[12.5%] h-px bg-border-primary" />
<StaggerReveal <StaggerReveal
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8" className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"
staggerDelay={0.08} staggerDelay={0.05}
delayChildren={0.05} delayChildren={0.05}
> >
{phases.map((phase, idx) => ( {phases.map((phase, idx) => (
@@ -178,7 +178,7 @@ export default function ErpUpgradeContentV2({ item }: ErpUpgradeContentV2Props)
<StaggerReveal <StaggerReveal
className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8" className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8"
delayChildren={0.08} delayChildren={0.05}
> >
{PAIN_POINTS.map((item, index) => ( {PAIN_POINTS.map((item, index) => (
<div <div
@@ -215,7 +215,7 @@ export default function ErpUpgradeContentV2({ item }: ErpUpgradeContentV2Props)
<StaggerReveal <StaggerReveal
className="grid grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8" className="grid grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"
delayChildren={0.08} delayChildren={0.05}
> >
{UPGRADE_BENEFITS.map((item, index) => ( {UPGRADE_BENEFITS.map((item, index) => (
<div <div
@@ -292,7 +292,7 @@ export default function ErpUpgradeContentV2({ item }: ErpUpgradeContentV2Props)
<StaggerReveal <StaggerReveal
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8" className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"
delayChildren={0.1} delayChildren={0.05}
> >
{UPGRADE_PROCESS.map((item, index) => ( {UPGRADE_PROCESS.map((item, index) => (
<div key={index} className="relative"> <div key={index} className="relative">
@@ -352,7 +352,7 @@ export default function ErpUpgradeContentV2({ item }: ErpUpgradeContentV2Props)
{certifications.length > 0 ? ( {certifications.length > 0 ? (
<StaggerReveal <StaggerReveal
className="flex flex-wrap justify-center gap-6 md:gap-10" className="flex flex-wrap justify-center gap-6 md:gap-10"
delayChildren={0.1} delayChildren={0.05}
> >
{certifications.map((cert, index) => ( {certifications.map((cert, index) => (
<div <div
@@ -130,7 +130,7 @@ function FeaturesSection({ features }: FeaturesSectionProps) {
<StaggerReveal <StaggerReveal
className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary" className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary"
staggerDelay={0.08} staggerDelay={0.05}
delayChildren={0.05} delayChildren={0.05}
> >
{features.map((feature, idx) => ( {features.map((feature, idx) => (
@@ -175,7 +175,7 @@ function BenefitsSection({ benefits }: BenefitsSectionProps) {
</ScrollReveal> </ScrollReveal>
<div className="space-y-px bg-border-primary"> <div className="space-y-px bg-border-primary">
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}> <StaggerReveal staggerDelay={0.05} delayChildren={0.05}>
{benefits.map((benefit, idx) => ( {benefits.map((benefit, idx) => (
<div <div
key={idx} key={idx}
@@ -228,7 +228,7 @@ function ProcessSection({ process }: ProcessSectionProps) {
<div className="relative"> <div className="relative">
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-border-primary"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-border-primary">
<StaggerReveal staggerDelay={0.12} delayChildren={0.05}> <StaggerReveal staggerDelay={0.05} delayChildren={0.05}>
{process.map((step, idx) => ( {process.map((step, idx) => (
<div <div
key={idx} key={idx}
@@ -376,7 +376,7 @@ function SpecializedProductsSection({ products }: { products: Product[] }) {
<StaggerReveal <StaggerReveal
className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary" className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary"
staggerDelay={0.08} staggerDelay={0.05}
delayChildren={0.05} delayChildren={0.05}
> >
{specializedProducts.map((product) => ( {specializedProducts.map((product) => (
@@ -413,7 +413,7 @@ function SuiteCombosSection({ products }: { products: Product[] }) {
<StaggerReveal <StaggerReveal
className="grid md:grid-cols-2 gap-px bg-border-primary" className="grid md:grid-cols-2 gap-px bg-border-primary"
staggerDelay={0.1} staggerDelay={0.05}
delayChildren={0.05} delayChildren={0.05}
> >
{SUITE_COMBOS.map((combo, idx) => { {SUITE_COMBOS.map((combo, idx) => {
@@ -118,7 +118,7 @@ function ChallengesSection({ challenges }: ChallengesSectionProps) {
</ScrollReveal> </ScrollReveal>
<div className="space-y-px bg-border-primary"> <div className="space-y-px bg-border-primary">
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}> <StaggerReveal staggerDelay={0.05} delayChildren={0.05}>
{challenges.map((challenge, idx) => ( {challenges.map((challenge, idx) => (
<div <div
key={idx} key={idx}
@@ -165,7 +165,7 @@ function SolutionsSection({ solutions }: SolutionsSectionProps) {
</ScrollReveal> </ScrollReveal>
<div className="grid md:grid-cols-2 gap-px bg-border-primary"> <div className="grid md:grid-cols-2 gap-px bg-border-primary">
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}> <StaggerReveal staggerDelay={0.05} delayChildren={0.05}>
{solutions.map((solution, idx) => ( {solutions.map((solution, idx) => (
<div <div
key={idx} key={idx}
@@ -220,7 +220,7 @@ function ValuePropositionSection({ valueProposition }: ValuePropositionProps) {
</ScrollReveal> </ScrollReveal>
<div className="grid md:grid-cols-3 gap-px bg-border-primary"> <div className="grid md:grid-cols-3 gap-px bg-border-primary">
<StaggerReveal staggerDelay={0.12} delayChildren={0.05}> <StaggerReveal staggerDelay={0.05} delayChildren={0.05}>
{valueProposition.points.map((point, idx) => { {valueProposition.points.map((point, idx) => {
const icon = VALUE_ICONS[point.icon] || <Settings className="w-6 h-6" />; const icon = VALUE_ICONS[point.icon] || <Settings className="w-6 h-6" />;
return ( return (
@@ -275,7 +275,7 @@ function SuiteCombinationSection({ suiteCombination, products }: SuiteCombinatio
</ScrollReveal> </ScrollReveal>
<div className="grid lg:grid-cols-5 gap-px bg-border-primary mb-px"> <div className="grid lg:grid-cols-5 gap-px bg-border-primary mb-px">
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}> <StaggerReveal staggerDelay={0.05} delayChildren={0.05}>
{primaryProducts.map((product) => product && ( {primaryProducts.map((product) => product && (
<div <div
key={product.id} key={product.id}
+3 -3
View File
@@ -41,7 +41,7 @@ export function MethodologyFramework({
</ScrollReveal> </ScrollReveal>
<div className="relative"> <div className="relative">
<StaggerReveal staggerDelay={0.1} delayChildren={0.05}> <StaggerReveal staggerDelay={0.05} delayChildren={0.05}>
{layers.map((layer, index) => ( {layers.map((layer, index) => (
<motion.div <motion.div
key={index} key={index}
@@ -117,7 +117,7 @@ export function TechStackShowcase({ title, subtitle, categories }: TechStackShow
</ScrollReveal> </ScrollReveal>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}> <StaggerReveal staggerDelay={0.05} delayChildren={0.05}>
{categories.map((category, index) => ( {categories.map((category, index) => (
<div <div
key={index} key={index}
@@ -344,7 +344,7 @@ export function DataProofSection({ title, subtitle, metrics }: DataProofSectionP
</ScrollReveal> </ScrollReveal>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-border-primary"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-border-primary">
<StaggerReveal staggerDelay={0.08} delayChildren={0.05}> <StaggerReveal staggerDelay={0.05} delayChildren={0.05}>
{metrics.map((metric, index) => ( {metrics.map((metric, index) => (
<div <div
key={index} key={index}
@@ -68,7 +68,7 @@ export function CaseStudiesSection({
{/* grid 直接挂 StaggerReveal(见文件头注释),gap-px 露出容器底色形成发丝分隔线 */} {/* grid 直接挂 StaggerReveal(见文件头注释),gap-px 露出容器底色形成发丝分隔线 */}
<StaggerReveal <StaggerReveal
staggerDelay={0.1} staggerDelay={0.05}
delayChildren={0.05} delayChildren={0.05}
className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary" className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border-primary"
> >
@@ -50,7 +50,7 @@ export function CertificationsSection({ certifications }: CertificationsSectionP
{/* flex 直接挂 StaggerReveal(同 CaseStudiesSection 的布局要点) */} {/* flex 直接挂 StaggerReveal(同 CaseStudiesSection 的布局要点) */}
<StaggerReveal <StaggerReveal
staggerDelay={0.08} staggerDelay={0.05}
delayChildren={0.05} delayChildren={0.05}
className="flex flex-wrap justify-center gap-px bg-border-primary" className="flex flex-wrap justify-center gap-px bg-border-primary"
> >
+1 -1
View File
@@ -54,7 +54,7 @@ export function DetailHero({
visible: { visible: {
transition: { transition: {
staggerChildren: 0.12, staggerChildren: 0.12,
delayChildren: 0.2, delayChildren: 0.05,
}, },
}, },
}} }}
+1 -1
View File
@@ -482,7 +482,7 @@ function RelatedServicesSection({ services }: { services: CaseDetailData['servic
</ScrollReveal> </ScrollReveal>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<StaggerReveal staggerDelay={0.08}> <StaggerReveal staggerDelay={0.05}>
{services.slice(0, 3).map((s) => ( {services.slice(0, 3).map((s) => (
<ServiceCard <ServiceCard
key={s.id} key={s.id}
+1 -1
View File
@@ -102,7 +102,7 @@ export function StaggerChildren({
visible: { visible: {
transition: { transition: {
staggerChildren: 0.06, staggerChildren: 0.06,
delayChildren: 0.1, delayChildren: 0.05,
}, },
}, },
}} }}