Site vidéo au scroll

Site Web à Défilement Vidéo

Quand l'utiliser

Utilisez cette compétence lorsque l'utilisateur souhaite :

• construire une animation de défilement de type Apple à partir d'une vidéo ;
• créer un site web vidéo contrôlé par le défilement ou avec un lissage vidéo par défilement ;
• transformer une vidéo de produit en une page d'atterrissage cinématographique ;
• construire une expérience de scrollytelling pilotée par la vidéo ;
• convertir une vidéo en une séquence d'images optimisée pour l'animation par défilement ;
• créer une présentation de produit basée sur Canvas contrôlée par le défilement ;
• optimiser une séquence d'images de défilement vidéo existante.

Ne l'utilisez pas pour des fonds vidéo en lecture automatique ordinaires ou des effets de défilement sans rapport.

Créez une expérience minimaliste en pleine page comme un visualiseur d'animation de produit : la page elle-même fournit la distance de défilement tandis qu'un canvas fixe remplit la zone d'affichage et lisse une séquence d'images dérivée de la vidéo de l'utilisateur. L'animation est l'interface, pas un fond derrière une page d'atterrissage conventionnelle.

Invocation

Cette compétence a deux modes : construire un site web à défilement vidéo à partir d'une vidéo, ou optimiser une séquence d'images existante. Si le premier argument est optimize, suivez references/optimize.md et n'exécutez pas le processus de construction ci-dessous.

Traitez cette forme concise comme une demande de construction complète :

$scroll-video-website <chemin/vers/video.mp4>

Le chemin de la vidéo doit être le premier argument après le nom de la compétence. Tout ce qui suit le chemin est une directive optionnelle de l'utilisateur pour le style, la mise en page, le texte ou le comportement :

$scroll-video-website ./media/presentation-produit.mp4
$scroll-video-website ./media/presentation-produit.mp4 utilisez un fond noir et une typographie condensée

Le premier exemple signifie : dérivez la séquence d'images et construisez le site web d'animation à défilement par défaut complet décrit ci-dessous. Dans le second, conservez la même architecture d'animation pilotée par la vidéo tout en suivant les directives visuelles ajoutées. Laissez l'agent utilisant cette compétence interpréter et implémenter le reste de l'invite ; cette compétence ne définit pas une grammaire de commande distincte pour les options de style.

Interprétez le chemin de la vidéo comme relatif au répertoire de travail actuel, sauf s'il est absolu. S'il contient des espaces, l'utilisateur doit le mettre entre guillemets. Vérifiez d'abord le chemin exact. Si un nom de fichier simple n'est pas trouvé, recherchez dans le projet actuel une correspondance exacte du nom de fichier tout en excluant les répertoires de dépendances, de construction, de cache et de VCS. Continuez automatiquement lorsqu'il y a exactement une correspondance. S'il n'y a aucune correspondance ou plusieurs correspondances, demandez à l'utilisateur le chemin précis. Les accolades dans <chemin/vers/video.mp4> ou {video_path} indiquent un espace réservé et ne font pas partie du chemin réel. N'exigez pas et n'interprétez pas un mot-clé use.

Optimisez une séquence existante avec exactement :

$scroll-video-website optimize

La commande optimize ne prend ni chemin ni autre argument. Inspectez le projet actuel pour les séquences d'images générées. Continuez lorsqu'exactement une séquence est identifiable. Si plusieurs sont identifiables, montrez-les et demandez laquelle optimiser. Si aucune séquence ne peut être trouvée ou reconnue avec certitude, dites à l'utilisateur que le dossier d'images n'a pas été trouvé et arrêtez-vous.

Établir le projet et la vidéo source

Avant de modifier :

1. Inspectez la structure du projet, les scripts, le framework, le style, le routage, les conventions de ressources et les instructions locales.
2. Localisez la vidéo fournie par l'utilisateur en utilisant les règles d'invocation ci-dessus. Si aucune vidéo ou chemin n'a été fourni et qu'aucun ne peut être identifié avec confiance, demandez-le avant d'implémenter.
3. Réutilisez la pile de travail existante. Ne créez pas un projet de remplacement quand un projet fonctionne déjà.
4. Inspectez les dimensions, la durée, la fréquence d'images, le nombre d'images et la taille du fichier vidéo avec ffprobe lorsque disponible.
5. Préservez le comportement non lié et apportez l'ensemble de modifications cohérent le plus petit possible.

Ne créez pas d'illustrations de substitution et ne remplacez pas les séquences fournies. Évitez de dupliquer la vidéo source sauf si la construction l'exige.

Convertir la vidéo en une séquence d'images

Le chemin de rendu par défaut est une séquence d'images WebP numérotée, pas video.currentTime. Extrayez les images dans la zone de ressources publique/statique du projet avec des noms à zéros non significatifs tels que frames/frame_0001.webp.

• Préservez la cadence source jusqu'à 30 ips. Pour un clip long, échantillonnez-le à environ 240 à 300 images au total afin que la charge utile reste pratique.
• Préservez le rapport hauteur/largeur source. Utilisez une qualité WebP raisonnable autour de 78 à 82 et inspectez le résultat plutôt que de supposer que le réglage est adéquat.
• Enregistrez le nombre réel d'images extraites dans l'implémentation ; ne laissez pas une constante devinée.
• Préférez ffmpeg pour l'extraction. Une commande représentative est ffmpeg -i input.mp4 -vf fps=30 -c:v libwebp -quality 80 frames/frame_%04d.webp ; adaptez l'entrée, l'ips, le chemin de sortie et les outils du projet existant.
• Ne supprimez pas et n'écrasez pas les ressources non liées. Si la destination contient déjà une séquence, vérifiez qu'elle appartient à cette animation avant de la remplacer.

