СайтыWebsites
Интерактивные сайты: выбор курса, настройка клавиатуры, заказ кофе, план посещения кинотеатра.
Interactive websites: choosing a course, configuring a keyboard, ordering coffee, planning a cinema visit.
MajmarMajmar
Выберите стол на чертеже павильона и время с учётом примерных броней.
Pick a table on a line-drawn pavilion and a time around sample bookings.
О сайтеAbout the site
Majmar
Majmar показывает кальянную в виде объёмного архитектурного чертежа: гость поворачивает павильон, открывает нужную зону и выбирает конкретный стол для запроса на бронь.
Открыть сайтЗадача
По меню и форме бронирования не понять, где будешь сидеть и какие правила действуют для компании. Гостю нужно увидеть пространство, выбрать место и узнать условия до того, как связаться с заведением.
Что можно сделать
Осмотреть павильон
Модель зала, террасы и кабаны можно вращать, а при выборе зоны камера сама перелетает к ней.
Выбрать стол
Нажмите на стол на модели: появятся число мест, примерное свободное время на сегодня и то, подают ли за ним кальян.
Подготовить запрос
Перетащите время по шкале, где отмечены примерные брони, укажите число гостей и микс, затем скопируйте текст запроса. Стол при этом не бронируется.
Решения
3D-сцена не мешает прокрутке
Колесо мыши листает страницу, а для приближения модели нужно зажать Ctrl или ⌘. На телефоне вертикальный свайп тоже прокручивает страницу и не вращает модель.
Три языка в одной вёрстке
Русская, английская и арабская версии собраны в одной вёрстке на логических свойствах CSS, поэтому арабская читается справа налево без отдельного макета.
Majmar shows the lounge as a living architectural drawing: the visitor turns the pavilion, opens a zone, and picks the exact table for a booking request.
Open the websiteThe task
A menu and a booking form do not show where a guest will sit or what the house rules are for a group. Guests need to see the space, choose a seat, and understand the conditions before contacting the lounge.
What you can do
Explore the pavilion
Rotate the model of the hall, terrace, and cabana; zone tabs fly the camera to each part.
Choose a table
Click a table on the model to see its seats, sample free time for today, and whether shisha is served there.
Prepare a request
Drag the time on a timeline with sample bookings, add guests and a mix, then copy the request text. No table is reserved.
Decisions
Keep the page scrolling over a 3D scene
A plain wheel scrolls the page; zooming needs Ctrl or ⌘, and a vertical swipe on a phone scrolls instead of turning the model.
Three languages in one layout
Russian, English, and right-to-left Arabic share one layout built on logical CSS properties.
KadrKadr
Перемотайте титр по ключевым кадрам и настройте кривую анимации.
Scrub a keyframed title and tune an easing curve.
О сайтеAbout the site
Kadr
Kadr превращает каталог курсов в монтажный таймлайн: курс — дорожка, модуль — клип, а программа по неделям идёт под плейхедом.
Открыть сайтЗадача
Перед оплатой курса человеку нужно понять, как здесь учат. Список тем мало говорит о тайминге и кривых, поэтому сайт даёт попробовать их самому.
Что можно сделать
Перемотать титр
Тяните плейхед: вступительный титр прокручивается назад или вперёд, а буквы меняют ширину и насыщенность на каждом ключевом кадре.
Сравнить курсы
Три дорожки показывают длину курсов в неделях, а программа — что изучают и что сдают каждую неделю.
Настроить кривую и оставить заявку
Настройте кривую анимации, соберите с ней свой титр, рассчитайте ежемесячный платёж и заполните заявку с уже выбранным курсом.
Kadr turns the course catalogue into an editing timeline: each course is a track, each module a clip, and the week-by-week programme runs under a playhead.
Open the websiteThe task
Before paying for a motion course, a visitor needs to judge how it is taught. A list of topics says little about timing and curves, so the site lets them try both.
What you can do
Scrub the title
Drag the playhead to run the opening title back and forth; the letters change width and weight at each keyframe.
Compare the courses
Three tracks show each course's length in weeks, and the programme lists what each week teaches and what to hand in.
Try a curve and apply
Shape an easing curve, render a title card with it, check the monthly payment, and fill in the application with the course already chosen.
VattVatt
Прокрутите сутки офисной башни и найдите ночные потери энергии.
Scroll through a tower's day and find its night-time waste.
О сайтеAbout the site
Vatt
Vatt рассказывает о себе фильмом о примере офисной башни от ночи до ночи. Окна работают как счётчик, а небо показывает время.
Открыть сайтЗадача
Сервисы учёта энергии обычно начинаются с дашборда, который ещё нужно расшифровать. Руководителю эксплуатации важно увидеть потери в похожем здании, понять, как платформа их убирает, и оценить экономию до звонка.
Что можно сделать
Прожить сутки здания
Прокрутка ведёт от 03:10 до 23:10: окна, небо, часы и график нагрузки меняются вместе, а тепловой режим показывает этаж, где одновременно греют и охлаждают.
Остановить потери
Ночью удерживайте кнопку, чтобы применить исправленное расписание. Приточная установка останавливается, и страница показывает экономию для этого здания.
Оценить своё здание
Укажите тип здания, площадь, тариф и часы работы. Калькулятор покажет диапазон экономии и срок окупаемости с допущениями, после чего можно запросить демо.
Решения
Фильм показывает, текст объясняет
Шесть сцен — обычный текст страницы, который отдаёт сервер. Трёхмерное здание загружается после первой отрисовки, а без WebGL или в режиме экономии трафика его заменяют готовые кадры. История читается одинаково на любом устройстве.
Одна модель нагрузки для всех чисел
Показания, график, заметки об отклонениях и итоговая экономия считаются из одних смоделированных суток здания, поэтому числа на странице не противоречат друг другу.
Vatt tells its story as a scroll-directed film of an example office tower from night to night: the windows act as the meter and the sky shows the time.
Open the websiteThe task
Energy software usually opens with a dashboard the visitor has to decode. A facility manager needs to see waste in a building like theirs, understand how the platform removes it, and estimate the saving before booking a call.
What you can do
Watch a day pass
Scroll from 03:10 to 23:10: windows, sky, clock and the demand trace move together, and a thermal view shows one floor heated and cooled at once.
Stop the waste
At night, hold the control to apply the corrected schedule. The supply unit stops and the page shows the saving for this example building.
Estimate your building
Enter the building type, floor area, tariff and working hours to get a savings range and payback with visible assumptions, then request a demo.
Decisions
The film illustrates, the text informs
The six scenes are server-rendered page content. The 3D building loads after the first paint and gives way to rendered stills without WebGL or with data saving on, so the story reads the same on every device.
One load model behind the numbers
Readouts, the demand trace, anomaly notes and the final saving come from the same simulated day of the building, so the figures on the page never contradict each other.
Kern 75Kern 75
Разберите клавиатуру по слоям и сравните переключатели по кривой усилия.
Take the keyboard apart layer by layer and compare switch force curves.
О сайтеAbout the site
Kern 75
Kern показывает партию из 150 клавиатур одной непрерывной сценой: модель разбирается на слои, клавиша нажимается, корпус измеряется, а посетитель печатает строку на листе у клавиатуры.
Открыть сайтЗадача
Дорогую клавиатуру выбирают по деталям, которых не видно на фото: что внутри, как ощущается переключатель, под каким углом лежат руки. Всё это нужно показать до того, как человек займёт место в партии, которая приедет через несколько месяцев.
Что можно сделать
Заглянуть внутрь
При прокрутке клавиатура раскладывается на восемь подписанных слоёв и собирается обратно.
Сравнить переключатели
Выберите линейный, тактильный или кликающий: клавиша на модели нажимается, а на кривой усилия отмечено, где она срабатывает.
Собрать и зарезервировать
Цвет корпуса, кейкапы и символы меняются на той же модели, цена расписана по позициям, а заявка на резерв не требует оплаты.
Решения
Первый кадр приходит вместе с текстом
Кадр освещённого стола появляется одновременно с заголовком, а живая сцена проявляется поверх него, когда готова. На устройствах без WebGL у каждой сцены остаётся статичный кадр.
Kern presents a 150-piece batch as one continuous scene: the keyboard comes apart, a switch is pressed, the case is measured, and the visitor types a line on the desk.
Open the websiteThe task
A premium keyboard is chosen on details a photo does not show: the layers inside, the feel of a switch, the typing angle. The visitor needs to see them before holding a place in a batch that ships months later.
What you can do
See what is inside
Scrolling takes the keyboard apart into eight labelled layers and puts it back together.
Compare switches
Choose linear, tactile, or click; the key presses on the model and the force curve marks where it registers.
Configure and reserve
Finish, keycaps, and legends repaint the same model, the price is itemised in the visitor's currency, and a reservation request takes no payment.
Decisions
The first frame arrives with the text
A still of the lit desk paints with the headline and the live scene fades in over it once ready; devices without WebGL keep a still for each scene.
PogodaPogoda
Протрите запотевшее окно и сравните вкус на синоптической карте.
Wipe the misted window and compare flavour on a synoptic map.
О сайтеAbout the site
Pogoda
У каждого из восьми сортов Pogoda своя погода: небо над всем сайтом меняется вместе с кофе на экране, а графики читаются как прогноз.
Открыть сайтЗадача
Дескрипторы вроде «бергамот» или «винный» мало что говорят до первой чашки. Покупателю нужно быстро сравнить кислотность, тело и сладость и понять, как заварить выбранную пачку.
Что можно сделать
Протереть окно
На первом экране кофе недели скрыт за запотевшим стеклом. Протрите его курсором или пальцем, и название проявится, а потом стекло снова затянет.
Сравнить по карте
Каждый сорт — станция на синоптической карте: правее — ярче кислотность, выше — плотнее тело, а изолинии соединяют равную сладость. В каталоге наведение на сорт меняет небо на его погоду.
Заварить и заказать
На странице сорта — происхождение, высота, урожай, кривая обжарки и рецепты, а калькулятор с таймером ведёт заваривание. Из корзины можно перейти к оформлению заказа, у подписки и опта свои заявки.
Each of Pogoda's eight coffees has its own weather: the sky over the whole site changes with the coffee in view, and the charts read like a forecast.
Open the websiteThe task
Tasting notes such as “bergamot” or “winey” say little before the first cup. A buyer needs to compare acidity, body, and sweetness at a glance and know how to brew the bag they choose.
What you can do
Wipe the window
On the first screen the coffee of the week sits behind misted glass. Wipe it with the cursor or a finger to read the name; the glass slowly fogs over again.
Compare on the map
Each coffee is a station on a synoptic map: brighter acidity to the right, heavier body higher up, and isolines of equal sweetness between them. In the catalogue, pointing at a coffee turns the sky to its weather.
Brew and order
A coffee page gives the origin, altitude, harvest, roast curve, and recipes; a calculator with a timer guides the brew. The cart leads to an order form, and the subscription and wholesale pages have their own requests.
PolokPolok
Пройдите парный сеанс и выберите парную на плане.
Follow a steam session and pick a suite on the site plan.
О сайтеAbout the site
Polok
Polok сначала показывает жар, купель и отдых, а потом помогает выбрать отдельную парную и программу.
Открыть сайтЗадача
По списку помещений и процедур трудно представить весь визит и понять, какая парная подойдёт компании. Нужны план территории, подробности программ и понятная цена до оформления заявки.
Что можно сделать
Пройти сеанс
При прокрутке сменяются жар, купель и отдых, а термометр показывает изменение температуры.
Выбрать парную
На плане территории можно открыть четыре отдельные парные, рассмотреть помещения и сравнить условия.
Спланировать визит
Изучите этапы программ и цены, рассчитайте стоимость сеанса, затем заполните заявку на бронирование или сертификат.
Решения
Сохранить историю без трёхмерной сцены
За анимированными сценами остаются фотографии, а при недоступной трёхмерной модели план можно посмотреть сверху.
Polok begins with heat, water, and rest, then gives visitors the detail they need to choose a private suite and a ritual.
Open the websiteThe task
A list of rooms and treatments does not explain how a visit unfolds or which suite fits the group. Visitors need to see the space, compare the programmes, and understand the price before leaving a request.
What you can do
Follow the session
Scroll through a sequence of heat, plunge, and rest; the thermometer follows the change in temperature.
Choose a suite
Inspect the site plan and four private suites, then compare their rooms and conditions.
Plan a visit
Review ritual steps and prices, calculate a session, and fill in a booking or gift request.
Decisions
Keep the story readable without a graphics card
Photographic stills remain behind the animated scenes, and a flat plan remains available when the 3D model cannot run.
District CinemaDistrict Cinema
Выберите немой фильм и соберите план посещения.
Pick a silent film and build a visit plan.
О сайтеAbout the site
District Cinema
District Cinema соединяет авторские афиши с расписанием, сведениями о зале и выбором билетов.
Открыть сайтЗадача
Выразительная афиша привлекает внимание, но зрителю ещё нужно сравнить даты, понять условия посещения и узнать, что произойдёт после выбора билетов.
Что можно сделать
Найти сеанс
Отфильтруйте программу по дню и теме, затем откройте фильм и посмотрите доступное время.
Проверить условия
Узнайте, когда открываются двери и что уже известно о доступности зала. Адрес пока не опубликован.
Сохранить план
Выберите сеанс и от одного до четырёх билетов. План хранится в этом браузере; место не бронируется, платёж не проводится.
District Cinema pairs authored film posters with screening details, visitor information, and a ticket plan.
Open the websiteThe task
A striking film poster can draw attention, but the visitor still needs to compare dates, learn what to expect, and know what happens when they choose tickets.
What you can do
Choose a screening
Filter the programme by day and theme, then open a film page for context and available times.
Check the visit
See when doors open and read the published access information. The venue address is still to come.
Keep a plan
Select a screening and one to four places. The plan stays in this browser; no seat is reserved and no payment is taken.
TechnellTechnell
Каталог, доставка, оплата через Т-Банк и личный кабинет.
Catalogue, delivery, T-Bank payment and customer account.
Модернизация витрины, личного кабинета и сценария заказа и оплаты для ООО «Технэл».
Modernization of the storefront, customer account, and order/payment journey for ООО «Технэл».
О сайтеAbout the site
Technell
Подробные карточки помогают выбрать модель, корзина учитывает доставку, а оформленный заказ сохраняется в личном кабинете ещё до перехода к оплате. Статус оплаты подтверждает сервер, а не сообщение в браузере.
Открыть сайтМодернизация витрины, личного кабинета и сценария заказа и оплаты для ООО «Технэл».
Задача
Покупателю нужны точные характеристики модели. Магазину важно сохранить заказ при переходе в Т-Банк и обратно, а затем получить подтверждённый статус оплаты с сервера.
Как проходит покупка
Сравнить и изучить модель
В категории можно сравнить модели, а в карточке — проверить масштаб, размеры, фотографии, инструкцию и цену.
Оформить заказ
Изменить количество, выбрать доставку, проверить итог и отдельно подтвердить правила продажи и обработку персональных данных.
Войти по коду и создать заказ
Получить код по почте, вернуться к оформлению и сохранить заказ в своём кабинете. Повторная отправка не создаёт второй заказ.
Подтвердить оплату и открыть заказ
Возврат из Т-Банка ведёт обратно в магазин, но статус оплаты сайт получает с сервера. В кабинете видны оплата или возврат; повторить платёж можно только в разрешённом состоянии.
Что было сделано
Сохранять один проверенный заказ
Перед сохранением сервер заново проверяет состав и цену. Если браузер повторно отправляет тот же запрос, сервер возвращает уже созданный заказ, а не создаёт дубликат.
Проверять оплату на сервере
Возврат из Т-Банка открывает нужный заказ, но не помечает его оплаченным. Успех, обработка, ошибка или возврат показываются только после проверки на сервере.
Подготовить правила до запуска оплаты
Правила продажи, согласие на обработку данных и политика опубликованы как отдельные датированные страницы. При оформлении ссылки на них стоят рядом с двумя обязательными подтверждениями: условия покупки и обработка данных не скрыты в одной кнопке.
Реализовать заказ без готового движка магазина
Technell не использует готовую платформу интернет-магазина или платёжный модуль. Собственный сервер рассчитывает заказ, связывает его с покупателем, защищает от дубликатов и обменивается запросами и статусами с Т-Банком.
Развёртывать витрину и службу данных отдельно
Для витрины и службы данных собираются отдельные контейнеры. Автоматизация обновляет только изменённую часть, выполняет изменения данных в нужном порядке и ждёт проверки работоспособности; переключение трафика подтверждается вручную.
Detailed product pages support the choice, the cart includes delivery, and the completed order remains available in the customer account. Payment status comes from the server, not from a browser message.
Open the websiteModernization of the storefront, customer account, and order/payment journey for ООО «Технэл».
The task
Customers need accurate model specifications, while the store needs one continuous order from cart to payment. The order must survive the trip to T-Bank and back, and the server must confirm whether payment actually succeeded.
How the purchase works
Compare and inspect a model
Compare models in the category, then check scale, dimensions, photos, instructions, and price on the product page.
Prepare the order
Change quantity, choose delivery, review the total, and separately accept the sales rules and personal-data processing terms.
Sign in and create the order
Receive a code by email, return to checkout, and save the order to the customer account. Repeating the same submission does not create a duplicate.
Confirm payment and open the order
The T-Bank return link leads back to the store, while the site obtains payment status from the server. The account shows payment or refund details and offers another attempt only when allowed.
What changed
Save one server-checked order
Only the items and price accepted by the server become an order. If checkout sends the same request again, the server returns that order instead of creating a duplicate.
Confirm payment on the server
Returning from T-Bank opens the relevant order but does not mark it as paid. The page shows success, processing, failure, or refund only after a server check.
Make the sales rules explicit at checkout
The sales rules, personal-data consent, and processing policy are separate dated pages. Checkout links to them beside two required confirmations, so purchase terms and data consent are not hidden in one action.
Build the order flow without a store engine
Technell does not use a ready-made ecommerce platform or payment plugin. Its own server calculates the order, links it to the customer, prevents duplicates, and exchanges payment requests and statuses with T-Bank.
Deploy the storefront and content service separately
The storefront and content service have separate container images. Automation builds only the changed part, applies data changes in the required order, and waits for a health check before traffic is switched manually.