HyperFrames Best Practices
Trusted82/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 82/100 (Trusted) · 67+ installs · 4 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-ilHow to use this skill
Not sure how? Read the guide- 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.
Developers? Install via command line (CLI)
npx skills-il add skills-il/developer-tools@v1.1.1-hyperframes-best-practices --skill hyperframes-best-practices -a claude-codeWhen 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
Maintenance update: GSAP pinned to 3.15.0, fixed dead upstream reference links, corrected the bidi digit-wrapping guidance, added an in-tool ElevenLabs Hebrew TTS path, added the render step, and raised the Hebrew Whisper default to medium.
Jun 28, 2026
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-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).
Author: skills-ilCompare cloud hosting costs for Israeli startups and developers across AWS (il-central-1 Tel Aviv), Azure (Israel Central), GCP (me-west1 Tel Aviv), Oracle Cloud (il-jerusalem-1 Jerusalem), and Israeli providers like Kamatera. Use when the user needs to evaluate cloud pricing with Israel-specific considerations including data residency under Privacy Protection Law Amendment 13, latency from Tel Aviv, NIS billing options, startup credit programs (AWS Activate, Google for Startups, Microsoft Founders Hub, Israel Innovation Authority Telem program with subsidized Nvidia B200 GPUs), and FinOps cost optimization strategies. Do NOT use for comparing on-premise hosting, colocation services, or non-cloud SaaS pricing.
Use at your own risk. Terms of Use · Security
Want to build your own skill? Try the Skill Creator · Submit a Skill