# Shred Ninja (/docs/cookbook/shred-ninja)

import { Cards, Card } from 'fumadocs-ui/components/card';
import { Callout } from 'fumadocs-ui/components/callout';

## Introduction

Imagine building a game where every on-screen element represents a real blockchain transaction happening right now. Not 12 seconds ago, not in the next block, but right now, in realtime. This is exactly what Shred Ninja demonstrates: a Fruit Ninja-style arcade game where players tap incoming USDC transfer events while avoiding USDT transfers, all powered by live blockchain data streaming at millisecond speeds.

Traditional blockchains can't support this kind of realtime interactivity because they require waiting for block confirmations that take seconds or even minutes. RISE changes the game entirely with its shreds technology, delivering transaction events to your application in just 3-5 milliseconds. This tutorial will show you how to harness that power to build a genuinely interactive blockchain experience.

### What You'll Build

A fully functional arcade game with:

* Realtime event monitoring that converts blockchain transfers into game elements
* Progressive difficulty that scales with your score
* Sound effects and smooth animations
* Green USDC tokens to tap, red USDT tokens to avoid
* Game ends after 10 misses or tapping a red token

### What You'll Learn

* WebSocket connections to RISE Testnet for realtime event streaming
* Using the `watchShreds` method to subscribe to blockchain events
* Filtering ERC20 transfer events from raw blockchain logs
* Event deduplication to prevent duplicate processing
* Progressive difficulty systems that adapt to user performance
* React state management for realtime data
* Framer Motion animations and Web Audio API synthesis

### The Shreds Advantage

Traditional blockchain applications poll for events every few seconds or wait for block confirmations before updating their UI. This creates a sluggish, disconnected user experience where actions feel delayed and unnatural. RISE's shreds technology fundamentally changes this paradigm.

With shreds, your application receives transaction events through a persistent WebSocket connection the moment they're executed, which is typically within 3-5 milliseconds. This is fast enough to build games, realtime trading interfaces, live auction platforms, and any other application where immediate feedback matters. This tutorial demonstrates that capability by building something that simply couldn't exist on traditional blockchain infrastructure: a genuinely realtime game powered by live on-chain data.

### Prerequisites

* Node.js 18+ installed
* Comfortable with React and Next.js basics (`useState`, `useEffect`)
* Basic TypeScript understanding
* Familiarity with blockchain concepts (transactions, events)

<Callout type="info">
  This tutorial uses RISE Testnet to stream live transfer events from real ERC20 tokens. You don't need any testnet funds or wallet setup. The app monitors the network passively without sending transactions.
</Callout>

### Source Code

The complete source code for this project is available on GitHub: [awesamarth/shred-ninja](https://github.com/awesamarth/shred-ninja)

## Quick Links

<Cards>
  <Card title="Setup" href="/docs/cookbook/shred-ninja/setup" description="Project setup and understanding Shreds" />

  <Card title="Implementation" href="/docs/cookbook/shred-ninja/implementation" description="Build the game with realtime events" />
</Cards>