CPN Terminal Component Demo
This page demonstrates all visualization components and MDX elements implemented for the CPN Terminal, showcasing their capabilities and interactive features.
Timeline Visualization
Timelines visualize chronological data with events and periods. They support horizontal and vertical layouts, event highlighting, and interactive controls.
Data Source
calatori-timeline.json file which follows the format specified in Section 6.1 of the content guide.Calatori Species History
Void Diagram Visualization
Void Diagrams visualize complex cosmic structures, providing interactive representations of the void architecture. Each diagram can focus on different cosmic elements with various levels of detail.
Data Source
*-visualization.json files or use built-in rendering for standard cosmic structures.The focus parameter determines which cosmic structure the diagram displays. Common focus types include genesis-bubble, void-heart, void-potential, universe-bubble, and more.
Genesis Bubble
Void Heart
Void Potential
Universe Bubble
Zero-Point Universe
Genesis Cluster
The Void
The size parameter controls the display dimensions of the visualization. Available options are small, medium, and large.
Small Size
Medium Size
Large Size
The showLabels parameter controls whether element labels are shown on the diagram.
With Labels
No Labels
The data parameter can specify a custom JSON file to use for the visualization, instead of the built-in rendering.
Built-in Rendering
Custom Data Source
Different combinations of parameters can be used for specific visualization purposes.
Detailed Analysis View
Historical Event Study
Simplified Teaching View
Cosmic Cartography
Relationship Network Visualization
Relationship Networks display connections between entities, color-coded by type. These interactive graphs can highlight specific relationships, zoom in on connections, and filter by relationship type.
Data Source
torfa-astra-relationships.json file which follows the format specified in Section 6.2 of the content guide.The focus parameter determines which entity is centered in the relationship network. Different focus entities will display their own unique set of connections.
Torfa Astra (Character Focus)
Proxima Astra (Character Focus)
The linkTypes parameter can filter connections to show only specific relationship types. This helps focus on particular kinds of relationships within the network.
All Relationships (No Filter)
Family Connections Only
Allied Connections Only
The showLabels parameter controls whether descriptive labels are shown for each node.
With Labels
Without Labels
The height parameter controls the visual size of the relationship network. Different heights are suitable for different view contexts.
Compact Height (300px)
Standard Height (400px)
Expanded Height (500px)
Different combinations of parameters can be used to create specialized relationship network visualizations for different purposes.
Character Profile View
Research Analysis View
Quick Facts Component
QuickFacts provides a consistent way to display key information about an entity in a compact format. It can be used as a reference card for important attributes or data points.
Quick Facts Array Implementation
Genesis Bubble Properties
QuickFact Child Implementation
Calatori Agent Profile
Translation Note Component
TranslationNote provides context for terminology or concepts that have been translated from their original form. It helps readers understand approximations or interpretations made in the translation process.
Standard Translation Note
Translation Note
Translation Note with Custom Title
Linguistic Context
Profile Card Components
ProfileCard components provide a consistent way to display information about characters, entities, or personnel. They can be arranged in responsive grids with customizable colors and linking capabilities.
Single Profile Card
Torfa Astra
Senior Calatori Agent, Genesis Structure Specialist
Profile Grid
Related Entries Components
RelatedEntries components create navigational links between related content, enhancing the interconnected nature of the terminal content. They can be displayed in standard or alternative layouts.
Standard Related Entries
Related Entries
Alternative Related Entries Layout
Personnel Related to this Project
Tabbed Content Component
TabbedContent allows organizing related information into separate tabs, helping manage content density and providing multiple perspectives or categories of information.
Standard Tabbed Content
MDX Content Component
The MDXContent component is a wrapper that provides styling and functionality for rendered MDX content. It applies consistent typography, spacing, and interactive features.
MDX Content Example
Genesis Bubble
Genesis Bubbles are the primordial cosmic containment structures that form the fundamental architecture of the multiverse. Each bubble acts as a discrete universal incubator, capable of spawning and nurturing numerous universe bubbles within its boundaries.
Physical Properties
The typical Genesis Bubble spans approximately 8,000-12,000 cosmic units in diameter, though outliers up to 20,000 units have been observed. Its outer membrane consists of specialized Void Potential in a semi-crystallized state, creating a dynamic but stable boundary between internal order and external chaos.
- Contains 1-30 Zero-Point Universes
- Multiple Void Streams connecting internal structures
- Void Potential Nodes (undeveloped universe seeds)
Component Integration
All visualization components are designed to work within the MDX content system. They can be freely combined with other components to create rich, interactive content experiences.
The visualization components can be nested within other components to create rich, interactive content experiences.