Skip to content

feat: add Git Commit Timeline Component (#1159) #1244

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
+384 −0
Merged

feat: add Git Commit Timeline Component (#1159) #1244

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
71 changes: 71 additions & 0 deletions submissions/examples/git-commit-timeline/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
# Git Commit Timeline Component

A developer-focused timeline component that visually represents commit history, merges, and release milestones. Each node shows a branch badge, commit hash, title, description, and date with a connecting vertical line and color-coded dot indicators.

## Classes

| Class | Description |
|---|---|
| `ease-git-timeline` | Vertical timeline container with connecting line |
| `ease-git-node` | Individual commit node with staggered reveal |
| `ease-git-node-release` | Green dot and border for release/tag nodes |
| `ease-git-node-merge` | Purple dot with diamond icon for merge nodes |
| `ease-git-dot` | Circular indicator dot |
| `ease-git-head` | Row for branch badge and commit hash |
| `ease-git-branch` | Branch name badge |
| `ease-git-branch-main` | Green badge for main branch |
| `ease-git-branch-feat` | Purple badge for feature branches |
| `ease-git-hash` | Monospace commit hash |
| `ease-git-content` | Content card with hover lift |
| `ease-git-title` | Commit message title |
| `ease-git-desc` | Commit description |
| `ease-git-meta` | Date metadata |

## Usage

```html
<div class="ease-git-timeline">
<div class="ease-git-node ease-git-node-release">
<span class="ease-git-dot"></span>
<div class="ease-git-content">
<div class="ease-git-head">
<span class="ease-git-branch ease-git-branch-main">main</span>
<span class="ease-git-hash">a1b2c3d</span>
</div>
<h4 class="ease-git-title">v2.0.0 — Production Deployment</h4>
<p class="ease-git-desc">Stable release with authentication and dashboard features.</p>
<span class="ease-git-meta">Jun 4, 2026</span>
</div>
</div>

<div class="ease-git-node ease-git-node-merge">
<span class="ease-git-dot"></span>
<div class="ease-git-content">
<div class="ease-git-head">
<span class="ease-git-branch ease-git-branch-feat">feat/auth</span>
<span class="ease-git-hash">e4f5g6h</span>
</div>
<h4 class="ease-git-title">Merge pull request #42</h4>
<p class="ease-git-desc">Add user authentication system with JWT support.</p>
<span class="ease-git-meta">Jun 2, 2026</span>
</div>
</div>

<div class="ease-git-node">
<span class="ease-git-dot"></span>
<div class="ease-git-content">
<div class="ease-git-head">
<span class="ease-git-branch ease-git-branch-main">main</span>
<span class="ease-git-hash">m0n1o2p</span>
</div>
<h4 class="ease-git-title">Initial Commit</h4>
<p class="ease-git-desc">Project structure created with core framework setup.</p>
<span class="ease-git-meta">May 28, 2026</span>
</div>
</div>
</div>
```

## Why it fits EaseMotion CSS

Pure CSS Git timeline with staggered reveal animations, color-coded node variants (commit, merge, release), branch badges, monospace commit hashes, and hover lift on content cards. Uses design tokens for colors and spacing. Respects `prefers-reduced-motion`.
88 changes: 88 additions & 0 deletions submissions/examples/git-commit-timeline/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Git Commit Timeline — 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>Git Commit Timeline</h1>
<p class="subtitle">Commit history and release timeline component — Issue #1159</p>

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

<!-- Release node -->
<div class="ease-git-node ease-git-node-release">
<span class="ease-git-dot"></span>
<div class="ease-git-content">
<div class="ease-git-head">
<span class="ease-git-branch ease-git-branch-main">main</span>
<span class="ease-git-hash">a1b2c3d</span>
</div>
<h4 class="ease-git-title">v2.0.0 — Production Deployment</h4>
<p class="ease-git-desc">Stable release with authentication and dashboard features.</p>
<span class="ease-git-meta">Jun 4, 2026</span>
</div>
</div>

<!-- Merge node -->
<div class="ease-git-node ease-git-node-merge">
<span class="ease-git-dot"></span>
<div class="ease-git-content">
<div class="ease-git-head">
<span class="ease-git-branch ease-git-branch-feat">feat/auth</span>
<span class="ease-git-hash">e4f5g6h</span>
</div>
<h4 class="ease-git-title">Merge pull request #42</h4>
<p class="ease-git-desc">Add user authentication system with JWT support.</p>
<span class="ease-git-meta">Jun 2, 2026</span>
</div>
</div>

<!-- Commit node -->
<div class="ease-git-node">
<span class="ease-git-dot"></span>
<div class="ease-git-content">
<div class="ease-git-head">
<span class="ease-git-branch ease-git-branch-feat">feat/auth</span>
<span class="ease-git-hash">i7j8k9l</span>
</div>
<h4 class="ease-git-title">Implement login flow</h4>
<p class="ease-git-desc">Add email/password login, OAuth buttons, and session management.</p>
<span class="ease-git-meta">Jun 1, 2026</span>
</div>
</div>

<!-- Commit node -->
<div class="ease-git-node">
<span class="ease-git-dot"></span>
<div class="ease-git-content">
<div class="ease-git-head">
<span class="ease-git-branch ease-git-branch-main">main</span>
<span class="ease-git-hash">m0n1o2p</span>
</div>
<h4 class="ease-git-title">Initial Commit</h4>
<p class="ease-git-desc">Project structure created with core framework setup.</p>
<span class="ease-git-meta">May 28, 2026</span>
</div>
</div>

</div>
</body>
</html>
225 changes: 225 additions & 0 deletions submissions/examples/git-commit-timeline/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
/* ============================================================
EaseMotion CSS — Git Commit Timeline Component
Issue #1159
============================================================ */

/* ── Timeline container ──────────────────────────────────── */

.ease-git-timeline {
position: relative;
display: flex;
flex-direction: column;
gap: var(--ease-space-5, 1.25rem);
max-width: 520px;
width: 100%;
padding-left: var(--ease-space-3, 0.75rem);
}

/* Connecting vertical line */
.ease-git-timeline::before {
content: '';
position: absolute;
left: 11px;
top: 14px;
bottom: 14px;
width: 2px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.05) 100%
);
border-radius: 1px;
}

