@markdy/renderer-dom

@markdy/renderer-dom

Web Animations API renderer for MarkdyScript scenes. Translates a parsed AST into DOM elements and drives the animation timeline.

Features

• Browser-native — Web Animations API + CSS transforms, no Canvas or GSAP
• Emoji stick figures — figure actor type with articulatable limbs, shoulder/hip joints, and body-part rig
• Expressive gestures — built-in wave, nod, jump, bounce, and multi-part pose actions
• Seek-safe — manual currentTime control enables reliable seek() in any direction
• Face expressions — instant emoji face swaps that work correctly on seek-back
• Speech bubbles — auto-positioned bubbles with fade-in/fade-out
• Z-index layering — z modifier for actor depth ordering
• Single dependency — only @markdy/core

Installation

pnpm add @markdy/core @markdy/renderer-dom

Package position (text)

@markdy/core -> @markdy/renderer-dom -> browser scene playback

This package consumes parsed AST and drives DOM + Web Animations API timelines.

Output preview

Usage

import { createPlayer } from "@markdy/renderer-dom";

const player = createPlayer({
  container: document.getElementById("scene")!,
  code: `
    scene width=600 height=300 bg=white
    actor hero = figure(#c68642, m, 😎) at (200, 150)
    @0.0: hero.enter(from=left, dur=0.8)
    @1.5: hero.say("Hello!", dur=1.2)
    @1.5: hero.face("😄")
  `,
  autoplay: true,
});

// Playback control
player.pause();
player.seek(1.5);   // jump to 1.5 seconds
player.play();
player.destroy();    // clean up DOM + cancel animations

API

createPlayer(options: PlayerOptions): Player

Option	Type	Default	Description
container	HTMLElement	(required)	DOM element to mount the scene into
code	string	(required)	MarkdyScript source code
assets	Record<string, string>	{}	Asset URL overrides (key = asset name)
autoplay	boolean	true	Start playing immediately
loop	boolean	true	Loop the animation when it reaches the end
copyright	boolean	true	Show a small "Powered by Markdy" badge below the animation
progressBar	boolean	true	Show a rainbow progress bar around the viewport border

Player

Method	Description
play()	Start or resume playback
pause()	Pause at current position
seek(seconds)	Jump to a specific time
destroy()	Remove DOM elements and cancel all animations

Module Structure

src/
  types.ts        — ActorState, FaceSwap, easing utilities
  figure.ts       — Stick-figure DOM factory (emoji body parts)
  actors.ts       — Actor element factory (sprite, text, figure, box)
  animations.ts   — Timeline → WAAPI Animation builder
  player.ts       — Public API, rAF loop, face-swap engine
  index.ts        — Barrel exports

Documentation

• Syntax Reference — complete DSL language spec
• Architecture — renderer internals and playback design

License

MIT