Веб-студія · Дніпро, Україна

Сайт, у якому все
рухається.продає.працює.

Відео замість банера. Жива система замість скріншотів. Калькулятор замість «ціна за запитом». Ми вбудовуємо в сторінку речі, які конструктори не вміють — і саме вони змушують відвідувача дочитати до кінця й натиснути.

Проєкт-вітрина · ERETNIK

Сайт, який не скролять, а гортають.

Для таролога зробили не сторінку, а гримуар: закрита книга на столі, натиснув — розгорнулась, далі листаєш, як справжню. Текст лежить у площині пергаменту, літери підпалюються і зникають, з-під обкладинки летить попіл.

ЛІТЕРИ ЗГОРАЮТЬ ПО ОДНІЙ — ЯК НА САЙТІ
  • Живий HTML на пергаменті — жодної картинки з текстом, усе читається і копіюється
  • Текстура з фотокадру — сторінки випрямлені зворотною гомографією
  • Дві мови, звук, лупа-панелі на гравюрах, свайп на телефоні
Закрита книга з пентаграмою на столі зі свічками Відкритий розворот «Книга тіней» Текст на сторінці згорає знизу вгору Лупа: панель тлумачення поверх книги Сторінка в момент перегортання ГОРТАЙТЕ · натисніть або ведіть курсором
Що ми вбудовуємо

Шість речей, які відрізняють наш сайт від шаблону.

Кожна картка нижче — живий приклад, а не опис. Потягніть, натисніть, наведіть. Так само це працює й у ваших проєктах.

01

Відео прямо у сторінці

Не банер і не «дивитись на YouTube». Ролик живе в макеті, стискається під мобільний і вантажиться швидко.

02
ТЯГНІТЬ00:02

Скрол-сторітелінг

Кадр рухається разом зі скролом — відвідувач «іде» по вашому простору. Натисніть «Відкрити демо» і погортайте: відео і текст живуть від одного скролу.

03
Дашборд RIVENO ERP у вікні сайту

Жива система замість скріншотів

Ваш сервіс, кабінет чи ERP відкривається у вікні сторінки — і по ньому можна клікати. Скріншот застаріває, система — ні.

04
Сторінок1
Орієнтир$300

Калькулятор вартості

Клієнт сам бачить, з чого складається ціна, і приходить із готовим кошторисом. Повна версія →

05
Десктоп: перший екран My DoctorДесктоп: чотири кроки візитуДесктоп: прайс у кабінетіТелефон: перший екранТелефон: прогулянкаТелефон: прайс

Дві версії, не «адаптив»

Телефон отримує власну розкадровку та ритм, а не стиснутий десктоп. Перемкніть — різниця видна.

06

Анімація за сценарієм

Шапка → заголовок → фото → ціни: блоки з'являються в порядку, який веде око, а не «все одразу». Це і є відчуття, що над сайтом працювали.

07
Аналітика в кабінеті: воронка заявок, джерела, дохід за місяцями

Кабінет і Telegram-бот — якщо сайту замало

Сайт приводить заявку, а далі вона зазвичай губиться в переписці. Ми робимо другу половину: кабінет, де видно кожну заявку, воронку, оплати й дохід за місяцями — і бота, який приймає людину в месенджері й одразу кладе її в базу.

Так зроблено для SVI CHU English: сайт, кабінет власниці, бот і база — один проєкт.

Що входить у кожен сайт

Швидкість, SEO і телефон — це не опції, а стандарт здачі.

Красивий сайт, який вантажиться 6 секунд і не видно в Google, — це витрачені гроші. Тому кожен проєкт, від візитівки до фільму, здаємо за цими показниками.

0Performance
0SEO
0Accessibility
0Best practices

Ціль по Google PageSpeed для кожного проєкту — 90+ на мобільному. Показуємо звіт при здачі.

Швидкість завантаження

Зображення у WebP/AVIF, відео стиснуте під веб, ленива підгрузка, без важких бібліотек. Перший екран — менше ніж за 1,5 с на 4G.