/* ── Commit node ─────────────────────────────────────────── */

.ease-git-node {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--ease-space-4, 1rem);
animation: ease-kf-git-reveal var(--ease-speed-slow, 600ms) var(--ease-ease-out, cubic-bezier(0,0,0.2,1)) both;
}

.ease-git-node:nth-child(2) { animation-delay: 120ms; }
.ease-git-node:nth-child(3) { animation-delay: 240ms; }
.ease-git-node:nth-child(4) { animation-delay: 360ms; }

/* ── Dot ─────────────────────────────────────────────────── */

.ease-git-dot {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
position: relative;
z-index: 1;
margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
transition:
background var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)),
border-color var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1));
}

/* ── Content card ────────────────────────────────────────── */

.ease-git-content {
flex: 1;
background: rgba(255, 255, 255, 0.04);
border: 1.5px solid rgba(255, 255, 255, 0.08);
border-radius: var(--ease-radius-md, 0.5rem);
padding: var(--ease-space-3, 0.75rem) var(--ease-space-4, 1rem);
transition:
transform var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)),
border-color var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1));
}

.ease-git-content:hover {
transform: translateX(4px);
border-color: rgba(255, 255, 255, 0.2);
}

/* ── Head row (branch + hash) ────────────────────────────── */

.ease-git-head {
display: flex;
align-items: center;
gap: var(--ease-space-2, 0.5rem);
margin-bottom: var(--ease-space-1, 0.25rem);
}

/* ── Branch badge ────────────────────────────────────────── */

.ease-git-branch {
display: inline-block;
font-size: 0.625rem;
font-weight: 600;
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
padding: 0.125rem 0.5rem;
border-radius: var(--ease-radius-full, 999px);
text-transform: lowercase;
}

.ease-git-branch-main {
background: rgba(34, 197, 94, 0.15);
color: var(--ease-color-success, #22c55e);
}

.ease-git-branch-feat {
background: rgba(108, 99, 255, 0.15);
color: var(--ease-color-primary-light, #a09af8);
}

/* ── Commit hash ─────────────────────────────────────────── */

.ease-git-hash {
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: 0.6875rem;
color: rgba(255, 255, 255, 0.35);
}

/* ── Title and description ───────────────────────────────── */

.ease-git-title {
margin: 0 0 var(--ease-space-1, 0.25rem);
font-size: var(--ease-text-sm, 0.875rem);
font-weight: 600;
line-height: 1.4;
}

.ease-git-desc {
margin: 0;
font-size: var(--ease-text-xs, 0.75rem);
color: rgba(255, 255, 255, 0.55);
line-height: 1.5;
}

/* ── Meta (date) ─────────────────────────────────────────── */

.ease-git-meta {
display: inline-block;
margin-top: var(--ease-space-1, 0.25rem);
font-size: 0.6875rem;
color: rgba(255, 255, 255, 0.3);
}

/* ── Node variants ───────────────────────────────────────── */

/* Default commit */
.ease-git-node .ease-git-dot::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
}

/* Release / tag node */
.ease-git-node-release .ease-git-dot {
border-color: var(--ease-color-success, #22c55e);
background: rgba(34, 197, 94, 0.1);
}
.ease-git-node-release .ease-git-dot::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ease-color-success, #22c55e);
}
.ease-git-node-release .ease-git-content {
border-color: rgba(34, 197, 94, 0.25);
}
.ease-git-node-release .ease-git-title {
color: var(--ease-color-success, #22c55e);
}

/* Merge node */
.ease-git-node-merge .ease-git-dot {
border-color: var(--ease-color-primary, #6c63ff);
background: rgba(108, 99, 255, 0.1);
}
.ease-git-node-merge .ease-git-dot::after {
content: '';
width: 10px;
height: 10px;
border-radius: 2px;
transform: rotate(45deg);
background: var(--ease-color-primary, #6c63ff);
}
.ease-git-node-merge .ease-git-content {
border-color: rgba(108, 99, 255, 0.25);
}
.ease-git-node-merge .ease-git-title {
color: var(--ease-color-primary-light, #a09af8);
}

/* ── Keyframes ───────────────────────────────────────────── */

@keyframes ease-kf-git-reveal {
from {
opacity: 0;
transform: translateX(-12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
.ease-git-node {
animation: none;
}
.ease-git-content {
transition: none;
}
.ease-git-content:hover {
transform: none;
}
}
Loading