Markdy: 開発者向けのオープンソースアニメーション DSL エンジン
マークダウンでアニメーションMarkdyは、オープンソースのアニメーション DSL エンジンです。
Markdownを使用してシーンを記述し、AIが生成したコードを実行することで、動画やWebページにアニメーションを追加できます。
原文の冒頭を表示（英語・3段落のみ）
Key Features 📦Zero Dependencies Pure TypeScript parser — no DOM, no runtime deps. 🌐Web-Native Renderer Web Animations API + CSS transforms. No Canvas, no GSAP. 🤖AI-Agent Friendly Structured DSL that LLMs can generate, validate, and iterate. 🧩Framework Agnostic Works anywhere. Astro island component included. EditorCtrl+Space autocomplete · Cmd+Enter run Preview Every animation starts by defining the canvas. This must be the first line in your .markdy file. scene width=800 height=400 fps=30 bg=#fafafa PropertyDefaultDescription width800Canvas width in pixels height400Canvas height in pixels fps30Frame rate for the rendering engine bgwhiteAny CSS color value (e.g. #1a1a2e) durationautoOverride total length in seconds Actors are the objects in your scene. Place them with at (x, y) and add optional modifiers. actor a = figure(#c68642, m, 😎) at (100, 200) scale 1.2
actor b = text("Hello World") at (50, 50) size 24
actor c = box() at (300, 200) TypeArgumentsDescription text"quoted string"Plain text label. Customise with size. box—100x100 solid box. Great for prototyping. figureskinColor, gender, faceStick figure with articulatable limbs. spriteasset nameRenders an image or icon asset. Modifiers: opacity (0–1), scale, rotate, size (text only), z (layer order). Schedule actions on a timeline with @time: actor.action(). Time is in decimal seconds. @0.5: a.enter(from=left, dur=0.8)
※ 著作権に配慮し、引用は冒頭3段落までです。続きは元記事をご覧ください。