SAPTARSHI-coder · SAPTARSHI-coder · Jun 4, 2026 · Jun 4, 2026
@@ -0,0 +1,53 @@
+# Project Roadmap Timeline Component
+
+A modern roadmap timeline component for showcasing project milestones, completed features, ongoing development tasks, and upcoming releases. Milestones are connected with a vertical timeline and color-coded status indicators.
+
+## Classes
+
+| Class | Description |
+|---|---|
+| `ease-roadmap` | Vertical timeline container with connecting line |
+| `ease-roadmap-item` | Individual milestone item with staggered reveal |
+| `ease-roadmap-dot` | Circular status indicator dot |
+| `ease-roadmap-content` | Content card with title, description, and date |
+| `ease-roadmap-date` | Optional date label |
+| `ease-roadmap-item-completed` | Green dot and border for finished milestones |
+| `ease-roadmap-item-active` | Purple dot with pulse animation for in-progress milestones |
+| `ease-roadmap-item-planned` | Default outlined dot for future milestones |
+
+## Usage
+
+```html
+<div class="ease-roadmap">
+  <div class="ease-roadmap-item ease-roadmap-item-completed">
+    <span class="ease-roadmap-dot"></span>
+    <div class="ease-roadmap-content">
+      <h4>MVP Launch</h4>
+      <p>Initial product released to early users.</p>
+      <span class="ease-roadmap-date">Q1 2026</span>
+    </div>
+  </div>
+
+  <div class="ease-roadmap-item ease-roadmap-item-active">
+    <span class="ease-roadmap-dot"></span>
+    <div class="ease-roadmap-content">
+      <h4>User Authentication</h4>
+      <p>Adding secure login and registration system.</p>
+      <span class="ease-roadmap-date">Q2 2026</span>
+    </div>
+  </div>
+
+  <div class="ease-roadmap-item ease-roadmap-item-planned">
+    <span class="ease-roadmap-dot"></span>
+    <div class="ease-roadmap-content">
+      <h4>Mobile Application</h4>
+      <p>Native Android and iOS support.</p>
+      <span class="ease-roadmap-date">Q3 2026</span>
+    </div>
+  </div>
+</div>
+```
+
+## Why it fits EaseMotion CSS
+
+Pure CSS timeline pattern with staggered slide-in reveal, a pulsing status indicator for active items, and hover lift on content cards. Uses design tokens for colors and spacing. Respects `prefers-reduced-motion`.
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Roadmap 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>Project Roadmap Timeline</h1>
+  <p class="subtitle">Milestone and release timeline component — Issue #1161</p>
+
+  <div class="ease-roadmap">
+
+    <div class="ease-roadmap-item ease-roadmap-item-completed">
+      <span class="ease-roadmap-dot"></span>
+      <div class="ease-roadmap-content">
+        <h4>MVP Launch</h4>
+        <p>Initial product released to early users.</p>
+        <span class="ease-roadmap-date">Q1 2026</span>
+      </div>
+    </div>
+
+    <div class="ease-roadmap-item ease-roadmap-item-active">
+      <span class="ease-roadmap-dot"></span>
+      <div class="ease-roadmap-content">
+        <h4>User Authentication</h4>
+        <p>Adding secure login and registration system.</p>
+        <span class="ease-roadmap-date">Q2 2026</span>
+      </div>
+    </div>
+
+    <div class="ease-roadmap-item ease-roadmap-item-planned">
+      <span class="ease-roadmap-dot"></span>
+      <div class="ease-roadmap-content">
+        <h4>Mobile Application</h4>
+        <p>Native Android and iOS support.</p>
+        <span class="ease-roadmap-date">Q3 2026</span>
+      </div>
+    </div>
+
+    <div class="ease-roadmap-item ease-roadmap-item-planned">
+      <span class="ease-roadmap-dot"></span>
+      <div class="ease-roadmap-content">
+        <h4>AI Recommendations</h4>
+        <p>Personalized content suggestions powered by ML.</p>
+        <span class="ease-roadmap-date">Q4 2026</span>
+      </div>
+    </div>
+
+  </div>
+</body>
+</html>
@@ -0,0 +1,175 @@
+/* ============================================================
+   EaseMotion CSS — Project Roadmap Timeline Component
+   Issue #1161
+   ============================================================ */
+
+/* ── Timeline container ──────────────────────────────────── */
+
+.ease-roadmap {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ease-space-6, 1.5rem);
+  max-width: 520px;
+  width: 100%;
+  padding-left: var(--ease-space-4, 1rem);
+}
+
+/* Connecting vertical line */
+.ease-roadmap::before {
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 12px;
+  bottom: 12px;
+  width: 2px;
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 1px;
+}
+
+/* ── Timeline item ───────────────────────────────────────── */
+
+.ease-roadmap-item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ease-space-4, 1rem);
+  animation: ease-kf-roadmap-reveal var(--ease-speed-slow, 600ms) var(--ease-ease-out, cubic-bezier(0,0,0.2,1)) both;
+}
+
+.ease-roadmap-item:nth-child(2) { animation-delay: 150ms; }
+.ease-roadmap-item:nth-child(3) { animation-delay: 300ms; }
+.ease-roadmap-item:nth-child(4) { animation-delay: 450ms; }
+
+/* ── Status dot ──────────────────────────────────────────── */
+
+.ease-roadmap-dot {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  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: 3px;
+  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)),
+    box-shadow var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1));
+}
+
+/* ── Content card ────────────────────────────────────────── */
+
+.ease-roadmap-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-4, 1rem) var(--ease-space-5, 1.25rem);
+  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-roadmap-content:hover {
+  transform: translateX(4px);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.ease-roadmap-content h4 {
+  margin: 0 0 var(--ease-space-1, 0.25rem);
+  font-size: var(--ease-text-base, 1rem);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.ease-roadmap-content p {
+  margin: 0;
+  font-size: var(--ease-text-sm, 0.875rem);
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.6;
+}
+
+.ease-roadmap-date {
+  display: inline-block;
+  margin-top: var(--ease-space-2, 0.5rem);
+  font-size: var(--ease-text-xs, 0.75rem);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.4;
+}
+
+/* ── Status variants ─────────────────────────────────────── */
+
+/* Completed */
+.ease-roadmap-item-completed .ease-roadmap-dot {
+  background: var(--ease-color-success, #22c55e);
+  border-color: var(--ease-color-success, #22c55e);
+  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
+}
+
+.ease-roadmap-item-completed .ease-roadmap-content {
+  border-color: rgba(34, 197, 94, 0.25);
+}
+
+/* Active / In Progress */
+.ease-roadmap-item-active .ease-roadmap-dot {
+  background: var(--ease-color-primary, #6c63ff);
+  border-color: var(--ease-color-primary, #6c63ff);
+  box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.15);
+  animation: ease-kf-roadmap-pulse 2s var(--ease-ease, cubic-bezier(0.4,0,0.2,1)) infinite;
+}
+
+.ease-roadmap-item-active .ease-roadmap-content {
+  border-color: rgba(108, 99, 255, 0.3);
+}
+
+.ease-roadmap-item-active .ease-roadmap-content h4 {
+  color: var(--ease-color-primary, #6c63ff);
+}
+
+/* Planned */
+.ease-roadmap-item-planned .ease-roadmap-dot {
+  background: transparent;
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+/* ── Keyframes ───────────────────────────────────────────── */
+
+@keyframes ease-kf-roadmap-reveal {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes ease-kf-roadmap-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.15);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(108, 99, 255, 0.05);
+  }
+}
+
+/* ── Reduced motion ──────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ease-roadmap-item {
+    animation: none;
+  }
+  .ease-roadmap-item-active .ease-roadmap-dot {
+    animation: none;
+  }
+  .ease-roadmap-content {
+    transition: none;
+  }
+  .ease-roadmap-content:hover {
+    transform: none;
+  }
+}