color

ساخت انیمیشن‌های رنگی برای تغییر تم، ایجاد حس‌وحال و جلب توجه

این Skill برای ساخت انیمیشن‌های رنگی در UI و ویدیو استفاده می‌شود؛ از تغییر Hue و Saturation تا تنظیم Brightness، Contrast و دمای رنگ. الگوهای آماده برای CSS، Framer Motion، GSAP و Remotion ارائه می‌کند.

با استفاده از توکن‌های استاندارد و راهنمای انتخاب شدت افکت، می‌توانید ترنزیشن تم، تغییر حالت فعال یا غیرفعال، پالس توجه و چرخه‌های رنگی را سریع و منسجم پیاده‌سازی کنید. الگوهای prefers-reduced-motion نیز برای دسترس‌پذیری در نظر گرفته شده‌اند.

چه چیزی می‌گیرید

• توکن‌های آماده برای Hue Shift، Saturation، Brightness و Contrast
• نمونه‌کدهای CSS، Framer Motion، GSAP و Remotion
• الگوهای ترنزیشن تم روشن و تاریک و تغییر دمای رنگ
• افکت‌های آماده برای grayscale، rainbow cycle، brightness flash و color pulse
• راهنمای پیاده‌سازی جایگزین‌های مناسب برای reduced motion

برای چه کاری خوب است

• طراحان و توسعه‌دهندگانی که برای UI تعاملی به انیمیشن رنگ نیاز دارند
• ساخت ترنزیشن بین تم‌های روشن و تاریک یا حالت‌های مختلف محصول
• ایجاد افکت‌های بصری برای ویدیو، موشن گرافیک و محتوای Remotion
• زمانی که به شدت‌های رنگی منسجم و قابل استفاده مجدد نیاز دارید

برای چه کاری نیست

• انتخاب پالت رنگ، طراحی هویت بصری یا بررسی کنتراست دسترسی‌پذیر
• انیمیشن‌های پیچیده هندسی، حرکت عناصر یا تایپوگرافی
• پروژه‌هایی که به تغییر رنگ واقعی فایل‌های تصویری به‌جای افکت زمان اجرا نیاز دارند

دربارهٔ این اسکیل

Color

Color property animations for dynamic visual effects.

Standards Reference

Quick Reference

Load from: tokens/color.tokens.json

Hue Shift Values

Saturation Levels

Brightness Levels

Contrast Levels

Selection Guide

What color effect?
│
├── HUE SHIFT → Change color entirely
│   ├── Subtle mood → shift.subtle (10deg)
│   ├── Noticeable → shift.small (30deg)
│   ├── Complement → shift.complement (180deg)
│   └── Rainbow cycle → shift.full (360deg)
│
├── SATURATION → Color intensity
│   ├── Grayscale → saturation.grayscale (0)
│   ├── Muted/disabled → saturation.muted (0.5)
│   ├── Normal → saturation.normal (1)
│   └── Vibrant/highlight → saturation.vibrant (1.3)
│
├── BRIGHTNESS → Light/dark
│   ├── Darken → brightness.dark (0.5)
│   ├── Normal → brightness.normal (1)
│   ├── Brighten → brightness.bright (1.2)
│   └── Flash/blown → brightness.blown (2)
│
├── CONTRAST → Dynamic range
│   ├── Flat/soft → contrast.flat (0.5)
│   ├── Normal → contrast.normal (1)
│   ├── Punchy → contrast.punchy (1.2)
│   └── Extreme → contrast.extreme (2)
│
└── TEMPERATURE → Warm/cool
    ├── Cool (blue tint) → temperature.cool (-20deg)
    ├── Neutral → temperature.neutral (0deg)
    └── Warm (orange tint) → temperature.warm (20deg)

Patterns

Hue Shift Animation

Animate color through hue rotation.

CSS:

.hue-shift {
  filter: hue-rotate(0deg);
  transition: filter 300ms ease-out; /* {motion.color.duration.standard} */
}

.hue-shift:hover {
  filter: hue-rotate(30deg); /* {motion.color.shift.small} */
}

/* Rainbow cycle */
@keyframes rainbowCycle {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg); /* {motion.color.shift.full} */
  }
}

