I am currently designing a website where, for the hero section in the desktop version, half of the page is used for the company's value proposition and call to action, and the other half of the page is used for an interactive 3D animation. The height of the value proposition takes up a half of the halved section (a quarter of the page), and the height of the animation will take a majority of the halved section. Users will be able to click and swipe on the interactive animation.
The layout looks like below:
I am attempting to add responsiveness to the website for different users. For the mobile version, where the width of the viewport is significantly less than the height of the viewport, this design will struggle; neither the value proposition nor the interactive 3D animation will fit in only half the width of a phone.
How do I reposition or redesign the layout of the value proposition and animation such that I can 1) still interact with the animation and 2) see the value proposition simultaneously?
Thanks in advance.