Interval-intersection rules, visible-range anchoring, stable keys and deterministic queries live in a DOM-free layer that can be tested or moved toward workers independently of rendering.
Public · Information modeling
Timeline
A workspace for constructing timelines from point events, ranges, categories and linked stories so a temporal sequence can become a structured, navigable explanation.
- Niche
- Timelines combining dates, relationships and narrative
- Core stack
- TypeScript · Vite 8 · retained scene · Leaflet
- Model
- Canonical records · temporal projections · graph/map views
- Focus
- Stable identity · interaction performance · evidence
System view
Events · rangesCategoriesStoriesNarrative workspace
The study
A useful timeline connects dates with duration, category and interpretation.
Timeline is aimed at research, project history and other domains where point events, sustained periods, overlapping categories and an editorial story connecting those facts all need representation.
System structure
The model separates temporal facts from the narrative assembled from them.
Events and ranges
Point facts and duration ranges retain distinct temporal semantics.
Categories as a lens
Classification lets a chronology be explored by theme while preserving the common temporal order.
Linked stories
A story selects and relates facts while preserving the source data as its own layer.
Responsive workspace
The same structure remains readable from a phone to a wide desktop view.
Product and interaction design
The product distinguishes recording, organizing and interpreting.
A user can capture events, group them by category and then construct a story from them. That separation keeps factual records explicit and gives narrative prose its own layer.
The interface uses available horizontal space and preserves linear reading and editing on narrow screens, giving chronology a clear structure across viewport sizes.
Architecture lens
The temporal view is now a retained scene with explicit interaction epochs rather than a DOM reconstruction loop.
A renderer-independent projection layer decides temporal membership and stable scene identity. The UI adapter retains keyed nodes through pan and zoom, grows an overscan window in the direction of travel, protects focused occurrences and performs pruning only when interaction commits.
Live viewport samples support cheap camera coupling; committed viewport events give graph and map consumers a boundary for expensive filtering or layout work.
Overscan and bounded interaction retention prevent points, long ranges, focus and hover state from disappearing simply because the camera crosses a viewport boundary.
Strict TypeScript and repository policy tests enforce mobile-first layout, Pointer Events lifecycle, non-clipping primary surfaces and the invariants behind the retained scene.
Development approach
The design process alternates between two views of the same material: strict chronology and the story a person is trying to tell with it.
Experiments begin with real event, range, category and story combinations, together with deliberately constrained screen sizes. Visual ideas enter the shared model when they clarify interpretation and preserve the underlying facts.
Narrative experiments run against working data from the start. Validation and publishing checks preserve factual structure while the presentation continues to evolve.