public 3d-motion repository

r3f-spotify-game

// filahf/r3f-spotify-game

A music game built with react-three-fiber and the Spotify API

$ git log --oneline --stat
stars:90forks:18updated:2026-05-01
README.md
readonly

Logo

This game was made with the ambition of getting more familiar with 3D content on the web. The game itself draws inspiration from the classic game AudioSurf.

A Spotify Premium subscription is required to play the game.

Technologies

  • Next.js 12
  • NextAuth.js
  • react-three-fiber
  • glsl shaders
  • Spotify API
  • Chakra UI

Getting Started

  1. Clone the project
  2. Create a .env.local file in the root of the project. Instructions can be found in .env.example
  3. Install dependencies by running yarn
  4. Start the game by running yarn dev

Screenshot

my screenshot

Controls

Change lane with A,S,D or :arrow_left: :arrow_down: :arrow_right:

Contributing

Contributions are more than welcome!

Attributions

This project was bootstrapped with create-r3f-app

Road shader by Daniel Velasquez via tympanus

Space Craft Speeder by Kenney CC0 via Poly Pizza

metadata.json
TypeScriptGamesnextjsReact Three FiberReact Three Fiberspotifyspotify-web-apiThree.js

[INFO] 4 topics link to curated motion topic pages.