Web3 Crypto Landing
加密貨幣／web3 產品行銷整站模板，含粒子網格背景、3D 傾斜代幣與滾動進場。
一頁式 web3 行銷模板：粒子連線背景、滑鼠視差的 3D 代幣、即時數據列、特色網格與 CTA 收尾，色彩與文案全部可透過 props 客製。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<Web3CryptoLanding />
安裝
npx shadcn@latest add https://webberui.com/r/web3-crypto-landing.json或在 components.json 設定 registries 後，改用 @webberui/web3-crypto-landing 安裝。
安裝依賴後，從 registry JSON（/r/web3-crypto-landing.json 的 files[0].content）複製 web3-crypto-landing.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { Web3CryptoLanding } from "@/components/ui/web3-crypto-landing";
<Web3CryptoLanding
brand="Nexus"
headline="The onchain layer for the next billion users."
accent={["#a855f7", "#6366f1", "#22d3ee"]}
/>;自訂數據列與特色卡：
<Web3CryptoLanding
stats={[
{ label: "Total Value Locked", value: "$4.28B", change: "+12.4%" },
{ label: "24h Volume", value: "$918M", change: "+6.1%" },
{ label: "Active Wallets", value: "1.2M", change: "+3.8%" },
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
brand | string | "Nexus" | 導覽列品牌名 |
headline | string | "The onchain layer…" | 主標題 |
subhead | string | 見原始碼 | 副標描述 |
primaryCta | string | "Launch App" | 主要 CTA 文案 |
secondaryCta | string | "Read Docs" | 次要 CTA 文案 |
accent | readonly string[] | ["#a855f7", "#6366f1", "#22d3ee"] | 三色品牌漸層 |
stats | TokenStat[] | 三筆範例 | 頂部即時數據列 |
features | FeatureItem[] | 四筆範例 | 特色區塊 |
chains | ChainLogo[] | 六筆範例 | 支援鏈徽章 |
grain | boolean | true | 疊加噪點顆粒 |
className | string | — | 透傳外層樣式 |
其中 TokenStat 為 { label: string; value: string; change: string }，FeatureItem 為 { icon: LucideIcon; title: string; desc: string }，ChainLogo 為 { symbol: string; name: string }。
可及性
- 使用者系統開啟「減少動態效果」時，粒子背景只繪製一幀、代幣與浮動卡停止漂移，內容維持靜態呈現
- 粒子 canvas 與背景層皆標記
aria-hidden，不干擾螢幕閱讀器 - 隨機粒子座標採確定性 seed 搭配 mounted-flag 兩段式渲染，避免 SSR hydration mismatch