Development of logo animation for the website using Three.js / WebGL

An animated figure needs to be developed for the first screen of the website:

https://front.touchit.vinnica.ua/spiral2/

Currently, a temporary figure is used in the banner. It needs to be replaced with our unique animation based on the company's logo.

The main reference for movement and visual effect:

https://atuin.media/en/

Requirements:

1. Create a procedural figure in the shape of our logo.
2. The figure should move smoothly, rotate, bend, and deform. The headline should be visible when the figure overlaps it.
3. The movement should be continuous and lively, without noticeable repetition of short animations.
4. Visually, the logo should look like a flexible volumetric ribbon or surface.
5. Lighting, shadows, highlights, gradients, and, if necessary, transparency should be implemented.
6. The animation must work correctly on different screen resolutions.
7. It is important to ensure good performance on computers and mobile devices.
8. The finished animation needs to be integrated into the existing banner layout.
9. The animation should not interfere with the operation of text, buttons, and other page elements.

We have a ready-made model of the logo in GLB format. It can be used as a basis or visual reference. At the same time, we understand that simple rotation of the ready model is not enough. Dynamic deformation of the geometry is needed.

Proposed stack:

• Three.js
• WebGL
• JavaScript
• Procedural geometry or vertex deformation

We are considering other implementation options if the result visually resembles the reference and can work properly in the browser.