# pointer-trail-emitter

Скилл учит агента строить шлейф за курсором, который держит одинаковый шаг между частицами при любой скорости руки.

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

## Что делает

Обычный шлейф на таймере разваливается: при резком движении точки разлетаются, а на неподвижной руке все мотыльки падают в одну точку. Здесь агент считает пройденное расстояние и тратит его фиксированными шагами, поэтому плотность следует за путём, а не за часами. В замере на одном и том же маршруте разброс числа частиц вышел 1.08× против 1.64× у таймера.

Внутри — Vanilla JavaScript на Canvas 2D, без шейдеров, WebGL и Three.js. Скилл разбирает, где ставить каждую частицу внутри отрезка, почему слот кольцевого буфера нужно занимать до сдвига индекса, зачем эмиттеру отставать от указателя и как привязать шлейф к камере в 3-D сцене, а не к миру. Отдельно — затухание вместо резкой остановки, разброс как доля высоты плоскости и редкая эмиссия на простое, примерно раз в 0.4 с.

Числа в таблице скилла подобраны для шлейфа в 3.4 единицы от камеры с углом 36°, на плоскости высотой около 2.2 единицы. Если у вас другая геометрия, пространственные значения придётся пересчитать по своей плоскости — иначе разброс в ±0.30 превратится в жёсткую линию. Цикл эмиссии ограничен 14 частицами на кадр: без этого возврат вкладки или скачок указателя выдаёт огромное смещение за один кадр.

## Установка

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

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

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill pointer-trail-emitter -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill pointer-trail-emitter -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MengTo/Skills pointer-trail-emitter
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill pointer-trail-emitter -a opencode
```

### Claude.ai

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

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

## Когда брать
- сделать шлейф за курсором одинаковой плотности на медленном и резком движении
- разложить частицы кадра по отрезку пути, а не свалить их в одну точку
- починить частицы, которые отстают на шаг и появляются рывком
- привязать шлейф к экрану в 3-D сцене, чтобы он не уплывал при движении камеры
- добавить редкую эмиссию, пока рука стоит на месте

## Примеры запросов агенту
- собери шлейф за курсором на Canvas 2D, эмиссия по пройденному расстоянию, шаг 0.030
- частицы отстают от курсора и появляются рывком — проверь порядок в кольцевом буфере
- шлейф уплывает, когда камера двигается: привяжи точки к камере и пересчитай разброс от высоты плоскости

## Похожие
- [code-slice-hero](https://affpapa.org/nevibecode/skills/code-slice-hero.md) — скилл · 10000 установок
- [canvas-generative](https://affpapa.org/nevibecode/skills/canvas-generative.md) — скилл · 995 установок
- [javascript-animation](https://affpapa.org/nevibecode/skills/javascript-animation.md) — скилл · 532 установки
- [game-engine](https://affpapa.org/nevibecode/skills/game-engine.md) — скилл · 13140 установок
- [particle-system](https://affpapa.org/nevibecode/skills/particle-system.md) — скилл · 1400 установок
- [design-dna](https://affpapa.org/nevibecode/skills/design-dna.md) — скилл · 6500 установок

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

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