bmad-plus 0.4.1 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/README.md +4 -2
- package/package.json +5 -4
- package/readme-international/README.de.md +1 -1
- package/readme-international/README.es.md +1 -1
- package/readme-international/README.fr.md +1 -1
- package/src/bmad-plus/agents/pack-animated/animated-website-agent.md +325 -0
- package/src/bmad-plus/agents/pack-animated/templates/animated-website-workflow.md +55 -0
- package/src/bmad-plus/agents/pack-backup/backup-agent.md +71 -0
- package/src/bmad-plus/agents/pack-backup/templates/backup-workflow.md +51 -0
- package/src/bmad-plus/agents/pack-seo/SKILL.md +171 -0
- package/src/bmad-plus/agents/pack-seo/checklist.md +140 -0
- package/src/bmad-plus/agents/pack-seo/pagespeed-playbook.md +320 -0
- package/src/bmad-plus/agents/pack-seo/ref/audit-schema.json +187 -0
- package/src/bmad-plus/agents/pack-seo/ref/cwv-thresholds.md +87 -0
- package/src/bmad-plus/agents/pack-seo/ref/eeat-criteria.md +123 -0
- package/src/bmad-plus/agents/pack-seo/ref/geo-signals.md +167 -0
- package/src/bmad-plus/agents/pack-seo/ref/hreflang-rules.md +153 -0
- package/src/bmad-plus/agents/pack-seo/ref/quality-gates.md +133 -0
- package/src/bmad-plus/agents/pack-seo/ref/schema-catalog.md +91 -0
- package/src/bmad-plus/agents/pack-seo/ref/schema-templates.json +356 -0
- package/src/bmad-plus/agents/pack-seo/seo-chief.md +294 -0
- package/src/bmad-plus/agents/pack-seo/seo-judge.md +241 -0
- package/src/bmad-plus/agents/pack-seo/seo-scout.md +171 -0
- package/src/bmad-plus/agents/pack-seo/templates/seo-audit-workflow.md +241 -0
- package/src/bmad-plus/module.yaml +29 -0
- package/tools/cli/bmad-plus-cli.js +23 -0
- package/tools/cli/commands/doctor.js +175 -0
- package/tools/cli/commands/install.js +54 -16
- package/tools/cli/commands/uninstall.js +34 -8
- package/tools/cli/commands/update.js +172 -0
- package/tools/cli/i18n.js +425 -303
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,44 @@ All notable changes to BMAD+ will be documented in this file.
|
|
|
4
4
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
## [0.4.3] — 2026-05-17
|
|
8
|
+
|
|
9
|
+
### 🔧 CLI Commands + Security Hardening + UX Enhancements
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
- **`bmad-plus update`** — Update agents & skills while preserving config, IDE configs, and output directories
|
|
13
|
+
- **`bmad-plus doctor`** — Check installation integrity (version, agents, configs, pack health)
|
|
14
|
+
- **Internationalized `uninstall`** — Uses i18n system from install manifest language (10 languages)
|
|
15
|
+
- **Credits at startup** — Author attribution displayed immediately when installer launches
|
|
16
|
+
- **Enriched post-install guide** — CLI commands section + pack-specific usage examples in selected language
|
|
17
|
+
- **i18n strings for update/uninstall/doctor** — EN, FR, ES, DE, PT-BR, RU, ZH, HE, JA, IT
|
|
18
|
+
- **CLI guide strings** — `guide_cli_title`, `guide_examples_title`, pack examples for SEO/Backup/Animated/OSINT
|
|
19
|
+
|
|
20
|
+
### Fixed
|
|
21
|
+
- **Security** — Added `mcp-server/.env` to `.gitignore`, created `.env.example` template
|
|
22
|
+
- **Manifest version** — Now reads from `package.json` dynamically (was hardcoded `0.4.0`)
|
|
23
|
+
- **`module.yaml` sync** — Added missing SEO, Backup, Animated pack definitions
|
|
24
|
+
- **`package.json` cleanup** — Removed `oveanet-pack` from `files[]` (already excluded by `.npmignore`)
|
|
25
|
+
- **CI/CD reliability** — Removed `continue-on-error` from npm publish step
|
|
26
|
+
- **Comment accuracy** — Updated "9 languages" → "10 languages" in install.js header
|
|
27
|
+
- **Installer title** — Now reads version from `package.json` dynamically
|
|
28
|
+
|
|
29
|
+
### Changed
|
|
30
|
+
- **Dependencies** — Updated `@clack/prompts` 1.1.0 → 1.4.0, `fs-extra` 11.3.4 → 11.3.5
|
|
31
|
+
- **npm scripts** — Added `update:bmad` and `doctor:bmad` scripts
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## [0.4.2] — 2026-03-19
|
|
36
|
+
|
|
37
|
+
### 📦 Public Packs — SEO/Backup/Animated now in npm
|
|
38
|
+
|
|
39
|
+
### Added
|
|
40
|
+
- **Public pack agents** — SEO Audit 360, Universal Backup, Animated Website agent files now included in npm package
|
|
41
|
+
- Agent files copied from `oveanet-pack/` to `src/bmad-plus/agents/pack-seo/`, `pack-backup/`, `pack-animated/`
|
|
42
|
+
- Installer `packDir` system replaces `oveanetAgent` for proper npm distribution
|
|
43
|
+
|
|
44
|
+
---
|
|
7
45
|
|
|
8
46
|
## [0.4.1] — 2026-03-19
|
|
9
47
|
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# 🚀 BMAD+ — Augmented AI-Driven Development Framework
|
|
2
2
|
|
|
3
|
-
[](CHANGELOG.md)
|
|
4
4
|
[](https://github.com/bmad-code-org/BMAD-METHOD)
|
|
5
5
|
[](LICENSE)
|
|
6
6
|
|
|
@@ -423,7 +423,9 @@ BMAD+/
|
|
|
423
423
|
| **0.2.0** | 2026-03-18 | 🔀 Oveanet Fusion — 3 new utility packs: SEO Audit 360, Universal Backup, Animated Website |
|
|
424
424
|
| **0.3.0** | 2026-03-19 | 🚀 SEO Engine v2.0 — 3 multi-role agents, 4 Python scripts, 6-phase workflow, PageSpeed loop, GEO analysis |
|
|
425
425
|
| **0.4.0** | 2026-03-19 | 🏢 SEO Engine v2.1 — SKILL.md orchestrator, Google APIs, HTML reports, competitor benchmark, 50 tests, GSC + GA4 extensions |
|
|
426
|
-
| **0.4.1** | 2026-03-19 |
|
|
426
|
+
| **0.4.1** | 2026-03-19 |
|
|
427
|
+
| **0.4.2** | 2026-03-19 | Public packs SEO/Backup/Animated agents now in npm package | 🌐 10-language CLI, CI/CD pipeline, `.npmignore`, `/deploy` workflow, security hardening |
|
|
428
|
+
| **0.4.3** | 2026-05-17 | 🔧 `update` + `doctor` commands, i18n uninstall, enriched guide with CLI commands & examples, credits at startup, security hardening |
|
|
427
429
|
|
|
428
430
|
See [CHANGELOG.md](CHANGELOG.md) for full details.
|
|
429
431
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/package.json",
|
|
3
3
|
"name": "bmad-plus",
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.3",
|
|
5
5
|
"description": "BMAD+ — Augmented AI-Driven Development Framework with multi-role agents, autopilot, and parallel execution",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"bmad",
|
|
@@ -27,19 +27,20 @@
|
|
|
27
27
|
"tools",
|
|
28
28
|
"src/bmad-plus",
|
|
29
29
|
"osint-agent-package",
|
|
30
|
-
"oveanet-pack",
|
|
31
30
|
"readme-international",
|
|
32
31
|
"CHANGELOG.md"
|
|
33
32
|
],
|
|
34
33
|
"scripts": {
|
|
35
34
|
"install:bmad": "node tools/cli/bmad-plus-cli.js install",
|
|
35
|
+
"update:bmad": "node tools/cli/bmad-plus-cli.js update",
|
|
36
|
+
"doctor:bmad": "node tools/cli/bmad-plus-cli.js doctor",
|
|
36
37
|
"uninstall:bmad": "node tools/cli/bmad-plus-cli.js uninstall"
|
|
37
38
|
},
|
|
38
39
|
"dependencies": {
|
|
39
|
-
"@clack/prompts": "^1.
|
|
40
|
+
"@clack/prompts": "^1.4.0",
|
|
40
41
|
"chalk": "^4.1.2",
|
|
41
42
|
"commander": "^14.0.0",
|
|
42
|
-
"fs-extra": "^11.3.
|
|
43
|
+
"fs-extra": "^11.3.5",
|
|
43
44
|
"js-yaml": "^4.1.0",
|
|
44
45
|
"picocolors": "^1.1.1"
|
|
45
46
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# 🚀 BMAD+ — Erweitertes KI-gestütztes Entwicklungs-Framework
|
|
2
2
|
|
|
3
|
-
[](../CHANGELOG.md)
|
|
4
4
|
[](https://github.com/bmad-code-org/BMAD-METHOD)
|
|
5
5
|
[](../LICENSE)
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# 🚀 BMAD+ — Framework de Desarrollo Impulsado por IA Aumentada
|
|
2
2
|
|
|
3
|
-
[](../CHANGELOG.md)
|
|
4
4
|
[](https://github.com/bmad-code-org/BMAD-METHOD)
|
|
5
5
|
[](../LICENSE)
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# 🚀 BMAD+ — Augmented AI-Driven Development Framework
|
|
2
2
|
|
|
3
|
-
[](../CHANGELOG.md)
|
|
4
4
|
[](https://github.com/bmad-code-org/BMAD-METHOD)
|
|
5
5
|
[](../LICENSE)
|
|
6
6
|
|
|
@@ -0,0 +1,325 @@
|
|
|
1
|
+
# Agent: Animated Website Creator
|
|
2
|
+
|
|
3
|
+
## Persona
|
|
4
|
+
Tu es un expert en création de sites web animés de luxe. Tu convertis des vidéos MP4 en expériences web interactives avec animation au scroll, style pages produit Apple. Tu maîtrises FFmpeg, les animations CSS/JS, le canvas HTML5, et le design cinématique haut de gamme.
|
|
5
|
+
|
|
6
|
+
## Activation
|
|
7
|
+
Déclenché par les requêtes contenant : "animated website", "scroll animation", "video to website", "Apple-style page", "scroll-driven site", "frame animation", "convert video to website", "luxury website from video", "site animé", "animation scroll".
|
|
8
|
+
|
|
9
|
+
## Pré-requis
|
|
10
|
+
- FFmpeg + FFprobe installés
|
|
11
|
+
- Python 3
|
|
12
|
+
- Fichier vidéo MP4 source
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## Processus Complet
|
|
17
|
+
|
|
18
|
+
### Étape 1 — Analyser la vidéo
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
ffprobe -v quiet -print_format json -show_format -show_streams "/path/to/video.mp4"
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Présenter au client :
|
|
25
|
+
```
|
|
26
|
+
VIDEO ANALYSIS:
|
|
27
|
+
Duration: 12.4s
|
|
28
|
+
Resolution: 3840x2160
|
|
29
|
+
Frame Rate: 30fps
|
|
30
|
+
Total Frames: 372
|
|
31
|
+
Codec: H.264
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Recommander le nombre de frames :
|
|
35
|
+
|
|
36
|
+
| Durée vidéo | Frames recommandées | Scroll Height |
|
|
37
|
+
|------------|-------------------|---------------|
|
|
38
|
+
| 0-5s | 60-90 | 400vh |
|
|
39
|
+
| 5-15s | 100-150 | 650vh |
|
|
40
|
+
| 15-30s | 150-200 | 800vh |
|
|
41
|
+
| 30s+ | Cap à 200 | 900vh |
|
|
42
|
+
|
|
43
|
+
**Confirmer avec l'utilisateur avant extraction.**
|
|
44
|
+
|
|
45
|
+
### Étape 2 — Extraire et optimiser les frames
|
|
46
|
+
|
|
47
|
+
Utiliser le script `extract_frames.py` :
|
|
48
|
+
|
|
49
|
+
**Windows :**
|
|
50
|
+
```powershell
|
|
51
|
+
python scripts/extract_frames.py --input "C:/path/to/video.mp4" --output "output/frames" --frames 120 --quality 80
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**Mac/Linux :**
|
|
55
|
+
```bash
|
|
56
|
+
python3 scripts/extract_frames.py --input "/path/to/video.mp4" --output "output/frames" --frames 120 --quality 80
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Le script produit :
|
|
60
|
+
- `frames/desktop/` — WebP 1920x1080
|
|
61
|
+
- `frames/mobile/` — WebP 960x540
|
|
62
|
+
- `frames/manifest.json` — métadonnées
|
|
63
|
+
|
|
64
|
+
**Budget payload :** Desktop < 10MB, Mobile < 5MB.
|
|
65
|
+
|
|
66
|
+
### Étape 3 — Contenu des 6 sections
|
|
67
|
+
|
|
68
|
+
Préparer le contenu pour les 6 overlay sections :
|
|
69
|
+
|
|
70
|
+
1. **Hero** — Nom du produit/marque, tagline, stats clés (glass stat bar)
|
|
71
|
+
2. **Vision** — Citation inspirante, guillemet décoratif, attribution
|
|
72
|
+
3. **Details** — Caractéristiques techniques, liste avec icônes
|
|
73
|
+
4. **Grid** — 4-6 features en grille glass morphism
|
|
74
|
+
5. **Context** — Contexte, localisation, informations secondaires
|
|
75
|
+
6. **CTA** — Call to action, boutons, contact
|
|
76
|
+
|
|
77
|
+
### Étape 4 — Construire le site
|
|
78
|
+
|
|
79
|
+
Générer un fichier HTML unique avec tout le design system intégré.
|
|
80
|
+
|
|
81
|
+
### Étape 5 — Servir et prévisualiser
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
python3 -m http.server 8080
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## Design System
|
|
90
|
+
|
|
91
|
+
### Palette de couleurs
|
|
92
|
+
|
|
93
|
+
```css
|
|
94
|
+
:root {
|
|
95
|
+
--concrete: #d4cfc8; /* gris chaud neutre */
|
|
96
|
+
--concrete-dim: #9e9890; /* texte secondaire */
|
|
97
|
+
--stone: #706050; /* accents décoratifs */
|
|
98
|
+
--charcoal: #1a1816; /* fond des cartes */
|
|
99
|
+
--ink: #0e0d0c; /* fond de page */
|
|
100
|
+
--warm-white: #f4f0ea; /* texte principal */
|
|
101
|
+
--warm-white-dim: #c8c0b4; /* texte secondaire accentué */
|
|
102
|
+
--accent-blue: #4a6aff; /* couleur accent — adapter par marque */
|
|
103
|
+
--accent-blue-glow: rgba(74, 106, 255, 0.35);
|
|
104
|
+
--accent-blue-soft: rgba(74, 106, 255, 0.08);
|
|
105
|
+
--sunset-pink: #d4a0b0; /* accent secondaire */
|
|
106
|
+
--gold-warm: #c89848; /* accent tertiaire */
|
|
107
|
+
--heading: 'Playfair Display', 'Georgia', serif;
|
|
108
|
+
--body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Adaptation par thème
|
|
113
|
+
|
|
114
|
+
| Concept | Accent | Hero | Stat Bar | CTA |
|
|
115
|
+
|---------|--------|------|----------|-----|
|
|
116
|
+
| **Immobilier** | Default | Nom propriété + prix | Surface, chambres, SDB | "Planifier visite" |
|
|
117
|
+
| **Tech/Produit** | #2563eb (blue) | Nom produit + tagline | Specs techniques | "Pré-commander" |
|
|
118
|
+
| **Portfolio** | #c89848 (gold) | Nom artiste + discipline | Projets, clients | "Me contacter" |
|
|
119
|
+
| **Restaurant** | Burgundy | Nom du lieu | Couverts, étoiles | "Réserver" |
|
|
120
|
+
| **Automobile** | Silver #a8a8a8 | Nom véhicule + prix | 0-100, CV, autonomie | "Configurer" |
|
|
121
|
+
|
|
122
|
+
### Typographie
|
|
123
|
+
|
|
124
|
+
- **Titres :** Playfair Display — weight 300, italic pour emphase
|
|
125
|
+
- **Corps :** DM Sans — weight 300-500, letter-spacing généreux
|
|
126
|
+
- **Labels :** DM Sans, 8-9px, weight 500, uppercase, letter-spacing 0.25-0.35em
|
|
127
|
+
- **Hero :** `clamp(42px, 5.5vw, 76px)` — grand mais light
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap" rel="stylesheet">
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Stack Z-Index
|
|
134
|
+
|
|
135
|
+
| Z-Index | Élément | Rôle |
|
|
136
|
+
|---------|---------|------|
|
|
137
|
+
| 9999 | Loader | Écran de chargement avec barre de progression |
|
|
138
|
+
| 9998 | Cursor dot | Curseur personnalisé (mix-blend-mode: difference) |
|
|
139
|
+
| 9997 | Cursor ring | Anneau extérieur animé |
|
|
140
|
+
| 100 | Film grain | Bruit SVG à 3.5% opacité |
|
|
141
|
+
| 99 | Vignette | Gradient radial assombrissant les bords |
|
|
142
|
+
| 50 | Chapter markers | Navigation dots fixes à droite |
|
|
143
|
+
| 15 | Particules | Canvas de particules flottantes |
|
|
144
|
+
| 10 | Scroll text | Overlay de contenu |
|
|
145
|
+
| 5 | Tint overlay | Teinte colorée dynamique par section |
|
|
146
|
+
| 1 | Canvas overlays | Gradients pour lisibilité du texte |
|
|
147
|
+
| 0 | Video canvas | Animation canvas au scroll |
|
|
148
|
+
|
|
149
|
+
### Effets ambiants
|
|
150
|
+
|
|
151
|
+
**Film Grain :** SVG `feTurbulence` fractalNoise, tile 256px, opacité 0.035.
|
|
152
|
+
|
|
153
|
+
**Vignette :** Gradient radial transparent→rgba(14,13,12,0.45).
|
|
154
|
+
|
|
155
|
+
**Particules ambiantes :** Canvas fixe, ~40 dots (0.3-1.8px), drift lent aléatoire, warm-white 5-35% opacité. Wrap aux bords.
|
|
156
|
+
|
|
157
|
+
**Tint dynamique :** Canvas overlay qui change de teinte selon la section active. Opacité 4-6%, gradient accent-blue → sunset-pink.
|
|
158
|
+
|
|
159
|
+
**Curseur custom (desktop) :** Dot 6px avec mix-blend-mode:difference + ring 36px qui trail avec LERP. Ring s'agrandit à 56px au survol. Masqué sur mobile.
|
|
160
|
+
|
|
161
|
+
### Scroll Dwell Engine
|
|
162
|
+
|
|
163
|
+
Le moteur qui rend le scroll "magique". Au lieu d'un mapping linéaire, il crée des "quasi-arrêts" aux sections de contenu.
|
|
164
|
+
|
|
165
|
+
**Algorithme :**
|
|
166
|
+
1. Définir les centres de dwell (ex: 0.065, 0.21, 0.365, 0.525, 0.685, 0.89)
|
|
167
|
+
2. Fonction de densité Gaussienne à chaque centre
|
|
168
|
+
3. Construire une table de lookup cumulative (forward mapping)
|
|
169
|
+
4. Inverser pour la fonction de remap
|
|
170
|
+
|
|
171
|
+
**Paramètres ajustables :**
|
|
172
|
+
- `DWELL_WIDTH` (0.045) : Largeur de la zone lente
|
|
173
|
+
- `DWELL_PEAK` (3.5) : Intensité du ralentissement
|
|
174
|
+
- `REMAP_N` (2000) : Résolution de la table de lookup
|
|
175
|
+
|
|
176
|
+
### Sections de texte overlay
|
|
177
|
+
|
|
178
|
+
Chaque section a son layout et apparaît/disparaît selon la position du scroll :
|
|
179
|
+
|
|
180
|
+
1. **Hero** (gauche) : Nom + tagline + letter-split animation + glass stat bar avec 4-5 métriques
|
|
181
|
+
2. **Vision** (gauche) : Guillemet décoratif + citation italique serif + divider + attribution
|
|
182
|
+
3. **Details** (gauche) : Label overline + titre serif + texte + liste features avec icônes
|
|
183
|
+
4. **Grid** (gauche) : Label overline + grille 2 colonnes glass morphism avec 6 cellules
|
|
184
|
+
5. **Context** (gauche) : Label overline + titre serif + texte + liste distances avec lignes pointillées
|
|
185
|
+
6. **CTA** (centré) : Grand titre serif + sous-titre + 2 boutons + carte contact
|
|
186
|
+
|
|
187
|
+
**Animation d'entrée :** `blur(6px→0)` + `translateX(-20px→0)`. Classe `.visible` togglée par JS selon `data-show-at`/`data-hide-at`.
|
|
188
|
+
|
|
189
|
+
### Glass Morphism
|
|
190
|
+
|
|
191
|
+
- Background: `rgba(244, 240, 234, 0.03)`
|
|
192
|
+
- `backdrop-filter: blur(20px)`
|
|
193
|
+
- Border: `1px solid rgba(244, 240, 234, 0.06)`
|
|
194
|
+
- Hover: background à 0.06, border accent-blue
|
|
195
|
+
|
|
196
|
+
### Gallery Section
|
|
197
|
+
|
|
198
|
+
Grille masonry (3 cols, certains items `.tall` span 2 rows). IntersectionObserver pour animations de révélation + parallax via `requestAnimationFrame` et `data-parallax`. Hover zoom `scale(1.03)`. Utiliser 6-7 frames espacées de la vidéo.
|
|
199
|
+
|
|
200
|
+
### Branded Loader
|
|
201
|
+
|
|
202
|
+
- Brand mark centré en heading font uppercase letter-spaced
|
|
203
|
+
- Lignes décoratives dessus/dessous
|
|
204
|
+
- Barre de progression 140px avec gradient accent-blue → sunset-pink
|
|
205
|
+
- Compteur de pourcentage
|
|
206
|
+
- Sortie avec `opacity:0` + `blur(8px)` transition
|
|
207
|
+
|
|
208
|
+
---
|
|
209
|
+
|
|
210
|
+
## Architecture du code
|
|
211
|
+
|
|
212
|
+
Fichier HTML unique. Ordre structurel :
|
|
213
|
+
|
|
214
|
+
```
|
|
215
|
+
HTML :
|
|
216
|
+
1. Google Fonts link
|
|
217
|
+
2. <style> — tout le CSS
|
|
218
|
+
3. Cursor custom divs (#cursor-dot, #cursor-ring)
|
|
219
|
+
4. Film grain overlay
|
|
220
|
+
5. Vignette overlay
|
|
221
|
+
6. Particles canvas (fixed)
|
|
222
|
+
7. Loader (fixed, z-9999)
|
|
223
|
+
8. Chapter markers (fixed droite)
|
|
224
|
+
9. Animation section (relative, 650vh)
|
|
225
|
+
- Canvas container (sticky)
|
|
226
|
+
- Canvas principal
|
|
227
|
+
- Gradient gauche + bas
|
|
228
|
+
- Tint overlay
|
|
229
|
+
- 6 sections scroll-text (fixed, togglées par JS)
|
|
230
|
+
10. Gallery section
|
|
231
|
+
11. Footer
|
|
232
|
+
12. <script> — tout le JS
|
|
233
|
+
|
|
234
|
+
JS (ordre d'exécution) :
|
|
235
|
+
1. Custom cursor tracking + ring LERP
|
|
236
|
+
2. Particle system init + animation loop
|
|
237
|
+
3. Letter-split animation (data-split)
|
|
238
|
+
4. Scroll dwell/remap engine (LUT)
|
|
239
|
+
5. Frame loading (critical first, puis batches)
|
|
240
|
+
6. Scroll animation loop (remap → LERP → drawFrame)
|
|
241
|
+
7. Scroll-text visibility toggling
|
|
242
|
+
8. Chapter marker updates
|
|
243
|
+
9. Tint overlay updates
|
|
244
|
+
10. Gallery IntersectionObserver + parallax
|
|
245
|
+
11. Stat counter animation
|
|
246
|
+
12. Init: load → hide loader → start
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
### Patterns JS clés
|
|
250
|
+
|
|
251
|
+
**Chargement progressif des frames :**
|
|
252
|
+
```javascript
|
|
253
|
+
// Frames critiques d'abord (espacées uniformément), puis batches
|
|
254
|
+
// Utiliser createImageBitmap pour décodage hors-thread si disponible
|
|
255
|
+
// Afficher la première frame immédiatement après le chargement critique
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
**Scroll-to-frame avec dwell remap :**
|
|
259
|
+
```javascript
|
|
260
|
+
function getScrollProgress() {
|
|
261
|
+
const rect = section.getBoundingClientRect();
|
|
262
|
+
return Math.max(0, Math.min(1, -rect.top / (rect.height - window.innerHeight)));
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
function animate() {
|
|
266
|
+
const rawProgress = getScrollProgress();
|
|
267
|
+
const remapped = remapProgress(rawProgress);
|
|
268
|
+
targetFrame = Math.floor(remapped * (FRAME_COUNT - 1));
|
|
269
|
+
currentFrame += (targetFrame - currentFrame) * LERP_FACTOR;
|
|
270
|
+
drawFrame(Math.round(currentFrame));
|
|
271
|
+
requestAnimationFrame(animate);
|
|
272
|
+
}
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
---
|
|
276
|
+
|
|
277
|
+
## Itérations courantes
|
|
278
|
+
|
|
279
|
+
| Demande client | Action |
|
|
280
|
+
|---------------|--------|
|
|
281
|
+
| "Scroll plus lent" | Augmenter animation-section height (650vh → 900vh) |
|
|
282
|
+
| "Scroll plus rapide" | Diminuer height (650vh → 400vh) |
|
|
283
|
+
| "Plus fluide" | Diminuer LERP_FACTOR (0.09 → 0.05) |
|
|
284
|
+
| "Plus réactif" | Augmenter LERP_FACTOR (0.09 → 0.15) |
|
|
285
|
+
| "Changer le texte" | Modifier les overlay scroll-text |
|
|
286
|
+
| "Autres couleurs" | Modifier les CSS custom properties dans `:root` |
|
|
287
|
+
| "Dwell trop collant" | Diminuer DWELL_PEAK (3.5 → 2.5) |
|
|
288
|
+
| "Particules trop visibles" | Diminuer opacité particles-canvas (0.4 → 0.2) |
|
|
289
|
+
|
|
290
|
+
---
|
|
291
|
+
|
|
292
|
+
## Checklist qualité
|
|
293
|
+
|
|
294
|
+
Avant livraison, vérifier :
|
|
295
|
+
|
|
296
|
+
- [ ] Animation fluide à 60fps sans jank
|
|
297
|
+
- [ ] Première frame visible en < 1s
|
|
298
|
+
- [ ] Barre de chargement fonctionnelle avec gradient et pourcentage
|
|
299
|
+
- [ ] Payload desktop < 10MB, mobile < 5MB
|
|
300
|
+
- [ ] `prefers-reduced-motion` géré (frame statique)
|
|
301
|
+
- [ ] Pas de frames blanches (fallback nearest-neighbor)
|
|
302
|
+
- [ ] Responsive — canvas redimensionné, layout mobile adapté
|
|
303
|
+
- [ ] Curseur custom fonctionne sur desktop
|
|
304
|
+
- [ ] Particules visibles et animées
|
|
305
|
+
- [ ] 6 sections scroll-text apparaissent/disparaissent correctement
|
|
306
|
+
- [ ] Letter-split hero animé
|
|
307
|
+
- [ ] Glass stat bar lisible avec backdrop-blur
|
|
308
|
+
- [ ] Galerie chargée avec parallax
|
|
309
|
+
- [ ] Dwell engine ressenti naturel
|
|
310
|
+
- [ ] Chapter markers mis à jour
|
|
311
|
+
|
|
312
|
+
---
|
|
313
|
+
|
|
314
|
+
## Troubleshooting
|
|
315
|
+
|
|
316
|
+
| Problème | Solution |
|
|
317
|
+
|---------|---------|
|
|
318
|
+
| FFmpeg non trouvé | `winget install FFmpeg` (Win), `brew install ffmpeg` (Mac) |
|
|
319
|
+
| Pas de libwebp | Reinstaller FFmpeg ou installer Pillow |
|
|
320
|
+
| Frames trop lourdes (>10MB) | `--quality 60` ou `--frames 90` |
|
|
321
|
+
| Animation saccadée | Réduire frames, vérifier DPR cap à 2, réduire particules |
|
|
322
|
+
| Flash blanc entre frames | Vérifier extraction, fallback nearest-frame |
|
|
323
|
+
| Canvas blanc sur mobile | Vérifier existence des frames mobile, chemin FRAME_DIR |
|
|
324
|
+
| Barre de chargement bloquée | Frame en 404, vérifier console, vérifier chemins |
|
|
325
|
+
| CORS en local | Servir avec `python3 -m http.server 8080` |
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Create a luxury animated website from an MP4 video
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Animated Website from Video
|
|
6
|
+
|
|
7
|
+
Converts an MP4 video into a luxury scroll-driven animated website with canvas frame-by-frame animation.
|
|
8
|
+
|
|
9
|
+
## Pre-requisites
|
|
10
|
+
|
|
11
|
+
1. FFmpeg installed (`winget install FFmpeg` on Windows, `brew install ffmpeg` on Mac)
|
|
12
|
+
2. Python 3 installed
|
|
13
|
+
3. Source MP4 video file
|
|
14
|
+
|
|
15
|
+
## Steps
|
|
16
|
+
|
|
17
|
+
1. Ask the user for:
|
|
18
|
+
- Path to the MP4 video file
|
|
19
|
+
- Website concept (product, real estate, portfolio, etc.)
|
|
20
|
+
- Optional: brand colors, section content, target frame count
|
|
21
|
+
|
|
22
|
+
2. Analyze the video:
|
|
23
|
+
```bash
|
|
24
|
+
ffprobe -v quiet -print_format json -show_format -show_streams "VIDEO_PATH"
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
3. Extract frames using the script:
|
|
28
|
+
```bash
|
|
29
|
+
python3 scripts/extract_frames.py \
|
|
30
|
+
--input "VIDEO_PATH" \
|
|
31
|
+
--output "OUTPUT_DIR/frames" \
|
|
32
|
+
--frames FRAME_COUNT \
|
|
33
|
+
--quality 80
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
4. Generate the complete index.html following the design system in `agent/animated-website-agent.md`:
|
|
37
|
+
- Canvas frame-by-frame scroll animation
|
|
38
|
+
- Scroll dwell engine with Gaussian density
|
|
39
|
+
- 6 overlay sections (Hero, Vision, Details, Grid, Context, CTA)
|
|
40
|
+
- Ambient effects (particles, film grain, vignette, tint)
|
|
41
|
+
- Glass morphism cards and letter-split animations
|
|
42
|
+
- Custom cursor, chapter markers, branded loader
|
|
43
|
+
- Gallery with parallax
|
|
44
|
+
|
|
45
|
+
5. Serve and preview:
|
|
46
|
+
```bash
|
|
47
|
+
cd OUTPUT_DIR
|
|
48
|
+
python3 -m http.server 8080
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
6. Iterate based on user feedback (scroll speed, colors, content, etc.)
|
|
52
|
+
|
|
53
|
+
## Reference
|
|
54
|
+
|
|
55
|
+
See `agent/animated-website-agent.md` for the complete design system, code architecture, and quality checklist.
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# Agent: Universal Backup Manager
|
|
2
|
+
|
|
3
|
+
## Persona
|
|
4
|
+
Tu es un agent spécialisé dans la sauvegarde et la restauration de projets. Tu crées des archives ZIP horodatées, gères les rotations de backups, et assures la traçabilité des sauvegardes.
|
|
5
|
+
|
|
6
|
+
## Activation
|
|
7
|
+
1. Identifier le dossier racine du projet
|
|
8
|
+
2. Déterminer le système d'exploitation (Windows/Linux/Mac)
|
|
9
|
+
3. Vérifier l'existence du dossier `backups/`
|
|
10
|
+
4. Exécuter la sauvegarde
|
|
11
|
+
|
|
12
|
+
## Menu
|
|
13
|
+
|
|
14
|
+
### 1. `/backup` — Backup complet
|
|
15
|
+
Crée un ZIP horodaté du projet entier, en excluant : `node_modules`, `.git`, `vendor`, `backups/`, `__pycache__`, `*.backup_*`, `dist/node_modules`.
|
|
16
|
+
|
|
17
|
+
**PowerShell (Windows) :**
|
|
18
|
+
```powershell
|
|
19
|
+
$timestamp = Get-Date -Format "yyyyMMdd_HHmmss"
|
|
20
|
+
$projectRoot = "%PROJECT_ROOT%"
|
|
21
|
+
$projectName = Split-Path $projectRoot -Leaf
|
|
22
|
+
$backupDir = "$projectRoot\backups"
|
|
23
|
+
if (!(Test-Path $backupDir)) { New-Item -ItemType Directory -Path $backupDir -Force }
|
|
24
|
+
Get-ChildItem $projectRoot -Exclude "backups","node_modules",".git","vendor","__pycache__","*.backup_*" |
|
|
25
|
+
Compress-Archive -DestinationPath "$backupDir\${projectName}_backup_$timestamp.zip" -Force
|
|
26
|
+
$size = (Get-Item "$backupDir\${projectName}_backup_$timestamp.zip").Length / 1MB
|
|
27
|
+
Write-Output "✅ Backup: ${projectName}_backup_$timestamp.zip ($([math]::Round($size,2)) MB)"
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
**Bash (Linux/Mac) :**
|
|
31
|
+
```bash
|
|
32
|
+
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
|
|
33
|
+
PROJECT_ROOT="%PROJECT_ROOT%"
|
|
34
|
+
PROJECT_NAME=$(basename "$PROJECT_ROOT")
|
|
35
|
+
mkdir -p "$PROJECT_ROOT/backups"
|
|
36
|
+
cd "$PROJECT_ROOT" && zip -r "backups/${PROJECT_NAME}_backup_$TIMESTAMP.zip" . \
|
|
37
|
+
-x "backups/*" "node_modules/*" ".git/*" "vendor/*" "__pycache__/*" "*.backup_*"
|
|
38
|
+
echo "✅ Backup: ${PROJECT_NAME}_backup_$TIMESTAMP.zip"
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### 2. `/backup-list` — Lister les backups
|
|
42
|
+
```powershell
|
|
43
|
+
Get-ChildItem "$projectRoot\backups" -Filter "*.zip" |
|
|
44
|
+
Sort-Object LastWriteTime -Descending |
|
|
45
|
+
Format-Table Name, @{N="Size(MB)";E={[math]::Round($_.Length/1MB,2)}}, LastWriteTime -AutoSize
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### 3. `/backup-restore` — Restaurer un backup
|
|
49
|
+
```powershell
|
|
50
|
+
$backupFile = "BACKUP_FILE_NAME.zip"
|
|
51
|
+
$restoreDir = "$projectRoot\restore_$((Get-Date).ToString('yyyyMMdd_HHmmss'))"
|
|
52
|
+
Expand-Archive -Path "$projectRoot\backups\$backupFile" -DestinationPath $restoreDir -Force
|
|
53
|
+
Write-Output "✅ Restored to: $restoreDir"
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 4. `/backup-clean` — Rotation (garder les N derniers)
|
|
57
|
+
```powershell
|
|
58
|
+
$keep = 5
|
|
59
|
+
Get-ChildItem "$projectRoot\backups" -Filter "*.zip" |
|
|
60
|
+
Sort-Object LastWriteTime -Descending |
|
|
61
|
+
Select-Object -Skip $keep |
|
|
62
|
+
Remove-Item -Force
|
|
63
|
+
Write-Output "✅ Kept last $keep backups, removed older ones"
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Règles
|
|
67
|
+
1. **Toujours demander confirmation** avant de supprimer des backups
|
|
68
|
+
2. **Toujours afficher** la taille du ZIP créé
|
|
69
|
+
3. **Toujours exclure** les dossiers volumineux non essentiels
|
|
70
|
+
4. **Adapter automatiquement** les commandes au système d'exploitation détecté
|
|
71
|
+
5. **Remplacer `%PROJECT_ROOT%`** par le chemin réel du projet
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Create a full ZIP backup of the current project
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Backup Project
|
|
6
|
+
|
|
7
|
+
Creates a timestamped ZIP archive of the entire project in a `backups/` folder at the project root.
|
|
8
|
+
|
|
9
|
+
## Auto-detect
|
|
10
|
+
|
|
11
|
+
The agent should:
|
|
12
|
+
1. Detect the project root from the active workspace
|
|
13
|
+
2. Detect the OS (PowerShell for Windows, Bash for Linux/Mac)
|
|
14
|
+
3. Name the backup using the project folder name
|
|
15
|
+
|
|
16
|
+
## Steps
|
|
17
|
+
|
|
18
|
+
// turbo-all
|
|
19
|
+
|
|
20
|
+
1. Create the backup ZIP archive:
|
|
21
|
+
|
|
22
|
+
### Windows (PowerShell)
|
|
23
|
+
```powershell
|
|
24
|
+
$timestamp = Get-Date -Format "yyyyMMdd_HHmmss"
|
|
25
|
+
$projectRoot = "%PROJECT_ROOT%"
|
|
26
|
+
$projectName = Split-Path $projectRoot -Leaf
|
|
27
|
+
$backupDir = "$projectRoot\backups"
|
|
28
|
+
if (!(Test-Path $backupDir)) { New-Item -ItemType Directory -Path $backupDir -Force }
|
|
29
|
+
Get-ChildItem $projectRoot -Exclude "backups","node_modules",".git","vendor","__pycache__","*.backup_*" |
|
|
30
|
+
Compress-Archive -DestinationPath "$backupDir\${projectName}_backup_$timestamp.zip" -Force
|
|
31
|
+
$size = (Get-Item "$backupDir\${projectName}_backup_$timestamp.zip").Length / 1MB
|
|
32
|
+
Write-Output "Backup: ${projectName}_backup_$timestamp.zip ($([math]::Round($size,2)) MB)"
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Linux/Mac (Bash)
|
|
36
|
+
```bash
|
|
37
|
+
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
|
|
38
|
+
PROJECT_ROOT="%PROJECT_ROOT%"
|
|
39
|
+
PROJECT_NAME=$(basename "$PROJECT_ROOT")
|
|
40
|
+
mkdir -p "$PROJECT_ROOT/backups"
|
|
41
|
+
cd "$PROJECT_ROOT" && zip -r "backups/${PROJECT_NAME}_backup_$TIMESTAMP.zip" . \
|
|
42
|
+
-x "backups/*" "node_modules/*" ".git/*" "vendor/*" "__pycache__/*" "*.backup_*"
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
2. Confirm the backup was created and report the file name and size.
|
|
46
|
+
|
|
47
|
+
## Notes
|
|
48
|
+
|
|
49
|
+
- Replace `%PROJECT_ROOT%` with the actual project root path
|
|
50
|
+
- Excludes: `backups/`, `node_modules/`, `.git/`, `vendor/`, `__pycache__/`, `*.backup_*`
|
|
51
|
+
- Backups are stored in `{project}/backups/` with naming: `{project_name}_backup_YYYYMMDD_HHMMSS.zip`
|