Commencer
Landing Scroll Story : Créateur de sites animés

Landing Scroll Story : Créateur de sites animés

Transformez la description d'un service ou une URL en site Next.js animé au défilement. Deux modèles (light axé SEO, cinematic avec GSAP), couleur de marque en une commande, notes SEO et de déploiement incluses.
#Design#Ingénierie#Marketing
Note
Davantage d’évaluations nécessaires
Vendus
0
Mode d’utilisation
Télécharger

Landing Scroll Story

Landing Scroll Story génère un site vitrine Next.js complet et exécutable à partir de l'URL d'un service, d'un README ou d'un texte de présentation. Vous répondez à trois questions au maximum et recevez un zip du projet prêt à lancer et à déployer.

Scroll animation preview (sample service Brewly)

Deux modèles

Light (SEO d'abord)

  • Hero sombre avec barres animées, navigation flottante en pilule, cartes bento, vitrine épinglée au défilement, étapes d'utilisation et FAQ
  • Pages de guide détaillées, JSON-LD FAQPage et WebSite
  • Le sitemap et le robots restent fermés tant que vous n'avez pas défini votre URL de production (les déploiements Preview ne sont jamais indexés)

Cinematic (visuel d'abord)

  • Chorégraphie GSAP + ScrollTrigger + Lenis
  • Le hero se réduit en grille bento, intro Lottie pilotée par le défilement, cartes de valeurs, vitrine en défilement continu et pied de page en rideau
  • Mise en page adaptée au mobile incluse

Comment ça marche

  1. Fournissez une URL, un README ou une courte description.
  2. Choisissez light ou cinematic. La skill en recommande un et explique pourquoi.
  3. Elle rédige les textes, définit la couleur de votre marque en une commande, compile, vérifie les types et contrôle les largeurs bureau et mobile.
  4. Vous recevez le zip du projet avec de courtes notes pour le lancer, modifier les textes et le déployer (Vercel, Cloudflare, Search Console).

Exemple de résultat

Les captures ci-dessous proviennent d'un service fictif ("Brewly") réalisé avec cette skill.

cinematic-bento.webp cinematic-values.webp cinematic-footer.webp light-hero.webp light-showcase.webp

À savoir

  • Les illustrations du modèle cinematic sont de simples formes géométriques générées. Pour un rendu soigné, remplacez les fichiers de public/landing/ par vos propres visuels.
  • Le modèle cinematic affiche plusieurs sections après l'hydratation : l'essentiel de son texte est donc absent du HTML serveur. Choisissez light si le référencement compte.
  • Vérifié sur ordinateur et sur une largeur de 390 px dans un environnement de développement. Les tests sur appareils réels et Safari ne sont pas inclus.
  • La qualité des textes dépend de vos sources. La skill n'invente ni chiffres, ni clients, ni récompenses.

Licences et attribution

  • Le modèle cinematic dérive du code de la page d'accueil du SEED Design System (github.com/daangn/seed-design), Apache-2.0, Copyright 2025 Danggeun Market Inc. Le texte de la licence et les mentions sont inclus dans le projet livré. Les logos, noms et médias de SEED ou Daangn ne sont PAS inclus. Ce produit n'est ni affilié, ni parrainé, ni approuvé par Daangn.
  • GSAP est utilisé sous sa licence standard gratuite. La police Pretendard est sous SIL OFL 1.1.

API externes

registry.npmjs.org