Design System

Fitzpatrick Gradient

An animated gradient that shifts through the Fitzpatrick skin tone scale palette. Uses the design system gradient colors for inclusive, brand-aligned visuals.

Preview

The gradient animates horizontally through the Fitzpatrick palette. Respects prefers-reduced-motion.

Features

Fitzpatrick skin tone scale palette: #F1D8BB → #DEB87E → #925C41 → #2E2017
Aligned with design system --gradient token (design-system/tokens/colors.css)
CSS-only animation (background-position); no canvas or JS animation loop
Respects prefers-reduced-motion
Configurable height and duration

Usage

Import and use the FitzpatrickGradient component:

import FitzpatrickGradient from "@/components/animations/FitzpatrickGradient";

export default function MyComponent() {
  return (
    <FitzpatrickGradient
      height="6rem"
      duration={14}
      className="rounded-lg"
    />
  );
}