+ {w < 0.999 ? })
: null}
+ {w > 0.001 ? })
: null}
+
+ )
+}
+
+/** 地面柔和阴影 */
+export const GroundShadow: React.FC<{ size: number }> = ({ size }) => (
+
+)
diff --git a/training-videos/src/DemoVideo.tsx b/training-videos/src/DemoVideo.tsx
new file mode 100644
index 000000000..532f8f0cf
--- /dev/null
+++ b/training-videos/src/DemoVideo.tsx
@@ -0,0 +1,268 @@
+import React from 'react'
+import { AbsoluteFill, Sequence, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'
+import { MOTIONS, type MoveId } from '../../TUICallKit-Vue3/training/pose/motions.ts'
+import { EXERCISES } from '../../TUICallKit-Vue3/training/pose/exercises.ts'
+import { MISTAKE_FRAMES, peakFrame } from '../../TUICallKit-Vue3/training/pose/coachFrames.ts'
+import { CoachMotion, CoachPose, GroundShadow } from './CoachFrames'
+import { FONT, INK, MUTED, darken, tint } from './theme'
+
+export type DemoProps = { move: MoveId }
+
+/** “错误 vs 正确”卡片里人物的放大与裁切（不同动作人物高度不同） */
+const MISTAKE_VIEW: Record
+
+)
+
+const Intro: React.FC<{ move: MoveId }> = ({ move }) => {
+ const f = useCurrentFrame()
+ const { fps } = useVideoConfig()
+ const ex = EXERCISES[move]
+ const s = spring({ frame: f, fps, config: { damping: 14 } })
+ const coachIn = spring({ frame: f - 8, fps, config: { damping: 16 } })
+ return (
+
+
+ AI 跟练 · 小甄教练
+
+ {name}
+
+
+ {ex.name}
+ {ex.tagline}
+
+ {ex.targets.map((t) => (
+
+ {t}
+
+ ))}
+
+
+
+
+
+ 示范
+
+ {rep}
+ 次
+
+
+
+
+
+
+ {spec.phaseLabel(phase)}
+
+
+
+
+
+
+
+
+ 动作要领
+ {ex.keyPoints.map((k, i) => {
+ const s = spring({ frame: f - 18 - i * 30, fps, config: { damping: 16 } })
+ return (
+
+
+ )
+ })}
+
+ {i + 1}
+
+ {k}
+
+
+ )
+ }
+ return (
+ {ok ? '✓' : '✕'}
+
+
+
+
+ {ok ? ex.mistake.right : ex.mistake.wrong}
+ 错误 vs 正确
+
+ {panel(false, 0)}
+ {panel(true, 1)}
+
+ 跟练时 AI 会实时提醒你
+
+ {corner({ left: 0, top: 0, borderLeftWidth: 12, borderTopWidth: 12, borderTopLeftRadius: 40 })}
+ {corner({ right: 0, top: 0, borderRightWidth: 12, borderTopWidth: 12, borderTopRightRadius: 40 })}
+ {corner({ left: 0, bottom: 0, borderLeftWidth: 12, borderBottomWidth: 12, borderBottomLeftRadius: 40 })}
+ {corner({ right: 0, bottom: 0, borderRightWidth: 12, borderBottomWidth: 12, borderBottomRightRadius: 40 })}
+
+
+
+
+
+ 站到镜头前，一起练
+ AI 自动数次数 · 实时纠正动作
+
+
+ )
+ })}
+
+
+ {ex.name}
+