superpollo02/educai-hyperframes-video-render

EdTech & Moodle Video Production with HyperFrames

Use this skill when asked to create, structure, or render educational technology videos, Moodle tutorials, SCORM demonstrations, or online course promos.

Key Invariants

1. Pacing & Navigation:
   • Provide a persistent Step Progress Bar in tutorials (.step-bar with active and completed states).
   • Use an animated virtual cursor (#virtual-cursor) with expanding click tap rings to direct viewer focus.
2. Layout & Occlusion Directives:
   • For simulated drag-and-drop or stamp overlays, always add data-layout-allow-overlap="true" and data-layout-allow-occlusion="true" to prevent headless layout check rejections.
3. Sound Mixing:
   • Background music bed must be ducked or set to low volume (data-volume="0.15" to "0.25") to preserve headroom for voiceover.
   • Synchronize tactile audio effects: clicks on buttons, swoosh on scene transitions, chime on correct answers/feedback, and notification on gradebook sync.