Web3 Crypto Landing

A full-site marketing template for crypto and web3 products, with a particle mesh background, a 3D tilting token, and scroll reveals.

A one-page web3 marketing template: a connected-particle background, a 3D token with mouse parallax, a live stats row, a feature grid, and a closing CTA — with all the colors and copy customizable through props.

Loading preview…

npx shadcn@latest add "https://webberui.com/r/web3-crypto-landing.json?t=<install token>"

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Brand namebrand

Headlineheadline

Primary button labelprimaryCta

Secondary button labelsecondaryCta

Noise grain overlaygrain

<Web3CryptoLanding />

Installation

npx shadcn@latest add "https://webberui.com/r/web3-crypto-landing.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/web3-crypto-landing.

Usage

import { Web3CryptoLanding } from "@/components/ui/web3-crypto-landing";

<Web3CryptoLanding
  brand="Nexus"
  headline="The onchain layer for the next billion users."
  accent={["#a855f7", "#6366f1", "#22d3ee"]}
/>;

Customizing the stats row and the feature cards:

<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	Type	Default	Description
`brand`	`string`	`"Nexus"`	Brand name in the nav bar
`headline`	`string`	`"The onchain layer…"`	Main headline
`subhead`	`string`	see the source	Subheading description
`primaryCta`	`string`	`"Launch App"`	Primary CTA copy
`secondaryCta`	`string`	`"Read Docs"`	Secondary CTA copy
`accent`	`readonly string[]`	`["#a855f7", "#6366f1", "#22d3ee"]`	Three-color brand gradient
`stats`	`TokenStat[]`	three samples	The live stats row at the top
`features`	`FeatureItem[]`	four samples	The features section
`chains`	`ChainLogo[]`	six samples	Supported chain badges
`grain`	`boolean`	`true`	Overlay a noise grain
`className`	`string`	—	Forwarded styling on the outer element

Here TokenStat is { label: string; value: string; change: string }, FeatureItem is { icon: LucideIcon; title: string; desc: string }, and ChainLogo is { symbol: string; name: string }.

Accessibility

When the user has "reduce motion" enabled at the system level, the particle background draws a single frame only, the token and the floating cards stop drifting, and the content stays static
The particle canvas and the background layers are all marked aria-hidden and do not interfere with screen readers
The random particle coordinates use a deterministic seed with a two-stage mounted-flag render, avoiding an SSR hydration mismatch