@markdy/astro 0.3.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/astro",
-  "version": "0.3.0",
+  "version": "0.5.1",
   "description": "Astro island component for MarkdyScript animations.",
   "license": "MIT",
   "type": "module",
@@ -37,7 +37,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/renderer-dom": "0.3.0"
+    "@markdy/renderer-dom": "0.5.1"
   },
   "peerDependencies": {
     "astro": ">=4.0.0"

package/src/Markdy.astro

@@ -36,6 +36,10 @@ export interface Props {
   assets?: Record<string, string>;
   /** Start playing as soon as the scene is hydrated. Defaults to true. */
   autoplay?: boolean;
+  /** Loop the animation when it ends. Defaults to true. */
+  loop?: boolean;
+  /** Show a small "Powered by Markdy" badge below the animation. Defaults to true. */
+  copyright?: boolean;
   class?: string;
   /**
    * Short human-readable title for the animation.
@@ -57,6 +61,8 @@ const {
   bg = "white",
   assets = {},
   autoplay = true,
+  loop = true,
+  copyright = true,
   class: className,
   title = "Markdy animation",
   description,
@@ -68,10 +74,12 @@ const {
   data-markdy-code={code}
   data-markdy-assets={JSON.stringify(assets)}
   data-markdy-autoplay={String(autoplay)}
+  data-markdy-loop={String(loop)}
+  data-markdy-copyright={String(copyright)}
   role="img"
   aria-label={title}
   aria-busy="true"
-  style={`width:${width}px;height:${height}px;overflow:hidden`}
+  style={`max-width:${width}px;width:100%;aspect-ratio:${width}/${height};overflow:hidden`}
 >
   <!--
     SSR placeholder: keeps layout stable before the island hydrates.
@@ -82,7 +90,7 @@ const {
   <div
     class="markdy-placeholder"
     aria-hidden="true"
-    style={`width:${width}px;height:${height}px;background:${bg};display:flex;align-items:center;justify-content:center`}
+    style={`width:100%;height:100%;background:${bg};display:flex;align-items:center;justify-content:center`}
   >
     <span
       style="font-family:sans-serif;font-size:12px;color:#bbb;letter-spacing:0.05em"
@@ -98,7 +106,7 @@ const {
   -->
   <noscript>
     <div
-      style={`width:${width}px;height:${height}px;background:${bg};display:flex;align-items:center;justify-content:center`}
+      style={`width:100%;height:100%;background:${bg};display:flex;align-items:center;justify-content:center`}
     >
       <p
         style="font-family:sans-serif;font-size:14px;color:#888;text-align:center;padding:1rem;margin:0"
@@ -130,6 +138,8 @@ const {
     }
 
     const autoplay = el.dataset.markdyAutoplay !== "false";
+    const loop = el.dataset.markdyLoop !== "false";
+    const copyright = el.dataset.markdyCopyright !== "false";
 
     // Code-split: renderer-dom is NOT part of the initial page bundle.
     const { createPlayer } = await import("@markdy/renderer-dom");
@@ -137,9 +147,8 @@ const {
     // Clear the SSR placeholder and mount the canvas atomically after the
     // async import resolves, so there is no flash of empty content.
     el.innerHTML = "";
-    el.style.overflow = "visible";
 
-    createPlayer({ container: el, code, assets, autoplay });
+    createPlayer({ container: el, code, assets, autoplay, loop, copyright });
 
     el.dataset.markdyInit = "done";
     el.removeAttribute("aria-busy");
@@ -169,9 +178,10 @@ const {
   }
 
   // ── Intersection observer ────────────────────────────────────────────────
-  // Observe every unhydrated .markdy-root element and hydrate it when it
-  // enters the viewport (100 px root margin so the scene is ready before
-  // the user actually sees it).
+  // Observe every unhydrated .markdy-root element.  We use threshold: 1.0
+  // so hydration (and autoplay) only triggers once the element's bottom
+  // edge is fully inside the viewport — the animation is never started
+  // while partially cut off.
 
   const observer = new IntersectionObserver(
     (entries) => {
@@ -191,7 +201,7 @@ const {
         }
       }
     },
-    { rootMargin: "100px" },
+    { threshold: 1.0 },
   );
 
   function initAll(): void {