| MD3 Easing and Duration |
https://m3.material.io/styles/motion/easing-and-duration |
motion-design-tokens, quick-reference |
2026-03-03 |
| MD3 Easing Tokens & Specs |
https://m3.material.io/styles/motion/easing-and-duration/tokens-specs |
motion-design-tokens |
2026-03-03 |
| MD3 State Layers |
https://m3.material.io/foundations/interaction/states/state-layers |
opacity-and-visual-hierarchy |
2026-03-03 |
| MD3 Elevation |
https://m3.material.io/styles/elevation/applying-elevation |
elevation-and-shadows |
2026-03-03 |
| Material Components Android Motion |
https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md |
motion-design-tokens |
2026-03-03 |
| NNGroup: Animation Duration |
https://www.nngroup.com/articles/animation-duration/ |
motion-design-tokens, entrance-animations |
2026-03-03 |
| Josh W. Comeau: Designing Shadows |
https://www.joshwcomeau.com/css/designing-shadows/ |
elevation-and-shadows |
2026-03-03 |
| Parker.mov: Dark Mode Shadows |
https://www.parker.mov/notes/good-dark-mode-shadows |
elevation-and-shadows |
2026-03-03 |
| Smashing Magazine: Scroll-Driven Animations |
https://www.smashingmagazine.com/2024/12/introduction-css-scroll-driven-animations/ |
entrance-animations |
2026-03-03 |
| Chrome: Scroll-Driven Animations |
https://developer.chrome.com/docs/css-ui/scroll-driven-animations |
entrance-animations, modern-css-craft-patterns |
2026-03-03 |
| web.dev: High-Performance CSS Animations |
https://web.dev/articles/animations-guide |
animation-performance |
2026-03-03 |
| Motion.dev: Animation Performance Tier List |
https://motion.dev/magazine/web-animation-performance-tier-list |
animation-performance |
2026-03-03 |
| Workday Canvas: Opacity Tokens |
https://canvas.workday.com/styles/tokens/opacity |
opacity-and-visual-hierarchy |
2026-03-03 |
| Carbon Design System: Disabled States |
https://carbondesignsystem.com/patterns/disabled-states/ |
opacity-and-visual-hierarchy |
2026-03-03 |
| Pope Tech: Accessible Animation |
https://blog.pope.tech/2025/12/08/design-accessible-animation-and-movement/ |
accessibility-and-motion |
2026-03-03 |
| MDN: prefers-reduced-motion |
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion |
accessibility-and-motion |
2026-03-03 |
| CSS-Tricks: prefers-reduced-motion |
https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/ |
accessibility-and-motion |
2026-03-03 |
| Piccalilli: Focus Ring Problem |
https://piccalil.li/blog/taking-a-shot-at-the-double-focus-ring-problem-using-modern-css/ |
accessibility-and-motion |
2026-03-03 |
| Chrome: View Transitions in 2025 |
https://developer.chrome.com/blog/view-transitions-in-2025 |
modern-css-craft-patterns |
2026-03-03 |
| web.dev: View Transitions Baseline |
https://web.dev/blog/same-document-view-transitions-are-now-baseline-newly-available |
modern-css-craft-patterns |
2026-03-03 |
| Bram.us: Scroll-Driven + @starting-style |
https://www.bram.us/2025/11/06/combining-scroll-driven-animations-with-starting-style/ |
modern-css-craft-patterns |
2026-03-03 |
| Frontend Hero: CSS Gradient Animation |
https://frontend-hero.com/how-to-animate-gradients-css |
modern-css-craft-patterns |
2026-03-03 |
| Apple HIG: Motion |
https://developer.apple.com/design/human-interface-guidelines/motion |
motion-design-tokens |
2026-03-03 |
| modern-css.md (companion guide) |
modern-css.md |
modern-css-craft-patterns |
2026-03-03 |
| Chrome: Performant Parallaxing |
https://developer.chrome.com/blog/performant-parallaxing |
parallax-effects |
2026-03-03 |
| CSS-Tricks: Scroll-Driven Parallax |
https://css-tricks.com/bringing-back-parallax-with-scroll-driven-css-animations/ |
parallax-effects |
2026-03-03 |
| CSS-Tricks: Scroll Timeline Parallax |
https://css-irl.info/scroll-timeline-parallax-effect/ |
parallax-effects |
2026-03-03 |
| Josh W. Comeau: Frosted Glass backdrop-filter |
https://www.joshwcomeau.com/css/backdrop-filter/ |
glassmorphism-and-frosted-glass |
2026-03-03 |
| MDN: backdrop-filter |
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter |
glassmorphism-and-frosted-glass |
2026-03-03 |
| MDN: prefers-reduced-transparency |
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-transparency |
glassmorphism-and-frosted-glass |
2026-03-03 |
| Chrome: prefers-reduced-transparency |
https://developer.chrome.com/blog/css-prefers-reduced-transparency |
glassmorphism-and-frosted-glass |
2026-03-03 |
| web.dev: CSS Blend Modes |
https://web.dev/learn/css/blend-modes |
blend-modes-and-visual-effects |
2026-03-03 |
| MDN: mix-blend-mode |
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode |
blend-modes-and-visual-effects |
2026-03-03 |
| CSS-Tricks: Knockout Text Techniques |
https://css-tricks.com/css-techniques-and-effects-for-knockout-text/ |
blend-modes-and-visual-effects, text-effects |
2026-03-03 |
| Emil Kowalski: The Magic of Clip-Path |
https://emilkowal.ski/ui/the-magic-of-clip-path |
clip-path-and-masks |
2026-03-03 |
| CSS-Tricks: Animating with Clip-Path |
https://css-tricks.com/animating-with-clip-path/ |
clip-path-and-masks |
2026-03-03 |
| Sara Soueidan: CSS and SVG Clipping |
https://www.sarasoueidan.com/blog/css-svg-clipping/ |
clip-path-and-masks |
2026-03-03 |
| web.dev: Speedy CSS Animated Gradient Text |
https://web.dev/articles/speedy-css-tip-animated-gradient-text |
text-effects |
2026-03-03 |
| MDN: background-clip |
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip |
text-effects, gradient-craft |
2026-03-03 |
| Polypane: CSS 3D Transform Examples |
https://polypane.app/css-3d-transform-examples/ |
3d-transforms |
2026-03-03 |
| David DeSandro: Intro to CSS 3D Transforms |
https://3dtransforms.desandro.com/card-flip |
3d-transforms |
2026-03-03 |
| Frontend.fyi: CSS 3D Perspective Animations |
https://www.frontend.fyi/tutorials/css-3d-perspective-animations |
3d-transforms |
2026-03-03 |
| Josh W. Comeau: Springs and Bounces in Native CSS |
https://www.joshwcomeau.com/animation/linear-timing-function/ |
spring-physics-and-advanced-easing |
2026-03-03 |
| Chrome: CSS linear() Easing Function |
https://developer.chrome.com/docs/css-ui/css-linear-easing-function |
spring-physics-and-advanced-easing |
2026-03-03 |
| PQINA: CSS Spring Animation with linear() |
https://pqina.nl/blog/css-spring-animation-with-linear-easing-function |
spring-physics-and-advanced-easing |
2026-03-03 |
| CSS Springs Generator |
https://www.kvin.me/css-springs/how-to-use |
spring-physics-and-advanced-easing |
2026-03-03 |
| Frontend Hero: CSS Skeleton Loaders |
https://frontend-hero.com/how-to-create-skeleton-loader |
skeleton-and-loading-states |
2026-03-03 |
| MDN: ARIA status role |
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role |
skeleton-and-loading-states |
2026-03-03 |
| CSS-Tricks: Grainy Gradients |
https://css-tricks.com/grainy-gradients/ |
gradient-craft |
2026-03-03 |
| CSS-Tricks: Gradient Borders |
https://css-tricks.com/gradient-borders-in-css/ |
gradient-craft |
2026-03-03 |
| WebKit Blog: background-clip border-area |
https://webkit.org/blog/16214/background-clip-border-area/ |
gradient-craft |
2026-03-03 |
| MDN: Container Queries |
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries |
container-queries-craft |
2026-03-03 |
| MDN: Container size and style queries |
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries |
container-queries-craft |
2026-03-03 |
| Smashing Magazine: What Are CSS Container Style Queries Good For? |
https://www.smashingmagazine.com/2024/06/what-are-css-container-style-queries-good-for/ |
container-queries-craft |
2026-03-03 |
| Josh W. Comeau: Container Queries Unleashed |
https://www.joshwcomeau.com/css/container-queries-unleashed/ |
container-queries-craft |
2026-03-03 |
| LogRocket: Container Queries in 2026 |
https://blog.logrocket.com/container-queries-2026/ |
container-queries-craft |
2026-03-03 |
| Modern CSS: Container Query Units and Fluid Typography |
https://moderncss.dev/container-query-units-and-fluid-typography/ |
container-queries-craft |
2026-03-03 |
| CSS-Tricks: Container Query Units cqi and cqb |
https://css-tricks.com/container-query-units-cqi-and-cqb/ |
container-queries-craft |
2026-03-03 |
| Magic UI: Border Beam |
https://magicui.design/docs/components/border-beam |
cinematic-effects |
2026-03-04 |
| CodeTV: Animated CSS Gradient Borders |
https://codetv.dev/blog/animated-css-gradient-border |
cinematic-effects |
2026-03-04 |
| ibelick: Animated Gradient Borders |
https://ibelick.com/blog/create-animated-gradient-borders-with-css |
cinematic-effects |
2026-03-04 |
| CSS-Tricks: How to Create Neon Text |
https://css-tricks.com/how-to-create-neon-text-with-css/ |
cinematic-effects |
2026-03-04 |
| DEV Community: Aurora UI with CSS |
https://dev.to/albertwalicki/aurora-ui-how-to-create-with-css-4b6g |
cinematic-effects |
2026-03-04 |
| Dalton Walsh: Aurora CSS Background Effect |
https://daltonwalsh.com/blog/aurora-css-background-effect/ |
cinematic-effects |
2026-03-04 |
| Motion.dev: Web Animation Performance Tier List |
https://motion.dev/blog/web-animation-performance-tier-list |
cinematic-effects, animation-performance |
2026-03-04 |
| MDN: CSS Performance Optimization |
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/CSS |
cinematic-effects |
2026-03-04 |
| Chrome: Carousels with CSS |
https://developer.chrome.com/blog/carousels-with-css |
scroll-snap-carousels |
2026-04-09 |
| MDN: CSS Scroll Snap |
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap |
scroll-snap-carousels |
2026-04-09 |
| web.dev: Building a carousel |
https://web.dev/patterns/components/carousel |
scroll-snap-carousels |
2026-04-09 |
| CSS-Tricks: CSS Scroll Snap |
https://css-tricks.com/css-scroll-snap/ |
scroll-snap-carousels |
2026-04-09 |