diff --git a/submissions/examples/activity-heatmap/README.md b/submissions/examples/activity-heatmap/README.md new file mode 100644 index 00000000..362693af --- /dev/null +++ b/submissions/examples/activity-heatmap/README.md @@ -0,0 +1,70 @@ +# Developer Activity Heatmap Component + +A GitHub-style contribution heatmap that visualizes activity over time using a grid of color-coded cells with multiple intensity levels. Includes month and day labels, staggered pop-in animation, hover scale effect, and a legend. + +## Classes + +| Class | Description | +|---|---| +| `ease-heatmap` | Container card with border and background | +| `ease-heatmap-header` | Title and subtitle row | +| `ease-heatmap-title` | Section title | +| `ease-heatmap-subtitle` | Time range subtitle | +| `ease-heatmap-table` | Table structure wrapper | +| `ease-heatmap-months` | Month label row | +| `ease-heatmap-body` | Flex row for day labels and grid | +| `ease-heatmap-days` | Day label column | +| `ease-heatmap-grid` | Grid of activity cells | +| `ease-heatmap-cell` | Individual cell with hover scale | +| `ease-heatmap-lvl-0` | No activity (dim) | +| `ease-heatmap-lvl-1` | Low activity | +| `ease-heatmap-lvl-2` | Medium activity | +| `ease-heatmap-lvl-3` | High activity | +| `ease-heatmap-lvl-4` | Highest activity (brightest) | +| `ease-heatmap-legend` | Legend row | +| `ease-heatmap-legend-label` | Less / More labels | + +## Usage + +```html +
+
+

Contribution Activity

+ Last 6 months +
+ +
+
+ JanFebMar + AprMayJun +
+ +
+
+ MonWedFriSun +
+ +
+ + + + +
+
+
+ +
+ Less + + + + + + More +
+
+``` + +## Why it fits EaseMotion CSS + +Pure CSS heatmap with staggered pop-in cell animation, smooth hover scale effect, and color-coded intensity levels using design tokens. Responsive grid layout. Respects `prefers-reduced-motion`. diff --git a/submissions/examples/activity-heatmap/demo.html b/submissions/examples/activity-heatmap/demo.html new file mode 100644 index 00000000..0ecfbf4d --- /dev/null +++ b/submissions/examples/activity-heatmap/demo.html @@ -0,0 +1,132 @@ + + + + + + Activity Heatmap — EaseMotion CSS + + + + +

Activity Heatmap

+

GitHub-style contribution activity visualization — Issue #1175

+ +
+ +
+

Contribution Activity

+ Last 6 months +
+ +
+ + +
+ + JanFebMar + AprMayJun +
+ + +
+
+ MonWedFriSun +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ + +
+ Less + + + + + + More +
+ +
+ + diff --git a/submissions/examples/activity-heatmap/style.css b/submissions/examples/activity-heatmap/style.css new file mode 100644 index 00000000..372903cb --- /dev/null +++ b/submissions/examples/activity-heatmap/style.css @@ -0,0 +1,185 @@ +/* ============================================================ + EaseMotion CSS — Developer Activity Heatmap Component + Issue #1175 + ============================================================ */ + +/* ── Container ────────────────────────────────────────────── */ + +.ease-heatmap { + width: 100%; + max-width: 560px; + padding: var(--ease-space-5, 1.25rem); + border-radius: var(--ease-radius-lg, 0.75rem); + border: 1.5px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.03); +} + +/* ── Header ──────────────────────────────────────────────── */ + +.ease-heatmap-header { + display: flex; + align-items: baseline; + gap: var(--ease-space-3, 0.75rem); + margin-bottom: var(--ease-space-4, 1rem); +} + +.ease-heatmap-title { + margin: 0; + font-size: var(--ease-text-base, 1rem); + font-weight: 600; +} + +.ease-heatmap-subtitle { + font-size: var(--ease-text-xs, 0.75rem); + color: rgba(255, 255, 255, 0.4); +} + +/* ── Table structure ─────────────────────────────────────── */ + +.ease-heatmap-table { + display: flex; + flex-direction: column; + gap: 2px; +} + +/* ── Month labels row ────────────────────────────────────── */ + +.ease-heatmap-months { + display: grid; + grid-template-columns: 36px repeat(5, 1fr); + margin-bottom: 2px; + padding-left: 36px; +} + +.ease-heatmap-months span { + font-size: 0.625rem; + color: rgba(255, 255, 255, 0.3); + text-transform: uppercase; + letter-spacing: 0.04em; +} + +/* ── Body (day labels + grid) ────────────────────────────── */ + +.ease-heatmap-body { + display: flex; + gap: 4px; +} + +/* ── Day labels column ───────────────────────────────────── */ + +.ease-heatmap-days { + display: grid; + grid-template-rows: repeat(7, 14px); + gap: 3px; + margin-top: 0; + min-width: 32px; +} + +.ease-heatmap-days span { + display: flex; + align-items: center; + font-size: 0.5625rem; + color: rgba(255, 255, 255, 0.3); + line-height: 1; +} + +/* ── Grid ────────────────────────────────────────────────── */ + +.ease-heatmap-grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 3px; + flex: 1; +} + +.ease-heatmap-cell { + width: 100%; + aspect-ratio: 1; + border-radius: 2px; + transition: + transform var(--ease-speed-fast, 150ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)), + opacity var(--ease-speed-fast, 150ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)); + animation: ease-kf-heatmap-pop 200ms var(--ease-ease-out, cubic-bezier(0,0,0.2,1)) both; +} + +.ease-heatmap-cell:hover { + transform: scale(1.5); + opacity: 0.8; +} + +/* Staggered reveal */ +.ease-heatmap-cell:nth-child(7n+2) { animation-delay: 20ms; } +.ease-heatmap-cell:nth-child(7n+3) { animation-delay: 40ms; } +.ease-heatmap-cell:nth-child(7n+4) { animation-delay: 60ms; } +.ease-heatmap-cell:nth-child(7n+5) { animation-delay: 80ms; } +.ease-heatmap-cell:nth-child(7n+6) { animation-delay: 100ms; } +.ease-heatmap-cell:nth-child(7n+7) { animation-delay: 120ms; } + +/* ── Intensity levels ────────────────────────────────────── */ + +.ease-heatmap-lvl-0 { + background: rgba(255, 255, 255, 0.04); +} + +.ease-heatmap-lvl-1 { + background: rgba(34, 197, 94, 0.2); +} + +.ease-heatmap-lvl-2 { + background: rgba(34, 197, 94, 0.45); +} + +.ease-heatmap-lvl-3 { + background: rgba(34, 197, 94, 0.7); +} + +.ease-heatmap-lvl-4 { + background: rgba(34, 197, 94, 1); +} + +/* ── Legend ───────────────────────────────────────────────── */ + +.ease-heatmap-legend { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 4px; + margin-top: var(--ease-space-3, 0.75rem); +} + +.ease-heatmap-legend .ease-heatmap-cell { + width: 14px; + aspect-ratio: 1; +} + +.ease-heatmap-legend-label { + font-size: 0.625rem; + color: rgba(255, 255, 255, 0.3); + margin: 0 4px; +} + +/* ── Keyframes ───────────────────────────────────────────── */ + +@keyframes ease-kf-heatmap-pop { + from { + opacity: 0; + transform: scale(0); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* ── Reduced motion ──────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + .ease-heatmap-cell { + animation: none; + transition: none; + } + .ease-heatmap-cell:hover { + transform: none; + opacity: 1; + } +}