Как я притащил «Сторис» в веб и зачем это нужно

Привет, Клуб! 👋

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

🤔 Зачем вебу кружочки?
Идея родилась на проекте для медицинской клиники. У них был типичный лендинг: гора текста, прайсы и унылые блоки «Наши преимущества». Конверсия — так себе.

Мы поняли: люди не хотят читать, они хотят тыкать.

Я решил внедрить формат сторис — те самые кружочки с видео и фото. Это паттерн, который у всех в подкорке. Ты видишь кружок — ты нажимаешь. Идеальный способ показать «врача в деле» или короткий отзыв пациента, не перегружая страницу.

🛠️ Разработка:

1. Адаптивность — не магия, а аккуратность
   Видео должно нормально выглядеть на любом экране: от iPhone SE до 4K-монитора. Сделал responsive-контейнер, который сохраняет пропорции и не режет картинку. Ничего сверхъестественного, но без этого сторис превращается в кривые квадраты.

2. Автоплей и браузеры
   Chrome без звука — играет, со звуком — блокирует. Safari вообще живёт своей жизнью. Пришлось разобраться с muted, playsinline и сделать предзагрузку, чтобы видео не подвисало при открытии. Скучная, но нужная работа.

3. Ванильный дзен
   Я принципиально не использовал React/Vue. Либа должна весить копейки и заводиться на любом старом лендинге через один <script>.

📊 Цифры и рефлексия
Спустя год у либы 1 390 скачиваний согласно npm-stat: https://npm-stat.com/charts.html?package=vanilla-croakpopup . Для маленького «велосипеда» это было неожиданно.

Главный инсайт:
Людям не нужны сложные фичи. Им нужно, чтобы «просто работало» из коробки. Оказалось, что поддержка разных типов контента (когда конфиг сам понимает, что перед ним — .mp4 или .jpg) — это то, ради чего люди готовы тащить твою либу в проект.

Мой урок:
Даже если ты делаешь «очередной попап», делай его под конкретный юзкейс. Сторис-попапы — это не про модальные окна, это про вовлечение.

🔗 Ссылки
• GitHub: https://github.com/Vlad-Vasinev/CroakPopup
• npm: https://www.npmjs.com/package/vanilla-croakpopup
• Демо: https://croakpopup-desktop.vercel.app/

Буду рад звёздам, фидбеку и issue. Если у кого есть свои истории с небольшими пет-проектами — делитесь, интересно почитать 👇