.rainbow {
  animation: rainbowCycle 5s linear infinite; /* {motion.color.cycle.period-medium} */
}

Framer Motion:

import { motion, useMotionValue, useTransform, animate } from 'framer-motion';

const HueShift = () => {
  const hue = useMotionValue(0);
  const filter = useTransform(hue, h => `hue-rotate(${h}deg)`);

  return (
    <motion.div
      style={{ filter }}
      whileHover={{
        filter: 'hue-rotate(30deg)', // {motion.color.shift.small}
        transition: { duration: 0.3 } // {motion.color.duration.standard}
      }}
    />
  );
};

GSAP:

// Hue shift on hover
gsap.to(element, {
  filter: "hue-rotate(30deg)", // {motion.color.shift.small}
  duration: 0.3, // {motion.color.duration.standard}
  ease: "power2.out"
});

// Continuous rainbow cycle
gsap.to(element, {
  filter: "hue-rotate(360deg)",
  duration: 5, // {motion.color.cycle.period-medium}
  ease: "none",
  repeat: -1
});

Saturation Animation

Animate between color and grayscale.

CSS:

.desaturate {
  filter: saturate(1); /* {motion.color.saturation.normal} */
  transition: filter 300ms ease-out;
}

.desaturate.disabled {
  filter: saturate(0.5); /* {motion.color.saturation.muted} */
}

.desaturate.grayscale {
  filter: saturate(0); /* {motion.color.saturation.grayscale} */
}

/* Reveal saturation on hover */
.grayscale-hover {
  filter: saturate(0);
  transition: filter 300ms ease-out;
}

.grayscale-hover:hover {
  filter: saturate(1.3); /* {motion.color.saturation.vibrant} */
}

Framer Motion:

const SaturationReveal = () => (
  <motion.div
    initial={{ filter: 'saturate(0)' }} // grayscale
    whileHover={{
      filter: 'saturate(1.3)', // {motion.color.saturation.vibrant}
      transition: { duration: 0.3 }
    }}
  />
);

GSAP:

// Desaturate to grayscale
gsap.to(element, {
  filter: "saturate(0)", // {motion.color.saturation.grayscale}
  duration: 0.3,
  ease: "power2.out"
});

// Enhance saturation
gsap.to(element, {
  filter: "saturate(1.3)", // {motion.color.saturation.vibrant}
  duration: 0.3,
  ease: "power2.out"
});

Brightness Flash

Quick brightness increase for attention.

CSS:

@keyframes brightnessFlash {
  0%, 100% {
    filter: brightness(1); /* {motion.color.brightness.normal} */
  }
  50% {
    filter: brightness(2); /* {motion.color.brightness.blown} */
  }
}

.flash-brightness {
  animation: brightnessFlash 200ms ease-out; /* {motion.color.duration.quick} */
}

Framer Motion:

const BrightnessFlash = () => (
  <motion.div
    animate={{
      filter: [
        'brightness(1)', // normal
        'brightness(2)', // {motion.color.brightness.blown}
        'brightness(1)'  // back to normal
      ]
    }}
    transition={{
      duration: 0.2, // {motion.color.duration.quick}
      times: [0, 0.5, 1]
    }}
  />
);

GSAP:

gsap.timeline()
  .to(element, {
    filter: "brightness(2)", // {motion.color.brightness.blown}
    duration: 0.1
  })
  .to(element, {
    filter: "brightness(1)", // {motion.color.brightness.normal}
    duration: 0.1
  });

Theme Transition

Smooth transition between color schemes.

CSS:

:root {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  transition: background-color 500ms ease-out, color 500ms ease-out;
  /* {motion.color.duration.smooth} */
}

:root.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Framer Motion:

const ThemeTransition = ({ isDark }: { isDark: boolean }) => (
  <motion.div
    animate={{
      backgroundColor: isDark ? '#1a1a1a' : '#ffffff',
      color: isDark ? '#ffffff' : '#1a1a1a'
    }}
    transition={{
      duration: 0.5, // {motion.color.duration.smooth}
      ease: [0.2, 0, 0, 1] // M3 standard
    }}
  />
);

Color Temperature Shift

Warm/cool color adjustment.

CSS:

