From 27c6d86d504d2eb440ef9f08fdb2626bc3ebfe93 Mon Sep 17 00:00:00 2001
From: iamdoubz <>
Date: Sat, 20 Jun 2026 05:38:25 -0500
Subject: [PATCH] Details animation does not play cont

---
 src/components/TraceRunner.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/TraceRunner.tsx b/src/components/TraceRunner.tsx
index fc81505..2bbf2fd 100644
--- a/src/components/TraceRunner.tsx
+++ b/src/components/TraceRunner.tsx
@@ -219,13 +219,19 @@ export default function TraceRunner({ meta, steps, loggedIn, username, completed
       <div style={{ display: "grid", gap: 18, gridTemplateColumns: "1fr", alignItems: "start" }}>
         <div>
           <div ref={stageRef} className="no-touch-scroll" style={{ position: "relative", width: "100%", maxWidth: 640, margin: "0 auto", aspectRatio: "4 / 3", background: "#fff", border: "2px solid var(--line)", borderRadius: 16, overflow: "hidden" }}>
-            {/* faint trace target (outline base + lines so far) */}
-            <svg viewBox="0 0 400 300" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.28, pointerEvents: "none" }}
-              dangerouslySetInnerHTML={{ __html: meta.baseSvg + "\n" + guideUpTo }} />
-            {/* the slowly-drawn video for the current step */}
-            {playing && <LineDraw lines={step.lines} playKey={playKey} onDone={() => setPlaying(false)} />}
+            {/* the already-drawn outline shown clearly so the child knows what they're adding to */}
+            {meta.baseSvg && (
+              <svg viewBox="0 0 400 300" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.5, pointerEvents: "none" }}
+                dangerouslySetInnerHTML={{ __html: meta.baseSvg }} />
+            )}
+            {/* faint trace target for this lesson's lines so far */}
+            <svg viewBox="0 0 400 300" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.3, pointerEvents: "none" }}
+              dangerouslySetInnerHTML={{ __html: guideUpTo }} />
+            {/* the child's drawing (transparent base so the guide + video show through) */}
             <canvas ref={canvasRef} onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerCancel={onUp}
               style={{ position: "absolute", inset: 0, width: "100%", height: "100%", touchAction: "none", cursor: "crosshair" }} />
+            {/* the slowly-drawn video for the current step — on top so it always shows, even over the imported outline */}
+            {playing && <LineDraw lines={step.lines} playKey={playKey} onDone={() => setPlaying(false)} />}
           </div>
 
           <div className="row" style={{ justifyContent: "center", marginTop: 12, gap: 10 }}>