diff --git a/submissions/examples/commit-history-timeline/README.md b/submissions/examples/commit-history-timeline/README.md new file mode 100644 index 00000000..07ffb1d1 --- /dev/null +++ b/submissions/examples/commit-history-timeline/README.md @@ -0,0 +1,44 @@ +# Git Commit History Timeline Component + +A developer-focused commit history timeline inspired by GitHub, GitLab, and Linear. Displays commit messages with a vertical connector line, color-coded dots by commit type, hash badges, author names, and relative timestamps. Includes staggered slide-in animation and hover effects. + +## Classes + +| Class | Description | +|---|---| +| `ease-commit-timeline` | Container with vertical connector line | +| `ease-commit` | Individual commit entry | +| `ease-commit-dot` | Colored dot on the timeline | +| `ease-commit-dot--feat` | Feature commit (purple) | +| `ease-commit-dot--fix` | Bugfix commit (red) | +| `ease-commit-dot--docs` | Documentation commit (blue) | +| `ease-commit-dot--refactor` | Refactor commit (green) | +| `ease-commit-dot--chore` | Chore commit (amber) | +| `ease-commit-content` | Card with title and meta | +| `ease-commit-title` | Commit message heading | +| `ease-commit-meta` | Hash, author, and time row | +| `ease-commit-hash` | Short hash monospace badge | +| `ease-commit-author` | Author name | +| `ease-commit-time` | Relative timestamp | + +## Usage + +```html +
+
+
+
+
feat: add authentication module
+
+ c7a91f2 + Ishita Sharma + 2 hours ago +
+
+
+
+``` + +## Why it fits EaseMotion CSS + +Pure CSS commit timeline with staggered slide-in animation, hover scale and translate effects, color-coded dot variants, and monospace hash badges. Responsive by default. Respects `prefers-reduced-motion`. diff --git a/submissions/examples/commit-history-timeline/demo.html b/submissions/examples/commit-history-timeline/demo.html new file mode 100644 index 00000000..d84faa5b --- /dev/null +++ b/submissions/examples/commit-history-timeline/demo.html @@ -0,0 +1,76 @@ + + + + + + Git Commit History Timeline — EaseMotion CSS + + + + +
+ +
+
+
+
feat: add authentication module
+
+ c7a91f2 + Ishita Sharma + 2 hours ago +
+
+
+ +
+
+
+
fix: resolve mobile navigation issue
+
+ f84ab21 + Prakash Chandra + Yesterday +
+
+
+ +
+
+
+
docs: update README examples
+
+ a91dc22 + EaseMotion Bot + 3 days ago +
+
+
+ +
+
+
+
refactor: extract utility functions
+
+ b33f004 + Priya Patel + 1 week ago +
+
+
+ +
+
+
+
chore: bump dependencies
+
+ e4f2c88 + Dependabot + 2 weeks ago +
+
+
+ +
+ + + diff --git a/submissions/examples/commit-history-timeline/style.css b/submissions/examples/commit-history-timeline/style.css new file mode 100644 index 00000000..b0667088 --- /dev/null +++ b/submissions/examples/commit-history-timeline/style.css @@ -0,0 +1,172 @@ +/* ============================================================ + EaseMotion CSS — Git Commit History Timeline Component + Issue #1180 + ============================================================ */ + +/* ── Container ────────────────────────────────────────────── */ + +.ease-commit-timeline { + position: relative; + padding-left: 28px; + max-width: 520px; + margin: 0 auto; +} + +.ease-commit-timeline::before { + content: ""; + position: absolute; + left: 8px; + top: 8px; + bottom: 8px; + width: 2px; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0.12), + rgba(255, 255, 255, 0.04) + ); + border-radius: 1px; +} + +/* ── Commit entry ────────────────────────────────────────── */ + +.ease-commit { + position: relative; + padding-bottom: 20px; + animation: ease-kf-commit-slide 350ms cubic-bezier(0.16, 1, 0.3, 1) both; +} + +.ease-commit:last-child { + padding-bottom: 0; +} + +.ease-commit:nth-child(2) { animation-delay: 80ms; } +.ease-commit:nth-child(3) { animation-delay: 160ms; } +.ease-commit:nth-child(4) { animation-delay: 240ms; } +.ease-commit:nth-child(5) { animation-delay: 320ms; } + +/* ── Dot ─────────────────────────────────────────────────── */ + +.ease-commit-dot { + position: absolute; + left: -22px; + top: 6px; + width: 14px; + height: 14px; + border-radius: 50%; + border: 2px solid rgba(255, 255, 255, 0.1); + background: #7c6cff; + z-index: 1; + transition: + transform var(--ease-speed-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1), + box-shadow var(--ease-speed-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1); +} + +.ease-commit:hover .ease-commit-dot { + transform: scale(1.35); + box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.2); +} + +/* Color variants */ +.ease-commit-dot--feat { background: #7c6cff; } +.ease-commit-dot--feat { box-shadow: 0 0 0 2px rgba(124, 108, 255, 0.15); } +.ease-commit-dot--fix { background: #f43f5e; } +.ease-commit-dot--fix { box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.15); } +.ease-commit-dot--docs { background: #3b82f6; } +.ease-commit-dot--docs { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); } +.ease-commit-dot--refactor { background: #22c55e; } +.ease-commit-dot--refactor { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15); } +.ease-commit-dot--chore { background: #f59e0b; } +.ease-commit-dot--chore { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15); } + +/* ── Content card ────────────────────────────────────────── */ + +.ease-commit-content { + padding: 12px 16px; + border-radius: var(--ease-radius-md, 0.625rem); + background: rgba(255, 255, 255, 0.03); + border: 1.5px solid rgba(255, 255, 255, 0.06); + transition: + background var(--ease-speed-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1), + border-color var(--ease-speed-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1), + transform var(--ease-speed-fast, 150ms) cubic-bezier(0.4, 0, 0.2, 1); +} + +.ease-commit:hover .ease-commit-content { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.12); + transform: translateX(4px); +} + +/* ── Title (commit message) ──────────────────────────────── */ + +.ease-commit-title { + font-size: var(--ease-text-sm, 0.875rem); + font-weight: 500; + color: rgba(255, 255, 255, 0.9); + margin-bottom: 6px; + line-height: 1.4; + font-family: var(--ease-font-sans, system-ui, sans-serif); +} + +/* ── Meta row ────────────────────────────────────────────── */ + +.ease-commit-meta { + display: flex; + align-items: center; + gap: 10px; + font-size: var(--ease-text-xs, 0.75rem); + color: rgba(255, 255, 255, 0.45); +} + +/* ── Hash badge ──────────────────────────────────────────── */ + +.ease-commit-hash { + display: inline-block; + padding: 1px 7px; + border-radius: var(--ease-radius-sm, 4px); + background: rgba(255, 255, 255, 0.06); + font-family: var(--ease-font-mono, ui-monospace, "SF Mono", monospace); + font-size: 0.6875rem; + color: rgba(255, 255, 255, 0.55); + letter-spacing: -0.02em; +} + +/* ── Author ──────────────────────────────────────────────── */ + +.ease-commit-author { + color: rgba(255, 255, 255, 0.55); +} + +/* ── Timestamp ───────────────────────────────────────────── */ + +.ease-commit-time { + color: rgba(255, 255, 255, 0.35); + margin-left: auto; +} + +/* ── Keyframes ───────────────────────────────────────────── */ + +@keyframes ease-kf-commit-slide { + from { + opacity: 0; + transform: translateX(-12px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +/* ── Reduced motion ──────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + .ease-commit { + animation: none; + } + .ease-commit:hover .ease-commit-content { + transform: none; + } + .ease-commit:hover .ease-commit-dot { + transform: none; + } +}