easemotion-css 1.0.0

package/components/cards.css

@@ -0,0 +1,210 @@
+/* ============================================================
+   EaseMotion CSS — cards.css
+   Composable card components with hover animations
+   ============================================================ */
+
+/* ── Base Card ─────────────────────────────────────────────── */
+
+.ease-card {
+  background-color: var(--ease-color-surface);
+  border: 1px solid var(--ease-color-neutral-200);
+  border-radius: var(--ease-radius-lg);
+  padding: var(--ease-space-6);
+  overflow: hidden;
+  position: relative;
+}
+
+/* ── Card Sections ─────────────────────────────────────────── */
+
+.ease-card-header {
+  padding-bottom: var(--ease-space-4);
+  margin-bottom: var(--ease-space-4);
+  border-bottom: 1px solid var(--ease-color-neutral-100);
+}
+
+.ease-card-body {
+  flex: 1;
+}
+
+.ease-card-footer {
+  padding-top: var(--ease-space-4);
+  margin-top: var(--ease-space-4);
+  border-top: 1px solid var(--ease-color-neutral-100);
+  display: flex;
+  align-items: center;
+  gap: var(--ease-space-3);
+}
+
+/* Card title & subtitle helpers */
+.ease-card-title {
+  font-size: var(--ease-text-2xl);
+  font-weight: 700;
+  color: var(--ease-color-neutral-900);
+  margin-bottom: var(--ease-space-1);
+  line-height: var(--ease-leading-tight);
+}
+
+.ease-card-subtitle {
+  font-size: var(--ease-text-sm);
+  color: var(--ease-color-muted);
+  font-weight: 400;
+}
+
+.ease-card-body p:last-child {
+  margin-bottom: 0;
+}
+
+/* ── Shadow Modifier ───────────────────────────────────────── */
+
+.ease-card-shadow {
+  box-shadow: var(--ease-shadow-lg);
+  border-color: transparent;
+}
+
+/* ── Hover Card ────────────────────────────────────────────── */
+
+.ease-card-hover {
+  cursor: pointer;
+  transition:
+    transform    var(--ease-speed-medium) var(--ease-ease),
+    box-shadow   var(--ease-speed-medium) var(--ease-ease),
+    border-color var(--ease-speed-medium) var(--ease-ease);
+  will-change: transform, box-shadow;
+}
+
+.ease-card-hover:hover {
+  transform: translateY(-6px);
+  box-shadow: var(--ease-shadow-xl);
+  border-color: var(--ease-color-primary-light);
+}
+
+/* ── Glow Hover Card ───────────────────────────────────────── */
+
+.ease-card-glow {
+  transition:
+    box-shadow var(--ease-speed-medium) var(--ease-ease),
+    border-color var(--ease-speed-medium) var(--ease-ease);
+}
+
+.ease-card-glow:hover {
+  box-shadow: var(--ease-glow-primary), var(--ease-shadow-lg);
+  border-color: var(--ease-color-primary-light);
+}
+
+/* ── Flat Card (no border) ─────────────────────────────────── */
+
+.ease-card-flat {
+  border-color: transparent;
+  background-color: var(--ease-color-neutral-100);
+}
+
+/* ── Outlined Card ─────────────────────────────────────────── */
+
+.ease-card-outlined {
+  background-color: transparent;
+  border: 2px solid var(--ease-color-neutral-200);
+}
+
+/* ── Glass Card (glassmorphism) ────────────────────────────── */
+
+.ease-card-glass {
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  color: #ffffff;
+}
+
+/* ── Color Accent Cards ────────────────────────────────────── */
+
+/* Left border accent */
+.ease-card-accent {
+  border-left: 4px solid var(--ease-color-primary);
+}
+
+.ease-card-accent-success {
+  border-left: 4px solid var(--ease-color-success);
+}
+
+.ease-card-accent-danger {
+  border-left: 4px solid var(--ease-color-danger);
+}
+
+.ease-card-accent-warning {
+  border-left: 4px solid var(--ease-color-warning);
+}
+
+/* ── Image Card ────────────────────────────────────────────── */
+
+.ease-card-image {
+  padding: 0;
+}
+
+.ease-card-image .ease-card-img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  display: block;
+  border-radius: var(--ease-radius-lg) var(--ease-radius-lg) 0 0;
+}
+
+.ease-card-image .ease-card-body {
+  padding: var(--ease-space-6);
+}
+
+/* ── Compact Card ──────────────────────────────────────────── */
+
+.ease-card-compact {
+  padding: var(--ease-space-4);
+}
+
+/* ── Horizontal Card ───────────────────────────────────────── */
+
+.ease-card-horizontal {
+  display: flex;
+  flex-direction: row;
+  gap: var(--ease-space-4);
+  align-items: flex-start;
+  padding: var(--ease-space-4);
+}
+
+/* ── Info / Alert-style Cards ──────────────────────────────── */
+
+.ease-card-info {
+  background-color: rgba(108, 99, 255, 0.06);
+  border-color: var(--ease-color-primary-light);
+  color: var(--ease-color-primary-dark);
+}
+
+.ease-card-success-bg {
+  background-color: rgba(34, 197, 94, 0.06);
+  border-color: var(--ease-color-success-light);
+}
+
+.ease-card-danger-bg {
+  background-color: rgba(239, 68, 68, 0.06);
+  border-color: var(--ease-color-danger-light);
+}
+
+/* ── Stat Card ─────────────────────────────────────────────── */
+
+.ease-card-stat {
+  text-align: center;
+  padding: var(--ease-space-8);
+}
+
+.ease-card-stat .ease-stat-value {
+  font-size: var(--ease-text-4xl);
+  font-weight: 700;
+  color: var(--ease-color-primary);
+  line-height: 1;
+  margin-bottom: var(--ease-space-2);
+}
+
+.ease-card-stat .ease-stat-label {
+  font-size: var(--ease-text-sm);
+  color: var(--ease-color-muted);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}

