diff --git a/submissions/examples/feat-accordion-animation-library-harrshita/README.md b/submissions/examples/feat-accordion-animation-library-harrshita/README.md new file mode 100644 index 0000000000..8d6b9f3898 --- /dev/null +++ b/submissions/examples/feat-accordion-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Accordion CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `accordion` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-accordion-animation-library-harrshita/demo.html b/submissions/examples/feat-accordion-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..59ebc133be --- /dev/null +++ b/submissions/examples/feat-accordion-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-accordion Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-accordion-animation-library-harrshita/style.css b/submissions/examples/feat-accordion-animation-library-harrshita/style.css new file mode 100644 index 0000000000..79d5c6f91f --- /dev/null +++ b/submissions/examples/feat-accordion-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: accordion CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-accordion-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-accordion-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-accordion-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-accordion-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-accordion-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-accordion-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-accordion-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-accordion-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-accordion-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-accordion-anim-harrshita *, + .ease-accordion-anim-harrshita *::before, + .ease-accordion-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-alert-animation-library-harrshita/README.md b/submissions/examples/feat-alert-animation-library-harrshita/README.md new file mode 100644 index 0000000000..0ce10bd0e3 --- /dev/null +++ b/submissions/examples/feat-alert-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Alert CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `alert` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-alert-animation-library-harrshita/demo.html b/submissions/examples/feat-alert-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..c33176c369 --- /dev/null +++ b/submissions/examples/feat-alert-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-alert Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-alert-animation-library-harrshita/style.css b/submissions/examples/feat-alert-animation-library-harrshita/style.css new file mode 100644 index 0000000000..dea0bcddb6 --- /dev/null +++ b/submissions/examples/feat-alert-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: alert CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-alert-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-alert-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-alert-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-alert-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-alert-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-alert-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-alert-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-alert-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-alert-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-alert-anim-harrshita *, + .ease-alert-anim-harrshita *::before, + .ease-alert-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-avatar-animation-library-harrshita/README.md b/submissions/examples/feat-avatar-animation-library-harrshita/README.md new file mode 100644 index 0000000000..95a49918f1 --- /dev/null +++ b/submissions/examples/feat-avatar-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Avatar CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `avatar` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-avatar-animation-library-harrshita/demo.html b/submissions/examples/feat-avatar-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..ae2a116832 --- /dev/null +++ b/submissions/examples/feat-avatar-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-avatar Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-avatar-animation-library-harrshita/style.css b/submissions/examples/feat-avatar-animation-library-harrshita/style.css new file mode 100644 index 0000000000..7403728be2 --- /dev/null +++ b/submissions/examples/feat-avatar-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: avatar CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-avatar-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-avatar-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-avatar-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-avatar-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-avatar-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-avatar-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-avatar-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-avatar-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-avatar-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-avatar-anim-harrshita *, + .ease-avatar-anim-harrshita *::before, + .ease-avatar-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-badge-animation-library-harrshita/README.md b/submissions/examples/feat-badge-animation-library-harrshita/README.md new file mode 100644 index 0000000000..219f27b74b --- /dev/null +++ b/submissions/examples/feat-badge-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Badge CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `badge` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-badge-animation-library-harrshita/demo.html b/submissions/examples/feat-badge-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..364eaed6b8 --- /dev/null +++ b/submissions/examples/feat-badge-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-badge Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-badge-animation-library-harrshita/style.css b/submissions/examples/feat-badge-animation-library-harrshita/style.css new file mode 100644 index 0000000000..b93eb0b21d --- /dev/null +++ b/submissions/examples/feat-badge-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: badge CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-badge-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-badge-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-badge-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-badge-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-badge-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-badge-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-badge-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-badge-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-badge-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-badge-anim-harrshita *, + .ease-badge-anim-harrshita *::before, + .ease-badge-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-breadcrumb-animation-library-harrshita/README.md b/submissions/examples/feat-breadcrumb-animation-library-harrshita/README.md new file mode 100644 index 0000000000..1aadba1abf --- /dev/null +++ b/submissions/examples/feat-breadcrumb-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Breadcrumb CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `breadcrumb` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-breadcrumb-animation-library-harrshita/demo.html b/submissions/examples/feat-breadcrumb-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..010e187dad --- /dev/null +++ b/submissions/examples/feat-breadcrumb-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-breadcrumb Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-breadcrumb-animation-library-harrshita/style.css b/submissions/examples/feat-breadcrumb-animation-library-harrshita/style.css new file mode 100644 index 0000000000..7e9ca53d57 --- /dev/null +++ b/submissions/examples/feat-breadcrumb-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: breadcrumb CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-breadcrumb-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-breadcrumb-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-breadcrumb-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-breadcrumb-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-breadcrumb-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-breadcrumb-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-breadcrumb-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-breadcrumb-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-breadcrumb-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-breadcrumb-anim-harrshita *, + .ease-breadcrumb-anim-harrshita *::before, + .ease-breadcrumb-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-button-animation-library-harrshita/README.md b/submissions/examples/feat-button-animation-library-harrshita/README.md new file mode 100644 index 0000000000..bac8148f5c --- /dev/null +++ b/submissions/examples/feat-button-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Button CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `button` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-button-animation-library-harrshita/demo.html b/submissions/examples/feat-button-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..d306029654 --- /dev/null +++ b/submissions/examples/feat-button-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-button Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-button-animation-library-harrshita/style.css b/submissions/examples/feat-button-animation-library-harrshita/style.css new file mode 100644 index 0000000000..79864be971 --- /dev/null +++ b/submissions/examples/feat-button-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: button CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-button-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-button-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-button-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-button-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-button-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-button-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-button-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-button-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-button-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-button-anim-harrshita *, + .ease-button-anim-harrshita *::before, + .ease-button-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-card-animation-library-harrshita/README.md b/submissions/examples/feat-card-animation-library-harrshita/README.md new file mode 100644 index 0000000000..3edb869aac --- /dev/null +++ b/submissions/examples/feat-card-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Card CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `card` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-card-animation-library-harrshita/demo.html b/submissions/examples/feat-card-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..50d6884fc3 --- /dev/null +++ b/submissions/examples/feat-card-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-card Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-card-animation-library-harrshita/style.css b/submissions/examples/feat-card-animation-library-harrshita/style.css new file mode 100644 index 0000000000..7ea29d01e0 --- /dev/null +++ b/submissions/examples/feat-card-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: card CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-card-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-card-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-card-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-card-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-card-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-card-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-card-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-card-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-card-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-card-anim-harrshita *, + .ease-card-anim-harrshita *::before, + .ease-card-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-carousel-animation-library-harrshita/README.md b/submissions/examples/feat-carousel-animation-library-harrshita/README.md new file mode 100644 index 0000000000..b5a538ac2d --- /dev/null +++ b/submissions/examples/feat-carousel-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Carousel CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `carousel` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-carousel-animation-library-harrshita/demo.html b/submissions/examples/feat-carousel-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..c1b6bb3335 --- /dev/null +++ b/submissions/examples/feat-carousel-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-carousel Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-carousel-animation-library-harrshita/style.css b/submissions/examples/feat-carousel-animation-library-harrshita/style.css new file mode 100644 index 0000000000..bf71288ca5 --- /dev/null +++ b/submissions/examples/feat-carousel-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: carousel CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-carousel-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-carousel-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-carousel-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-carousel-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-carousel-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-carousel-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-carousel-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-carousel-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-carousel-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-carousel-anim-harrshita *, + .ease-carousel-anim-harrshita *::before, + .ease-carousel-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-checkbox-animation-library-harrshita/README.md b/submissions/examples/feat-checkbox-animation-library-harrshita/README.md new file mode 100644 index 0000000000..8900852d72 --- /dev/null +++ b/submissions/examples/feat-checkbox-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Checkbox CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `checkbox` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-checkbox-animation-library-harrshita/demo.html b/submissions/examples/feat-checkbox-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..3bfc10a5ef --- /dev/null +++ b/submissions/examples/feat-checkbox-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-checkbox Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-checkbox-animation-library-harrshita/style.css b/submissions/examples/feat-checkbox-animation-library-harrshita/style.css new file mode 100644 index 0000000000..bbc02750db --- /dev/null +++ b/submissions/examples/feat-checkbox-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: checkbox CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-checkbox-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-checkbox-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-checkbox-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-checkbox-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-checkbox-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-checkbox-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-checkbox-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-checkbox-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-checkbox-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-checkbox-anim-harrshita *, + .ease-checkbox-anim-harrshita *::before, + .ease-checkbox-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-chip-animation-library-harrshita/README.md b/submissions/examples/feat-chip-animation-library-harrshita/README.md new file mode 100644 index 0000000000..9682a5b11c --- /dev/null +++ b/submissions/examples/feat-chip-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Chip CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `chip` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-chip-animation-library-harrshita/demo.html b/submissions/examples/feat-chip-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..1bc88b1b69 --- /dev/null +++ b/submissions/examples/feat-chip-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-chip Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-chip-animation-library-harrshita/style.css b/submissions/examples/feat-chip-animation-library-harrshita/style.css new file mode 100644 index 0000000000..2b5ebd844c --- /dev/null +++ b/submissions/examples/feat-chip-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: chip CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-chip-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-chip-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-chip-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-chip-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-chip-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-chip-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-chip-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-chip-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-chip-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-chip-anim-harrshita *, + .ease-chip-anim-harrshita *::before, + .ease-chip-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-code-block-animation-library-harrshita/README.md b/submissions/examples/feat-code-block-animation-library-harrshita/README.md new file mode 100644 index 0000000000..1bfe9d95d6 --- /dev/null +++ b/submissions/examples/feat-code-block-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Code-Block CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `code-block` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-code-block-animation-library-harrshita/demo.html b/submissions/examples/feat-code-block-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..c8667ba2eb --- /dev/null +++ b/submissions/examples/feat-code-block-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-code-block Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-code-block-animation-library-harrshita/style.css b/submissions/examples/feat-code-block-animation-library-harrshita/style.css new file mode 100644 index 0000000000..f8d2730507 --- /dev/null +++ b/submissions/examples/feat-code-block-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: code-block CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-code-block-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-code-block-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-code-block-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-code-block-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-code-block-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-code-block-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-code-block-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-code-block-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-code-block-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-code-block-anim-harrshita *, + .ease-code-block-anim-harrshita *::before, + .ease-code-block-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-code-inline-animation-library-harrshita/README.md b/submissions/examples/feat-code-inline-animation-library-harrshita/README.md new file mode 100644 index 0000000000..9e0116f482 --- /dev/null +++ b/submissions/examples/feat-code-inline-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Code-Inline CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `code-inline` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-code-inline-animation-library-harrshita/demo.html b/submissions/examples/feat-code-inline-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..4b99480f99 --- /dev/null +++ b/submissions/examples/feat-code-inline-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-code-inline Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-code-inline-animation-library-harrshita/style.css b/submissions/examples/feat-code-inline-animation-library-harrshita/style.css new file mode 100644 index 0000000000..90a0b16de4 --- /dev/null +++ b/submissions/examples/feat-code-inline-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: code-inline CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-code-inline-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-code-inline-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-code-inline-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-code-inline-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-code-inline-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-code-inline-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-code-inline-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-code-inline-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-code-inline-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-code-inline-anim-harrshita *, + .ease-code-inline-anim-harrshita *::before, + .ease-code-inline-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-dialog-animation-library-harrshita/README.md b/submissions/examples/feat-dialog-animation-library-harrshita/README.md new file mode 100644 index 0000000000..9428997ec9 --- /dev/null +++ b/submissions/examples/feat-dialog-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Dialog CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `dialog` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-dialog-animation-library-harrshita/demo.html b/submissions/examples/feat-dialog-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..e7dc97824a --- /dev/null +++ b/submissions/examples/feat-dialog-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-dialog Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-dialog-animation-library-harrshita/style.css b/submissions/examples/feat-dialog-animation-library-harrshita/style.css new file mode 100644 index 0000000000..670bccf5d2 --- /dev/null +++ b/submissions/examples/feat-dialog-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: dialog CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-dialog-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-dialog-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-dialog-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-dialog-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-dialog-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-dialog-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-dialog-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-dialog-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-dialog-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-dialog-anim-harrshita *, + .ease-dialog-anim-harrshita *::before, + .ease-dialog-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-divider-animation-library-harrshita/README.md b/submissions/examples/feat-divider-animation-library-harrshita/README.md new file mode 100644 index 0000000000..f00d9466ff --- /dev/null +++ b/submissions/examples/feat-divider-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Divider CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `divider` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-divider-animation-library-harrshita/demo.html b/submissions/examples/feat-divider-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..6eb14ecba6 --- /dev/null +++ b/submissions/examples/feat-divider-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-divider Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-divider-animation-library-harrshita/style.css b/submissions/examples/feat-divider-animation-library-harrshita/style.css new file mode 100644 index 0000000000..c0e51d01ec --- /dev/null +++ b/submissions/examples/feat-divider-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: divider CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-divider-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-divider-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-divider-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-divider-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-divider-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-divider-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-divider-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-divider-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-divider-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-divider-anim-harrshita *, + .ease-divider-anim-harrshita *::before, + .ease-divider-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-drawer-animation-library-harrshita/README.md b/submissions/examples/feat-drawer-animation-library-harrshita/README.md new file mode 100644 index 0000000000..90aeb320a3 --- /dev/null +++ b/submissions/examples/feat-drawer-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Drawer CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `drawer` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-drawer-animation-library-harrshita/demo.html b/submissions/examples/feat-drawer-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..856f24cdd9 --- /dev/null +++ b/submissions/examples/feat-drawer-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-drawer Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-drawer-animation-library-harrshita/style.css b/submissions/examples/feat-drawer-animation-library-harrshita/style.css new file mode 100644 index 0000000000..20b0d81423 --- /dev/null +++ b/submissions/examples/feat-drawer-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: drawer CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-drawer-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-drawer-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-drawer-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-drawer-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-drawer-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-drawer-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-drawer-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-drawer-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-drawer-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-drawer-anim-harrshita *, + .ease-drawer-anim-harrshita *::before, + .ease-drawer-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-dropdown-animation-library-harrshita/README.md b/submissions/examples/feat-dropdown-animation-library-harrshita/README.md new file mode 100644 index 0000000000..d2cc063639 --- /dev/null +++ b/submissions/examples/feat-dropdown-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Dropdown CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `dropdown` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-dropdown-animation-library-harrshita/demo.html b/submissions/examples/feat-dropdown-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..0694d7726b --- /dev/null +++ b/submissions/examples/feat-dropdown-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-dropdown Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-dropdown-animation-library-harrshita/style.css b/submissions/examples/feat-dropdown-animation-library-harrshita/style.css new file mode 100644 index 0000000000..e06e68b5b0 --- /dev/null +++ b/submissions/examples/feat-dropdown-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: dropdown CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-dropdown-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-dropdown-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-dropdown-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-dropdown-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-dropdown-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-dropdown-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-dropdown-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-dropdown-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-dropdown-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-dropdown-anim-harrshita *, + .ease-dropdown-anim-harrshita *::before, + .ease-dropdown-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-form-animation-library-harrshita/README.md b/submissions/examples/feat-form-animation-library-harrshita/README.md new file mode 100644 index 0000000000..6455f7baeb --- /dev/null +++ b/submissions/examples/feat-form-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Form CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `form` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-form-animation-library-harrshita/demo.html b/submissions/examples/feat-form-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..b51f95259d --- /dev/null +++ b/submissions/examples/feat-form-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-form Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-form-animation-library-harrshita/style.css b/submissions/examples/feat-form-animation-library-harrshita/style.css new file mode 100644 index 0000000000..cc70a069a9 --- /dev/null +++ b/submissions/examples/feat-form-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: form CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-form-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-form-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-form-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-form-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-form-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-form-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-form-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-form-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-form-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-form-anim-harrshita *, + .ease-form-anim-harrshita *::before, + .ease-form-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-icon-animation-library-harrshita/README.md b/submissions/examples/feat-icon-animation-library-harrshita/README.md new file mode 100644 index 0000000000..55dbd481f4 --- /dev/null +++ b/submissions/examples/feat-icon-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Icon CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `icon` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-icon-animation-library-harrshita/demo.html b/submissions/examples/feat-icon-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..e6555c8434 --- /dev/null +++ b/submissions/examples/feat-icon-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-icon Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-icon-animation-library-harrshita/style.css b/submissions/examples/feat-icon-animation-library-harrshita/style.css new file mode 100644 index 0000000000..937a6e70cc --- /dev/null +++ b/submissions/examples/feat-icon-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: icon CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-icon-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-icon-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-icon-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-icon-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-icon-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-icon-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-icon-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-icon-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-icon-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-icon-anim-harrshita *, + .ease-icon-anim-harrshita *::before, + .ease-icon-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-image-animation-library-harrshita/README.md b/submissions/examples/feat-image-animation-library-harrshita/README.md new file mode 100644 index 0000000000..d6c4792fa9 --- /dev/null +++ b/submissions/examples/feat-image-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Image CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `image` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-image-animation-library-harrshita/demo.html b/submissions/examples/feat-image-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..29380beefd --- /dev/null +++ b/submissions/examples/feat-image-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-image Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-image-animation-library-harrshita/style.css b/submissions/examples/feat-image-animation-library-harrshita/style.css new file mode 100644 index 0000000000..fa03a6283a --- /dev/null +++ b/submissions/examples/feat-image-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: image CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-image-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-image-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-image-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-image-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-image-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-image-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-image-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-image-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-image-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-image-anim-harrshita *, + .ease-image-anim-harrshita *::before, + .ease-image-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-input-animation-library-harrshita/README.md b/submissions/examples/feat-input-animation-library-harrshita/README.md new file mode 100644 index 0000000000..504b8f0d4c --- /dev/null +++ b/submissions/examples/feat-input-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Input CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `input` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-input-animation-library-harrshita/demo.html b/submissions/examples/feat-input-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..edbf5437c6 --- /dev/null +++ b/submissions/examples/feat-input-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-input Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-input-animation-library-harrshita/style.css b/submissions/examples/feat-input-animation-library-harrshita/style.css new file mode 100644 index 0000000000..28237f4d98 --- /dev/null +++ b/submissions/examples/feat-input-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: input CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-input-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-input-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-input-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-input-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-input-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-input-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-input-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-input-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-input-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-input-anim-harrshita *, + .ease-input-anim-harrshita *::before, + .ease-input-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-kbd-animation-library-harrshita/README.md b/submissions/examples/feat-kbd-animation-library-harrshita/README.md new file mode 100644 index 0000000000..fc6fe5c804 --- /dev/null +++ b/submissions/examples/feat-kbd-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Kbd CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `kbd` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-kbd-animation-library-harrshita/demo.html b/submissions/examples/feat-kbd-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..1ac7729d8b --- /dev/null +++ b/submissions/examples/feat-kbd-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-kbd Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-kbd-animation-library-harrshita/style.css b/submissions/examples/feat-kbd-animation-library-harrshita/style.css new file mode 100644 index 0000000000..5c82fd86bd --- /dev/null +++ b/submissions/examples/feat-kbd-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: kbd CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-kbd-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-kbd-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-kbd-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-kbd-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-kbd-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-kbd-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-kbd-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-kbd-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-kbd-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-kbd-anim-harrshita *, + .ease-kbd-anim-harrshita *::before, + .ease-kbd-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-link-animation-library-harrshita/README.md b/submissions/examples/feat-link-animation-library-harrshita/README.md new file mode 100644 index 0000000000..637c0559b7 --- /dev/null +++ b/submissions/examples/feat-link-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Link CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `link` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-link-animation-library-harrshita/demo.html b/submissions/examples/feat-link-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..8103f4cde1 --- /dev/null +++ b/submissions/examples/feat-link-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-link Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-link-animation-library-harrshita/style.css b/submissions/examples/feat-link-animation-library-harrshita/style.css new file mode 100644 index 0000000000..68ad27154a --- /dev/null +++ b/submissions/examples/feat-link-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: link CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-link-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-link-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-link-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-link-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-link-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-link-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-link-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-link-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-link-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-link-anim-harrshita *, + .ease-link-anim-harrshita *::before, + .ease-link-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-list-animation-library-harrshita/README.md b/submissions/examples/feat-list-animation-library-harrshita/README.md new file mode 100644 index 0000000000..d894a3ed32 --- /dev/null +++ b/submissions/examples/feat-list-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# List CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `list` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-list-animation-library-harrshita/demo.html b/submissions/examples/feat-list-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..8048750de4 --- /dev/null +++ b/submissions/examples/feat-list-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-list Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-list-animation-library-harrshita/style.css b/submissions/examples/feat-list-animation-library-harrshita/style.css new file mode 100644 index 0000000000..dfc97f0355 --- /dev/null +++ b/submissions/examples/feat-list-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: list CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-list-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-list-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-list-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-list-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-list-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-list-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-list-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-list-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-list-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-list-anim-harrshita *, + .ease-list-anim-harrshita *::before, + .ease-list-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-loader-animation-library-harrshita/README.md b/submissions/examples/feat-loader-animation-library-harrshita/README.md new file mode 100644 index 0000000000..632f339596 --- /dev/null +++ b/submissions/examples/feat-loader-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Loader CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `loader` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-loader-animation-library-harrshita/demo.html b/submissions/examples/feat-loader-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..ed7abbeb45 --- /dev/null +++ b/submissions/examples/feat-loader-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-loader Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-loader-animation-library-harrshita/style.css b/submissions/examples/feat-loader-animation-library-harrshita/style.css new file mode 100644 index 0000000000..a3c1e48713 --- /dev/null +++ b/submissions/examples/feat-loader-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: loader CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-loader-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-loader-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-loader-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-loader-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-loader-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-loader-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-loader-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-loader-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-loader-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-loader-anim-harrshita *, + .ease-loader-anim-harrshita *::before, + .ease-loader-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-menu-animation-library-harrshita/README.md b/submissions/examples/feat-menu-animation-library-harrshita/README.md new file mode 100644 index 0000000000..7548df5259 --- /dev/null +++ b/submissions/examples/feat-menu-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Menu CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `menu` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-menu-animation-library-harrshita/demo.html b/submissions/examples/feat-menu-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..62ccfd3daf --- /dev/null +++ b/submissions/examples/feat-menu-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-menu Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-menu-animation-library-harrshita/style.css b/submissions/examples/feat-menu-animation-library-harrshita/style.css new file mode 100644 index 0000000000..302d202622 --- /dev/null +++ b/submissions/examples/feat-menu-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: menu CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-menu-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-menu-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-menu-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-menu-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-menu-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-menu-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-menu-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-menu-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-menu-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-menu-anim-harrshita *, + .ease-menu-anim-harrshita *::before, + .ease-menu-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-modal-animation-library-harrshita/README.md b/submissions/examples/feat-modal-animation-library-harrshita/README.md new file mode 100644 index 0000000000..b9171af73d --- /dev/null +++ b/submissions/examples/feat-modal-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Modal CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `modal` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-modal-animation-library-harrshita/demo.html b/submissions/examples/feat-modal-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..dc747eff8e --- /dev/null +++ b/submissions/examples/feat-modal-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-modal Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-modal-animation-library-harrshita/style.css b/submissions/examples/feat-modal-animation-library-harrshita/style.css new file mode 100644 index 0000000000..acbd4ecd46 --- /dev/null +++ b/submissions/examples/feat-modal-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: modal CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-modal-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-modal-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-modal-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-modal-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-modal-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-modal-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-modal-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-modal-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-modal-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-modal-anim-harrshita *, + .ease-modal-anim-harrshita *::before, + .ease-modal-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-navbar-animation-library-harrshita/README.md b/submissions/examples/feat-navbar-animation-library-harrshita/README.md new file mode 100644 index 0000000000..32dc11b6fa --- /dev/null +++ b/submissions/examples/feat-navbar-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Navbar CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `navbar` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-navbar-animation-library-harrshita/demo.html b/submissions/examples/feat-navbar-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..4a41e3d3fd --- /dev/null +++ b/submissions/examples/feat-navbar-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-navbar Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-navbar-animation-library-harrshita/style.css b/submissions/examples/feat-navbar-animation-library-harrshita/style.css new file mode 100644 index 0000000000..ba8d32a249 --- /dev/null +++ b/submissions/examples/feat-navbar-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: navbar CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-navbar-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-navbar-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-navbar-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-navbar-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-navbar-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-navbar-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-navbar-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-navbar-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-navbar-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-navbar-anim-harrshita *, + .ease-navbar-anim-harrshita *::before, + .ease-navbar-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-pagination-animation-library-harrshita/README.md b/submissions/examples/feat-pagination-animation-library-harrshita/README.md new file mode 100644 index 0000000000..e5fe442cb5 --- /dev/null +++ b/submissions/examples/feat-pagination-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Pagination CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `pagination` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-pagination-animation-library-harrshita/demo.html b/submissions/examples/feat-pagination-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..aa0866f1e8 --- /dev/null +++ b/submissions/examples/feat-pagination-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-pagination Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-pagination-animation-library-harrshita/style.css b/submissions/examples/feat-pagination-animation-library-harrshita/style.css new file mode 100644 index 0000000000..8fff542861 --- /dev/null +++ b/submissions/examples/feat-pagination-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: pagination CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-pagination-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-pagination-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-pagination-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-pagination-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-pagination-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-pagination-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-pagination-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-pagination-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-pagination-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-pagination-anim-harrshita *, + .ease-pagination-anim-harrshita *::before, + .ease-pagination-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-popover-animation-library-harrshita/README.md b/submissions/examples/feat-popover-animation-library-harrshita/README.md new file mode 100644 index 0000000000..a3121e405f --- /dev/null +++ b/submissions/examples/feat-popover-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Popover CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `popover` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-popover-animation-library-harrshita/demo.html b/submissions/examples/feat-popover-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..29cefce7e7 --- /dev/null +++ b/submissions/examples/feat-popover-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-popover Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-popover-animation-library-harrshita/style.css b/submissions/examples/feat-popover-animation-library-harrshita/style.css new file mode 100644 index 0000000000..8dbdea1959 --- /dev/null +++ b/submissions/examples/feat-popover-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: popover CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-popover-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-popover-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-popover-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-popover-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-popover-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-popover-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-popover-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-popover-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-popover-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-popover-anim-harrshita *, + .ease-popover-anim-harrshita *::before, + .ease-popover-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/submissions/examples/feat-progress-animation-library-harrshita/README.md b/submissions/examples/feat-progress-animation-library-harrshita/README.md new file mode 100644 index 0000000000..3950f13c95 --- /dev/null +++ b/submissions/examples/feat-progress-animation-library-harrshita/README.md @@ -0,0 +1,19 @@ +# Progress CSS Animation & Keyframe Library + +## Description +This PR adds a comprehensive CSS Animation and Keyframe library to the `progress` component. It provides five production-ready keyframe animations (fade-in-up, scale-in, pulse, spin, shimmer) with stagger delay utilities, all using only `transform` and `opacity` to remain on the GPU compositor thread. + +All animations are fully accessible and automatically disable when users have `prefers-reduced-motion: reduce` enabled. + +## Keyframe Animations +- `ease-fade-in-up`: Smooth entrance animation from below. +- `ease-scale-in`: Spring-physics scale-in entrance with overshoot. +- `ease-pulse`: Breathing pulse for loading or attention states. +- `ease-spin`: Continuous rotation for loaders/spinners. +- `ease-shimmer`: Horizontal shimmer for skeleton loading states. + +## Changes +- `style.css`: 90+ lines with keyframes, utility classes, stagger delays, and reduced-motion override. +- `demo.html`: Six-panel demo showcasing all five animations. +- `README.md`: Describes the animation library and accessibility considerations. +\nFixes #55621\n \ No newline at end of file diff --git a/submissions/examples/feat-progress-animation-library-harrshita/demo.html b/submissions/examples/feat-progress-animation-library-harrshita/demo.html new file mode 100644 index 0000000000..cb2eb42569 --- /dev/null +++ b/submissions/examples/feat-progress-animation-library-harrshita/demo.html @@ -0,0 +1,99 @@ + + + + + + Animation Library - EaseMotion CSS + + + + +
+

