MALIANG RUNTIME
Interactive
Motion System
A guided tour of runtime animation, text effects, formula steps, graph rendering, canvas FX, morphing, and presenter controls.
Grand opening — cinematic rings, glowing orb, glass card. All step-0 auto-play with stagger.
01
Element Animations
26 presets across 4 families — fade, scale, bounce, blur
Section divider — Element Animations. Morph pair A: morph-number + morph-shape shared with next slide.
01
Core & Emphasis Animations
fade-up
fade-down
fade-left
fade-right
rise-in
slide-from-left
slide-from-right
slide-from-top
slide-from-bottom
scale-in
zoom-in
zoom-pop
shrink-in
rotate-in
spin-in
flip-in
Entry families are grouped by motion intent so authors can choose effects that clarify sequence instead of decorating every element.
Gallery: all 9 core + 7 emphasis animations. Morph pair A target — morph-number and morph-shape shrink to corner.
Dynamic & Effect Animations
bounce-in
elastic-in
swing-in
drop-in
blur-in
blur-zoom
skew-in
stretch-x
stretch-y
flash-in
Row 1: Dynamic family (4) · Row 2-3: Effect family (6) · 26 total presets — GPU-composited via Web Animations API
Gallery: 4 dynamic + 6 effect animations. All step-0 auto-play.
Progressive Disclosure
Press → or Space to reveal each point:
1. Step 0 — elements auto-play on slide entry with index-based stagger
2. Steps 1-N — click or arrow-right reveals each group sequentially
3. Same step number → simultaneous animation (bullet 2 + highlight)
4. Morph & formula extensions register via registerStepConsumer()
Step 0 elements played automatically above. Steps 1-4 required user interaction.
Step system demo: step-0 auto-play, then click-to-reveal steps 1-4.
02
Text Animations
12 effects with per-character, per-word, and per-line control
Section divider — Text Animations. Morph pair B: morph-text-num + morph-text-orb shared with next slide.
02
Stagger, Wave & Cascade
Hello, Maliang Deck!
Words from edges converge to center
Random reveal order creates surprise
WAVE MOTION
Cascade Drop
Text stagger (3 directions), wave (continuous), cascade. Morph pair B target.
Digital Text Effects
const deck = await maliang.create({ theme: 'neon-glass-dark' });
DECRYPTING ACCESS...
Binary Decode Effect
SYSTEM_ERROR
Digital text effects — typewriter, scramble, decode, glitch.
Kinetic Text Effects
BOUNCE!
Spin Into Place
POP!
Focus Into Clarity
Subtle fade from center outward
Kinetic text effects — bounce, rotate, scale, blur-reveal, fade-chars.
Text on Path
CIRCULAR TEXT PATH • MALIANG DECK • MOTION GRAPHICS • ANIMATION ENGINE •
8-second orbital loop on SVG arc
Animated text on a circular SVG path — 8-second orbital loop.
03
Math & Visualization
KaTeX formulas, 2D function plots, 3D surface renders
Section divider — Math & Visualization. Morph pair C: morph-math-num + morph-math-card shared with next slide.
03
KaTeX Formulas
Step Derivation — click → to advance
KaTeX formulas (static) + click-through step derivation. Morph pair C target.
2D Function Plots
2D function plots — trigonometric and polynomial with draw-on animation.
3D Surface Plots
3D surface plots with orbiting cameras — saddle (coolwarm) + ripple (viridis).
Shape Morphing
Click → to advance through morph steps
Rect: 3 steps — size, color, radius, opacity morphing
Circle: 2 steps — radius, position, color morphing
Shape morphing — rect with 3 morph steps and circle with 2 morph steps, both click-triggered.
Component Morphing
Group container + per-child targeting with stagger — click → to morph
Group with morphSteps + children map
morphSteps on group animate the container while children map targets individual child elements by ID, with configurable stagger delay
Component morphing — group with per-child targeting and stagger delay.
Canvas FX Backgrounds
17 effects driven from the DSL fx property
PARTICLE / PHYSICS
• particle-burst
• confetti-cannon
• firework
• counter-explosion
• magnetic-field
• shockwave
DATA / GRAPH
• knowledge-graph
• neural-net
• data-stream
• constellation
SPACE / AMBIENT
• starfield
• galaxy-swirl
• orbit-ring
• matrix-rain
TEXT / VISUAL
• letter-explode
• typewriter-multi
• word-cascade
• sparkle-trail
FX run behind typed DSL elements and are pre-warmed during transitions; use them for title, divider, and atmosphere slides.
Canvas FX gallery — all 20 effects listed by category with 3 running live.
Slide Transitions
Set via meta.htmlRuntime.transition — this deck uses morph (FLIP-based cross-slide morphing). Elements with matching IDs across slides interpolate position, size, and style.
none — instant cut, no animation
fade — vertical scroll + cross-fade (default)
slide — vertical scroll with softer fade
dissolve — cross-dissolve with subtle blur
zoom — outgoing shrinks, incoming grows
push — both slides move together
cover — new slide covers old with depth shadow
morph (active) — FLIP + CSS property interpolation for matched elements
Slide transition reference — all 7 types + morph. This deck uses morph transition.
The Full Animation Engine
26 presets · 12 text effects · 20 canvas FX · shape & component morphing · morph transitions · KaTeX derivations · 2D/3D graphs · text on path
maliang-deck
Grand finale — bookend symmetry with cover. All step-0 auto-play.