# Glitterball

> Glitterball allows you to overlay interactive video walkthroughs over your real prototype and allows you to request feedback from your team. A designer records a narrated walkthrough on the live prototype; viewers follow it on the real thing, answer the questions the designer asked, and pin comments to the screen. Built for design and product teams who prototype in code with coding agents such as Claude Code, Codex, Cursor, v0 and Lovable.

## What it does

- Record: choose Walkthroughs on the Glitterball bar in your prototype, then Record a walkthrough. Glitterball records your clicks, voice and camera while you click through it, in any modern browser, with nothing to install.
- Share: the link is the prototype's own URL. The walkthrough plays over it with a named guide cursor, or as a corner video. Viewers need no account to watch.
- Ask: stop the walkthrough at a moment and ask viewers a question; they answer in words, a choice, a slider, an emoji, marker pens or a video.
- Comment: comments pin to elements of the live prototype.
- Feed the agent: the Glitterball MCP server and CLI hand comments and answers back to the coding agent that builds the prototype.

## Add it to a prototype

Paste this one line into your coding agent:

    Add Glitterball to this prototype: run `npx glitterball init`

It makes the prototype's token, installs the glitterball npm package and adds the `<Glitterball token="…" />` component. It works on any host and any framework, even localhost. Every framework: https://www.glitterball.dev/install.md.

## Questions

- What is Glitterball? Glitterball allows you to overlay interactive video walkthroughs over your real prototype and allows you to request feedback from your team.
- How do I add Glitterball to my prototype? Run `npx glitterball init` in its folder, or ask your coding agent to. It works on any host and any framework, even localhost.
- How is it different from a screen recording? A screen recording is a flat video. Glitterball plays over the live build, so viewers can stop, click around themselves and comment on the exact screen.
- Do viewers need an account? No. Anyone with the link can watch, comment and answer. They add their name or sign in.
- Can my coding agent read the feedback? Yes. Every comment and answer is available to Claude Code, Cursor and other agents over MCP.

## Integrations

- [Glitterball for Codex](https://www.glitterball.dev/integrations/codex/): Ask Codex to add Glitterball, then hand the feedback back to it
- [Glitterball for Claude Code](https://www.glitterball.dev/integrations/claude-code/): Ask Claude Code to add Glitterball, then hand the feedback back to it
- [Glitterball for Cursor](https://www.glitterball.dev/integrations/cursor/): Ask Cursor to add Glitterball, then hand the feedback back to it
- [Glitterball for ChatGPT](https://www.glitterball.dev/integrations/chatgpt/): See walkthroughs and feedback in ChatGPT
- [Glitterball for Claude](https://www.glitterball.dev/integrations/claude/): See walkthroughs and feedback in Claude
- [Glitterball for Lovable](https://www.glitterball.dev/integrations/lovable/): Paste one line into Lovable, publish, and record over the real app
- [Glitterball for Replit](https://www.glitterball.dev/integrations/replit/): Paste one line into Replit, publish, and record over the real app
- [Glitterball for v0](https://www.glitterball.dev/integrations/v0/): Paste one line into v0, publish, and record over the real app
- [Glitterball for Figma Make](https://www.glitterball.dev/integrations/figma-make/): Paste one line into Figma Make, publish, and record over the real app
- [Glitterball for Bolt](https://www.glitterball.dev/integrations/bolt/): Paste one line into Bolt, publish, and record over the real app

Coding agents and chat apps read feedback over MCP at https://www.glitterball.dev/mcp.

## Use cases

- [Client demos for forward-deployed teams](https://www.glitterball.dev/use-cases/client-demos/): Forward-deployed teams and agencies walk clients through each week’s build and get answers on the screen

## Pricing

Free: 2 walkthroughs a week, forever. Maker: $10 per person a month, with unlimited walkthroughs, video commenting and questions for your audience. Viewers are always free. Details: https://www.glitterball.dev/pricing

## Support

- [What is Glitterball](https://www.glitterball.dev/help/what-is-glitterball): Glitterball allows you to overlay interactive video walkthroughs over your real prototype and allows you to request feedback from your team
- [Create your account and workspace](https://www.glitterball.dev/help/create-your-account): Sign in with a code sent to your email, then join a team or start one
- [Add Glitterball to a prototype](https://www.glitterball.dev/help/add-glitterball-to-a-prototype): Run one command, or ask your coding agent
- [Connect a prototype](https://www.glitterball.dev/help/connect-a-prototype): Put the Glitterball tag on a deployed prototype
- [Versions of a prototype](https://www.glitterball.dev/help/versions-of-a-prototype): How Glitterball numbers versions of a prototype, groups them by its tag, finds its walkthroughs, and renames it
- [Record a walkthrough](https://www.glitterball.dev/help/record-a-walkthrough): Record yourself clicking through a prototype with your voice and camera, for up to 30 minutes, and get a link to share
- [Follow a walkthrough](https://www.glitterball.dev/help/follow-a-walkthrough): What viewers see when they open a walkthrough link: the recording playing over the live prototype, with the presenter's cursor, voice and camera
- [Ask questions in a walkthrough](https://www.glitterball.dev/help/ask-for-feedback): Pin questions to moments in your walkthrough so everyone following it stops there and answers on the spot
- [Delete a walkthrough](https://www.glitterball.dev/help/delete-a-walkthrough): Delete a walkthrough's recording, narration and camera for good, from its share page or from the prototype
- [Share links and private links](https://www.glitterball.dev/help/share-links-and-private-links): The links Glitterball makes for a walkthrough, who can open them, and how to look at a version without sharing it
- [Comments](https://www.glitterball.dev/help/comments): Leave comments pinned to the live prototype or to a moment in a walkthrough, in text or on video
- [Connect Claude, ChatGPT and coding agents](https://www.glitterball.dev/help/connect-claude-chatgpt-and-coding-agents): See your walkthroughs and their feedback in Claude or ChatGPT, and let a coding agent fix the comments on your prototype
- [Play walkthroughs in Slack](https://www.glitterball.dev/help/play-walkthroughs-in-slack): Add the Glitterball app to Slack so walkthrough links play right in the message, and feedback comes back to a channel
- [Teams, roles and invites](https://www.glitterball.dev/help/teams-roles-and-invites): Start a team, bring people in by email, let people in who ask to join, and see who's on it
- [Plans and billing](https://www.glitterball.dev/help/plans-and-billing): What Free and Maker include, and where to move to Maker and manage billing
- [Email from Glitterball](https://www.glitterball.dev/help/email-from-glitterball): The emails Glitterball sends, why you get each one, and how to stop the ones you don't need
- [Your data and deleting it](https://www.glitterball.dev/help/your-data): What Glitterball stores when you record and comment, who can see it, and how to delete it or your account
- [Troubleshooting](https://www.glitterball.dev/help/troubleshooting): Fixes for the microphone or camera, signing in to record, recordings that stop, sign-in codes that don't arrive, and walkthroughs that don't play on the prototype
- [Security](https://www.glitterball.dev/help/security): How Glitterball protects your workspace, and how to report a security problem

## Links

- [Start free](https://www.glitterball.dev/app?ref=llms)
- [Pricing](https://www.glitterball.dev/pricing)
- [Support](https://www.glitterball.dev/help)