Setup

Project Setup

Create a New Next.js Project

Let's start by creating a fresh Next.js application:

npx create-next-app@latest shred-ninja

yarn create next-app shred-ninja

pnpm create next-app shred-ninja

bun create next-app shred-ninja

When prompted, select these options:

Use recommended Next.js defaults: No, customize settings
TypeScript: Yes
Linter: None
React Compiler: Yes
Tailwind CSS: Yes
src/ directory: Yes
App Router: Yes
Customize import alias: No

If you've completed another tutorial, you can select No, reuse previous settings to skip configuration.

Navigate into your project:

cd shred-ninja

Install Dependencies

Add the packages needed for blockchain integration and animations:

npm install viem shreds ws framer-motion
npm install --save-dev @types/ws

yarn add viem shreds ws framer-motion
yarn add --dev @types/ws

pnpm add viem shreds ws framer-motion
pnpm add -D @types/ws

bun add viem shreds ws framer-motion
bun add -D @types/ws

Package breakdown:

viem - Lightweight Ethereum library for blockchain interactions
shreds - RISE's package for realtime event streaming via watchShreds
ws - WebSocket client for persistent connections
framer-motion - Smooth animations for flying tokens
@types/ws - TypeScript definitions for WebSocket

Add Background Music (Optional)

To enhance the arcade experience, you can add background music. Just add a music file of your choice in /public. This is entirely optional and the game works fine without it.

Understanding Shreds and Event Streaming

Before coding, let's understand how RISE's shreds differ from traditional event monitoring.

Polling: Your app repeatedly asks "are there new events?" every few seconds. This wastes resources and creates artificial delays. If an event happens right after your last poll, you won't know until the next one.

RISE's Shreds Approach

RISE uses a WebSocket connection to stream events as they happen. Transactions are bundled into "shreds" and pushed to your app within milliseconds.

This is what makes Shred Ninja possible: every token on screen represents a real blockchain transfer happening at that moment, with latency so low it feels like a traditional web app.

Configuration

Configure the Root Layout

Set up your application's root layout:

src/app/layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Shred Ninja - RISE",
  description: "Realtime blockchain game powered by RISE Shreds",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-black text-white`}
      >
        {children}
      </body>
    </html>
  );
}

This sets up Google's Geist fonts and a dark theme perfect for our arcade-style game.

Now you're ready to build the game in the next section.