HE
typegpu
Создаёт GPU-ускоренные композиции на TypeGPU и WebGPU, синхронизированные с таймлайном HyperFrames через hf-seek. Подходит для рендеринга частиц, эффектов жидкого стекла и шейдеров WGSL.
Что делает навык
Настройка интеграции TypeGPU и WebGPU с таймлайном HyperFrames для создания GPU-ускоренных композиций. Позволяет рендерить кадры, синхронизированные с временем HyperFrames, через событие hf-seek, что подходит для эффектов частиц, жидкого стекла и шейдеров WGSL.
Когда применять
- Рендеринг сложных визуальных эффектов, таких как частицы или жидкое стекло, с использованием WebGPU.
- Создание анимаций на WGSL, которые должны строго синхронизироваться с таймлайном HyperFrames.
- Экспорт видео с гарантией того, что каждый кадр отрендерен на GPU до захвата.
- Разработка интерактивных композиций, реагирующих на изменения времени в плеере HyperFrames.
Как работает
- Инициализировать WebGPU асинхронно через await navigator.gpu.requestAdapter(), но зарегистрировать все GSAP-твины синхронно до любого await.
- Настроить слушатель события hf-seek, которое диспетчеризируется адаптером при каждом seek, и перерисовывать кадр на основе переданного времени.
- Использовать время из window.__hfTypegpuTime или detail.time события hf-seek для рендеринга, избегая использования performance.now().
- При рендеринге видео вызывать await device.queue.onSubmittedWorkDone() после отправки GPU-работы, чтобы убедиться, что канвас очищен перед захватом кадра.
- Добавить проверку доступности WebGPU, так как адаптер не выполняет эту проверку автоматически.
Примеры запросов агенту
Как настроить TypeGPU для рендеринга шейдера WGSL, синхронизированного с таймлайном HyperFrames?
Напиши код для WebGPU-композиции, который обновляется при событии hf-seek и корректно обрабатывает асинхронную инициализацию.
Как гарантировать, что кадр WebGPU полностью отрендерен перед захватом видео в HyperFrames?
Что понадобится
- Среда с поддержкой WebGPU (navigator.gpu)
- Библиотека TypeGPU и адаптер HyperFrames
- Плеер HyperFrames с активным таймлайном
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «heygen-com-typegpu» из репозитория:
# https://github.com/heygen-com/hyperframes
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r heygen-com-typegpu/ ~/.claude/skills/heygen-com-typegpu/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.