Video Chat Bubble

Simple project to create a video chat bubble using Vite with React, TypeScript, Tailwind and Framer Motion.

How to run

1. Clone the repository
2. Run pnpm install to install.
3. Run pnpm dev to start the development server. or
4. Run pnpm build to build the project.
5. Run pnpm preview to preview the build.

How to use

Open app and configure it to your needs.

Click START button to start the "chat".

Start typing and you will see the bubble with your message.

Click enter and start typing to create new bubble with next message.

Bubbles will dissapear after few seconds - as you set it up in configurator.

Configurator

App have build in configurator to change some settings.

Configuration is saved in local storage.

You can change:

• Font size;
• Padding inside the bubble;
• Time for bubble to dissapear;
• Alignement of the bubble to right or left;
• Alignement of the bubble to top or bottom;
• Position of the configurator menu;
• Dark/light mode;
• Panels are resizable and by dragging you can change size of them;

Notes

You can create notes that are stored in local storage.

How it looks