SUNSTONE SHOWCASE
PALETTE: Inversion
SHOWCASE DECK
Sunstone Presentation Engine
Declarative YAML slide generation, zero-inline-style semantic HTML, and Celestine SVG charts
Sol.vin Architecture Team
Core Engine & Slide Architecture
Native Crystal AOT
Scoped Palettes
20 Semantic Layouts
📊 Celestine SVG Charts
PALETTE: FOS
SECTION 01
Semantic Layout Architecture
Separating content structure from presentation styles
Zero Inline Styles
CSS Pseudo Chrome
Theme Variable Cascading
PALETTE: Inversion
AOT ENGINE • PERFORMANCE
AOT Compilation & Pipeline Velocity
Sub-50ms slide generation with zero Node.js runtime baggage
Crystal
# 1. Parse declarative deck manifest:
deck = Sunstone::Deck.from_yaml(File.read("deck.yml"))
# 2. Resolve layout renderer via static router:
renderer = Sunstone::LayoutRouter.resolve("stats")
# 3. Compile vector Celestine chart & theme CSS:
chart = Sunstone::Chart.sparkline(metrics, stroke: "#10b981")
html = renderer.render_html(slide, deck, palette, 1, 20)
# 4. Emit zero-inline-style artifact:
File.write("dist/index.html", html)
Cold Slide Build Time (ms)
LOWER IS BETTER
PALETTE: Warm Paper (Default)
LAYOUT: COMPARISON
CODE VIEW
Imperative vs Declarative Slides
Two-step progressive disclosure: raw code first, then critique analysis
HTML
<div style="display:flex;background:#111;padding:12px;">
<h2 style="font-size:24px;color:#38bdf8;">Title</h2>
<p style="margin:0;color:#aaa;">Subtitle</p>
</div>
YAML
id: "overview"
layout: "intro"
badge: "MODULAR"
title: "Title"
subtitle: "Subtitle"
palette: "slate_dark"
PALETTE: Warm Paper (Default)
LAYOUT: COMPARISON
ANALYSIS
Imperative vs Declarative Slides
Two-step progressive disclosure: raw code first, then critique analysis
HTML
<div style="display:flex;background:#111;padding:12px;">
<h2 style="font-size:24px;color:#38bdf8;">Title</h2>
<p style="margin:0;color:#aaa;">Subtitle</p>
</div>
Critique
ANTI-PATTERN
- Hardcoded inline style tags everywhere
- Zero reusability across slides or themes
- High cognitive overhead in git diffs
YAML
id: "overview"
layout: "intro"
badge: "MODULAR"
title: "Title"
subtitle: "Subtitle"
palette: "slate_dark"
Advantages
CLEAN SOLUTION
- Clean, human-readable data definitions
- Palette switching is automatic and decoupled
- Predictable, strictly semantic HTML output
PALETTE: Arctic Frost
LAYOUT: THREE-COLUMN
Tri-Pillar Analysis
Three equal cards or code snippets side by side
1. Declarative YAML
INPUT
- Human-authored slide decks
- Git-friendly line-by-line diffs
- Zero markup boilerplate
2. Crystal Engine
PROCESS
- Blazing-fast native execution
- Strong type validation
- Zero runtime dependencies
3. Semantic HTML & CSS
OUTPUT
- Zero inline style attributes
- Theme-scoped CSS variables
- Clean Reveal.js presentations
PALETTE: A64 PAL
LAYOUT: FOUR-COLUMN
Four Architectural Tiers
Compact quadrant or multi-column layout for comprehensive overviews
CLI / UX
TIER 1
- Opal command DSL
- Interactive flags
- Terminal preview server
Parser & Router
TIER 2
- YAML serialization
- 15 semantic layouts
- Palette resolver
Compiler
TIER 3
- Zero-inline HTML generator
- Markdown generator
- Asset bundling
Runtime
TIER 4
- Reveal.js engine
- Asciinema sync
- Speaker notes view
PALETTE: Pico-8
LAYOUT: MATRIX
Presentation Engine Comparison
Evaluating architectures across styling, ergonomics, and reproducibility
| Feature | Traditional Slideware | Marp / Markdown | Sunstone |
|---|---|---|---|
| Inline Styles | Pervasive inline styles | Limited styling control | Strictly Zero Inline Styles |
| Theme Scoping | Manual theme hunting | Single global theme | Theme-Scoped Palettes per Slide |
| Git Diffs | Opaque binary XML | Flat markdown only | Line-by-line semantic YAML |
| Chrome Controls | Bloated HTML elements | Minimal / None | CSS Pseudo-Elements (::before/::after) |
SUMMARY
Sunstone provides uncompromised styling freedom with rock-solid semantic architecture.
PALETTE: Inversion
LAYOUT: TIMELINE
Project Evolution Roadmap
Horizontal milestone rail with status indicators and delivery phases
Q1 2026
Q2 2026
Q3 2026
Q4 2026
v0.1 Genesis
COMPLETED
- Extract engine from prototype
- 15 semantic layouts
- Zero inline style constraint
v0.2 Tooling
ACTIVE
- Opal CLI integration
- Live HTTP preview server
- Theme-scoped palettes
v0.3 Ecosystem
PLANNED
- Jasper docs compiler
- Carbon doctor and badges
- GitHub Pages automated CI
v1.0 Release
FUTURE
- Community theme registry
- PDF / PNG export pipeline
- Interactive terminal plugins
PALETTE: FOS
LAYOUT: ARCHITECTURE
Multi-Tier Sunstone Engine
Structured technology layers with CSS pseudo-element flow indicators
Presentation Layer
Client Browser
FRONTEND
Reveal.js
Deck orchestration & transitions
Highlight.js
Syntax highlighting engine
Theme CSS
Strict zero-inline styles
Compiler Layer
Native Crystal Pipeline
CORE
YAML Parser
Type-safe deck loading
Layout Router
15 semantic renderers
Assets Manager
Embedded vendor & themes
Tooling & Infrastructure
Ecosystem Shards
ECOSYSTEM
Opal CLI
Terminal DSL & live server
Jasper Docs
Multi-track guide compiler
Carbon Engine
Changelog, doctor & badges
PALETTE: Black Cube
LAYOUT: MEDIA
Rich Media & Visual Assets
Embedded images, video, and Asciinema terminal recordings
DIAGRAM
Presenter:
Rich visual diagrams provide instant structural clarity.
Supported Formats
MEDIA
- PNG, JPEG, WebP, and SVG images
- MP4 and WebM video streams
- Asciinema .cast terminal session recordings
- Synchronized playback on slide focus
PALETTE: Inversion
LAYOUT: PROFILE
Presenter Profile & Credentials
Speaker biography, key career metrics, and core areas of focus
15+
Years in Systems
500k+
Lines of Crystal
100%
Type Safety
Core Focus Areas
EXPERTISE
- High-performance systems programming
- Compiler design and AST transformations
- Developer tooling and command-line interfaces
Community & Open Source
COMMUNITY
- Author of Opal, Carbon, and Jasper
- Active contributor across Crystal ecosystem
- Passionate about zero-dependency tooling
PALETTE: Arctic Frost
LAYOUT: DUAL-MODE
Execution Mode Comparison
Interactive side-by-side mode evaluation with tabular specs
Choose the optimal pipeline for your development and production lifecycle.
Local Live Preview
DEVELOPMENT
sunstone serve --port 8000
Startup Time
< 50ms
Port Hunting
Automatic 8000..8020
Browser Launch
OS Native
Instant feedback loop with hot asset recompilation and browser synchronization.
Production Static Build
CI / CD
sunstone build --out dist
Output Size
< 1.5MB total
Zero Dependencies
Pure HTML/CSS/JS
Deployment
GitHub Actions
Single deterministic distribution directory ready for GitHub Pages or CDN.
SUMMARY
Seamlessly transition from local slide drafting to production GitHub Pages deployment.
PALETTE: FOS
LAYOUT: ROADMAP
Live Walkthrough Agenda
Step-by-step interactive command execution flow
1. Project Scaffold
STEP 1
sunstone new my-talk --theme generic- Generates deck.yml manifest
- Scaffolds starter slide deck
- Installs GitHub Pages CI
2. Author Slides
STEP 2
id: "architecture"
layout: "architecture"
palette: "emerald_matrix"- Configure semantic YAML
- Select theme-scoped palettes
- Embed code and terminal logs
3. Local Preview
STEP 3
sunstone serve --port 8000- Port-hunting web server
- Synchronized speaker notes
- Automatic browser launch
SUMMARY
Three simple commands take you from blank canvas to deployed interactive presentation.
PALETTE: A64 PAL
LAYOUT: QUOTE
Guiding Architectural Principle
“The best slide deck is the one you can review in a pull request, style with clean CSS, and deploy without friction.”
The Sunstone Philosophy
Core Design Tenet
Architecture Manifesto
PALETTE: Inversion
LAYOUT: STATS
Key Performance & Architecture Metrics
Deterministic speed, zero runtime overhead, and bare-metal compilation
+950%
10x
Cold-Start Velocity
AOT compilation eliminates JVM/V8 warm-up penalties
DETERMINISTIC
0 ms
Stop-The-World GC
Careful reference counting and value semantics
ZERO NILS
100%
Compile-Time Safety
Exhaustive flow-sensitive static type checking
-85% VS NODE
18 MB
Stripped Binary Size
Single standalone executable without runtime dependencies
PALETTE: Inversion
LAYOUT: FEATURE-GRID
Compiler Pipeline & Optimization Passes
Asymmetrical Bento Grid showcasing primary engine capabilities
Multi-Pass AST Optimization Engine
CORE ENGINE
AST.optimize(nodes) do |pass|
pass.inline_constants!
pass.fold_pure_expressions!
pass.prune_dead_branches!
endHigh-throughput static tree transformation reducing code size and instruction count.
Global Type Inference
TYPES
- Bidirectional algorithm avoids explicit annotations
- Flow-sensitive nil-checking eliminates runtime panics
- Generic union types with zero memory overhead
LLVM 18 Backend
CODEGEN
- ThinLTO cross-module aggressive inlining
- Automatic SIMD vector loop unrolling
- Target-specific machine code optimization
PALETTE: Inversion
LAYOUT: PROCESS-FLOW
End-to-End Pipeline & Distribution
Four-stage sequential workflow with directional chevrons
01
INPUT
Author YAML
Write high-signal presentation content in declarative, readable YAML slides.
02
TRANSFORM
Parse & Validate
Strict schema verification ensures every slide satisfies layout constraints.
03
RENDER
Generate HTML
Emit zero-inline-style semantic markup paired with theme-scoped palettes.
04
RELEASE
Deploy Static
Instant static deployment to GitHub Pages or static web servers with zero npm deps.
PALETTE: Inversion
LAYOUT: TABLE
Runtime & Language Benchmark Comparison
Empirical comparison across execution velocity, binary weight, and safety models
| Ecosystem | Compilation | Type Safety | Binary Size | Throughput (RPS) | GC Latency |
|---|---|---|---|---|---|
| Crystal (Sunstone) | Native AOT (LLVM) | Flow-Sensitive Static | 18 MB | 185,000 | Deterministic |
| Rust | Native AOT (LLVM) | Affine / Borrow Checker | 16 MB | 192,000 | Zero GC (Manual) |
| Go | Native AOT (Custom) | Structural Static | 22 MB | 142,000 | Concurrent (< 1ms) |
| Node.js (V8) | Dynamic JIT | Dynamic (TypeScript Erasure) | 85 MB+ | 54,000 | Stop-the-World |
| Python (CPython) | Bytecode Interpreted | Dynamic Optional Checks | N/A | 9,500 | Reference Counting |
Benchmarks executed on Linux 6.8 x86_64, isolated 4-core container, 10,000 concurrent HTTP keep-alive requests.
PALETTE: Inversion
LAYOUT: FAQ
Frequently Addressed Questions
Architectural decisions, workflow integration, and customization capabilities
TYPOGRAPHY
Can I use custom Google Fonts or system typefaces?
Yes. Sunstone themes load fonts via standard CSS @import rules hoisted automatically to the stylesheet header with zero runtime Flash of Unstyled Text.
PALETTES
How do I switch color palettes mid-presentation?
Simply specify 'palette: candy' or any of the 45+ registered palette IDs on individual slide YAML files. Sunstone dynamically rebinds CSS variables per section.
PORTABILITY
Does Sunstone require npm or Node.js in CI?
Zero Node.js runtime required. The single compiled Crystal binary generates static HTML & CSS with bundled vendor assets in under 300ms.
ARCH
How does Sunstone enforce zero inline styles?
Layouts emit purely semantic HTML tags and data attributes. The central engine in sunstone-base.css manages 100% of spatial Grid & Flexbox geometry.
PALETTE: Inversion
THANK YOU
Start Building with Sunstone
High-impact, reproducible presentations in minutes
GitHub Repository
OPEN SOURCE
github.com/sol-vin/sunstoneStar the project, inspect the source, and file issues or PRs.
Online Documentation
JASPER DOCS
sol-vin.github.io/sunstoneComplete guides on layouts, theming, palettes, and CI deployment.
Community & Shards
ECOSYSTEM
sol.vinBuilt alongside Opal, Carbon, and Jasper in the Sol.vin shard family.
TERMINAL
shards install && bin/sunstone build --out dist☀️ Crafted with pride by the Sol.vin team.