SEO з першого дня

Семантична розмітка, мета-теги й Open Graph, sitemap і robots, schema.org для локального бізнесу, підключення Google Search Console.

Оптимізація під телефон

70 % ваших відвідувачів прийдуть з телефона. Тап-зони не менше 44 px, читабельні шрифти, відео і фото окремо стиснуті під мобільний екран.

HTTPS, CDN і хостинг без абонплати

Публікуємо на Vercel: сертифікат, глобальний CDN і резервування — безкоштовно. Домен оформлюємо на вас.

Аналітика й заявки

GA4 або Plausible, Meta Pixel за потреби, форма → Telegram-бот або ваша CRM. Ви бачите, звідки прийшов клієнт і що натискав.

Здача за 1–14 днів

Терміни в кілька разів коротші за ринкові, бо не переробляємо: ескіз погоджуємо до збірки, правки — по одному екрану.

Роботи

Так це виглядає у реальних проєктах.

П'ять проєктів: книга, яку гортають, школа з власною CRM, клініка, якою гуляють, диван, який чистять пальцем, і система, що працює прямо в сторінці. Повний розбір — у каталозі робіт.

Як це купують

Демо до оплати. Ціна — з калькулятора. Оплата — одна.

Ніякого «надішліть ТЗ і чекайте КП». Ви бачите перший екран свого сайту ще до першого платежу, а вартість рахуєте самі за дві хвилини.

Демо

Ескіз першого екрана за 1 день

Робимо перший екран під ваш бренд на закритій адресі. Подобається — рухаємось далі. Ні — розходимось без оплати.

Ціна

Калькулятор замість КП

Оберіть тип сайту, сторінки й опції — отримаєте вилку і термін. Фінальну цифру фіксуємо в договорі після брифу.

Оплата

Одна оплата — після ескізу

Ескіз першого екрана безкоштовний. Сподобалось — одна повна оплата, і ми робимо сайт до запуску. Без передплат «наосліп» і без розбивок.

Каталог робіт

Роботи, які можна
відкрити.

П'ять проєктів: три працюють на живих адресах, два — готові й показуються на демо. У кожного — розбір, що саме зроблено руками, і цифри, які можна перевірити. Натисніть «Детальніше», щоб розкрити кадри.

ERETNIK: закрита книга з пентаграмою на дубовому столі, череп, свічки, армілярна сфера ЖИВИЙ · VERCEL
Проєкт 01 · Езотерика · Сайт-книга

ERETNIK — сайт, який не скролять, а гортають

Для таролога-практика замість сторінки зробили гримуар: закрита книга на столі, натиснув — розгорнулась, далі листаєш як справжню. Кожен розворот — живий HTML на фактурі пергаменту, а не картинка. Літери підпалюються і зникають, з-під обкладинки летить попіл, поруч — приглушений ембієнт.

Книга на StPageFlip · живий HTMLЛітери згорають по графемахПопіл і жар на canvasRU / UKЗвук, який можна вимкнути
Відкрити сайт ↗
Розвороти книги · гортайте
Відкритий розворот: гравюра з воронами і чашею, рукописний епіграф
01 Книга відкрилась — розділ «Книга тіней»
Текст пишеться на сторінці «від руки», рядок за рядком
02 Текст пишеться «від руки» — літера за літерою
Нижні рядки сторінки спалахують і згорають знизу вгору
03 Перед перегортанням текст згорає — знизу вгору, з іскрами
Сторінка в момент перегортання: розділ «Обряди»
04 Гортання — сторінка в русі
Лупа: поверх затемненої книги випливла панель «Обряди» з докладним текстом
05 Лупа — натиснув на гравюру, випливло тлумачення
Лупа: панель «Діагностика» з описом і ціною
06 Лупа на послузі — опис, термін і ціна
Розворот «Захист» і «Вартість», гравюра терезів
07 «Вартість» — терези і ціни
0розділів книги: обряди, захист, вартість, про майстра, зв'язок
0мови — RU і UK, перемикач у шапці, вибір запам'ятовується
0кириличні гарнітури: Forum, Cormorant, EB Garamond, Bad Script
0картинок із текстом — усе, що читається, лишається HTML

