Timeline Visualization
Horizontal timeline system for artifacts, history, and curated milestones across the design site
Why
The design site already has several pieces of historical material, but they are split across separate surfaces and structures:
content/archivecontains date-driven design artifacts/archiveprovides a grid-based visual explorer/historycontains curated project narratives- cycle records and git history contain additional chronology that is not yet part of a unified browsing experience
We want a timeline surface that makes chronology itself explorable. That means a user should be able to scan what happened when, click into an event, reveal more context inline when that is enough, or move into a dedicated detail page without losing temporal context.
This work needs its own cycle because it spans information architecture, data normalization, API shape, and interaction design. It should not be mixed informally into the archive or history pages without first defining the canonical event model and route structure.
Objective
Define and execute the first implementation plan for a reusable timeline system in the existing Nuxt/Vue/Tailwind app.
The first useful version should:
- introduce a normalized timeline event model
- aggregate at least archive artifacts and manual milestones into one event stream
- provide a horizontal overview timeline
- support both inline reveal and dedicated detail pages
- preserve provenance back to source-native pages such as
/archive/...
Scope
cycles/c39.timeline-visualization/— cycle record and planning artifacts- normalized event schema and source adapter design
- timeline API design
- overview/detail route plan
- phased implementation plan aligned with the current app structure
Out of scope for this cycle unless explicitly pulled in later:
- full git history ingestion
- commit-level narrative curation across multiple repos
- final production polish for dense-data clustering or advanced compare modes
Deliverables
CYCLE.mdexecution-plan.md
Potential later deliverables as implementation begins:
- timeline data types and adapters
/api/timelineendpoints/timelineand/timeline/[id]pages- timeline components and composables
Outcome
Execution plan is now partially implemented. The timeline has a working first pass for archive and manual events, with source-native archive pages rendered inline beneath the overview instead of a separate timeline detail route for now.
Key Questions
- What is the canonical normalized event shape that can support archive, history, git, and manual sources?
- Which source types belong in the first release, and which should wait?
- When should a click reveal inline detail versus navigate to a dedicated page?
- How should timeline detail pages preserve chronology and context while showing rich content?
- How do we keep source provenance explicit so the timeline becomes a unifying surface rather than a replacement for source-native pages?
Current State
First implementation pass is now in the repo and keeps the cycle active.
Implemented in this snapshot:
- normalized
TimelineEventmodel with ids, slugs, date precision, provenance, and filter metadata - server-side aggregation for
archive + manualsources GET /api/timelineandGET /api/timeline/[id]/timelineoverview route with filters, zoom bands, timeline/sequential layout modes, and query-based selection- inline timeline detail for manual items and inline source-page loading for archive items beneath the timeline
- manual timeline content collection and initial kickoff milestone
- shared archive detail component reused by both
/archive/[...slug]and the inline timeline surface
Deferred from the original plan:
- dedicated
/timeline/[id]page - history source ingestion
- git source ingestion
- richer zoom-density logic beyond the current first pass
Visual record
1 captures — heroes, page slices, and full-page renders. Click to view.
