Как мы вывели на рынок портал в мета-вселенную: уникальный сайт на 3D-движке с ИИ и голосовым помощником

Главное о кейсе

За комплексным решением для выхода на рынок к нам обратилась Shaffra — амбициозный стартап из Абу-Даби, разработавший собственный графический движок, который позволяет компаниям создавать свои уникальные метавселенные. Платформа применяется для погружающего обучения, интерактивных демонстраций продуктов и масштабных виртуальных конференций, открывая новые горизонты для бизнеса.


Shaffra, an ambitious startup from Abu Dhabi that has developed its own graphics engine allowing companies to create their unique metaverses, approached us for a comprehensive market entry solution. The platform is used for immersive training, interactive product demonstrations, and large-scale virtual conferences, opening new horizons for businesses.

Как проект изменил жизнь пользователей

С запуском платформы Shaffra пользователи получили доступ к современным инструментам для взаимодействия с виртуальной реальностью. Это изменило подход к обучению, демонстрации продуктов и проведению мероприятий, позволяя компаниям эффективно оптимизировать свои процессы, генерировать идеи для бизнеса, получать новые инсайты о взаимодействии с клиентами и коллегами.

With the launch of the Shaffra platform, users gained access to modern tools for interacting with virtual reality. This transformed the approach to training, product demonstrations, and event hosting, enabling companies to effectively optimize their processes, generate business ideas, and gain new insights into interactions with customers and colleagues

Бизнес-задача и ее решение

Наша задача заключалась в создании не просто сайта, а впечатляющего портала, который подчеркнул бы преимущества технологий Shaffra перед потенциальными инвесторами и партнерами. Мы реализовали комплексное решение для выхода на рынок: создали сайт, брендинг, оформление социальных сетей и разработали корпоративные видеоролики. Решением стала концепция "Выхода за пределы", которая была направлена на визуализацию перехода от традиционных методов ведения бизнеса к возможностям метавселенной.

Our task was to create not just a website, but an impressive portal that would highlight the advantages of Shaffra's technologies to potential investors and partners. We implemented a comprehensive market entry solution: we created a website, branding, social media design, and developed corporate videos. The solution was the concept of 'Going Beyond,' which aimed to visualize the transition from traditional business methods to the possibilities of the metaverse.

Крафт (мастерство), реализация, технические детали

Мы разработали сложную 3D-модель, интегрированную в сайт с использованием 3D-движка на базе FreeJS и WebGL. Эта модель работает на эмоциях пользователей и создает "вау" эффект. Ключевое значение этого элемента заключается в том, что бизнес вместе с компанией Shaffra превращается в космический корабль. Такой подход существенно усиливает восприятие, в отличии от технических текстов или презентаций, которые не отражают сложность и современность технологического стартапа.

Эмоции играют здесь важнейшую роль: они помогают более эффективно донести идею о футуристичности и потенциале роста бизнеса для инвесторов или компаний, готовых к сотрудничеству со стартапом. Технически сайт использует: полноценный 3D-движок, библиотеки FreeJS и WebGL, а также элементы Unity, разработанные с применением Vue и React. Это одна из лучших на сегодняшний день составляющих создания современного веб-проекта.

Мы столкнулись с рядом технических вызовов, создавая плавную и захватывающую анимацию трансформации, но самое важное — это интеграция искусственного интеллекта.
Мы встроили в сайт блок с возможностью пообщаться в ИИ Shaffra голосом, совсем как в фильме “Она”. Общение с искусственным интеллектом Shaffra через микрофон предоставило пользователям уникальный интерактивный опыт, усиливая ощущение погружения и вовлечённости.

We developed a complex 3D model integrated into the website using a 3D engine based on FreeJS and WebGL. This model engages users' emotions and creates a 'wow' effect. The key significance of this element lies in the fact that the business, along with Shaffra, transforms into a spaceship. This approach significantly enhances perception, unlike technical texts or presentations that fail to reflect the complexity and modernity of the technology startup.

Emotions play a crucial role here: they help convey the idea of futurism and the potential for business growth more effectively to investors or companies willing to collaborate with the startup. Technically, the website employs a full-fledged 3D engine, FreeJS and WebGL libraries, as well as Unity elements developed using Vue and React. This is one of the best components for creating a modern web project today.

We encountered a number of technical challenges while creating smooth and engaging transformation animations, but the most important aspect was the integration of artificial intelligence. We embedded a feature on the website that allows users to interact with Shaffra's AI through voice, just like in the movie 'Her.' Communicating with the Shaffra artificial intelligence via a microphone provided users with a unique interactive experience, enhancing the sense of immersion and engagement.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Три команды — analytics, web и design — работали параллельно, чтобы заранее учесть каждую деталь. Дизайнеры создали визуальные элементы, которые передавали ощущение полета и трансформации. Разработчики обеспечили плавную анимацию и интерактивность сайта на всех устройстdах. Копирайтер наполнил проект жизнью через текст, усиливая эмоциональное восприятие и погружение пользователя в историю.

Three teams—analytics, web, and design—worked in parallel to consider every detail in advance. The designers created visual elements that conveyed a sense of flight and transformation. The developers ensured smooth animation and interactivity of the website across all devices. The copywriter brought the project to life through text, enhancing the emotional perception and immersing the user in the story.

Скриншоты