# anim.uraree.com → Reveal.js ฝัง Lottie + ชาร์ตข้อมูล ลงสไลด์ได้เลย เลื่อนขวา → --- ## 1) Lottie ด้วย embed widget <anim-player src="clinic-heartbeat" autoplay loop style="width:360px"></anim-player> โหลด `embed.js` ผ่าน front-matter `scripts:` ครั้งเดียว แล้ววางแท็ก `<anim-player src="ชื่อไฟล์">` ได้ทุกสไลด์ ---- ### ปรับแต่งได้ <anim-player src="clinic-heartbeat" autoplay loop speed="2" style="width:300px"></anim-player> `speed="2"` · ใส่ `controls` ได้ปุ่ม play/pause · `hover` = เล่นตอนชี้เมาส์ --- ## 2) GSAP diagram — Coagulation cascade <iframe data-src="https://anim.uraree.com/gsap/coagulation-cascade.html" width="820" height="560" style="border:0"></iframe> ไฮไลต์ไหลทีละ factor — GSAP คุมลำดับได้ --- ## 3) ชาร์ตข้อมูล (D3) ด้วย iframe <iframe data-src="https://anim.uraree.com/charts/cbc-trend.html" width="780" height="430" style="background:#fff;border:0;border-radius:10px"></iframe> CBC trend — 2 แกน, hover ดูค่าได้, มีแถบค่าปกติ ---- ### ป้อนข้อมูลคนไข้เอง ส่ง JSON ผ่าน `?data=` ใน URL ของ iframe: ``` .../cbc-trend.html?data=%7B%22labels%22%3A...%7D ``` เปลี่ยนค่าได้ทุก deck โดยใช้ chart ตัวเดียว