# fire-paper-loader

Создаёт прелоадер в виде горящей бумаги на WebGL 1 и OffscreenCanvas. Анимация огня не зависает в веб-воркере, пока основной поток браузера занят сборкой страницы.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 319 установок · ★ 7001
- Автор: MengTo
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/fire-paper-loader/SKILL.md
- Обновлён: 2026-10-25
- HTML: https://affpapa.org/nevibecode/skills/fire-paper-loader

## Что делает

Скилл генерирует загрузочный экран с кольцом тлеющей бумаги на чистом JavaScript и WebGL 1 без библиотек вроде Three.js. Отрисовка пламени на GLSL вынесена в Worker через `OffscreenCanvas`. Скрипт инициализируется прямо в `<head>`. Запуск воркера именно на этапе загрузки стилей критичен: если отложить старт до разбора `<body>`, парсинг DOM и тяжёлые скрипты заблокируют поток, из-за чего анимация встанет на сотни миллисекунд.

Код компилирует шейдеры параллельно через расширение `KHR_parallel_shader_compile`. Пайплайн прогревают заранее. Для этого тестовый кадр рисуется во вьюпорт 1×1 с вызовом `readPixels` ещё до показа экрана зрителю. Радиус кольца рассчитывается через логарифмическую шкалу и пружинную физику, поэтому огонь не замирает даже до получения первых данных о прогрессе. При отсутствии поддержки `OffscreenCanvas` код запускает запасной рендер в основном потоке.

Передачу экрана странице нельзя завершать резким вызовом `worker.terminate()` — в тестах это вызывало зависание интерфейса на 55–240 мс. Процесс глушат сообщением об освобождении контекста через `free`, а сам воркер уничтожают только при уходе вкладки в фон по событию `visibilitychange`.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill fire-paper-loader -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/fire-paper-loader/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/fire-paper-loader/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill fire-paper-loader -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/fire-paper-loader/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill fire-paper-loader -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/fire-paper-loader/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MengTo/Skills fire-paper-loader
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/fire-paper-loader/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill fire-paper-loader -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/fire-paper-loader
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/fire-paper-loader/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill fire-paper-loader -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/fire-paper-loader/SKILL.md

## Когда брать
- предотвратить зависание анимации загрузки при тяжёлом парсинге JS
- собрать прелоадер с тлеющей бумагой на чистом WebGL 1
- настроить параллельную компиляцию GLSL-шейдеров в Worker
- сгладить переход от экрана загрузки к контенту страницы

## Примеры запросов агенту
- Настрой прелоадер с горящей бумагой на OffscreenCanvas для тяжёлого сайта
- Добавь fire-paper-loader в head страницы, чтобы анимация не зависала при старте Three.js
- Сделай экран загрузки с кольцом огня и плавным переходом в интерфейс

## Похожие
- [threejs-shaders](https://affpapa.org/nevibecode/skills/threejs-shaders.md) — скилл · 15600 установок
- [pixijs-filters](https://affpapa.org/nevibecode/skills/pixijs-filters.md) — скилл · 5800 установок
- [pixijs-custom-rendering](https://affpapa.org/nevibecode/skills/pixijs-custom-rendering.md) — скилл · 5700 установок
- [shader-dev](https://affpapa.org/nevibecode/skills/minimax-ai-shader-dev.md) — скилл · 2500 установок
- [shadertoy](https://affpapa.org/nevibecode/skills/shadertoy.md) — скилл · 1500 установок
- [shader-glsl](https://affpapa.org/nevibecode/skills/shader-glsl.md) — скилл · 1400 установок

Из того же набора: [mengto/skills](https://affpapa.org/nevibecode/by/mengto/skills.md) — 148 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md