package/core/animations.css

@@ -0,0 +1,336 @@
+/* ============================================================
+   EaseMotion CSS — animations.css
+   Production-ready, composable animation classes
+
+   Integration log:
+   Classes marked [INTEGRATED] were originally submitted by
+   community contributors inside submissions/examples/,
+   then standardized and merged here by the maintainer.
+   ============================================================ */
+
+/* ── Keyframe Definitions ──────────────────────────────────── */
+
+@keyframes ease-kf-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes ease-kf-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+@keyframes ease-kf-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ease-kf-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ease-kf-slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-32px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes ease-kf-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(32px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes ease-kf-bounce {
+  0%, 100% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(-20px);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+@keyframes ease-kf-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.45; }
+}
+
+@keyframes ease-kf-rotate {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes ease-kf-ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes ease-kf-shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 50%, 90% { transform: translateX(-6px); }
+  30%, 70%      { transform: translateX(6px); }
+}
+
+@keyframes ease-kf-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes ease-kf-flip {
+  from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
+  to   { transform: perspective(400px) rotateY(0deg);  opacity: 1; }
+}
+
+@keyframes ease-kf-shimmer {
+  0% { background-position: -1000px 0; }
+  100% { background-position: 1000px 0; }
+}
+
+@keyframes ease-kf-pulse-fade {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+
+/* ── Animation Utility Classes ─────────────────────────────── */
+
+/* Entrance Animations */
+
+/* Skeleton Loading Animations*/
+
+.ease-skeleton-shimmer {
+  background: var(--ease-color-neutral-100);
+  background-image: linear-gradient(
+    90deg,
+    var(--ease-color-neutral-100) 0px,
+    var(--ease-color-neutral-200) 40px,
+    var(--ease-color-neutral-100) 80px
+  );
+  background-size: 1000px 100%;
+  animation: ease-kf-shimmer 2s infinite linear forwards;
+}
+
+.ease-skeleton-pulse {
+  background-color: var(--ease-color-neutral-200);
+  animation: ease-kf-pulse-fade 1.5s var(--ease-ease) infinite;
+}
+
+.ease-skeleton-block {
+  border-radius: var(--ease-radius-md);
+  display: block;
+}
+
+.ease-fade-in {
+  animation: ease-kf-fade-in var(--ease-speed-medium) var(--ease-ease) both;
+}
+
+.ease-fade-out {
+  animation: ease-kf-fade-out var(--ease-speed-medium) var(--ease-ease) both;
+}
+
+.ease-slide-up {
+  animation: ease-kf-slide-up var(--ease-speed-medium) var(--ease-ease) both;
+}
+
+.ease-slide-down {
+  animation: ease-kf-slide-down var(--ease-speed-medium) var(--ease-ease) both;
+}
+
+.ease-slide-in-left {
+  animation: ease-kf-slide-in-left var(--ease-speed-medium) var(--ease-ease) both;
+}
+
+.ease-slide-in-right {
+  animation: ease-kf-slide-in-right var(--ease-speed-medium) var(--ease-ease) both;
+}
+
+.ease-zoom-in {
+  animation: ease-kf-zoom-in var(--ease-speed-medium) var(--ease-ease-bounce) both;
+}
+
+.ease-flip {
+  animation: ease-kf-flip var(--ease-speed-medium) var(--ease-ease) both;
+}
+
+/* Looping Animations */
+.ease-bounce {
+  animation: ease-kf-bounce 1s infinite;
+}
+
+.ease-rotate {
+  animation: ease-kf-rotate 1.2s linear infinite;
+}
+
+.ease-pulse {
+  animation: ease-kf-pulse 2s var(--ease-ease) infinite;
+}
+
+.ease-ping {
+  animation: ease-kf-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+.ease-shake {
+  animation: ease-kf-shake 0.5s var(--ease-ease) both;
+}
+
+/* ── Hover Animations ──────────────────────────────────────── */
+
+/* Grow on hover
+   [INTEGRATED] from submissions/examples/hover-grow/
+   Original class name: .hover-grow-card / .hover-grow-btn
+   Standardized to: .ease-hover-grow */
+.ease-hover-grow {
+  transition: transform var(--ease-speed-medium) var(--ease-ease-bounce);
+  will-change: transform;
+}
+.ease-hover-grow:hover {
+  transform: scale(1.06);
+}
+
+/* Shrink on hover */
+.ease-hover-shrink {
+  transition: transform var(--ease-speed-fast) var(--ease-ease);
+  will-change: transform;
+}
+.ease-hover-shrink:hover {
+  transform: scale(0.95);
+}
+
+/* Glow on hover */
+.ease-hover-glow {
+  transition: box-shadow var(--ease-speed-medium) var(--ease-ease);
+}
+.ease-hover-glow:hover {
+  box-shadow: var(--ease-glow-primary);
+}
+
+/* Lift (shadow depth) on hover */
+.ease-hover-lift {
+  transition: transform var(--ease-speed-medium) var(--ease-ease),
+              box-shadow var(--ease-speed-medium) var(--ease-ease);
+}
+.ease-hover-lift:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--ease-shadow-xl);
+}
+
+/* Color shift underline on hover */
+.ease-hover-underline {
+  position: relative;
+}
+.ease-hover-underline::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 0;
+  height: 2px;
+  background-color: var(--ease-color-primary);
+  transition: width var(--ease-speed-medium) var(--ease-ease);
+}
+.ease-hover-underline:hover::after {
+  width: 100%;
+}
+
+/* Card lift on hover
+   [INTEGRATED] from submissions/examples/card-lift/
+   Original class name: .lift-card
+   Standardized to: .ease-card-lift
+   (also available as .ease-hover-lift in the cards component) */
+.ease-card-lift {
+  transition:
+    transform   var(--ease-speed-medium) var(--ease-ease-out),
+    box-shadow  var(--ease-speed-medium) var(--ease-ease-out);
+  will-change: transform, box-shadow;
+}
+.ease-card-lift:hover {
+  transform: translateY(-8px);
+  box-shadow: var(--ease-shadow-xl);
+}
+
+/* Shimmer sweep on hover
+   [INTEGRATED] from submissions/examples/hover-shimmer/
+   Original class name: .hover-shimmer-card
+   Standardized to: .ease-hover-shimmer */
+.ease-hover-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.ease-hover-shimmer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 60%;
+  height: 100%;
+  background: linear-gradient(
+    120deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.08) 50%,
+    transparent 100%
+  );
+  transition: left var(--ease-speed-slow) var(--ease-ease);
+  pointer-events: none;
+}
+.ease-hover-shimmer:hover::before {
+  left: 150%;
+}
+
+/* ── Stagger Delay Helpers ─────────────────────────────────── */
+/* Use these with entrance animations to stagger children */
+
+.ease-delay-75  { animation-delay: 75ms; }
+.ease-delay-100 { animation-delay: 100ms; }
+.ease-delay-150 { animation-delay: 150ms; }
+.ease-delay-200 { animation-delay: 200ms; }
+.ease-delay-300 { animation-delay: 300ms; }
+.ease-delay-500 { animation-delay: 500ms; }
+.ease-delay-700 { animation-delay: 700ms; }
+
+/* ── Duration Overrides ────────────────────────────────────── */
+.ease-duration-fast   { animation-duration: var(--ease-speed-fast); }
+.ease-duration-medium { animation-duration: var(--ease-speed-medium); }
+.ease-duration-slow   { animation-duration: var(--ease-speed-slow); }
+
+/* ── Reduced Motion: Respect user preference ───────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/core/base.css

@@ -0,0 +1,137 @@
+/* ============================================================
+   EaseMotion CSS — base.css
+   Resets, base element styles, and typographic foundation
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+/* ── Box Model Reset ───────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Root & Body ───────────────────────────────────────────── */
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: var(--ease-font-sans);
+  font-size: var(--ease-text-base);
+  line-height: var(--ease-leading-normal);
+  color: var(--ease-color-text);
+  background-color: var(--ease-color-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Typography ────────────────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: var(--ease-leading-tight);
+  color: var(--ease-color-neutral-900);
+}
+
+h1 { font-size: var(--ease-text-4xl); }
+h2 { font-size: var(--ease-text-3xl); }
+h3 { font-size: var(--ease-text-2xl); }
+h4 { font-size: var(--ease-text-xl);  }
+h5 { font-size: var(--ease-text-lg);  }
+h6 { font-size: var(--ease-text-base); }
+
+p {
+  margin-bottom: var(--ease-space-4);
+  color: var(--ease-color-neutral-700);
+}
+
+a {
+  color: var(--ease-color-primary);
+  text-decoration: none;
+  transition: color var(--ease-speed-fast) var(--ease-ease);
+}
+
+a:hover {
+  color: var(--ease-color-primary-dark);
+  text-decoration: underline;
+}
+
+/* ── Lists ─────────────────────────────────────────────────── */
+ul, ol {
+  padding-left: var(--ease-space-6);
+}
+
+li {
+  margin-bottom: var(--ease-space-1);
+}
+
+/* ── Media ─────────────────────────────────────────────────── */
+img, video, svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* ── Code ──────────────────────────────────────────────────── */
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--ease-font-mono);
+  font-size: var(--ease-text-sm);
+}
+
+code {
+  background-color: var(--ease-color-neutral-100);
+  color: var(--ease-color-primary-dark);
+  padding: 0.1em 0.4em;
+  border-radius: var(--ease-radius-sm);
+}
+
+pre {
+  background-color: var(--ease-color-neutral-900);
+  color: var(--ease-color-neutral-50);
+  padding: var(--ease-space-6);
+  border-radius: var(--ease-radius-md);
+  overflow-x: auto;
+  line-height: var(--ease-leading-loose);
+}
+
+/* ── Form Elements ─────────────────────────────────────────── */
+input,
+textarea,
+select,
+button {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+/* ── Horizontal Rule ───────────────────────────────────────── */
+hr {
+  border: none;
+  border-top: 1px solid var(--ease-color-neutral-200);
+  margin: var(--ease-space-8) 0;
+}
+
+/* ── Focus Ring (accessible) ───────────────────────────────── */
+:focus-visible {
+  outline: 2px solid var(--ease-color-primary);
+  outline-offset: 3px;
+  border-radius: var(--ease-radius-sm);
+}
+
+/* ── Selection ─────────────────────────────────────────────── */
+::selection {
+  background-color: var(--ease-color-primary);
+  color: #ffffff;
+}