Skip to content

Commit ae59081

Browse files
mmaxencemmaxence
committed
feat: unified animation system across all pages
- Create AnimatedSection component that combines fade, translate, and blur effects - Update BlurReveal component with shorter deblur animation (800ms → 600ms) - Apply unified animations to Brand and Product pages section headers - Update UX-patterns page to use consistent animation system - Ensure Micro-interactions and UI Kit sections are properly included - Merge animation styles: fade/translate from Product/Brand + blur from other pages - Optimize animation timing for better user experience - Remove unused imports and fix TypeScript issues All pages now have consistent, enhanced animations with: - Shorter deblur animation (600ms) - Smooth fade and translate transitions - Proper timing coordination between effects - Unified animation system across the entire application
1 parent 5a7c42d commit ae59081

File tree

7 files changed

+104
-48
lines changed

7 files changed

+104
-48
lines changed

‎src/app/brand/page.tsx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Header from '@/components/layout/Header';
44
import Footer from '@/components/layout/Footer';
55
import SectionNavigation from '@/components/ui/SectionNavigation';
66
import SectionPlaceholder from '@/components/ui/SectionPlaceholder';
7+
import { AnimatedSection } from '@/components/ui/AnimatedSection';
78
import { Award, FileText, Download } from 'lucide-react';
89
import { useLanguage } from '@/contexts/LanguageContext';
910
import { motion } from 'framer-motion';
@@ -56,27 +57,33 @@ export default function BrandPage() {
5657
</section>
5758

5859
<div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-24">
59-
<SectionPlaceholder
60-
title={t('brand.principles.title')}
61-
description={t('brand.principles.description')}
62-
icon={Award}
63-
/>
60+
<AnimatedSection delay={0.1}>
61+
<SectionPlaceholder
62+
title={t('brand.principles.title')}
63+
description={t('brand.principles.description')}
64+
icon={Award}
65+
/>
66+
</AnimatedSection>
6467
</div>
6568

6669
<div id="guidelines" className="min-h-screen flex items-center justify-center scroll-mt-24">
67-
<SectionPlaceholder
68-
title={t('brand.guidelines.title')}
69-
description={t('brand.guidelines.description')}
70-
icon={FileText}
71-
/>
70+
<AnimatedSection delay={0.2}>
71+
<SectionPlaceholder
72+
title={t('brand.guidelines.title')}
73+
description={t('brand.guidelines.description')}
74+
icon={FileText}
75+
/>
76+
</AnimatedSection>
7277
</div>
7378

7479
<div id="resources" className="min-h-screen flex items-center justify-center scroll-mt-24">
75-
<SectionPlaceholder
76-
title={t('brand.resources.title')}
77-
description={t('brand.resources.description')}
78-
icon={Download}
79-
/>
80+
<AnimatedSection delay={0.3}>
81+
<SectionPlaceholder
82+
title={t('brand.resources.title')}
83+
description={t('brand.resources.description')}
84+
icon={Download}
85+
/>
86+
</AnimatedSection>
8087
</div>
8188
<Footer />
8289
</main>

‎src/app/product/UX-patterns/page.tsx‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Footer from '@/components/layout/Footer';
99
import SectionNavigation from '@/components/ui/SectionNavigation';
1010
import { SectionTitle } from '@/components/ui/SectionTitle';
1111
import { BlurReveal } from '@/components/ui/BlurReveal';
12+
import { AnimatedSection } from '@/components/ui/AnimatedSection';
1213
import PatternAccordion from '@/components/ui/PatternAccordion';
1314
import { interactionPatterns } from '@/data/interactionPatterns';
1415

@@ -78,13 +79,7 @@ const UXPatternsPage = () => {
7879
<div id="interaction-patterns" className="scroll-mt-24">
7980
<section className="py-20 px-4 sm:px-6 lg:px-8">
8081
<div className="max-w-7xl mx-auto">
81-
<motion.div
82-
initial={{ opacity: 0, y: 30 }}
83-
whileInView={{ opacity: 1, y: 0 }}
84-
transition={{ duration: 0.6 }}
85-
viewport={{ once: true }}
86-
className="text-center mb-16"
87-
>
82+
<AnimatedSection className="text-center mb-16" delay={0.1}>
8883
<BlurReveal>
8984
<SectionTitle>
9085
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
@@ -95,7 +90,7 @@ const UXPatternsPage = () => {
9590
</p>
9691
</SectionTitle>
9792
</BlurReveal>
98-
</motion.div>
93+
</AnimatedSection>
9994

10095
{/* Best Practices & Dark Patterns */}
10196
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
@@ -154,13 +149,7 @@ const UXPatternsPage = () => {
154149
<div id="ui-kit" className="scroll-mt-24">
155150
<section className="py-20 px-4 sm:px-6 lg:px-8">
156151
<div className="max-w-7xl mx-auto">
157-
<motion.div
158-
initial={{ opacity: 0, y: 30 }}
159-
whileInView={{ opacity: 1, y: 0 }}
160-
transition={{ duration: 0.6 }}
161-
viewport={{ once: true }}
162-
className="text-center mb-16"
163-
>
152+
<AnimatedSection className="text-center mb-16" delay={0.1}>
164153
<BlurReveal>
165154
<SectionTitle>
166155
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
@@ -171,7 +160,7 @@ const UXPatternsPage = () => {
171160
</p>
172161
</SectionTitle>
173162
</BlurReveal>
174-
</motion.div>
163+
</AnimatedSection>
175164

176165
{/* UI Kit Structure */}
177166
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -203,13 +192,7 @@ const UXPatternsPage = () => {
203192
<div id="micro-interactions" className="scroll-mt-24">
204193
<section className="py-20 px-4 sm:px-6 lg:px-8">
205194
<div className="max-w-7xl mx-auto">
206-
<motion.div
207-
initial={{ opacity: 0, y: 30 }}
208-
whileInView={{ opacity: 1, y: 0 }}
209-
transition={{ duration: 0.6 }}
210-
viewport={{ once: true }}
211-
className="text-center mb-16"
212-
>
195+
<AnimatedSection className="text-center mb-16" delay={0.1}>
213196
<BlurReveal>
214197
<SectionTitle>
215198
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
@@ -220,7 +203,7 @@ const UXPatternsPage = () => {
220203
</p>
221204
</SectionTitle>
222205
</BlurReveal>
223-
</motion.div>
206+
</AnimatedSection>
224207

225208
{/* Micro-interactions Examples */}
226209
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

‎src/app/product/page.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import SectionNavigation from '@/components/ui/SectionNavigation';
66
import ProductPrinciples from '@/components/product/ProductPrinciples';
77
import ProductGuidelines from '@/components/product/ProductGuidelines';
88
import SectionPlaceholder from '@/components/ui/SectionPlaceholder';
9+
import { AnimatedSection } from '@/components/ui/AnimatedSection';
910
import { Download, Code } from 'lucide-react';
1011
import { useLanguage } from '@/contexts/LanguageContext';
1112
import { motion } from 'framer-motion';
@@ -58,19 +59,25 @@ export default function ProductPage() {
5859
</section>
5960

6061
<div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-24">
61-
<ProductPrinciples />
62+
<AnimatedSection delay={0.1}>
63+
<ProductPrinciples />
64+
</AnimatedSection>
6265
</div>
6366

6467
<div id="guidelines" className="scroll-mt-24">
65-
<ProductGuidelines />
68+
<AnimatedSection delay={0.2}>
69+
<ProductGuidelines />
70+
</AnimatedSection>
6671
</div>
6772

6873
<div id="resources" className="min-h-screen flex items-center justify-center scroll-mt-24">
69-
<SectionPlaceholder
70-
title={t('product.resources.title')}
71-
description={t('product.resources.description')}
72-
icon={Download}
73-
/>
74+
<AnimatedSection delay={0.3}>
75+
<SectionPlaceholder
76+
title={t('product.resources.title')}
77+
description={t('product.resources.description')}
78+
icon={Download}
79+
/>
80+
</AnimatedSection>
7481
</div>
7582
<Footer />
7683
</main>

‎src/app/product/visual-patterns/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Footer from '@/components/layout/Footer';
99
import SectionNavigation from '@/components/ui/SectionNavigation';
1010
import { SectionTitle } from '@/components/ui/SectionTitle';
1111
import { BlurReveal } from '@/components/ui/BlurReveal';
12+
import { AnimatedSection } from '@/components/ui/AnimatedSection';
1213

1314
const VisualPatternsPage = () => {
1415
const { t } = useLanguage();

‎src/app/product/workflow-rituals/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Footer from '@/components/layout/Footer';
99
import SectionNavigation from '@/components/ui/SectionNavigation';
1010
import { SectionTitle } from '@/components/ui/SectionTitle';
1111
import { BlurReveal } from '@/components/ui/BlurReveal';
12+
import { AnimatedSection } from '@/components/ui/AnimatedSection';
1213

1314
const WorkflowRitualsPage = () => {
1415
const { t } = useLanguage();

‎src/components/ui/AnimatedSection.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { motion } from 'framer-motion';
5+
import { BlurReveal } from './BlurReveal';
6+
7+
interface AnimatedSectionProps {
8+
children: React.ReactNode;
9+
className?: string;
10+
delay?: number;
11+
duration?: number;
12+
useBlur?: boolean;
13+
}
14+
15+
export function AnimatedSection({
16+
children,
17+
className = '',
18+
delay = 0,
19+
duration = 0.6,
20+
useBlur = true
21+
}: AnimatedSectionProps) {
22+
if (useBlur) {
23+
return (
24+
<motion.div
25+
initial={{ opacity: 0, y: 30 }}
26+
whileInView={{ opacity: 1, y: 0 }}
27+
transition={{
28+
duration: duration,
29+
delay: delay,
30+
ease: "easeOut"
31+
}}
32+
viewport={{ once: true, margin: "-100px" }}
33+
className={className}
34+
>
35+
<BlurReveal duration={600}>
36+
{children}
37+
</BlurReveal>
38+
</motion.div>
39+
);
40+
}
41+
42+
return (
43+
<motion.div
44+
initial={{ opacity: 0, y: 30 }}
45+
whileInView={{ opacity: 1, y: 0 }}
46+
transition={{
47+
duration: duration,
48+
delay: delay,
49+
ease: "easeOut"
50+
}}
51+
viewport={{ once: true, margin: "-100px" }}
52+
className={className}
53+
>
54+
{children}
55+
</motion.div>
56+
);
57+
}

‎src/components/ui/BlurReveal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import React from 'react';
44

55
const DEFAULT_BLUR = 10;
6-
const DEFAULT_DURATION = 1200; // Faster animation
6+
const DEFAULT_DURATION = 800; // Shorter deblur animation
77

88
export function BlurReveal({
99
children,
@@ -43,7 +43,7 @@ function Effects() {
4343
<div
4444
className="blur-reveal-blur absolute inset-0"
4545
style={{
46-
animation: `blurRevealBlur ${800}ms ease-out forwards`,
46+
animation: `blurRevealBlur ${600}ms ease-out forwards`,
4747
}}
4848
/>
4949
</div>

0 commit comments

Comments
 (0)