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) · 35+ 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-ilBuild and optimize n8n 2.x automation workflows (stable line 2.21 as of May 2026) with Israeli API integrations including Morning (formerly Green Invoice), EZCount, israeli-bank-scrapers, data.gov.il, SMS gateways, and payment processors (Cardcom v11, Tranzila API v2, Grow by Meshulam). Covers Ni8mare security patches (CVE-2026-21858), AI Agent nodes with native LangChain and RAG (Pinecone/Qdrant/Supabase pgvector), MCP Client Tool and MCP Server Trigger nodes, Israel Invoice Reform 2026 (5,000 NIS threshold from June), Bit payments, Hebrew data handling, Shabbat-aware scheduling, and self-hosting on Israeli cloud. Do NOT use for general n8n tutorials without Israeli context.
Author: skills-ilGuide developers in integrating Israeli agritech tools and precision agriculture platforms including CropX (soil monitoring), Netafim GrowSphere (IoT irrigation), Taranis (crop intelligence), and the broader Israeli agritech ecosystem (approximately 600-750 companies per Start-Up Nation Central agrifoodtech). Use when user asks about agritech APIs, precision agriculture, smart irrigation, "hashkaya cham", crop monitoring, pest detection, Israeli agriculture tech, or needs to build farm management software. Covers irrigation optimization, pest detection, climate data integration, and Israeli agricultural context. Do NOT use for general gardening advice or non-agricultural IoT projects.
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.
Use at your own risk. Terms of Use · Security
Want to build your own skill? Try the Skill Creator · Submit a Skill