drag

кейс

Endless letter

«Бесконечное Письмо» — лендинг, созданный в рамках проекта #СтраницыПобеды. Он погружает в атмосферу архива военных лет — виртуальных фронтовых треугольников. Теперь познакомиться с самыми важными строками из жизни того времени может каждый.

endlessletter.com
ко всем работам
задача

Разработать сайт к 75-ой годовщине Победы для RT Creative Lab — создателя масштабных цифровых образовательных и исторических проектов.



На основе отрывков из настоящих фронтовых писем и иллюстраций дизайнеров Школы дизайна РАНХиГС собрать единую историю на одной странице. Погрузить пользователей в атмосферу времён Великой Отечественной войны.

клиент

RT Creative Lab

отрасль

Промо-сайт

год запуска

2021

что сделали

Дизайн сайта
Frontend-разработка
Backend-разработка

награды

Начало работы

«Письма с фронта — это трагично, эмоционально и правдиво: история войны из самых первых рук. Как ответственные за дизайн и разработку сайта, мы хотели создать необычный пользовательский опыт на сайте» — Денис Ломов, кеативный директор Red Collar.

Расположили письма в 3D-
пространстве для полного
погружения в историю.

Перемещение в пространстве и времени

Сменяющие друг друга на сайте «треугольники» отсортированы по году написания, это создаёт ощущение непрерывного полотна истории. Письма выводятся вместе с непрерывным музыкальным сопровождением и с заданным набором объектов. При открытии каждого «треугольника» пользователь может прочитать короткую цитату с авторской иллюстрацией, узнать имя автора и его судьбу, если она известна. 

Проработали необычный пользовательский опыт на сайте — письма выполняют роль «кнопок». При наведении виртуальному объекту присваивается конкретное письмо. Выводятся они случайно, но без повторенией. Каждый раз вас ждёт новая история.

Сайт собран на WebGL
из подлинных отрывков
фронтовых треугольников.

Естественность работы частиц

Для создания атмосферы придумали систему частиц для писем. Каждая из них обладает определенным «сроком жизни». Чтобы их движение было натуральным, действовали по особым алгоритмам, например, для снега и пламени использовали математические алгоритмы турбулентности.

Игра света и пламени

Чтобы придать жизни сценам, применили разные виды подсветки. На фоне дождя можно заметить вспышки молний, у пламени оранжевая подсветка, а у пуль — эффект прожекторов, которые выходят снизу.

На сайте идёт дождь и снег,
летают светлячки, видны
пулемётные очереди, искры
пламени и силуэты людей.

Доведение «треугольников» до идеала

Пришлось приручать углы «треугольников», которые сначала не хотели поддаваться. Всё потому, что это разные плоскости, они ведут себя как отдельные объекты. Из-за того, что углы находятся настолько близко друг другу, возникла проблема наложения слоёв. 

Для каждого угла тщательно подбирали координаты. Например, делали «сгиб» не на 180 градусов, а на 179,999. Довели «треугольники» до идеала работой с тенями, чтобы избежать появления щелей.

Музыкальная история

Саундтреки специально для проекта написал композитор Максим Макарычев, участник группы On-The-Go и Sirotkin. При открытии письма две мелодии продолжаются с предыдущего места. Так их не приходится слушать заново, складывается «бесшовная» история.

технологии

Three.js

GSAP

Webpack

Rollup

отзыв

Кирилл Карнович-Валуа
Кирилл Карнович-Валуа
Креативный директор и основатель
RT Creative Lab

Не зря все проекты Red Collar регулярно отмечаются наградами на главных диджитал премиях мира как Webby, Awwwards, FWA. С ребятами очень интересно было работать над проектом Бесконечное Письмо: Веб-версия. Это был очень креативный процесс — из идей и задач родился проект с необычным пользовательским опытом и со своей особой атмосферой.

смотрите также

ВТБ Факторинг

Интервью, дизайн, 3D-элементы и разработка для нового сайта в рамках единой системы

Личный кабинет для EOS

Разработка личного кабинета для компании, работающей с кредитной задолженностью

GUS-TRANS

Сайт в строгом дизайне для международной транспортной компании

связаться

Расскажите о своей задаче

Мы Red Collar, а как зовут вас? Чтобы связаться, нам нужен ваш e-mail Ого, какой тяжелый файл! Больше 10 MБ ждем на hello@redcollar.ru Пожалуйста, проверьте, правильно ли написан e-mail

Нажимая кнопку, вы соглашаетесь с нашей политикой в отношении обработки персональных данных

  • Россия, г. Воронеж,
  • ул. Текстильщиков, 5Б
ООО «Ред Коллар», ОГРН 1153668069950, ИНН/КПП 3663116703/366301001, Юридический адрес: 394028, Воронежская область, город Воронеж, ул. Туполева, д. 28, кв. 14

Мы используем куки и с помощью анонимной статистики делаем сайт ещё лучше