skills.rest
Lev-it
Lev-itOFFICIAL
Explore all skills by this author →
GitHub

hyperframes-core

Construct interactive HTML video compositions using data attributes for timing and structure.

Updated Apr 28, 2026
Search Tags:#animation#media control#video composition#HTML video#interactive video
One-click install
npx skills add https://github.com/Lev-it/lev-skills --skill hyperframes-core-lev-it
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-core
Source: https://github.com/Lev-it/lev-skills/tree/main/.claude/skills/hyperframes-core
Command: npx skills add https://github.com/Lev-it/lev-skills --skill hyperframes-core-lev-it

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, lottie, three, animejs, css, waaapi, typegpu, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the process of creating interactive HTML videos with complex compositions, allowing users to leverage data attributes for timing, structure, and more.

Core Features & Use Cases

  • HTML Composition Contract: Defines the structure and rules for creating interactive video compositions using HTML and data attributes.
  • Sub-Compositions: Allows modularization of scenes, making it easier to reuse and manage complex compositions.
  • Media Control: Provides tools for controlling media playback, including video, audio, and text.
  • Use Case: Create a video presentation with multiple scenes, each with its own animation and media elements.

Quick Start

Run the 'hyperframes-core' skill to begin creating a new composition.

Frequently Asked Questions about hyperframes-core

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build interactive HTML video compositions with timed scene sequencing?▼

Interactive HTML video compositions are built by defining predefined HTML structures and data attributes that drive media playback, scene sequencing, and animation timing. This approach simplifies creating complex, multi-scene interactive video presentations.

Can I use GSAP and Lottie for animation timing in HTML video scenes?▼

Yes, the composition system supports GSAP, Lottie, animejs, and the Web Animations API for animation timing. These frameworks integrate directly into the HTML video scenes to orchestrate timed, interactive media elements.

How do I modularize complex video compositions for reuse across multiple scenes?▼

Complex video compositions can be modularized using sub-compositions, which allow individual scenes to be reused and managed independently. This enables efficient scaling of interactive video content across large projects.

Does this approach support 3D video composition elements with Three.js?▼

Yes, Three.js is supported as a dependency, enabling 3D elements within interactive HTML video compositions. This allows for advanced, professional-grade video production combining standard media control with 3D graphics.

What is the best way to control media playback across multiple interactive video scenes?▼

The best way to control media playback is through the integrated media control tools, which manage video, audio, and text elements across multiple scenes. Predefined data attributes synchronize playback and scene sequencing automatically.

Related Skills

Explore More Design & Creative Skills→
Manavv007Manavv007

hyperframes-core

Manages HTML motion graphics projects with GSAP animations and data-attribute timing controls.

Community
Advanced
zeitlinbzeitlinb

remotion-to-hyperframes

Convert Remotion video compositions to HyperFrames HTML compositions.

Community
Advanced
CatRabbit499CatRabbit499

video-js

Render looping browser-based motion graphics videos with React, Framer Motion, GSAP, and Three.js.

Community
Advanced
libz-renlab-ailibz-renlab-ai
13

remotion-to-hyperframes

Convert Remotion video compositions into HTML, CSS, and GSAP animations.

Community
Advanced