Metaversus

A cinematic, scroll-animated metaverse landing page built on the modern Next.js stack.

View Demo »  ·  Report Bug  ·  Request Feature

Table of Contents

1. About The Project
   • Built With
   • Architecture
2. Features
3. Getting Started
   • Prerequisites
   • Installation
4. Usage
5. Project Structure
6. Roadmap
7. Contributing
8. License
9. Contact
10. Acknowledgments

About The Project

Metaversus is the marketing landing page for a fictional metaverse company. It is a single, richly animated page that walks a visitor from the hero down through eight themed sections — the world explorer, getting-started steps, latest features, a people map, insights, and a founder quote — each one revealing itself with scroll-triggered motion.

The project started as a JavaScript tutorial build and has since been rebuilt as a fully typed, statically generated app. It runs on the current Next.js App Router, is styled entirely with Tailwind CSS v4 design tokens, and animates with Motion. The content is driven by a small, type-safe data layer so the layout and the copy stay decoupled and easy to change.

(back to top)

Built With

(back to top)

Architecture

The page renders top-down: Vercel serves the pre-rendered output, the App Router builds the layout and home page, the home page composes the section components, and those components draw their props from a shared typed foundation (types, constants, motion, styles) and static assets in public/.

A scalable vector version is available at public/architecture.svg.

(back to top)

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 a set of reusable Motion variant factories.
• Interactive world explorer — click a planet card and it expands with a smooth flex transition while the others collapse.
• Typing and title reveal micro-interactions introduce each section.
• Tailwind CSS v4 design tokens — brand colors, custom breakpoints, and the custom easing curve are declared directly in CSS with @theme.
• 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 through next/image and Sharp.
• Statically generated — the whole page pre-renders to static HTML for fast, cacheable delivery.
• Rust-powered linting — oxlint replaces ESLint while keeping Next's core-web-vitals rule set.

(back to top)

Getting Started

Prerequisites

• Bun >= 1.0 (recommended), or Node.js >= 20

Check your version:

bun --version

Installation

1. Clone the repository

git clone https://github.com/omunite215/Project_Metaverse.git

2. Move into the project directory

cd Project_Metaverse

3. Install dependencies

bun install

4. Start the development server

bun dev

The site runs at http://localhost:3000.

(back to top)

Usage

All scripts are run with Bun (swap in npm run if you prefer Node):

bun dev            # start the dev server with hot reload
bun run build      # create an optimized production build
bun run start      # serve the production build
bun run lint       # lint the codebase with oxlint
bun run lint:fix   # lint and auto-fix

Open http://localhost:3000 and scroll — every section animates into view. In the Explore section, click any planet card to expand it.

(back to top)

Project Structure

app/
├── components/    # reusable UI (Navbar, cards, Footer, text primitives)
├── sections/      # the eight page sections
├── constants/     # typed content data
├── types/         # domain models & component contracts
├── utils/         # Motion variant factories
├── styles/        # Tailwind v4 @theme tokens + font faces
├── layout.tsx     # root layout & metadata
└── page.tsx       # home page — composition root
public/            # images, icons, logo, architecture diagram

(back to top)

Roadmap

• Migrate to Next.js 16 and React 19
• Adopt Tailwind CSS v4 (CSS-first configuration)
• Replace ESLint with oxlint
• Centralize types into a single source of truth and remove any
• Add automated tests and visual regression coverage
• Self-host the Eudoxus Sans fonts via next/font

See the open issues for a full list of proposed features and known issues.

(back to top)

Contributing

Contributions make the open-source community a great place to learn and build. Any contributions you make are greatly appreciated.

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a pull request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Om Patel

Project link: https://github.com/omunite215/Project_Metaverse

(back to top)

Acknowledgments

• JavaScript Mastery — original build tutorial
• Figma design file
• Best README Template
• Shields.io
• Simple Icons for tech-stack logos

(back to top)

_{Built by Om Patel}