diff --git a/submissions/examples/roadmap-timeline/README.md b/submissions/examples/roadmap-timeline/README.md new file mode 100644 index 00000000..aeccfa44 --- /dev/null +++ b/submissions/examples/roadmap-timeline/README.md @@ -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 +
+
+ +
+

MVP Launch

+

Initial product released to early users.

+ Q1 2026 +
+
+ +
+ +
+

User Authentication

+

Adding secure login and registration system.

+ Q2 2026 +
+
+ +
+ +
+

Mobile Application

+

Native Android and iOS support.

+ Q3 2026 +
+
+
+``` + +## 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`. diff --git a/submissions/examples/roadmap-timeline/demo.html b/submissions/examples/roadmap-timeline/demo.html new file mode 100644 index 00000000..b7b1b002 --- /dev/null +++ b/submissions/examples/roadmap-timeline/demo.html @@ -0,0 +1,68 @@ + + + + + + Roadmap Timeline — EaseMotion CSS + + + + +

Project Roadmap Timeline

+

Milestone and release timeline component — Issue #1161

+ +
+ +
+ +
+

MVP Launch

+

Initial product released to early users.

+ Q1 2026 +
+
+ +
+ +
+

User Authentication

+

Adding secure login and registration system.

+ Q2 2026 +
+
+ +
+ +
+

Mobile Application

+

Native Android and iOS support.

+ Q3 2026 +
+
+ +
+ +
+

AI Recommendations

+

Personalized content suggestions powered by ML.

+ Q4 2026 +
+
+ +
+ + diff --git a/submissions/examples/roadmap-timeline/style.css b/submissions/examples/roadmap-timeline/style.css new file mode 100644 index 00000000..8771204b --- /dev/null +++ b/submissions/examples/roadmap-timeline/style.css @@ -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; + } +}