102.3K+Télécharger
Aller au guide d’utilisation
Scroll Worldpar oso95

Scroll World Skill.

Un parcours de caméra pré-rendu, contrôlé par le défilement, et non un monde 3D en temps réel.

  • Animation au défilement
  • Vidéo
  • Pages d’atterrissage
Télécharger OpenDesignVoir le guide d’utilisation
Revue de la source · Scroll WorldSKILL.md
Tâche Animation au défilement Produit • Une page pilotée par le défilement, avec texte de section et appel à l’action final • Des images fixes de scène, des clips de caméra et les raccords nécessaires • Des ressources vidéo optimisées, des affiches de secours et une revue des transitions entre les clips Avant de commencer Le pipeline documenté utilise Higgsfield et une voie vidéo Monid, ainsi que ffmpeg/ffprobe et un environnement de navigateur. Les comptes fournisseurs, les crédits, les capacités des modèles et toute voie d’image facultative doivent être revérifiés.
Résumé éditorial · source examinée le 2026-10-07 · pas un exemple généré

01 Fonctionnement

Scroll World

Un flux de travail de page d’atterrissage en vidéo générée, structuré autour de l’architecture de caméra, de la continuité des images réelles, du défilement synchronisé et de décisions explicites sur le mobile et le budget de rendu.

Flux de travail fondé sur la sourcePas un test de performance d’exécution

L’approche de travail

Scroll World crée une page d’atterrissage dont la position de défilement contrôle un vol de caméra pré-rendu. Des images fixes de scène deviennent des clips vidéo, puis un moteur JavaScript associe le défilement au temps de lecture. Le monde en apparence tridimensionnel est une séquence générée, et non une scène WebGL navigable avec une géométrie modifiable. Sa portabilité vient d’un moteur autonome pouvant être intégré à différentes piles frontend.

La source distingue une visite continue vers l’avant d’un vol au-dessus d’un monde miniature avec des clips de raccord séparés. Dans les deux cas, les images-frontières réellement rendues comptent davantage que la réutilisation d’une image d’origine d’apparence similaire. Le clip suivant doit être conditionné par les images voisines réelles, et les raccords doivent toujours être inspectés. Le flux de travail traite aussi une chaîne portrait pour mobile comme une décision de production distincte, avec un coût de rendu supplémentaire, et non comme un recadrage silencieux du film desktop.

Livrables attendus

  • Une page pilotée par le défilement, avec texte de section et appel à l’action final
  • Des images fixes de scène, des clips de caméra et les raccords nécessaires
  • Des ressources vidéo optimisées, des affiches de secours et une revue des transitions entre les clips
Voir le brief d’exemple

Du brief à la revue

  1. 01
    Choisir le parcours

    Définissez le sujet, les scènes ordonnées, la charte de marque, la direction artistique et le style de caméra. Confirmez si la production est desktop uniquement ou en portrait natif, et faites approuver une estimation de rendu à jour.

  2. 02
    Établir l’univers visuel

    Générez des images fixes cohérentes à partir d’un brief visuel commun. Vérifiez la cohérence des scènes avant de vous engager dans une chaîne de générations vidéo payantes.

  3. 03
    Enchaîner les images réelles

    Pour un parcours vers l’avant, utilisez la fin du clip précédent comme début du suivant. Pour les raccords aériens, utilisez les images réellement rendues des deux clips voisins plutôt que les images de scène d’origine.

  4. 04
    Encoder et tester le défilement

    Préparez des ressources compatibles avec la recherche de position, montez le moteur portable et inspectez les raccords, le défilement inverse, les affiches de secours et la réduction des animations. Testez séparément la chaîne portrait si elle a été commandée.

02 Cas d’usage

Quand l’utiliser

Le pipeline documenté utilise Higgsfield et une voie vidéo Monid, ainsi que ffmpeg/ffprobe et un environnement de navigateur. Les comptes fournisseurs, les crédits, les capacités des modèles et toute voie d’image facultative doivent être revérifiés.

Bon choix

  • Un parcours narratif de marqueUtile lorsqu’un produit ou une entreprise peut s’expliquer comme une suite de lieux ou d’étapes de processus qui gagnent à une relation de caméra continue.
  • Intégrations indépendantes du frameworkLe moteur documenté est du JavaScript pur ; le flux de travail vidéo n’est donc pas lié à un framework d’application particulier.

