Metaversus

Metaversus is a single-page, scroll-animated metaverse landing page template built on the Next.js App Router, Tailwind CSS v4, and Motion, designed as a marketing site for a fictional metaverse company. The project is open source under the MIT license, was built by Om Patel, and is available as a reference implementation for cinematic scroll-triggered web experiences.

What is Metaversus?

Metaversus is an open-source landing page for a fictional metaverse business, originally started as a JavaScript tutorial build and rebuilt as a fully typed, statically generated application. The page takes content from typed constants in app/constants and renders it as a single Next.js page with eight animated sections: Hero, About, Explore, Get Started, What's New, World, Insights, and Feedback. It runs on Next.js 16 with React 19, is styled with Tailwind CSS v4, animates with Motion, and is deployed as a live demo on Vercel at project-metaverse-beta.vercel.app.

Key Features

• Eight animated sections — Hero, About, Explore, Get Started, What's New, World, Insights, and Feedback, all composed in one App Router page.
• Scroll-triggered motion — reveal, slide, fade, zoom, and stagger effects driven by reusable Motion variant factories in app/utils.
• Interactive world explorer — click a planet card and it expands with a smooth flex transition while the other cards collapse.
• Tailwind CSS v4 design tokens — brand colors, custom breakpoints, and a custom easing curve declared directly in CSS using the @theme directive.
• Type-safe content model — domain types in app/types are the single source of truth for the data in app/constants and for every component's props.
• Optimized images — uses next/image with Sharp for automatic image optimization.
• Statically generated — the whole page pre-renders to static HTML for fast, cacheable delivery.
• Rust-powered linting — oxlint replaces ESLint while keeping the Next.js core-web-vitals rule set.

Who should use Metaversus?

• Frontend developers learning Next.js App Router and Motion: a small, typed codebase showing section composition and scroll animation patterns they can fork and extend.
• Design engineers building futuristic brand pages: the Tailwind v4 @theme tokens let them recolor the entire site and adjust breakpoints from one CSS file.
• Startups marketing Web3, VR, or AI products: the eight-section narrative (explore, get started, new features, insights, world map) maps to a full product story.
• Open-source contributors looking for a clean architecture with a roadmap: the repo separates components, sections, constants, types, and styles, and lists next steps like automated tests and self-hosted fonts.

What can you do with Metaversus?

• Fork and rebrand — clone the repo, run bun install and bun dev, then edit the typed constants in app/constants to swap all copy without touching component code.
• Learn Motion scroll patterns — study the variant factories in app/utils to reproduce reveal, slide, stagger, and the world-explorer expand/collapse interactions in your own builds.
• Deploy a static marketing site — bun run build produces an optimized production build that works on any static host; the README links a live Vercel deployment.
• Use as a Tailwind v4 reference — the @theme configuration in app/styles demonstrates CSS-first token setup for colors, breakpoints, and easing curves.

How does Metaversus work?

Metaversus renders top-down: Vercel serves the pre-rendered HTML, the App Router builds the root layout and home page, the home page composes the eight section components, and those components receive props from the shared typed foundation (types, constants, motion, styles) plus static assets in public/. For local development, clone the repository, install dependencies with Bun, and start the dev server with bun dev, which runs at localhost:3000.

Pros and cons

• Open source and free — licensed under MIT, so you can use it commercially without restriction.
• Modern stack — Next.js 16, React 19, TypeScript, Tailwind CSS v4, Motion, and Bun keep the toolchain current.
• No automated tests yet — the roadmap lists adding unit and visual regression coverage as an open item.
• External fonts — the Eudoxus Sans fonts are not yet self-hosted, so the page relies on an external font source until the next/font migration lands.

Pricing

Metaversus is open source under the MIT License and free to use. There is no paid tier, account, or license fee, since it is distributed as a public GitHub repository.

FAQ

Is Metaversus free?

Yes, Metaversus is released under the MIT License, so it is free to use, modify, and deploy for personal or commercial projects.

What tech stack does Metaversus use?

The template runs on Next.js 16 with React 19, uses TypeScript throughout, styles with Tailwind CSS v4, animates with Motion, lints with oxlint, and uses Bun as the package manager and runtime.

Does Metaversus include a backend?

No, the page is statically generated and has no backend or database. Content lives in typed constant files in app/constants, and the build pre-renders everything to static HTML.

How do I run Metaversus locally?

Clone the repo, install dependencies with bun install, and start the development server with bun dev. The site runs at http://localhost:3000 and requires Bun 1.0 or newer, or Node.js 20 and above.