MALIANG DECK
DSL-First Slide Systems
Build once in typed JSON, preview interactively in HTML, and export from the same canonical deck source.
DSL
HTML
EXPORT
ARCHETYPE: Hero Cover | ANIMATION SET: Cinematic (scale-in, zoom-pop, blur-in — 700-900ms, custom easing) | FX: starfield for atmospheric depth. Glass card left + concentric rings/orb right. Chips summarize key tags. MACRO CANDIDATE: chip-row component would collapse 6 chip elements into 1 invocation.
01
From Structure to Showcase
The deck DSL keeps layout, motion, charts, tables, formulas, and presenter notes in one auditable source.
ARCHETYPE: Section Divider | ANIMATION SET: Cinematic (shrink-in, stretch-x, fade-up — 600-800ms) | FX: galaxy-swirl for dramatic pause. Large watermark number + accent bar + title/subtitle. Transition into this slide benefits from autoAnimate 'zoom' mood.
CORE PROMISE
Three layers keep production reliable
◆
Typed DSL
Slides are authored as validated elements, charts, tables, formulas, layouts, and notes rather than hand-edited output files.
●
Runtime polish
HTML previews support transitions, FX, progressive reveals, presenter tools, morphing, and interactive visualization.
▲
Export discipline
PDF, PPTX, and static HTML exports are regenerated from the same JSON source so review and delivery stay aligned.
ARCHETYPE: Three-Card Feature Layout | ANIMATION SET: Editorial (fade-down, fade-up, fade-right — 500-650ms, staggered delays) | FX: data-stream for technical ambiance. Group elements wrap each card — one animation per group, children inherit. MACRO CANDIDATE: 'feature-card' component would collapse each 5-element group into 1 invocation with props {icon, accent, heading, body}.
AUTHORING MODEL
A professional deck should behave like a designed system
Maliang separates semantic slide content from runtime rendering. That gives authors room to add motion and visual richness without losing exportable structure.
• Stable IDs support animation, export, and review • Structured elements keep charts and tables editable • Speaker notes preserve presenter intent
JSON DSL → HTML Preview → PDF / PPTX
ARCHETYPE: Two-Column Content | ANIMATION SET: Editorial (fade-down, fade-up, fade-left — 500-700ms) | FX: constellation for subtle depth. Left: title + body + bullets. Right: glass card visual placeholder. Dashed connector bridges the two. The right glass card is intentionally a placeholder — replace with diagram, image, or code.
PIPELINE SIGNALS
Feature coverage grows without abandoning the DSL
91 0 28 42 56 72 91 85 78 65 52 48 Q1 Q2 Q3 Q4 Q5
Series ASeries B
+225%
Representative coverage across rendering, animation, export, and workflow surfaces.
ARCHETYPE: Chart Evidence | ANIMATION SET: Data (step 0 = title, step 1 = chart with blur-in, step 2 = callout with zoom-pop — 500-700ms) | FX: data-stream for analytical atmosphere. Three-step narrative build: context → data → insight. ChartStyle uses typed palette for cross-renderer fidelity.
SHOWCASE METRICS
What this example demonstrates at a glance
Typed surfaces
9+
element families represented
Motion patterns
20+
animations and FX modules
Export target
HTML
self-contained static folder
7200 0 Jan Feb Mar Apr May Jun
Monthly Active
ARCHETYPE: KPI Dashboard | ANIMATION SET: Data (step 0 = header, step 1 = metric cards with fade-up stagger, step 2 = trend chart with blur-in) | FX: constellation for subtle ambiance. Three metric groups with accent bar + value + caption, plus a bar chart trend strip below. MACRO CANDIDATE: 'metric-card' component would collapse each 5-element group into 1 invocation with props {label, value, caption, accent}.
Choosing runtime polish with export discipline
Strengths
• Interactive HTML feels alive • Typed DSL remains inspectable • Theme and FX assets are portable • Notes travel with the deck
Tradeoffs
• WebGL/CDN features need connectivity • Dense effects require restraint • Static exports need fallbacks • Complex decks need validation
The practical rule: add motion where it explains structure, and keep the canonical deck exportable.
ARCHETYPE: Side-by-Side Comparison | ANIMATION SET: Dramatic (step 0 = title, step 1 = left card, step 2 = right card, step 3 = synthesis thesis) | Two glass cards with contrasting accent colors (lime = positive, pink = constraints). Bottom thesis synthesizes the comparison. Classic 'strong vs bounded' pattern.
EXPORT READINESS
What each showcase deck proves
DimensionMetric AMetric BStatus
Performance94.2%+12.3ppOn track
Reliability99.97%+0.02ppExceeded
Scalability10x baseline3x priorOn track
Cost efficiency$0.42/unit−18%Improved
User satisfaction4.7 / 5.0+0.3Exceeded
Source: Maliang Deck example suite, regenerated from source DSL.
ARCHETYPE: Data Table | ANIMATION SET: Data (step 0 = header, step 1 = table with blur-in) | FX: none (clean focus on data). TableStyle uses typed hex colors for cross-renderer fidelity. Theme CSS adds border-radius and box-shadow for HTML polish.
Showcase publishing roadmap
A lightweight path from curated examples to a GitHub Pages gallery.
1
Curate
Revise source DSL, theme assets, and deck metadata.
2
Export
Validate every deck and export static HTML folders.
3
Publish
Publish the generated gallery through GitHub Pages Actions.
ARCHETYPE: Horizontal Timeline | ANIMATION SET: Editorial + Dramatic hybrid (step 0 = title + connector line, steps 1–3 = individual phase nodes + cards) | FX: sparkle-trail for progressive energy. Three-phase roadmap with numbered nodes along a horizontal connector. MACRO CANDIDATE: 'timeline-section' component (see macro-authoring-demo) would reduce 18 elements to 1 invocation.
Build decks like systems
Explore the source DSL, exported HTML, and hosting workflow.
maliang-deck/examples · GitHub Pages ready
ARCHETYPE: Centered Closing | ANIMATION SET: Cinematic (zoom-pop, blur-zoom, fade-up — 700-900ms) | FX: starfield echoing the cover for bookend symmetry. Centered composition: decorative orb → headline → subtitle → contact. The orb uses the '-orb' naming convention for CSS gradient + screen blend override.