ease-progress Animation Library

+ +
+ All animations use only transform and opacity to stay on the GPU compositor thread. They automatically disable when the user has prefers-reduced-motion: reduce enabled. +
+ +
+
+ +
+

Fade Up

+
✨
+
+ +
+

Scale In

+
🎯
+
+ +
+

Pulse

+
💓
+
+ +
+

Spin

+
⚙️
+
+ +
+

Shimmer

+
+
+ +
+

Stagger

+
🚀
+
+ +
+
+
+ + diff --git a/submissions/examples/feat-progress-animation-library-harrshita/style.css b/submissions/examples/feat-progress-animation-library-harrshita/style.css new file mode 100644 index 0000000000..fa1e7461f2 --- /dev/null +++ b/submissions/examples/feat-progress-animation-library-harrshita/style.css @@ -0,0 +1,124 @@ +/* + * Feature: progress CSS Animation & Keyframe Optimization + * Provides a rich, hardware-accelerated animation library using + * @keyframes and CSS custom properties for duration/easing control. + * + * All animations respect prefers-reduced-motion for accessibility. + * Uses will-change, transform, and opacity exclusively to remain + * on the GPU compositor thread (no layout/paint thrashing). + * + * WCAG 2.1 SC 2.3.3: Animation from Interactions (Level AAA) + */ + +/* ===== Animation Token Definitions ===== */ +.ease-progress-anim-harrshita { + --anim-duration-fast: 200ms; + --anim-duration-base: 400ms; + --anim-duration-slow: 700ms; + --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); + --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --anim-ease-decel: cubic-bezier(0, 0, 0.2, 1); + --anim-ease-accel: cubic-bezier(0.4, 0, 1, 1); + + position: relative; + box-sizing: border-box; + background: linear-gradient(135deg, #2563eb, #4f46e5); + color: #ffffff; + border-radius: 12px; + padding: 2rem; + font-family: system-ui, sans-serif; + font-size: 1rem; + line-height: 1.5; + overflow: hidden; +} + +/* ===== Keyframe: Fade In Up ===== */ +@keyframes ease-fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== Keyframe: Scale In (Spring) ===== */ +@keyframes ease-scale-in { + from { + opacity: 0; + transform: scale(0.85); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ===== Keyframe: Shimmer (Skeleton Loading) ===== */ +@keyframes ease-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +/* ===== Keyframe: Pulse ===== */ +@keyframes ease-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.7; transform: scale(0.97); } +} + +/* ===== Keyframe: Spin ===== */ +@keyframes ease-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* ===== Animation Utility Classes ===== */ +.ease-progress-anim-harrshita .anim-fade-up { + animation: ease-fade-in-up var(--anim-duration-base) var(--anim-ease-decel) both; + will-change: opacity, transform; +} + +.ease-progress-anim-harrshita .anim-scale-in { + animation: ease-scale-in var(--anim-duration-base) var(--anim-ease-spring) both; + will-change: opacity, transform; +} + +.ease-progress-anim-harrshita .anim-pulse { + animation: ease-pulse 2s var(--anim-ease-smooth) infinite; + will-change: opacity, transform; +} + +.ease-progress-anim-harrshita .anim-spin { + animation: ease-spin 1s linear infinite; + will-change: transform; + display: inline-block; +} + +.ease-progress-anim-harrshita .anim-shimmer { + background: linear-gradient( + 90deg, + rgba(255,255,255,0.06) 25%, + rgba(255,255,255,0.18) 50%, + rgba(255,255,255,0.06) 75% + ); + background-size: 200% 100%; + animation: ease-shimmer 1.5s linear infinite; +} + +/* ===== Stagger delay utilities ===== */ +.ease-progress-anim-harrshita .delay-1 { animation-delay: 100ms; } +.ease-progress-anim-harrshita .delay-2 { animation-delay: 200ms; } +.ease-progress-anim-harrshita .delay-3 { animation-delay: 300ms; } + +/* ===== ACCESSIBILITY: Respect prefers-reduced-motion ===== */ +@media (prefers-reduced-motion: reduce) { + .ease-progress-anim-harrshita *, + .ease-progress-anim-harrshita *::before, + .ease-progress-anim-harrshita *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +}