feat: Sprint 1 — Alive Enterprise animation foundation

Animation primitives (6 new components):
- AnimatedNumber: count-up with easeOutExpo, de-DE locale formatting
- ShimmerSkeleton: diagonal gradient sweep replacing animate-pulse
- FadeIn: framer-motion viewport-triggered fade + slide
- StaggerList/StaggerItem: staggered children entrance
- Sparkline: pure SVG inline trend chart with draw-in animation
- ProgressRing: animated circular progress with CSS transitions

Sidebar & page transitions:
- Sliding nav indicator (framer-motion layoutId animation)
- Icon frame hover glow (brand-color shadow)
- Smooth section collapse/expand (AnimatePresence height animation)
- PageTransition wrapper (fade-up on route change)
- AnimatedModal component (scale + fade with custom bezier)
- Notification badge bounce on count increase

Dashboard animations:
- StatCards: AnimatedNumber count-up + staggered FadeIn + budget color tinting
- WidgetContainer: fade-slide-up on mount
- Chargeability: animated percentages + inline utilization bars
- ProjectTable/MyProjects: animated numbers + staggered row entrance

Shimmer skeletons & table animations:
- Replaced animate-pulse across 20+ loading states with shimmer gradient
- Staggered row entrance (fadeSlideIn) on Resources, Projects, Allocations tables
- hover-lift utility class for subtle card/row elevation on hover
- Content-shaped skeletons (avatars, text bars, badges)

Light mode surface depth:
- Mesh gradient page background (subtle accent-tinted corners)
- Enhanced card shadows (two-layer depth)
- Sidebar glassmorphism upgrade (bg-white/60, backdrop-blur-2xl, saturate-150)
- Toolbar sticky backdrop blur
- Enhanced focus ring with brand-color glow

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
2026-03-19 00:48:55 +01:00
parent 407266bc28
commit ae92923c28
48 changed files with 1301 additions and 287 deletions
@@ -5,6 +5,7 @@ import Link from "next/link";
import { trpc } from "~/lib/trpc/client.js";
import type { WidgetProps } from "../widget-registry.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { FadeIn } from "~/components/ui/FadeIn.js";
const STATUS_DOT: Record<string, string> = {
ACTIVE: "bg-green-500",
@@ -83,8 +84,10 @@ export function MyProjectsWidget({ config }: WidgetProps) {
Favorites
<InfoTooltip content="Projects you have starred. Click the star icon on any project to add or remove it from your favorites." />
</div>
{favoriteProjects.map((p) => (
<ProjectRow key={p.id} project={p} isFavorite onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
{favoriteProjects.map((p, i) => (
<FadeIn key={p.id} delay={i * 0.03} direction="up">
<ProjectRow project={p} isFavorite onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
</FadeIn>
))}
</div>
)}
@@ -95,8 +98,10 @@ export function MyProjectsWidget({ config }: WidgetProps) {
Responsible
<InfoTooltip content="Projects where you are listed as the responsible person. These are automatically shown based on your user name." />
</div>
{responsibleProjects.map((p) => (
<ProjectRow key={p.id} project={p} isFavorite={false} onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
{responsibleProjects.map((p, i) => (
<FadeIn key={p.id} delay={i * 0.03} direction="up">
<ProjectRow project={p} isFavorite={false} onToggleFavorite={() => toggleMutation.mutate({ projectId: p.id })} />
</FadeIn>
))}
</div>
)}