PALETTE: Slate Dark (Default)
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
Welcome to the Sunstone interactive showcase!
This presentation demonstrates every semantic layout, palette switching,
and zero-inline-style mechanics.
PALETTE: Slate Dark (Default)
SECTION 01
Semantic Layout Architecture
Separating content structure from presentation styles
Strict semantic HTML governed exclusively by data-* attributes
Window controls and track accents rendered via CSS ::before & ::after
Runtime theme cascading with per-slide CSS variable scopes
Introduce the design principles behind Sunstone's semantic HTML engine.
PALETTE: Slate Dark (Default)
# 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)
42 Sunstone 380 Marp 520 Reveal-MD 640 Pandoc
Sunstone is built from the ground up in Crystal as a compiled, single-binary slide engine.
Unlike JavaScript slide toolchains that incur heavy V8 boot times and npm dependency trees,
Sunstone processes AST transforms and renders Celestine vector SVGs in under 50ms.
PALETTE: Slate Dark (Default)
module Sunstone::Runtime
class FiberPool
def initialize(@workers : Int32 = System.cpu_count)
@queue = Channel(Proc(Void)).new(1024)
@workers.times { spawn worker_loop }
end
private def worker_loop
while job = @queue.receive?
job.call
end
end
def dispatch(&block : -> Void)
@queue.send(block)
end
end
end
Lightweight green threads allocate just 8KB initial stack frames
Fibers yield cooperatively upon socket buffer saturation
Work-stealing ring buffer guarantees zero thread starvation
Zero-overhead non-blocking libevent event loop integration
Inlined LLVM native machine instructions across hot paths
Predictable execution latency regardless of deck scale
Walk through the One-Left-Two-Right layout. Show how code is cleanly presented on the left with 60% width, while the right stack provides two complementary architectural cards.
PALETTE: Slate Dark (Default)
Nil-safety enforced at compile time with zero annotations
Union types automatically narrowed within conditional branches
Exhaustive pattern matching guarantees complete case coverage
Aggressive function inlining across layout renderers
Dead code elimination strips unused CSS & icons
Direct machine code generation produces single static binary
$ crystal build --release -o bin/sunstone src/sunstone.cr
[1/4] Parsing source tree and macro templates... (120ms)
[2/4] Semantic analysis & type inference... (310ms)
[3/4] LLVM IR generation & target pass: x86_64... (450ms)
[4/4] Linking native executable: bin/sunstone... (180ms)
✓ Build complete: bin/sunstone (6.1 MB stripped)
✓ Zero inline style lint passed (33 layouts audited)
✓ Memory footprint verified: 14.2 MB cold start RSS
Demonstrate Two-Left-One-Right layout. Show how two stacked informational pillars on the left provide technical context for the terminal execution log on the right.
PALETTE: Slate Dark (Default)
# Ingest network payload directly into static ring buffer slice:
def process_frame(io : IO, buffer : Bytes) : Header
bytes_read = io.read_fully?(buffer) || raise "Truncated frame stream"
# Zero-copy header interpretation via pointer reinterpretation:
header = buffer[0, 16].to_unsafe.as(Pointer(Header)).value
header.validate!
header
end
Primitive structures allocate entirely within stack boundaries
Escape analysis identifies non-escaping allocations automatically
Eliminates GC tracking overhead for temporary parser objects
Pre-allocated 64KB slabs eliminate heap reallocation churn
Thread-safe pointer rotation across concurrent fiber queues
Zero-fragmentation guarantees sustained long-running stability
Present the One-Top-Two-Bottom layout. The full-width hero code block spans the top half, while two deep-dive analysis cards share the bottom row equally.
PALETTE: Slate Dark (Default)
Exhaustive type checking catches defects before deployment
Bare-metal performance matches C and C++ execution speed
Self-contained binaries simplify containerization & orchestration
Massive node_modules dependencies (often 400MB+ for simple decks)
Runtime type errors escape to production presentations
High cold-start latency hampers live interactive previewing
Single 6MB native binary compiles slide decks in under 50ms with zero runtime dependencies
Present the Two-Top-One-Bottom layout. The top half weighs the trade-offs side-by-side, while the bottom hero bar summarizes the core conclusion.
PALETTE: Slate Dark (Default)
server = HTTP::Server.new([
HTTP::LogHandler.new,
HTTP::CompressHandler.new,
Sunstone::SlideHandler.new
]) do |ctx|
ctx.response.content_type = "text/html; charset=utf-8"
ctx.response.headers["Cache-Control"] = "no-cache"
ctx.response.print Sunstone::Generator.render_live
end
address = server.bind_tcp("127.0.0.1", 8080)
puts "Sunstone preview listening on http://#{address}"
server.listen
Kernel epoll dispatches socket readiness directly to sleeping fibers
Streaming deflate compression executes inline without heap buffers
Instant delta broadcasts refresh presentation state in < 15ms
Present One-Left-Three-Right layout. Demonstrates how a prominent code snippet on the left (60% width) aligns perfectly with three sequenced checkpoint cards on the right.
PALETTE: Slate Dark (Default)
Layouts governed purely by semantic classes & data attributes
Per-slide palette scoping prevents specificity cascading bugs
Pure human-readable YAML slide definitions reviewable in PRs
# Hyperfine benchmark: 100-slide presentation build comparison
$ hyperfine --warmup 3 \
'sunstone build --deck deck.yml' \
'marp --html deck.md -o dist/index.html' \
'npx @slidev/cli build'
Benchmark 1: sunstone build --deck deck.yml
Time (mean ± σ): 41.8 ms ± 2.1 ms [User: 28.4 ms, System: 12.1 ms]
Range (min … max): 38.2 ms … 46.4 ms 100 runs
Benchmark 2: marp --html deck.md
Time (mean ± σ): 382.4 ms ± 14.2 ms [9.1x slower than Sunstone]
Benchmark 3: npx @slidev/cli build
Time (mean ± σ): 2840.1 ms ± 110.5 ms [67.9x slower than Sunstone]
Present Three-Left-One-Right layout. Three quick philosophical bullets on the left provide context for the benchmark trace on the right.
PALETTE: Slate Dark (Default)
<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>
id: "overview"
layout: "intro"
badge: "MODULAR"
title: "Title"
subtitle: "Subtitle"
palette: "slate_dark"
Notice how this layout automatically expands to 2 slides:
1. Side-by-side code blocks.
2. Side-by-side critique cards analyzing strengths & weaknesses.
PALETTE: Slate Dark (Default)
Hardcoded inline style tags everywhere
Zero reusability across slides or themes
High cognitive overhead in git diffs
Clean, human-readable data definitions
Palette switching is automatic and decoupled
Predictable, strictly semantic HTML output
Notice how this layout automatically expands to 2 slides:
1. Side-by-side code blocks.
2. Side-by-side critique cards analyzing strengths & weaknesses.
PALETTE: Slate Dark (Default)
Human-authored slide decks
Git-friendly line-by-line diffs
Zero markup boilerplate
Clean speaker notes integration
Blazing-fast native execution
Strong type validation
Zero runtime dependencies
Sub-300ms compile latency
Zero inline style attributes
Theme-scoped CSS variables
Clean Reveal.js presentations
Accessible semantic HTML5 markup
Highlight how cleanly three columns fit in standard 16:9 viewports.
PALETTE: Slate Dark (Default)
Opal command DSL & flag parser
Interactive terminal UI elements
Local HTTP live preview server
OS-native browser launch sync
Type-safe YAML deserializer
15 semantic spatial layout targets
Dynamic theme & palette resolver
Slide metadata & speaker note router
Zero-inline HTML generator
CSS pseudo-element chrome engine
High-performance asset bundler
Standalone self-contained binary
Reveal.js orchestrator & transitions
Asciinema player integration
Theme-scoped CSS variable cascades
Dual-screen presenter display mode
Discuss how each tier cleanly maps to a separate responsibility in the codebase.
PALETTE: Slate Dark (Default)
AST.optimize(nodes) do |pass|
pass.inline_constants!
pass.fold_pure_expressions!
pass.prune_dead_branches!
end
High-throughput static tree transformation reducing code size and instruction count.
Bidirectional algorithm avoids explicit annotations
Flow-sensitive nil-checking eliminates runtime panics
Generic union types with zero memory overhead
ThinLTO cross-module aggressive inlining
Automatic SIMD vector loop unrolling
Target-specific machine code optimization
Highlight the primary AST optimization engine on the left alongside supporting pipeline modules.
PALETTE: Slate Dark (Default)
Q1 2026
Q2 2026
Q3 2026
Q4 2026
Extract engine from prototype
15 semantic layouts
Zero inline style constraint
Opal CLI integration
Live HTTP preview server
Theme-scoped palettes
Jasper docs compiler
Carbon doctor and badges
GitHub Pages automated CI
Community theme registry
PDF / PNG export pipeline
Interactive terminal plugins
Review past achievements and upcoming milestones on the timeline track.
PALETTE: Slate Dark (Default)
v0.1.0
Established the strict zero-inline-styles standard and YAML-to-Reveal compilation pipeline.
Eliminated HTML blobs in favor of clean semantic classes
Sub-50ms native compilation verified with Crystal compiler
v0.1.8
Added 6 production themes with companion JSON palettes and Opal CLI commands.
Per-slide palette switching with CSS custom properties
Added new-theme and add-slide CLI scaffolding generators
v0.1.18
Integrated Celestine SVG vector sparklines and multi-theme live landing previewer.
Direct SVG rendering without external JavaScript dependencies
One-click automated GitHub Actions Pages deployment
v0.2.0
Expanded layout catalog to 33 distinct layouts covering timelines, calendars, and artistic editorial slides.
Full coverage across stacking, Gantt roadmaps, and circular flywheels
Zero inline style verification integrated into automated test suite
Walk through the Vertical Timeline layout. Highlight the continuous glowing vertical rail, milestone badges, status dots (done, active, pending), and clean typography.
PALETTE: Slate Dark (Default)
Core Compiler
BACKEND
Zero-Alloc Parser
SHIPPED
LLVM AOT Pipeline
ACTIVE
Layout Engine
FRONTEND
Stacking Family (1L-2R)
DONE
Timelines & Calendars
CURRENT
Artistic Keynote Suite
PLANNED
Developer Tooling
TOOLING
Live HTTP Preview Engine
GA
LSP Syntax Diagnostics
IN DEV
Present the Roadmap Timeline (Gantt) layout. Emphasize that all duration bars and column spans are governed purely by CSS grid data attributes without a single inline style.
PALETTE: Slate Dark (Default)
Releases
Code Freezes
Conferences
Audits
Present the Calendar Month layout. Show how the 7-column grid cleanly organizes multi-week schedules, event category chips, and today's active day indicator.
PALETTE: Slate Dark (Default)
09:00 - 10:30
Main Auditorium
KEYNOTE
Keynote: Zero Inline Styles
Alex Rivera, Chief Architect
Why semantic HTML and theme-scoped CSS variables beat messy presentation blobs.
11:00 - 12:30
Hall A
DEEP DIVE
Compiler Pipeline Deep Dive
Elena Chen, Compiler Team
Macro metaprogramming and static layout resolution techniques.
09:30 - 11:00
Main Auditorium
SYSTEMS
Sub-50ms Preview Servers
Marcus Vance, Infrastructure
Zero-dependency HTTP server engineering with instant browser reload hooks.
13:30 - 15:00
Room 102
WORKSHOP
Vector Chart Generation
Sarah Jenkins, Design Systems
Rendering SVG sparklines without client-side JavaScript charting libraries.
10:00 - 11:30
Main Auditorium
DEVOPS
Automated Pages CI/CD
David Kim, Release Engineering
End-to-end GitHub Actions publishing with multi-theme gallery compilation.
14:00 - 15:30
Grand Hall
PANEL
Keynote: Future of Slides
Executive Panel
The roadmap towards Sunstone v1.0 and interactive 3D WebGL canvases.
Present the Calendar Schedule layout. Ideal for conference agendas, training workshops, and multi-track hackathons.
PALETTE: Slate Dark (Default)
Write high-signal presentation content in declarative, readable YAML slides.
Strict schema verification ensures every slide satisfies layout constraints.
Emit zero-inline-style semantic markup paired with theme-scoped palettes.
Instant static deployment to GitHub Pages or static web servers with zero npm deps.
Walk through the four phases of the Sunstone authoring and build pipeline.
PALETTE: Slate Dark (Default)
COMPILER CORE
OPTIMIZATION FLYWHEEL
Zero-Overhead Feedback Loop
Single-pass parser transforms slide definitions directly into typed AST nodes.
Zero intermediate JSON overhead
Singleton layout instances resolve slide geometries with zero memory allocation.
Constant-time O(1) resolution
Per-slide palette variables are mapped dynamically to semantic CSS custom properties.
Strict style isolation per slide
Produces pristine Reveal.js HTML and Markdown notes without any inline styles.
100% test-verified cleanliness
Present the Radial Cycle / Flywheel layout. Highlight the artistic circular composition with its central glowing hub and orbital interconnected stages.
PALETTE: Slate Dark (Default)
01
Separation of Concerns is Non-Negotiable
“When slide structure is entangled with inline styles, engineering teams lose the ability to review and version presentations like code.”
— The Sunstone Architecture Manifesto
HTML defines the meaning and hierarchy of the presentation; CSS governs layout, geometry, and visual expression.
Every layout verified for zero inline styling attributes
Clean DOM trees render with lightning speed on any device
Swap brand palettes or visual styles across thousands of slides without touching a single YAML content file.
Theme-scoped CSS custom properties
One-line scaffold for custom corporate designs
Present the Editorial Split layout. Notice the high-contrast magazine aesthetic, giant accent numeral, pull-quote with vertical border rule, and offset informational cards.
PALETTE: Slate Dark (Default)
▼
Combining high-performance systems engineering with elegant, responsive semantic presentations.
33 Semantic Layouts
6 Production Themes
Strict Zero-Inline-Styles
Self-Contained 6MB Binary
Present the Convergence layout. Three distinct engineering pillars channel inward toward the glowing central synthesis card.
PALETTE: Slate Dark (Default)
Reveal.js
Deck orchestration & transitions
Highlight.js
Syntax highlighting engine
Theme CSS
Strict zero-inline styles
YAML Parser
Type-safe deck loading
Layout Router
15 semantic renderers
Assets Manager
Embedded vendor & themes
Opal CLI
Terminal DSL & live server
Jasper Docs
Multi-track guide compiler
Carbon Engine
Changelog, doctor & badges
Explain how information flows downward from Presentation through Compiler to Ecosystem shards.
PALETTE: Slate Dark (Default)
High-performance systems programming & native code generation
Compiler architecture, AST pipelines, and macro metaprogramming
Developer ergonomics, command-line interfaces, and terminal TUIs
Deterministic memory architecture and bare-metal concurrency
Creator of Opal (CLI/TUI), Carbon (VCS/doctor), and Jasper (docs compiler)
Active contributor and maintainer across the Crystal shard ecosystem
Architect of zero-dependency and zero-inline-style design patterns
Speaker on reproducible presentation engineering and systems design
Introduce the presenter and outline background experience.
PALETTE: Slate Dark (Default)
Choose the optimal pipeline for your development and production lifecycle.
sunstone serve --port 8000
Port Hunting
Automatic 8000..8020
Dev Server
Built-in Crystal HTTP
Instant feedback loop with hot asset recompilation and browser synchronization.
sunstone build --out dist
Output Size
< 1.5MB total
Zero Dependencies
Pure HTML/CSS/JS
Deployment
GitHub Actions CI
Build Velocity
< 300ms Compile
Single deterministic distribution directory ready for GitHub Pages or CDN.
SUMMARY
Seamlessly transition from local slide drafting to production GitHub Pages deployment.
Contrast development ergonomics with production CI deployment efficiency.
PALETTE: Slate Dark (Default)
Traditional Slideware
Marp / Markdown
Sunstone
Pervasive inline CSS & absolute coords
Limited styling / inline