View all examples

Live Avatar StackAdvanced

This example shows how to build an advanced live avatar stack with Liveblocks, Framer Motion, and Next.js.

Image of Live Avatar Stack
Live preview

Open the example above and share it on multiple windows or devices to try it live.

Getting started

  • Install all dependencies with npm install
  • Create an account on
  • Copy your secret key from the dashboard
  • Create an .env.local file and add your secret key as the LIVEBLOCKS_SECRET_KEY environment variable
  • Run npm run dev and go to http://localhost:3000


After forking this example on CodeSandbox, create the LIVEBLOCKS_SECRET_KEY environment variable as a secret.

More examples