Штуки, яких немає в шаблонах

  • Пергамент без фотошопу. Текстури сторінок отримані з реального фотокадру книги зворотною гомографією — сторінки «випрямлені» в прямокутник, тому текст лягає в площину листа, а не поверх.
  • Спалення по буквах. Слово ріжеться на графеми через Intl.Segmenter, кожна згорає з власною затримкою, іскри малює окремий canvas. Пергамент цілий — горить лише текст.
  • Лупа-панель. Натиснув на гравюру — випливає пояснення поверх книги, повторно — зникає. Не з'являється від випадкового руху курсора.

Зроблено руками

  • Типографіка масштабується від висоти сторінки (em, не vh) — на телефоні книга не «пливе»
  • Навігація по розділах, стрілки, свайп; позиція запам'ятовується
  • Попіл і жар — окремий canvas, розрідженіший на телефоні
  • Ембієнт і звук перегортання — з кнопкою вимкнення
  • Контент — реальні тексти майстра з його Instagram
  • Заявки летять у Telegram через Cloudflare Worker: токен бота не в сторінці

Рівень у калькуляторі

Це «Сайт-фільм» на максимумі: $2500–3000+, 2 тижні. Ціни на самому сайті — драфт, погоджуються з майстром. Порахувати схожий →

Перший екран SVI CHU English: заголовок і веєр із п'яти відео авторки ЖИВИЙ · VERCEL
Проєкт 02 · Освіта · Сайт + CRM

SVI CHU English — сайт, кабінет і бот для школи англійської

Тут закінчується «зробили сторінку». Заявка з сайту або з Telegram-бота одразу лягає в базу, у кабінеті видно воронку, учнів, оплати й дохід за місяцями. Викладачка веде школу з телефона, а не в переписці й таблицях.

Next.js + SupabaseCRM з аналітикоюTelegram-бот приймає заявкиPWA — ставиться на телефонУКР / RU
Відкрити сайт ↗
Сайт і кабінет · гортайте
Перший екран: веєр із п'яти відео авторки
01 Хіро — веєр із живих рілсів авторки, наведення обирає і вмикає
Три кроки навчання: завдання, відповідь у своєму ритмі, feedback
02 Як це працює — завдання, свій ритм, розбір від Світлани
Блок програм: A2→B1 і B1→B2 з тривалістю
03 Програми — рівні, тривалість, що буде на виході
Кабінет: стан школи, активні учні, черга feedback
04 Кабінет — стан школи на сьогодні і черга завдань
Аналітика: воронка лідів, джерела заявок, дохід
05 Аналітика — воронка, джерела заявок, дохід за місяцями
Розділ лідів: таблиця заявок із фільтрами
06 Ліди — пошук, фільтри, статуси, додати заявку вручну
Розділ учнів: база з програмами і оплатами
07 Учні — програма, рівень, оплата, остання активність
0Lighthouse на десктопі — і 100 за SEO, доступністю та практиками
0рілсів у веєрі на першому екрані — з її живого Instagram
0мови інтерфейсу: українська і російська
0сторонніх сервісів для заявок — свій бот і своя база

Що вміє система

  • Заявка не губиться. З форми, з бота або внесена руками — усе в одній базі зі статусами й SLA на відповідь
  • Аналітика без Excel. Воронка, джерела, дохід за місяцями, активність за 14 днів — рахується само
  • Бот-адміністратор. Відповідає на /start, питає рівень, підказує ціни й одразу створює лід із поміткою, звідки прийшов
  • Ставиться як застосунок — PWA, іконка на екрані телефона

Зроблено руками

  • Веєр із п'яти вертикальних відео: наведення обирає, клік вмикає звук
  • Текст по всьому лендингу друкується при появі на екрані
  • Окремий мобільний вигляд CRM: рядки таблиць стають картками
  • Дві мови через cookie, українська за замовчуванням
  • Юридичні сторінки, SEO-файли, заголовки безпеки, обмеження частоти запитів до бота

