Landing Scroll Story: Creatore di siti animati
Trasforma la descrizione di un servizio o un URL in una landing Next.js con animazioni allo scroll. Due template (light con priorità SEO, cinematic con GSAP), colore del brand con un solo comando, note su SEO e deploy incluse.
#Design#Ingegneria#Marketing
Valutazione
Servono altre valutazioni
Venduti
0
Come si usa
Scarica
Landing Scroll Story
Landing Scroll Story crea un sito di atterraggio completo ed eseguibile in Next.js a partire dall'URL di un servizio, da un README o da un testo di presentazione. Rispondi al massimo a tre domande e ricevi uno zip del progetto pronto da avviare e pubblicare.
Due template
Light (SEO al primo posto)
- Hero scuro con barre in movimento, navigazione fluttuante a pillola, card bento, vetrina fissata allo scroll, passaggi d'uso e FAQ
- Pagine guida di dettaglio e JSON-LD FAQPage e WebSite
- Sitemap e robots restano chiusi finché non imposti l'URL di produzione (i deploy Preview non vengono mai indicizzati)
Cinematic (impatto visivo al primo posto)
- Coreografia con GSAP + ScrollTrigger + Lenis
- L'hero si riduce in una griglia bento, intro Lottie guidata dallo scroll, card dei valori, vetrina a scorrimento continuo e footer a sipario
- Layout responsive per mobile incluso
Come funziona
- Fornisci un URL, un README o una breve descrizione.
- Scegli light o cinematic. La skill ne consiglia una e spiega perché.
- Compila i testi, imposta il colore del tuo brand con un solo comando, esegue la build, controlla i tipi e verifica le larghezze desktop e mobile.
- Ricevi lo zip del progetto con brevi note su come avviarlo, modificare i testi e pubblicarlo (Vercel, Cloudflare, Search Console).
Esempio di risultato
Gli screenshot qui sotto provengono da un servizio fittizio di esempio ("Brewly") realizzato con questa skill.
Da sapere
- Le illustrazioni del template cinematic sono semplice geometria generata dal codice. Per un risultato curato, sostituisci i file in
public/landing/con le tue illustrazioni. - Il template cinematic mostra diverse sezioni dopo l'idratazione, quindi gran parte del testo manca nell'HTML del server. Scegli light se il posizionamento sui motori di ricerca è importante.
- Verificato su desktop e su una larghezza di 390 px in un ambiente di sviluppo. I test su dispositivi reali e su Safari non sono inclusi.
- La qualità dei testi dipende dal materiale di partenza. La skill non inventa numeri, clienti o premi.
Licenze e attribuzione
- Il template cinematic deriva dal codice della landing page del SEED Design System (github.com/daangn/seed-design), Apache-2.0, Copyright 2025 Danggeun Market Inc. Il testo della licenza e gli avvisi sono inclusi nel progetto consegnato. Loghi, nomi e contenuti multimediali di SEED o Daangn NON sono inclusi. Questo prodotto non è affiliato, sponsorizzato né approvato da Daangn.
- GSAP è usato con la sua licenza standard gratuita. Il font Pretendard è con licenza SIL OFL 1.1.
API esterne
registry.npmjs.org
