Vela
Web3 protocol site.
A site for a blockchain protocol or network, built in Next.js 16, TypeScript and Tailwind CSS 4, with one three.js moment: the validator set drawn as rings of seats orbiting the chain, the seats that signed the latest block in the accent colour. The sample protocol is Vela, a proof-of-stake network for stablecoin payments, with its validators, ecosystem apps and governance proposals.
- For
- Web3 protocol
- Built with
- Next.js 16, TypeScript, Tailwind CSS 4, Motion, anime.js, three.js
- Pages
- 6 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
The 3D moment
The validator set as rings of seats orbiting the chain; the orange seats signed the latest block, and the rings draw outward from the centre as the page opens.
What you get
Straight from the template's README, the same file you will find in the repository.
- Six pages: Home, Validators, Ecosystem, Governance, a proposal page for each proposal, and a 404, plus loading and error states.
- A signature 3D hero: five rings of validator seats turning slowly round a solid centre, drawing outward as the page opens and leaning toward the pointer. Lazy loaded, paused off screen, still under reduced motion, with a matching SVG drawing of the same rings when WebGL is missing.
- A live network panel under the hero buttons, a small block explorer: the block number advances once per block time, the finality line draws itself, and the latest transfer changes every few blocks. It is the proof next to the decision, and it runs on sample data until you wire your indexer in.
- A home page with ten sections, each with its own layout: a settlement timeline drawn to time, a spec sheet of network figures, code samples in tabs (TypeScript, Rust, HTTP) with a copy button, a 512-seat map beside a validator table, featured apps as a card shuffle (the deck fans out, then deals its top card under, with Previous, Pause and Next), audits and bug bounty, live proposals with vote bars, FAQs and a newsletter form.
- A validator table with search, sorting by stake, commission and uptime, and an empty state.
- An ecosystem directory with category filters, search and an empty state.
- Governance: proposals filtered by status, each with its own page showing the case, the settings it changes, the vote so far, turnout against quorum and the dates.
- A newsletter form with empty, invalid, sending and done states (UI only, not connected).
- Light and dark themes that follow the system, with a switch that opens the new theme as a circle from the button. Dark is its own look, not a dimmed copy: the chain turns pale and the ink bands flip to light. Both palettes pass WCAG AA (ratios listed in
src/app/vela-theme.css). - One content file: every word, figure and link lives in
src/content/site.ts. - Self-hosted fonts (Geologica and Onest, OFL), no trackers, no runtime CDN.
- Motion, one tool per job: Motion (
motion/react) for UI motion (the block number, the receipts, the card shuffle), anime.js for the SVG line drawing, the engine's native helpers for reveals, count-ups, anchor glides and the theme switch, and three.js for the hero. Every moving part respects reduced motion.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Validators
- Ecosystem
- Governance
- Proposal
- 404
Stack
- Next.js 16
- TypeScript
- Tailwind CSS 4
- Motion
- anime.js
- three.js
What is not included
- No wallet connection, chain data or on-chain voting: figures come from the content file. Wire your own RPC or indexer in where the README says so.
- No sign-in, no CMS and no email provider (the newsletter form has a marked
submitfunction). - Four demo photographs (Pixabay, on the featured app cards) are demo content: replace them with your partners' own pictures. Every other picture is drawn in code (see
IMAGES.md).
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
