Welcome to this tutorial! This project focuses on creating dynamic, real-time animations that respond to live changes on the blockchain. We'll be using Viem to listen for these changes and the Rive React Runtime library to handle our animations.
By the end of this tutorial, you'll be able to:
-
Understand how to use Viem to listen to on-chain changes in real-time. Viem is a fantastic tool for real-time blockchain data, and we'll show you how to get up and running with it.
-
Manipulate animations with Rive and React. Rive is a powerful animation tool with a runtime library for React, making it easy to integrate these animations into a modern web app.
-
Combine these technologies to create a web app that listens for on-chain changes and triggers animations in response. It's a unique way to visualize blockchain activity and a great example of combining data streams and UI.
In this tutorial, we'll be building a simple web app that displays information about the latest block on the Ethereum blockchain.
But it's not just a data display. Each time a new block is mined, our app will play a fun animation, making the rather dry process of block mining a visually engaging experience!
This tutorial is aimed at developers with some experience in React and a basic understanding of blockchain technology. It's perfect for those looking to expand their knowledge and learn how to incorporate real-time blockchain data into a web app.
- React: A popular JavaScript library for building user interfaces.
- Next.js: A React framework with a range of features for modern web development.
- Viem: A tool that is lightweight, composable, and type-safe that includes modules that interface with Ethereum
- Rive: A platform for interactive, real-time animations.
- Rive-React Runtime library: A library for integrating Rive animations into a React app.
- framer-motion: A powerful library for controlling animations in React, enabling fluid visual transitions and user interactions.
- Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces, allowing fine control over design elements.
With these tools, we'll be able to create a dynamic, real-time web app that beautifully visualizes on-chain events. So let's get started!
Run the following to install all the neccessary packages:
npm install
Then run the following to start up the dev enviroment and see the cool animation follow on chain events in real time:
npm run dev