matthieu/deckerr
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add some css animation to make the project prettier #7

Merged
matthieu merged 7 commits from feature/issue-6-add-some-css-animation-to-make-the-project-prettie into master 2025-10-23 16:43:10 +02:00
Conversation 0 Commits 7 Files Changed 7
+934 -653
matthieu commented 2025-10-23 16:20:50 +02:00
Owner
Copy Link
Copy Source

Fixes #6

Summary

Added comprehensive CSS animations throughout the application to enhance the user experience and make the interface more visually appealing.

Changes Made

New CSS Animations (src/index.css)

  • Fade-in animations with staggered delays for smooth content appearance
  • Slide-in animations from left and right for navigation elements
  • Scale-in animations for cards, modals, and forms
  • Pulse glow effects for active navigation items
  • Shimmer effects for loading states
  • Bounce-in animations for logos and headers
  • Float animation for subtle hover effects
  • Gradient shift animations for dynamic backgrounds
  • Card flip animations for interactive elements
  • Smooth rotate animations for loading spinners

Enhanced Hover Effects

  • Card hover with scale and shadow effects
  • Button ripple effects on click for better UX feedback
  • Glow-on-hover for interactive elements
  • Smooth transitions throughout the entire UI

Component Updates

  • DeckCard: Added card-hover and scale-in animations
  • MagicCard: Added fade-in and hover effects
  • Navigation: Added slide-in, bounce-in, and pulse-glow effects
  • LoginForm: Added glass-morphism, scale-in, and smooth transitions
  • App.tsx: Added fade-in animations for pages
  • DeckList: Updated loading spinner with custom animation

Visual Enhancements

  • Glass morphism effects on dropdowns and modals
  • Improved loading spinners with custom styling
  • Smooth transitions for all interactive elements
  • Button ripple effects for better UX feedback

Technical Details

All animations use CSS keyframes for optimal performance and are designed to enhance the user experience without being distracting. The animations follow modern design principles with:

  • Smooth easing functions
  • Appropriate duration timings
  • Hardware-accelerated transforms
  • Minimal impact on performance

🤖 Generated with Claude Code

Fixes #6 ## Summary Added comprehensive CSS animations throughout the application to enhance the user experience and make the interface more visually appealing. ## Changes Made ### New CSS Animations (src/index.css) - **Fade-in animations** with staggered delays for smooth content appearance - **Slide-in animations** from left and right for navigation elements - **Scale-in animations** for cards, modals, and forms - **Pulse glow effects** for active navigation items - **Shimmer effects** for loading states - **Bounce-in animations** for logos and headers - **Float animation** for subtle hover effects - **Gradient shift animations** for dynamic backgrounds - **Card flip animations** for interactive elements - **Smooth rotate animations** for loading spinners ### Enhanced Hover Effects - **Card hover** with scale and shadow effects - **Button ripple** effects on click for better UX feedback - **Glow-on-hover** for interactive elements - **Smooth transitions** throughout the entire UI ### Component Updates - **DeckCard**: Added card-hover and scale-in animations - **MagicCard**: Added fade-in and hover effects - **Navigation**: Added slide-in, bounce-in, and pulse-glow effects - **LoginForm**: Added glass-morphism, scale-in, and smooth transitions - **App.tsx**: Added fade-in animations for pages - **DeckList**: Updated loading spinner with custom animation ### Visual Enhancements - Glass morphism effects on dropdowns and modals - Improved loading spinners with custom styling - Smooth transitions for all interactive elements - Button ripple effects for better UX feedback ## Technical Details All animations use CSS keyframes for optimal performance and are designed to enhance the user experience without being distracting. The animations follow modern design principles with: - Smooth easing functions - Appropriate duration timings - Hardware-accelerated transforms - Minimal impact on performance 🤖 Generated with [Claude Code](https://claude.com/claude-code)
matthieu added 7 commits 2025-10-23 16:20:51 +02:00
Add comprehensive CSS animations and effects 3cc2676530
Update components with CSS animations c3cc4e59f6
Update components with CSS animations 80216ae478
Update components with CSS animations 91c237824a
Update components with CSS animations a76f8176f6
Update components with CSS animations 19898d9f5e
Update components with CSS animations 0475131b37
matthieu merged commit 96ba4c2809 into master 2025-10-23 16:43:10 +02:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
matthieu
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: matthieu/deckerr#7