73e8372b0e
- Bulk replace text-white → text-foreground across 116 component files (preserving text-white/ opacity variants) - Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow classes from all components - Replace --duration-normal/--duration-immersive/--duration-slow with --sumi-duration-normal/--sumi-duration-slow across 130+ files - Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out - Replace focus:ring-blue-500 → focus:ring-primary (4 files) - Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms (SUMI anti-pattern: no scale on hover) - Clean up stale kodo- references in comments Co-authored-by: Cursor <cursoragent@cursor.com>
33 lines
869 B
TypeScript
33 lines
869 B
TypeScript
/**
|
|
* ContentFadeIn — Transition premium skeleton → contenu.
|
|
* Fade-in 200ms avec --sumi-ease-out pour une transition fluide.
|
|
* Utilisé quand le contenu remplace un skeleton (React Query isLoading → data).
|
|
*/
|
|
|
|
import { motion } from 'framer-motion';
|
|
import type { ReactNode } from 'react';
|
|
|
|
const EASE_OUT = [0.33, 1, 0.68, 1] as const;
|
|
const DURATION_MS = 200;
|
|
|
|
export interface ContentFadeInProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
/** Transition fade-in 200ms (--sumi-duration-slow) avec --sumi-ease-out */
|
|
export function ContentFadeIn({ children, className }: ContentFadeInProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{
|
|
duration: DURATION_MS / 1000,
|
|
ease: EASE_OUT,
|
|
}}
|
|
className={className}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|