SAPTARSHI-coder · SAPTARSHI-coder · Jun 4, 2026 · Jun 4, 2026
@@ -0,0 +1,43 @@
+# Developer Stats Dashboard Widget
+
+A compact dashboard widget for displaying developer and project metrics such as commits, pull requests, issues resolved, repositories, stars earned, and deployment statistics. The widget presents metrics in a clean card-based grid layout with animated entrance and hover effects.
+
+## Classes
+
+| Class | Description |
+|---|---|
+| `ease-dev-stats` | Grid container for stat cards |
+| `ease-stat-card` | Individual stat card with entrance animation and hover lift |
+| `ease-stat-value` | Numeric value with subtle glow pulse |
+| `ease-stat-label` | Descriptive label for the metric |
+| `ease-stat-card-primary` | Primary (purple) color variant |
+| `ease-stat-card-success` | Success (green) color variant |
+| `ease-stat-card-info` | Info (blue) color variant |
+| `ease-stat-card-warning` | Warning (amber) color variant |
+
+## Usage
+
+```html
+<div class="ease-dev-stats">
+  <div class="ease-stat-card ease-stat-card-primary">
+    <span class="ease-stat-value">128</span>
+    <span class="ease-stat-label">Commits</span>
+  </div>
+  <div class="ease-stat-card ease-stat-card-success">
+    <span class="ease-stat-value">42</span>
+    <span class="ease-stat-label">Pull Requests</span>
+  </div>
+  <div class="ease-stat-card ease-stat-card-info">
+    <span class="ease-stat-value">18</span>
+    <span class="ease-stat-label">Repositories</span>
+  </div>
+  <div class="ease-stat-card ease-stat-card-warning">
+    <span class="ease-stat-value">356</span>
+    <span class="ease-stat-label">Stars</span>
+  </div>
+</div>
+```
+
+## Why it fits EaseMotion CSS
+
+Pure CSS dashboard pattern with staggered entrance animations, hover lift effects, and a subtle glow pulse on values. Uses design tokens for colors and spacing. Respects `prefers-reduced-motion`. Zero JavaScript required.
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Developer Stats Dashboard — EaseMotion CSS</title>
+  <link rel="stylesheet" href="style.css" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body {
+      background: #0f0e17;
+      color: #fff;
+      font-family: 'Inter', system-ui, sans-serif;
+      padding: 3rem 2rem;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    h1 { font-size: 2rem; margin-bottom: 0.25rem; text-align: center; }
+    .subtitle { color: rgba(255,255,255,0.5); margin-bottom: 3rem; text-align: center; }
+  </style>
+</head>
+<body>
+  <h1>Developer Stats Dashboard</h1>
+  <p class="subtitle">Project and contribution metrics widget — Issue #1163</p>
+
+  <div class="ease-dev-stats">
+
+    <div class="ease-stat-card ease-stat-card-primary">
+      <span class="ease-stat-value">128</span>
+      <span class="ease-stat-label">Commits</span>
+    </div>
+
+    <div class="ease-stat-card ease-stat-card-success">
+      <span class="ease-stat-value">42</span>
+      <span class="ease-stat-label">Pull Requests</span>
+    </div>
+
+    <div class="ease-stat-card ease-stat-card-info">
+      <span class="ease-stat-value">18</span>
+      <span class="ease-stat-label">Repositories</span>
+    </div>
+
+    <div class="ease-stat-card ease-stat-card-warning">
+      <span class="ease-stat-value">356</span>
+      <span class="ease-stat-label">Stars</span>
+    </div>
+
+    <div class="ease-stat-card ease-stat-card-primary">
+      <span class="ease-stat-value">7</span>
+      <span class="ease-stat-label">Open Issues</span>
+    </div>
+
+    <div class="ease-stat-card ease-stat-card-success">
+      <span class="ease-stat-value">94</span>
+      <span class="ease-stat-label">Issues Resolved</span>
+    </div>
+
+    <div class="ease-stat-card ease-stat-card-info">
+      <span class="ease-stat-value">12</span>
+      <span class="ease-stat-label">Releases</span>
+    </div>
+
+    <div class="ease-stat-card ease-stat-card-warning">
+      <span class="ease-stat-value">3</span>
+      <span class="ease-stat-label">Deployments</span>
+    </div>
+
+  </div>
+</body>
+</html>
@@ -0,0 +1,136 @@
+/* ============================================================
+   EaseMotion CSS — Developer Stats Dashboard Widget
+   Issue #1163
+   ============================================================ */
+
+/* ── Grid container ──────────────────────────────────────── */
+
+.ease-dev-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: var(--ease-space-4, 1rem);
+  max-width: 720px;
+  width: 100%;
+}
+
+/* ── Stat card base ──────────────────────────────────────── */
+
+.ease-stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ease-space-1, 0.25rem);
+  padding: var(--ease-space-5, 1.25rem) var(--ease-space-4, 1rem);
+  border-radius: var(--ease-radius-lg, 0.75rem);
+  border: 1.5px solid transparent;
+  background: rgba(255, 255, 255, 0.04);
+  text-align: center;
+  animation: ease-kf-stat-entrance var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)) both;
+  transition:
+    transform var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)),
+    box-shadow var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1));
+}
+
+.ease-stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+/* ── Staggered entrance delays ───────────────────────────── */
+
+.ease-stat-card:nth-child(2) { animation-delay: 80ms; }
+.ease-stat-card:nth-child(3) { animation-delay: 160ms; }
+.ease-stat-card:nth-child(4) { animation-delay: 240ms; }
+.ease-stat-card:nth-child(5) { animation-delay: 320ms; }
+.ease-stat-card:nth-child(6) { animation-delay: 400ms; }
+.ease-stat-card:nth-child(7) { animation-delay: 480ms; }
+.ease-stat-card:nth-child(8) { animation-delay: 560ms; }
+
+/* ── Stat value ──────────────────────────────────────────── */
+
+.ease-stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  animation: ease-kf-stat-glow 2s var(--ease-ease, cubic-bezier(0.4,0,0.2,1)) infinite;
+}
+
+.ease-stat-label {
+  font-size: var(--ease-text-xs, 0.75rem);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.7;
+  line-height: 1.4;
+}
+
+/* ── Entrance keyframe ───────────────────────────────────── */
+
+@keyframes ease-kf-stat-entrance {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* ── Glow pulse on value ─────────────────────────────────── */
+
+@keyframes ease-kf-stat-glow {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.75; }
+}
+
+/* ── Color variants ──────────────────────────────────────── */
+
+.ease-stat-card-primary {
+  border-color: rgba(108, 99, 255, 0.35);
+  background: rgba(108, 99, 255, 0.08);
+}
+.ease-stat-card-primary .ease-stat-value {
+  color: var(--ease-color-primary, #6c63ff);
+}
+
+.ease-stat-card-success {
+  border-color: rgba(34, 197, 94, 0.35);
+  background: rgba(34, 197, 94, 0.08);
+}
+.ease-stat-card-success .ease-stat-value {
+  color: var(--ease-color-success, #22c55e);
+}
+
+.ease-stat-card-info {
+  border-color: rgba(59, 130, 246, 0.35);
+  background: rgba(59, 130, 246, 0.08);
+}
+.ease-stat-card-info .ease-stat-value {
+  color: var(--ease-color-info, #3b82f6);
+}
+
+.ease-stat-card-warning {
+  border-color: rgba(245, 158, 11, 0.35);
+  background: rgba(245, 158, 11, 0.08);
+}
+.ease-stat-card-warning .ease-stat-value {
+  color: var(--ease-color-warning, #f59e0b);
+}
+
+/* ── Reduced motion ──────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ease-stat-card {
+    animation: none;
+    transition: none;
+  }
+  .ease-stat-card:hover {
+    transform: none;
+    box-shadow: none;
+  }
+  .ease-stat-value {
+    animation: none;
+  }
+}