Skip to content

feat: add Git Commit History Timeline Component (#1180) #1247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SAPTARSHI-coder merged 1 commit into from
Jun 4, 2026
+292 −0
Merged

feat: add Git Commit History Timeline Component (#1180) #1247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions submissions/examples/commit-history-timeline/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<div class="ease-commit-timeline">
<div class="ease-commit">
<div class="ease-commit-dot ease-commit-dot--feat"></div>
<div class="ease-commit-content">
<div class="ease-commit-title">feat: add authentication module</div>
<div class="ease-commit-meta">
<span class="ease-commit-hash">c7a91f2</span>
<span class="ease-commit-author">Ishita Sharma</span>
<span class="ease-commit-time">2 hours ago</span>
</div>
</div>
</div>
</div>
```

## 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`.
76 changes: 76 additions & 0 deletions submissions/examples/commit-history-timeline/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Git Commit History Timeline — EaseMotion CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="ease-commit-timeline">

<div class="ease-commit">
<div class="ease-commit-dot ease-commit-dot--feat"></div>
<div class="ease-commit-content">
<div class="ease-commit-title">feat: add authentication module</div>
<div class="ease-commit-meta">
<span class="ease-commit-hash">c7a91f2</span>
<span class="ease-commit-author">Ishita Sharma</span>
<span class="ease-commit-time">2 hours ago</span>
</div>
</div>
</div>

<div class="ease-commit">
<div class="ease-commit-dot ease-commit-dot--fix"></div>
<div class="ease-commit-content">
<div class="ease-commit-title">fix: resolve mobile navigation issue</div>
<div class="ease-commit-meta">
<span class="ease-commit-hash">f84ab21</span>
<span class="ease-commit-author">Prakash Chandra</span>
<span class="ease-commit-time">Yesterday</span>
</div>
</div>
</div>

<div class="ease-commit">
<div class="ease-commit-dot ease-commit-dot--docs"></div>
<div class="ease-commit-content">
<div class="ease-commit-title">docs: update README examples</div>
<div class="ease-commit-meta">
<span class="ease-commit-hash">a91dc22</span>
<span class="ease-commit-author">EaseMotion Bot</span>
<span class="ease-commit-time">3 days ago</span>
</div>
</div>
</div>

<div class="ease-commit">
<div class="ease-commit-dot ease-commit-dot--refactor"></div>
<div class="ease-commit-content">
<div class="ease-commit-title">refactor: extract utility functions</div>
<div class="ease-commit-meta">
<span class="ease-commit-hash">b33f004</span>
<span class="ease-commit-author">Priya Patel</span>
<span class="ease-commit-time">1 week ago</span>
</div>
</div>
</div>

<div class="ease-commit">
<div class="ease-commit-dot ease-commit-dot--chore"></div>
<div class="ease-commit-content">
<div class="ease-commit-title">chore: bump dependencies</div>
<div class="ease-commit-meta">
<span class="ease-commit-hash">e4f2c88</span>
<span class="ease-commit-author">Dependabot</span>
<span class="ease-commit-time">2 weeks ago</span>
</div>
</div>
</div>

</div>

</body>
</html>
172 changes: 172 additions & 0 deletions submissions/examples/commit-history-timeline/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading