Multi-Screen

This project is my own approach of a recent viral video. Where two objects apparently share the same space even when they are on different windows.

Note

In this first approach I´m recreating the part of the video where they apparently are in the same space even when they are on different windows. And also using React to make changes on realtime.

Important

As you can see, this project is not that advanced so I will be updating this project as soon as I learn to use 3D animations during the next months.

How to Use:

1. Start the project.
2. You would see a Square with rounded corners rotating in the middle of the page. And two little circles with squares rotating, one is in the top left corner and one on the bottom left.
3. When clicking on the top circle it will display some buttons which will allow you to editate the square in real time.
4. When clicking on the bottom circle it will open a new tab and create a new square bigger than the last one.
5. You now can separate the tabs in different windows and see how these squares that are created in different tabs, are sharing the same space, note that if you change some properties of the figure using the top buttons, this changes will be shown on real time on all the tabs you have.

New things learned by creating this project:

• To use React from zero. By adding its CDN links to this HTML project.
• Learned to synchronize tabs by using LocalStorage.

Developed By:

Rafael de Jesús Anguiano Suárez del Real. (December 2023)