.warm-filter {
  filter: hue-rotate(20deg) saturate(1.1);
  /* {motion.color.temperature.warm} + slight saturation boost */
  transition: filter 500ms ease-out;
}

.cool-filter {
  filter: hue-rotate(-20deg) saturate(0.9);
  /* {motion.color.temperature.cool} + slight desaturation */
  transition: filter 500ms ease-out;
}

GSAP:

// Warm shift (sunset feel)
gsap.to(element, {
  filter: "hue-rotate(20deg) saturate(1.1)",
  duration: 0.5,
  ease: "power2.out"
});

// Cool shift (moonlight feel)
gsap.to(element, {
  filter: "hue-rotate(-20deg) saturate(0.9)",
  duration: 0.5,
  ease: "power2.out"
});

Contrast Animation

Dynamic contrast adjustment.

CSS:

.high-contrast {
  filter: contrast(1); /* {motion.color.contrast.normal} */
  transition: filter 300ms ease-out;
}

.high-contrast:hover {
  filter: contrast(1.2); /* {motion.color.contrast.punchy} */
}

/* Dramatic reveal */
@keyframes contrastReveal {
  from {
    filter: contrast(0.5); /* {motion.color.contrast.flat} */
  }
  to {
    filter: contrast(1.2); /* {motion.color.contrast.punchy} */
  }
}

.reveal-contrast {
  animation: contrastReveal 500ms ease-out forwards;
}

Combined Color Effects

Multiple color properties animated together.

CSS:

/* Vintage/sepia effect */
.vintage {
  filter:
    sepia(0.8) /* {motion.color.filter.sepia-intensity} */
    saturate(0.75) /* slightly desaturated */
    contrast(1.1); /* slightly punchy */
  transition: filter 500ms ease-out;
}

/* Dramatic mood */
.dramatic {
  filter:
    saturate(1.3) /* {motion.color.saturation.vibrant} */
    contrast(1.2) /* {motion.color.contrast.punchy} */
    brightness(0.9);
  transition: filter 300ms ease-out;
}

/* Faded/muted */
.faded {
  filter:
    saturate(0.5) /* {motion.color.saturation.muted} */
    contrast(0.75)
    brightness(1.1);
  transition: filter 300ms ease-out;
}

Framer Motion:

const colorPresets = {
  normal: { filter: 'saturate(1) contrast(1) brightness(1)' },
  vintage: { filter: 'sepia(0.8) saturate(0.75) contrast(1.1)' },
  dramatic: { filter: 'saturate(1.3) contrast(1.2) brightness(0.9)' },
  faded: { filter: 'saturate(0.5) contrast(0.75) brightness(1.1)' }
};

<motion.div
  variants={colorPresets}
  animate="dramatic"
  transition={{ duration: 0.3 }}
/>

Remotion Implementation

import { interpolate, useCurrentFrame } from 'remotion';

export const ColorTransition: React.FC = () => {
  const frame = useCurrentFrame();

  // Hue cycle over 150 frames (5s at 30fps)
  const hue = interpolate(frame, [0, 150], [0, 360]);

  // Saturation pulse
  const saturation = interpolate(
    frame % 60,
    [0, 30, 60],
    [1, 1.3, 1] // {motion.color.saturation.normal} to vibrant and back
  );

  return (
    <div
      style={{
        filter: `hue-rotate(${hue}deg) saturate(${saturation})`,
        width: '100%',
        height: '100%',
        background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)'
      }}
    />
  );
};

Reduced Motion

For prefers-reduced-motion: reduce:

Implementation:

@media (prefers-reduced-motion: reduce) {
  .hue-shift,
  .desaturate,
  .flash-brightness {
    transition: none;
    animation: none;
  }

  .rainbow {
    animation: none;
    /* Pick a static pleasant color instead */
  }

  /* Use non-animated feedback */
  .flash-brightness:active {
    box-shadow: 0 0 0 2px var(--accent-color);
  }
}

Cross-References

• See opacity/ for fade transitions combined with color
• See blur/ for color + blur combinations
• See stylization/ for color grade presets
• See transitions/ for theme transition patterns
• See compositing/ for blend mode effects
• See cinematic/ for color grading in video

References

• No additional references needed for this skill

دانلود ZIP