Communitygithub.com

suryxnshsingh/hyperframes

Écrivez du HTML/CSS et générez des MP4 déterministes avec HyperFrames de HeyGen ; plus de 450 blocs prêts à l'emploi (transitions, typo cinétique, sous-titres, graphiques, cartes, 3D), un sous-skill /figma qui extrait les tokens de marque et les frames en vidéo, reverse-any-video, mode diaporama/présentation, et portage Remotion→HyperFrames. Idéal pour films de lancement, vidéos explicatives, clips sociaux, cartons titre, ou quand l'utilisateur souhaite une vidéo à partir de HTML plutôt que de React.

Qu'est-ce que hyperframes ?

HyperFrames est un outil de génération vidéo basé sur HTML/CSS, développé par HeyGen. Contrairement à des solutions comme Remotion qui reposent sur React, HyperFrames permet de créer des vidéos déterministes (MP4) en écrivant simplement du HTML et des CSS, ce qui le rend plus accessible pour les designers et développeurs qui ne sont pas familiers avec React. Il propose plus de 450 blocs préconstruits – transitions, typographie cinétique, sous-titres, graphiques, cartes, éléments 3D – que l'on peut assembler visuellement. Le skill inclut plusieurs sous-compétences spécialisées : `/figma` pour importer des tokens de marque et des calques Figma directement dans la vidéo, `reverse-any-video` pour cloner une vidéo existante, `slideshow` pour des présentations en direct, et `remotion-to-hyperframes` pour porter des projets Remotion. Il est disponible via le plugin HeyGen pour Claude Code (commande `claude plugin marketplace add heygen-com/hyperframes`) et via un CLI Node 22+. L'approche est idéale pour les films de lancement, les vidéos explicatives, les clips sociaux et les cartons titre, surtout lorsque l'équipe privilégie le HTML/CSS pur au lieu de React.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/suryxnshsingh/design-engineering-skills/tree/main/hyperframes
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

hyperframes (pointeur amont en direct)

Amont : https://github.com/heygen-com/hyperframes · docs : https://hyperframes.heygen.com · catalogue : https://hyperframes.heygen.com/catalog

1. Installation recommandée (plugin versionné avec mise à jour automatique)

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
# ou par projet :
npx hyperframes skills update

Utilisez ensuite /hyperframes:hyperframes (routeur), plus figma, hyperframes-cli, hyperframes-registry, media-use, reverse-any-video, slideshow, remotion-to-hyperframes.

2. Solution de repli : lire les skills en direct

bash ~/.claude/skills/design-engineer/scripts/upstream.sh hyperframes     # sparse checkout : skills/, docs/guides, README, AGENTS

Commencez par <PATH>/skills/hyperframes/SKILL.md (contrat de rendu et boucle de travail). Ensuite, le sous-skill correspondant :

  • Lien Figma ou tokens de marque → skills/figma/SKILL.md
  • Visuel nommé (glitch, grain, graphique, carte) → skills/hyperframes-registry/SKILL.md avant de construire quoi que ce soit à la main
  • Musique, effets sonores, voix off, avatar, cutouts → skills/media-use/SKILL.md
  • Copier une vidéo existante → skills/reverse-any-video/SKILL.md
  • Présentation / live → skills/slideshow/SKILL.md
  • Portage Remotion/Lottie/Three/Manim → skills/remotion-to-hyperframes/SKILL.md

3. CLI (Node 22+)

npx hyperframes init my-video && cd my-video
npx hyperframes add data-chart
npx hyperframes preview
npx hyperframes render

4. Choix par rapport à Remotion

Équipe déjà dans React/Remotion → remotion. Promo produit sur page réelle avec cartes de prise → video-shotcraft. Court métrage stylisé avec narration et bande sonore → lemo-opuscar.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

suryxnshsingh/design-engineer

Orchestrator for frontend and design-engineering work. Read this first whenever a task involves UI design, design systems, visual polish or AI-slop review, diagrams, videos or promos, 3D (Three.js or Blender), or Penpot/Figma files. It routes to the right specialist skill (impeccable, ui-ux-pro-max, diagram-design, hyperframes, remotion, video-shotcraft, lemo-opuscar, img2threejs, blender-mcp, penpot), chains them for multi-step jobs, and keeps every one on its latest upstream.

suryxnshsingh/video-shotcraft

Make cinematic product promo videos of a real web app in Remotion: captures the real pages, picks from ~124-150 shot recipe cards, offers the Ink Press template, beat sync and Freesound sound design. Use for "make a promo/launch video of my site/app", single shot-card effects, or finding/aligning SFX for an existing product video. Always fetches latest.

Skills associés

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community