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:
@@ -0,0 +1,79 @@
|
||||
"use client";
|
||||
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useEffect, useCallback, useRef, type ReactNode } from "react";
|
||||
|
||||
interface AnimatedModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
overlayClassName?: string;
|
||||
maxWidth?: string;
|
||||
}
|
||||
|
||||
export function AnimatedModal({
|
||||
open,
|
||||
onClose,
|
||||
children,
|
||||
className,
|
||||
overlayClassName,
|
||||
maxWidth = "max-w-xl",
|
||||
}: AnimatedModalProps) {
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleEscape = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
},
|
||||
[onClose],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
document.addEventListener("keydown", handleEscape);
|
||||
return () => document.removeEventListener("keydown", handleEscape);
|
||||
}, [open, handleEscape]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
{/* Overlay */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className={
|
||||
overlayClassName ??
|
||||
"absolute inset-0 bg-black/40 backdrop-blur-sm"
|
||||
}
|
||||
onClick={onClose}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Panel */}
|
||||
<motion.div
|
||||
ref={panelRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
initial={{ opacity: 0, scale: 0.97 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.97 }}
|
||||
transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
|
||||
className={[
|
||||
"relative z-10 w-full rounded-xl bg-white shadow-2xl dark:bg-gray-800",
|
||||
maxWidth,
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import { memo, useEffect, useRef, useState } from "react";
|
||||
|
||||
interface AnimatedNumberProps {
|
||||
value: number;
|
||||
duration?: number | undefined;
|
||||
decimals?: number | undefined;
|
||||
prefix?: string | undefined;
|
||||
suffix?: string | undefined;
|
||||
className?: string | undefined;
|
||||
}
|
||||
|
||||
function easeOutExpo(t: number): number {
|
||||
return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
|
||||
}
|
||||
|
||||
function formatNumber(n: number, decimals: number): string {
|
||||
return n.toLocaleString("de-DE", {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals,
|
||||
});
|
||||
}
|
||||
|
||||
function AnimatedNumberInner({
|
||||
value,
|
||||
duration = 800,
|
||||
decimals = 0,
|
||||
prefix = "",
|
||||
suffix = "",
|
||||
className,
|
||||
}: AnimatedNumberProps) {
|
||||
const [display, setDisplay] = useState(value);
|
||||
const prevValueRef = useRef(value);
|
||||
const rafRef = useRef<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const from = prevValueRef.current;
|
||||
const to = value;
|
||||
prevValueRef.current = to;
|
||||
|
||||
if (from === to) {
|
||||
setDisplay(to);
|
||||
return;
|
||||
}
|
||||
|
||||
const startTime = performance.now();
|
||||
|
||||
function tick(now: number) {
|
||||
const elapsed = now - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const eased = easeOutExpo(progress);
|
||||
const current = from + (to - from) * eased;
|
||||
|
||||
setDisplay(current);
|
||||
|
||||
if (progress < 1) {
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
} else {
|
||||
setDisplay(to);
|
||||
}
|
||||
}
|
||||
|
||||
rafRef.current = requestAnimationFrame(tick);
|
||||
|
||||
return () => {
|
||||
if (rafRef.current !== null) {
|
||||
cancelAnimationFrame(rafRef.current);
|
||||
}
|
||||
};
|
||||
}, [value, duration]);
|
||||
|
||||
return (
|
||||
<span className={className}>
|
||||
{prefix}
|
||||
{formatNumber(display, decimals)}
|
||||
{suffix}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export const AnimatedNumber = memo(AnimatedNumberInner);
|
||||
@@ -13,6 +13,7 @@ interface DraggableTableRowProps {
|
||||
onDrop: (draggedId: string) => void;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -27,11 +28,13 @@ export function DraggableTableRow({
|
||||
onDrop,
|
||||
children,
|
||||
className = "",
|
||||
style,
|
||||
}: DraggableTableRowProps) {
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
|
||||
return (
|
||||
<tr
|
||||
style={style}
|
||||
className={`${className} ${isDragOver ? "border-t-2 border-brand-400" : ""}`}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
"use client";
|
||||
|
||||
import { motion, type Variants } from "framer-motion";
|
||||
import { type ReactNode } from "react";
|
||||
|
||||
interface FadeInProps {
|
||||
children: ReactNode;
|
||||
delay?: number;
|
||||
duration?: number;
|
||||
direction?: "up" | "down" | "left" | "right" | "none";
|
||||
distance?: number;
|
||||
className?: string;
|
||||
once?: boolean;
|
||||
}
|
||||
|
||||
function getOffset(
|
||||
direction: FadeInProps["direction"],
|
||||
distance: number,
|
||||
): { x: number; y: number } {
|
||||
switch (direction) {
|
||||
case "up":
|
||||
return { x: 0, y: distance };
|
||||
case "down":
|
||||
return { x: 0, y: -distance };
|
||||
case "left":
|
||||
return { x: distance, y: 0 };
|
||||
case "right":
|
||||
return { x: -distance, y: 0 };
|
||||
case "none":
|
||||
default:
|
||||
return { x: 0, y: 0 };
|
||||
}
|
||||
}
|
||||
|
||||
export function FadeIn({
|
||||
children,
|
||||
delay = 0,
|
||||
duration = 0.3,
|
||||
direction = "up",
|
||||
distance = 12,
|
||||
className,
|
||||
once = true,
|
||||
}: FadeInProps) {
|
||||
const offset = getOffset(direction, distance);
|
||||
|
||||
const variants: Variants = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
x: offset.x,
|
||||
y: offset.y,
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration,
|
||||
delay,
|
||||
ease: [0.25, 0.1, 0.25, 1],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className={className}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once, margin: "-40px" }}
|
||||
variants={variants}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface ProgressRingProps {
|
||||
value: number;
|
||||
size?: number;
|
||||
strokeWidth?: number;
|
||||
color?: string;
|
||||
trackColor?: string;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
animated?: boolean;
|
||||
}
|
||||
|
||||
export function ProgressRing({
|
||||
value,
|
||||
size = 40,
|
||||
strokeWidth = 3,
|
||||
color = "var(--color-blue-500, #3b82f6)",
|
||||
trackColor = "var(--color-gray-200, #e5e7eb)",
|
||||
className,
|
||||
children,
|
||||
animated = true,
|
||||
}: ProgressRingProps) {
|
||||
const [mounted, setMounted] = useState(!animated);
|
||||
|
||||
useEffect(() => {
|
||||
if (!animated) return;
|
||||
// Trigger animation on next frame so the transition fires
|
||||
const raf = requestAnimationFrame(() => setMounted(true));
|
||||
return () => cancelAnimationFrame(raf);
|
||||
}, [animated]);
|
||||
|
||||
const clamped = Math.max(0, Math.min(100, value));
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const offset = circumference - (clamped / 100) * circumference;
|
||||
const center = size / 2;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative inline-flex items-center justify-center ${className ?? ""}`}
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
className="rotate-[-90deg]"
|
||||
>
|
||||
{/* Track */}
|
||||
<circle
|
||||
cx={center}
|
||||
cy={center}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke={trackColor}
|
||||
strokeWidth={strokeWidth}
|
||||
/>
|
||||
{/* Progress */}
|
||||
<circle
|
||||
cx={center}
|
||||
cy={center}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={mounted ? offset : circumference}
|
||||
style={{
|
||||
transition: animated
|
||||
? "stroke-dashoffset 600ms cubic-bezier(0.25, 0.1, 0.25, 1)"
|
||||
: "none",
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
{children != null && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import { Children, cloneElement, isValidElement, ReactNode } from "react";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* ShimmerSkeleton */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
interface ShimmerSkeletonProps {
|
||||
className?: string;
|
||||
width?: string | number;
|
||||
height?: string | number;
|
||||
rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
|
||||
variant?: "text" | "circle" | "card" | "rect";
|
||||
}
|
||||
|
||||
const roundedMap: Record<string, string> = {
|
||||
sm: "rounded-sm",
|
||||
md: "rounded-md",
|
||||
lg: "rounded-lg",
|
||||
xl: "rounded-xl",
|
||||
"2xl": "rounded-2xl",
|
||||
full: "rounded-full",
|
||||
};
|
||||
|
||||
const variantDefaults: Record<
|
||||
string,
|
||||
{ width?: string | number; height?: string | number; rounded: string }
|
||||
> = {
|
||||
text: { width: "100%", height: "1em", rounded: "rounded" },
|
||||
circle: { width: 40, height: 40, rounded: "rounded-full" },
|
||||
card: { width: "100%", height: 120, rounded: "rounded-xl" },
|
||||
rect: { width: "100%", height: 40, rounded: "rounded-md" },
|
||||
};
|
||||
|
||||
export function ShimmerSkeleton({
|
||||
className = "",
|
||||
width,
|
||||
height,
|
||||
rounded,
|
||||
variant = "rect",
|
||||
}: ShimmerSkeletonProps) {
|
||||
const defaults = variantDefaults[variant] ?? variantDefaults.rect;
|
||||
const resolvedWidth = width ?? defaults?.width ?? "100%";
|
||||
const resolvedHeight = height ?? defaults?.height ?? 40;
|
||||
const resolvedRounded = rounded
|
||||
? roundedMap[rounded] ?? "rounded-md"
|
||||
: defaults?.rounded ?? "rounded-md";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`shimmer-skeleton ${resolvedRounded} ${className}`}
|
||||
style={{
|
||||
width:
|
||||
typeof resolvedWidth === "number"
|
||||
? `${resolvedWidth}px`
|
||||
: resolvedWidth,
|
||||
height:
|
||||
typeof resolvedHeight === "number"
|
||||
? `${resolvedHeight}px`
|
||||
: resolvedHeight,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* ShimmerGroup – staggers children entrance by 50ms each */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
interface ShimmerGroupProps {
|
||||
children: ReactNode;
|
||||
staggerMs?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ShimmerGroup({
|
||||
children,
|
||||
staggerMs = 50,
|
||||
className,
|
||||
}: ShimmerGroupProps) {
|
||||
return (
|
||||
<div className={className}>
|
||||
{Children.map(children, (child, index) => {
|
||||
if (!isValidElement(child)) return child;
|
||||
return cloneElement(child as React.ReactElement<{ style?: React.CSSProperties }>, {
|
||||
style: {
|
||||
...(child.props as { style?: React.CSSProperties }).style,
|
||||
animationDelay: `${index * staggerMs}ms`,
|
||||
},
|
||||
});
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Inline <style> – injected once via a hidden element */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
const shimmerCSS = `
|
||||
.shimmer-skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--shimmer-bg, #e5e7eb);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.shimmer-skeleton {
|
||||
--shimmer-bg: #374151;
|
||||
--shimmer-highlight: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--shimmer-bg: #e5e7eb;
|
||||
--shimmer-highlight: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.dark .shimmer-skeleton {
|
||||
--shimmer-bg: #374151;
|
||||
--shimmer-highlight: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.shimmer-skeleton::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
110deg,
|
||||
transparent 25%,
|
||||
var(--shimmer-highlight) 50%,
|
||||
transparent 75%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Mount this once (e.g. in a layout) to inject shimmer styles,
|
||||
* or simply import ShimmerSkeleton — the styles tag is rendered
|
||||
* alongside the first skeleton automatically.
|
||||
*/
|
||||
export function ShimmerStyles() {
|
||||
return <style dangerouslySetInnerHTML={{ __html: shimmerCSS }} />;
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
"use client";
|
||||
|
||||
import { useId } from "react";
|
||||
|
||||
interface SparklineProps {
|
||||
data: number[];
|
||||
width?: number;
|
||||
height?: number;
|
||||
color?: string;
|
||||
fillOpacity?: number;
|
||||
strokeWidth?: number;
|
||||
className?: string;
|
||||
animated?: boolean;
|
||||
}
|
||||
|
||||
function buildPoints(
|
||||
data: number[],
|
||||
width: number,
|
||||
height: number,
|
||||
strokeWidth: number,
|
||||
): string {
|
||||
if (data.length === 0) return "";
|
||||
|
||||
const padding = strokeWidth;
|
||||
const drawWidth = width - padding * 2;
|
||||
const drawHeight = height - padding * 2;
|
||||
|
||||
const min = Math.min(...data);
|
||||
const max = Math.max(...data);
|
||||
const range = max - min || 1; // avoid division by zero when all values equal
|
||||
|
||||
return data
|
||||
.map((v, i) => {
|
||||
const x =
|
||||
data.length === 1
|
||||
? width / 2
|
||||
: padding + (i / (data.length - 1)) * drawWidth;
|
||||
const y = padding + drawHeight - ((v - min) / range) * drawHeight;
|
||||
return `${x},${y}`;
|
||||
})
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
function buildAreaPoints(
|
||||
linePoints: string,
|
||||
width: number,
|
||||
height: number,
|
||||
strokeWidth: number,
|
||||
dataLength: number,
|
||||
): string {
|
||||
if (!linePoints) return "";
|
||||
|
||||
const padding = strokeWidth;
|
||||
const drawWidth = width - padding * 2;
|
||||
const bottom = height - padding;
|
||||
|
||||
const lastX =
|
||||
dataLength === 1 ? width / 2 : padding + drawWidth;
|
||||
const firstX = dataLength === 1 ? width / 2 : padding;
|
||||
|
||||
return `${linePoints} ${lastX},${bottom} ${firstX},${bottom}`;
|
||||
}
|
||||
|
||||
export function Sparkline({
|
||||
data,
|
||||
width = 60,
|
||||
height = 20,
|
||||
color = "currentColor",
|
||||
fillOpacity = 0.1,
|
||||
strokeWidth = 1.5,
|
||||
className,
|
||||
animated = true,
|
||||
}: SparklineProps) {
|
||||
const id = useId();
|
||||
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
className={className}
|
||||
role="img"
|
||||
aria-label="No data"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const linePoints = buildPoints(data, width, height, strokeWidth);
|
||||
const areaPoints = buildAreaPoints(
|
||||
linePoints,
|
||||
width,
|
||||
height,
|
||||
strokeWidth,
|
||||
data.length,
|
||||
);
|
||||
|
||||
// Approximate path length for dash animation
|
||||
const approxLength = width * 2;
|
||||
|
||||
return (
|
||||
<>
|
||||
{animated && (
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@keyframes sparkline-draw-${CSS.escape(id)} {
|
||||
from { stroke-dashoffset: ${approxLength}; }
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
className={className}
|
||||
role="img"
|
||||
aria-label={`Sparkline: ${data.join(", ")}`}
|
||||
>
|
||||
{/* Area fill */}
|
||||
{data.length > 1 && (
|
||||
<polygon
|
||||
points={areaPoints}
|
||||
fill={color}
|
||||
opacity={fillOpacity}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Line */}
|
||||
{data.length === 1 ? (
|
||||
<circle
|
||||
cx={width / 2}
|
||||
cy={height / 2}
|
||||
r={strokeWidth}
|
||||
fill={color}
|
||||
/>
|
||||
) : (
|
||||
<polyline
|
||||
points={linePoints}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...(animated
|
||||
? {
|
||||
strokeDasharray: approxLength,
|
||||
strokeDashoffset: approxLength,
|
||||
style: {
|
||||
animation: `sparkline-draw-${CSS.escape(id)} 600ms ease-out forwards`,
|
||||
},
|
||||
}
|
||||
: {})}
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
"use client";
|
||||
|
||||
import { motion, type Variants } from "framer-motion";
|
||||
import { type ReactNode } from "react";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* StaggerList */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
interface StaggerListProps {
|
||||
children: ReactNode;
|
||||
staggerDelay?: number;
|
||||
className?: string;
|
||||
as?: "div" | "ul" | "ol" | "tbody";
|
||||
}
|
||||
|
||||
const containerVariants: (stagger: number) => Variants = (stagger) => ({
|
||||
hidden: {},
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: stagger,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const MotionComponents = {
|
||||
div: motion.div,
|
||||
ul: motion.ul,
|
||||
ol: motion.ol,
|
||||
tbody: motion.tbody,
|
||||
} as const;
|
||||
|
||||
export function StaggerList({
|
||||
children,
|
||||
staggerDelay = 0.03,
|
||||
className,
|
||||
as = "div",
|
||||
}: StaggerListProps) {
|
||||
const Component = MotionComponents[as];
|
||||
|
||||
return (
|
||||
<Component
|
||||
className={className}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={containerVariants(staggerDelay)}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* StaggerItem */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
interface StaggerItemProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const itemVariants: Variants = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
y: 8,
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.25,
|
||||
ease: [0.25, 0.1, 0.25, 1],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export function StaggerItem({ children, className }: StaggerItemProps) {
|
||||
return (
|
||||
<motion.div className={className} variants={itemVariants}>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user