Utilisez la recherche directe par vidéo en pause uniquement lorsque l'extraction d'images n'est pas disponible ou que la charge utile d'images résultante est clairement inappropriée. En cas de repli, expliquez le compromis et conservez le même comportement de défilement fluide, bidirectionnel et à stade fixe.

Correspondre à l'expérience de référence

Lorsque l'utilisateur ne donne aucune directive supplémentaire de mise en page ou de texte, produisez une page uniquement en canvas :

• une page blanche et un stade fixe avec débordement caché couvrant 100vw sur 100vh ;
• une hauteur de document invisible suffisante pour un lissage délibéré, environ 400vh pour une source de 8 secondes ou environ 240 images ;
• pas de barre de navigation, de cartes, de titres, d'appels à l'action, de dégradés ou de texte marketing inventé ;
• un canvas qui remplit le stade et dessine chaque image avec une géométrie cover, centré sur les deux axes ;
• une courte révélation par opacité seulement après que la première image est prête, empêchant un flash d'image vide ;
• un traitement d'image sobre uniquement lorsqu'il convient aux séquences, comme un fond blanc, un léger ajustement de contraste, ou mix-blend-mode: multiply pour un rendu de produit sur fond blanc.

Si l'utilisateur demande du contenu, gardez-le clairsemé et placez-le sur ou entre les moments intentionnels de l'animation sans réduire la dominance visuelle du canvas. N'introduisez pas de dépendance d'animation lorsque le canvas natif et les API du navigateur sont suffisants.

Implémenter le lissage du canvas

Utilisez un stade fixe ou collant contenant un canvas aria-hidden. Dimensionnez son tampon de sauvegarde pour le ratio de pixels de l'appareil, plafonné à environ 2, tout en gardant les mesures de dessin en pixels CSS. Réinitialisez la transformation du canvas avant d'appliquer une nouvelle échelle DPR lors du redimensionnement afin que la mise à l'échelle ne s'accumule pas.

Mappez la progression totale de la page serrée à la séquence complète :

const range = document.documentElement.scrollHeight - innerHeight
const progress = range > 0 ? Math.min(1, Math.max(0, scrollY / range)) : 0
targetFrame = progress * (frameCount - 1)

Le défilement vers l'avant doit faire avancer l'animation et le défilement inverse doit la faire reculer. Les gestionnaires de défilement et de redimensionnement doivent uniquement mettre à jour les mesures peu coûteuses ou la cible. Exécutez une seule boucle requestAnimationFrame et lissez une tête de lecture à virgule flottante avec une interpolation exponentielle indépendante de la fréquence d'images :

const dt = Math.min((now - lastTime) / 1000, 0.1)
const alpha = 1 - Math.exp(-dt * 9)
currentFrame += (targetFrame - currentFrame) * alpha

Dessinez l'image entière de chaque côté de la tête de lecture et fondu enchaîné l'image suivante par le reste fractionnaire. Effacez ou peignez d'abord le fond du canvas, réinitialisez globalAlpha après le dessin, et redessinez lors du redimensionnement.

Charger les images progressivement

Ne bloquez pas la première peinture sur la séquence entière :

1. Chargez d'abord l'image 1, dessinez-la et révélez le canvas.
2. Mettez en file d'attente des images réparties uniformément sur la timeline, par exemple toutes les huit images, afin que la recherche ait un repli proche tôt.
3. Mettez en file d'attente chaque image restante.

Suivez les images demandées séparément des images chargées afin que les passes de priorité et de reste ne demandent jamais la même image deux fois. Pendant qu'une image demandée est encore en chargement, dessinez l'image chargée la plus proche. Gérez les échecs de chargement d'image sans bloquer le reste de la séquence.

Utilisez une stratégie d'URL de ressource qui fonctionne avec le chemin de base du projet et la cible de déploiement. Nettoyez les écouteurs de défilement, de redimensionnement, de requête média, les observateurs et les images d'animation lorsque le composant propriétaire se démonte.

Comportement réactif et accessibilité

Conservez le rendu cover sur les écrans étroits et acceptez le recadrage délibéré ; ne déformez pas l'image. Vérifiez l'emplacement important du sujet aux tailles de bureau et mobile. Tenez compte des changements de zone d'affichage mobile et des zones de sécurité si du contenu visible est ajouté.

Pour prefers-reduced-motion: reduce, arrêtez le lissage et maintenez la première image appropriée. Gardez tout contenu de la page accessible et ne détournez pas le défilement. Le canvas décoratif ne doit pas créer de contenu redondant pour les lecteurs d'écran.

Vérifier le résultat

Exécutez les vérifications du projet et inspectez le résultat dans un navigateur lorsque disponible. Confirmez :

• les première et dernière positions de défilement atteignent les première et dernière images extraites ;
• le défilement avant et arrière semble continu, sans sauts brusques, lecture, flash ou canvas blanc visible ;
• les demandes d'images ne sont pas dupliquées et les images manquantes ou lentes utilisent un repli chargé proche ;
• le recadrage cover, le redimensionnement DPR et la mise à l'échelle du canvas fonctionnent aux tailles de bureau et mobile ;
• le mouvement réduit maintient une image statique et le nettoyage du composant est complet ;
• la séquence générée a le nombre, les dimensions, l'ordre et la taille totale acceptable attendus ;
• le comportement non lié du projet fonctionne toujours.

Terminez en résumant l'expérience, le nombre d'images extraites et la charge utile, les vérifications effectuées et toute limitation restante du média source.