Рівень у калькуляторі

Це вже не сайт, а сайт + система: $3000–6000, 14–21 день. Обсяг цього проєкту — близько 150–220 годин роботи. Порахувати схожий →

ЖИВИЙ · VERCEL
Проєкт 03 · Медицина · Запоріжжя

My Doctor — сайт-прогулянка стоматологією

Замість «послуги — ціни — форма» відвідувач гортає сторінку і йде коридором: вхід, рецепція, кабінет, результат. Відео зняте в клініці та розкадроване під скрол; ціни з'являються там, де відбувається процедура.

33 с відео → сценарійDesktop і Mobile окремоUA / RUПрайс по процедурах
Відкрити сайт ↗
Кадри сценарію
Вхід до клініки
01 Вхід00:02
Рецепція
02 Рецепція00:06
Кабінет
03 Кабінет00:10
Результат
04 Результат00:31

Зроблено руками

Розкадровка по позиціях скролу, окремий монтаж для телефону, прайс із JSON, кастомний курсор, картки лікарів з відео за наведенням, приватність, sitemap, robots.

Навіщо клініці

Пацієнт боїться невідомого. Коли він «пройшовся» кабінетами і побачив лікаря за роботою — дзвінок стає простішим. Сайт продає довіру.

Рівень у калькуляторі

Це «Сайт-фільм»: $1800–3000+, 10–14 днів. Порахувати схожий →

Перший екран сайту ПІНА: «Диван як новий. За 90 хвилин» і слайдер до/після ЖИВИЙ · VERCEL
Проєкт 04 · Послуги · Дніпро

ПІНА — хімчистка меблів, яку можна спробувати на екрані

Сайт не розповідає про чистку — він дає її зробити: пальцем стираєш бруд із дивана, курсором водиш «прожектором» по темній кімнаті, секундомір відлічує 90 хвилин разом зі скролом. Кожна картка послуги сама переходить із «до» в «після».

Canvas: стираєте бруд пальцемПрожектор за курсором12 відео-вставокКалькулятор у гривнях
Відкрити сайт ↗
Екрани з живого сайту
Картки послуг · до → післяКартки послуг ПІНА з цінами: дивани, матраци, крісла, килими
Прожектор за курсоромТемна секція: промінь прожектора відкриває чистий диван
Секундомір по скролуТемна секція з таймером 23:20 і трьома фактами
0пар «до/після» на реальних фото предметів
0коротких відео-вставок у сторінці
0хвилин — секундомір іде разом зі скролом
0блокерів у pre-launch аудиті: SEO, CSP, JSON-LD

Зроблено руками

Два шари canvas і стирання пальцем, маска-прожектор за курсором, слайдери до/після, sticky-етапи з відео, калькулятор по предметах, JSON-LD LocalBusiness + FAQ, CSP, sitemap, privacy.

Навіщо бізнесу

Клієнт клінінгу не вірить словам «відчистимо». Коли він сам стер пляму на екрані — сумнів знято, лишається натиснути «Розрахувати».

Рівень у калькуляторі

Це «Кастомний сценарій»: $1000–1800, 7–10 днів. Порахувати схожий →

Перший екран сайту RIVENO ЖИВИЙ · VERCEL
Проєкт 05 · B2B / SaaS

RIVENO — сайт, у який вбудована жива ERP

Дев'ять сторінок у чистій «яблучній» подачі. Замість картинок системи — сама система у вікні сторінки: можна натискати, гортати, відкривати розділи. Маршрут замовлення на першому екрані рухається по реальній схемі процесу.

9 сторінок · 3 галузіЖива ERP в iframeКалькулятор з друкомGSAP-маршрут
Відкрити сайт ↗
Екрани системи всередині сайту
ERP · Дашборд продажівДашборд RIVENO ERP
ERP · Виробництво, канбанКанбан виробництва RIVENO ERP
0розділів системи відкриваються на сайті
0етапів замовлення в анімованому маршруті
0ролі — власник, менеджер, майстер
0скріншотів: усе можна натиснути
Концепти · скоро

