Landing Scroll Story:動畫落地頁產生器
把服務介紹或網址變成帶有捲動動畫的 Next.js 落地頁。提供兩套範本(重視 SEO 的 light、採用 GSAP 的 cinematic),一行指令設定品牌色,並附上 SEO 與部署說明。
#設計#工程#行銷
評分
需要更多評價
已售出
0
使用方式
下載
Landing Scroll Story
Landing Scroll Story 可根據服務網址、README 或介紹文字,產生完整且可直接執行的 Next.js 落地頁網站。最多只需回答三個問題,即可取得能執行、可部署的專案 zip。
兩套範本
Light(SEO 優先)
- 深色首屏搭配移動的色條、懸浮膠囊導覽、Bento 卡片、捲動時固定的展示區、使用步驟與 FAQ
- 詳細指南頁面,以及 FAQPage 與 WebSite 的 JSON-LD
- 在設定正式環境網址之前,sitemap 與 robots 維持關閉(Preview 部署絕不會被收錄)
Cinematic(視覺優先)
- 以 GSAP + ScrollTrigger + Lenis 編排動態
- 首屏縮小為 Bento 網格,隨捲動播放的 Lottie 開場、價值卡片、跑馬燈展示區與布幕式頁尾
- 包含行動裝置響應式版面
使用方式
- 提供網址、README 或一段簡短說明。
- 選擇 light 或 cinematic。技能會給出建議並說明原因。
- 它會填入文案,用一行指令設定品牌色,接著建置、檢查型別,並確認桌面與行動裝置寬度。
- 你會收到專案 zip,附有執行、修改文案與部署(Vercel、Cloudflare、Search Console)的簡短說明。
輸出範例
下方截圖來自使用本技能製作的虛構範例服務(「Brewly」)。
注意事項
- cinematic 範本中的圖形是由程式碼產生的簡單幾何圖案。若想要精緻的成果,請將
public/landing/中的檔案替換為你自己的素材。 - cinematic 範本在水合(hydration)之後才會渲染多個區塊,因此伺服器回傳的 HTML 缺少大部分文字。若搜尋排名很重要,請選擇 light。
- 已在開發環境中驗證桌面與 390 px 寬度的視窗。不包含實機與 Safari 測試。
- 文案品質取決於你提供的資料。技能不會捏造數字、客戶或獎項。
授權與署名
- cinematic 範本源自 SEED Design System(github.com/daangn/seed-design)落地頁的程式碼,採用 Apache-2.0,Copyright 2025 Danggeun Market Inc.。授權全文與聲明隨交付專案一併提供。不包含 SEED 或 Daangn 的標誌、名稱與媒體素材。本產品與 Daangn 無關聯,亦未獲其贊助或背書。
- GSAP 依其免費的 Standard License 使用。字型 Pretendard 採用 SIL OFL 1.1。
外部 API
registry.npmjs.org