Limites à vérifier

  • Images générées, pas preuves réellesLe monde est une construction illustrative. Il ne doit pas être présenté comme un document filmé d’installations, de produits ou d’événements qu’il ne montre pas réellement.
  • Services payants et changeantsLe rendu nécessite un accès fournisseur et un budget. La source contient des observations datées sur les fournisseurs ; les schémas de modèles, la disponibilité, la facturation et le comportement des raccords doivent donc être vérifiés avant toute nouvelle production.

Éléments à fournir

  • Histoire de l’entrepriseDécrivez le sujet et les scènes ordonnées, avec un titre et un texte explicatif concis pour chaque étape.
  • Caméra et direction artistiqueChoisissez une visite au sol, un vol aérien au-dessus d’un monde miniature ou un traitement à angle fixe, avec les couleurs et repères de marque approuvés.
  • Budget de productionPrécisez l’accès aux fournisseurs, les plafonds de dépense et si une chaîne portrait distincte est nécessaire. Prévoyez la revue et le remplacement des clips ratés.

03 Décisions importantes

Décisions importantes

  1. Les raccords sont un actif de production

    L’extraction des images-frontières fait de la continuité un élément vérifiable du pipeline. Un simple fondu enchaîné ne peut pas masquer un grand changement de composition de scène.

  2. Le mobile est un livrable explicite

    Une chaîne de caméra en portrait peut préserver le sujet et la composition sur téléphone. La traiter séparément rend visibles le budget et l’arbitrage visuel au lieu de masquer un problème de recadrage.

04 Exemple de brief

Essayer un brief ciblé

Le brief d’exemple ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Utilisez les références du moteur et du pipeline du dépôt. Vérifiez les capacités et tarifs actuels des fournisseurs, puis obtenez une approbation avant de lancer une génération payante.

Fichier source amont
https://github.com/oso95/scroll-world/blob/71cc36d3bb150248ae36a2c552f9cbf88802a79c/skills/scroll-world/SKILL.md

Le pipeline documenté utilise Higgsfield et une voie vidéo Monid, ainsi que ffmpeg/ffprobe et un environnement de navigateur. Les comptes fournisseurs, les crédits, les capacités des modèles et toute voie d’image facultative doivent être revérifiés.

Commencer par un seul livrable

Adaptez le périmètre, le matériel source et les contraintes de ce brief avant d’exécuter le skill.

Brief d’exemple
Utilisez Scroll World pour planifier un parcours illustratif, de la plantation de thé à la boisson finie, en cinq scènes miniatures. Utilisez nos couleurs de marque fournies et un style de caméra aérienne en diorama. Avant de générer quoi que ce soit, vérifiez le service de rendu actuel et estimez une production desktop uniquement, avec une marge pour les nouvelles tentatives. Présentez d’abord le plan des scènes et la direction des images fixes. Ne créez pas de chaîne mobile et n’engagez aucun frais de rendu sans approbation.

Inspecter le résultat

Comparez le résultat réel à ces critères observables.

  • Les clips voisins ont été examinés juste avant et après chaque raccord, dans les deux sens de défilement.
  • Le mode de réduction des animations présente des images fixes exploitables et un texte de section lisible.
  • Toute version mobile annoncée sert réellement des ressources en portrait, et non un recadrage paysage non signalé.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec l’espace de travail, ni que ses outils externes, identifiants et dépendances logicielles sont inclus.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
oso95
Dépôt
oso95/scroll-world
Fichier du skill
skills/scroll-world/SKILL.md
Licence
MIT
Version examinée
2026-10-07 · 71cc36d3bb15
Résumé éditorial de la source
Un flux de travail de page d’atterrissage en vidéo générée, structuré autour de l’architecture de caméra, de la continuité des images réelles, du défilement synchronisé et de décisions explicites sur le mobile et le budget de rendu.

Résumé original par OpenDesign, d’après la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Crée-t-il une scène 3D en temps réel ?

Non. La page fait défiler une vidéo pré-rendue. Cela produit un mouvement de caméra sans permettre aux visiteurs de naviguer librement dans un modèle 3D en direct.

Pourquoi ne pas relier les images fixes d’origine ?

Les clips générés peuvent différer de leurs références de départ. Les images-frontières réellement rendues offrent une transition visuelle plus proche qu’une nouvelle interprétation de la même image fixe.

Un film mobile est-il inclus automatiquement ?

Non. La source exige un choix distinct pour une chaîne portrait native. Les ajustements de lecture propres aux téléphones dans le moteur sont distincts de la production de ces séquences supplémentaires.

OpenDesign

Faites de la place à la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/oso95/scroll-world/blob/71cc36d3bb150248ae36a2c552f9cbf88802a79c/skills/scroll-world/SKILL.md