HyperFrames Best Practices
Trusted89/100Best practices for programmatic video creation using HyperFrames, plain HTML compositions with GSAP animations rendered to MP4, with full Hebrew and RTL support. Covers composition authoring, data-* timing attributes, GSAP timeline contract, layout-before-animation methodology, visual identity gate, Hebrew fonts via Google Fonts auto-fetch (Heebo, Rubik, Assistant), RTL text with dir="rtl", Hebrew captions via Whisper, Hebrew voiceover via external TTS (Kokoro doesn't support Hebrew), audio-reactive visuals, scene transitions, and bidirectional text with <bdi>. Use when building HTML-based video content or Hebrew social/marketing videos without React. Do NOT use for Remotion or general React video work.
Trust score 89/100 (Trusted) · 37+ installs · 3 GitHub contributors · MIT license
Building HTML-based videos with Hebrew text hits three gaps HyperFrames does not document. Hebrew Google Fonts (Heebo, Rubik, Assistant) work fine, but only if you skip the usual `<link>` or `@import`, the compiler fetches them itself. dir="rtl" does not propagate to every place that needs it, and GSAP entrance directions are not mirrored automatically. The built-in Kokoro TTS supports only 8 languages (en-us, en-gb, es, fr-fr, hi, it, pt-br, ja, zh) and Hebrew is not one of them, so Hebrew narration must come from an external TTS and load as a normal <audio> element.
skills-ilnpx skills-il add skills-il/developer-tools@v1.1.0-hyperframes-best-practices --skill hyperframes-best-practices -a claude-codeInstall on Claude.ai, Claude Desktop, ChatGPT, Manus, or other platforms
- 1. Click "Download ZIP" to download the skill files.
- 2. Open Claude Desktop and go to Customize > Skills.
- 3. Click "+" and select "Upload a skill", then upload the ZIP file.
- 4. Start a new conversation. The skill will activate automatically when relevant.
When to Apply
- Building HTML-based video content for Israeli audiences (social, marketing, explainer) without a React stack
- Generating Hebrew TikTok, Reels, or Shorts with word-highlighted captions
- Producing Hebrew explainer videos with AI voiceover that keeps deterministic rendering
- Producing bilingual Hebrew+English brand content that does not break on bidi
- Migrating from Remotion to an HTML-first video stack, without compilation or React
Try These Prompts
Create a HyperFrames composition in Hebrew at 1920x1080, 10 seconds long, with a title and subtitle. Use the Heebo font (the compiler auto-fetches from Google Fonts), apply dir="rtl" to .scene-content, and GSAP entrance animations coming from the right (positive x). Dark background, calm motion.
Build a vertical 1080x1920 Reel for TikTok with Hebrew narration (narration-he.wav) and word-highlighted captions. Transcribe with npx hyperframes transcribe narration-he.wav --model medium --language he. Show up to 3 words on screen at a time and highlight the active word in accent color. Captions in Rubik Black 900.
Produce a 60-second Hebrew explainer video. The built-in Kokoro does not support Hebrew, generate the narration with ElevenLabs (Hebrew voice, 22 kHz, mono), save as narration.wav, and load in HyperFrames as <audio data-start="0" data-duration="60" data-track-index="2">. Sync word-level captions and add 3 scenes with crossfades between them.
Create a composition with an English brand name (Acme) embedded inside Hebrew headlines. Wrap every English run with <bdi>, set font-family Heebo for Hebrew and Inter for English, and confirm punctuation stays on the correct side of each paragraph.
Frequently Asked Questions
Changelog
Fixed a broken TTS link, added a Troubleshooting section and Hebrew bidi details, and corrected a typo.
May 14, 2026
Related Skills
Author: skills-ilGuide Israeli startup operations including company formation, Innovation Authority grants, investment agreements, R&D tax benefits, and employee stock options (Option 102). Use when user asks about starting a company in Israel, IIA grants, "Innovation Authority", SAFE agreements (Israeli), convertible notes, Option 102, employee stock options in Israel, R&D tax benefits, preferred enterprise, Yozma 2.0, Delaware flip, or Israeli startup legal/financial setup. Do NOT use for non-Israeli company formation or international tax advice. Always recommend consulting with Israeli lawyer and accountant for binding decisions.
Author: skills-ilConvert between Hebrew (Jewish) calendar and Gregorian dates, look up Israeli holidays, format dual dates for Israeli documents, and calculate Israeli business days. Use when user asks about Hebrew dates, "luach ivri", Jewish calendar, Israeli holidays, "chagim", Shabbat times, or needs dual-date formatting for Israeli forms. Do NOT use for Islamic Hijri calendar or non-Israeli holiday calendars.
Author: skills-ilBuild and configure Make.com scenarios for Israeli business processes, including Morning (formerly Green Invoice) sync, iCount accounting, Monday.com board automation, Priority ERP data exports, WhatsApp Business messaging, and payment gateways (Cardcom, Tranzila, Grow, Bit). Covers Make.com AI Agents, the Make.com MCP server for exposing scenarios as agent tools, Israel 2026 Invoice Reform, community modules for Israeli apps, Hebrew data transformations, Data Store for VAT period tracking, and Shabbat-aware scheduling. Do NOT use for n8n workflows (use n8n-hebrew-workflows) or Zapier Zaps (use zapier-israeli-integrations).
Use at your own risk. Terms of Use · Security
Want to build your own skill? Try the Skill Creator · Submit a Skill