Add Smooth Card Entrance Animations Across the Dashboard

[krishkhinchi]

Description

Kepler’s dashboard should feel more dynamic by animating cards, charts, tables, and panels as they enter view. Replace abrupt rendering with subtle fade, slide, scale, and blur transitions that match the Mission Control aesthetic while staying fast and unobtrusive.

Objective

Build a reusable animation system for any component, with configurable type, delay, duration, and direction, plus support for reduced-motion preferences.

Functional Requirements

• Animate on viewport entry using Intersection Observer.
• Use staggered delays for grids.
• Provide reusable wrappers and sensible defaults.
• Keep animations GPU-friendly and lightweight.

Accessibility

Preserve focus order, screen-reader behavior, and respect prefers-reduced-motion.

Suggested Folder Structure

frontend/
└── src/
    ├── components/
    │   └── Animation/
    │       ├── AnimatedCard.tsx
    │       ├── FadeIn.tsx
    │       ├── SlideIn.tsx
    │       └── AnimationWrapper.tsx
    ├── hooks/
    │   └── useInViewAnimation.ts
    └── utils/
        └── animationConfig.ts

Bonus Features

Presets, hover micro-interactions, page transitions, and optional re-triggering on data refresh.

Acceptance Criteria

Cards animate smoothly, stagger correctly, remain accessible, and the project builds cleanly.

Labels

frontend ui/ux animation enhancement good first issue