Односторінкові шаблони, які ось-ось стануть проєктами.

Це не клієнтські роботи, а заготовки під типові ніші: показуємо структуру, палітру й ритм, з яких стартує «Візитівка» чи «Сайт під бізнес». Наведіть — макет оживе.

Тут може бути ваш проєкт

Ескіз першого екрана — за 1 день, до оплати.

Порахувати вартість →
Калькулятор

Порахуйте сайт
за дві хвилини.

Вилка оновлюється одразу. Це орієнтир, а не рахунок: після брифу фіксуємо точну цифру й термін у договорі.

Тип сайту ОБЕРІТЬ ОДИН

Обсяг СТОРІНКИ І МОВИ

Сторінок1
Мов1

Вбудовані елементи SEO, ШВИДКІСТЬ І МОБІЛЬНА ОПТИМІЗАЦІЯ — ВЖЕ ВКЛЮЧЕНО

Терміни ЯКЩО ГОРИТЬ

Умови

Демо, оплата,
процес.

Правила прості, щоб не було сюрпризів ні у вас, ні в нас.

Демо проєкту

Ви бачите свій сайт до того, як платите.

Слова про «преміум» нічого не варті, поки ви не побачили свій перший екран. Тому ми показуємо його першим.

1 · Ескіз першого екрана

Після 30-хвилинного брифу — за 1 день перший екран під ваш бренд на закритій адресі (Vercel). Без оплати. Не сподобалось — просто розходимось.

2 · Закрита демо-адреса

Весь проєкт живе на власній адресі з паролем. Ви відкриваєте її з телефона й ноутбука і бачите те саме, що побачить клієнт, а не макет у Figma.

3 · Правки по екранах

Правки приймаємо поетапно, по одному екрану, з фіксованим кадром на погодження. Так проєкт не «пливе», а строки тримаються.

Оплата

Одна оплата. Після того, як ви побачили ескіз.

Ніяких 30/30/40 і рахунків «за етап». Ескіз — безкоштовно. Погодили — одна повна оплата, далі ми працюємо до запуску.

Крок 0 · Ескіз

Перший екран під ваш бренд на закритій адресі. Безкоштовно. Це і є наша «передплата» — ви ризикуєте тільки часом на бриф.

0 %до погодження ескізу

Крок 1 · Оплата

Ескіз погоджено — виставляємо рахунок на суму з калькулятора, зафіксовану в договорі. Одна оплата, одна цифра.

100 %після погодження ескізу

Як платити

  • Рахунок на ФОП (IBAN), договір і акт
  • Картка — Monobank / Privat24
  • Клієнтам за кордоном — Wise або PayPal у $ / €
  • Хостинг Vercel — безкоштовний; домен ви оформлюєте на себе

Як з нами зв'язатись

Процес

Чотири кроки. Результат видно після кожного.

01

Бриф

Півгодини розмови: бізнес, аудиторія, контент, приклади «подобається / ні».

02

Ескіз

Перший екран за 1 день на закритій адресі. Погодили — одна оплата, і стартуємо.

03

Збірка

Дизайн, верстка, реальний контент. Правки по екранах, а не «все переробити».

04

Запуск

Публікація, перевірка на пристроях, передача доступів. Сайт — ваш, без прив'язки до студії.

Часті питання

Коротко про те, що зазвичай запитують.

Що з підтримкою після запуску?

Перший місяць — правки текстів і дрібниць безкоштовно. Далі — погодинно або невеликий пакет на місяць, якщо потрібно.

Чи буде сайт моїм?

Так: код, домен, хостинг і доступи — на вас. Ніяких абонплат студії за «оренду сайту».

Чому не конструктор за $100?

Конструктор дає шаблон. Ми даємо сценарій і елементи, яких у шаблоні немає — і показуємо різницю на ескізі до оплати.