Web3 Crypto Landing: React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

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

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<Web3CryptoLanding/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/web3-crypto-landing.en.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

Web3 Crypto Landing