Дизайн сайтов по кадрам

Шаблоны сайтов, живые компоненты, кривые анимации, палитры и шрифты с кириллицей. Открывай, копируй код, собирай своё.

Смотреть шаблоны Кривые анимации
00:00:00:00
Шаблон скопированkvota.html, 18 КБ

    Быстрый старт и мягкая остановка. Интерфейс отвечает сразу, поэтому так появляются тосты, меню и модалки.

    400 / 400 мскадр 24 из 24

    Шаблоны

    Шесть готовых страниц на чистом HTML и CSS. Без сборки и зависимостей: открой, поменяй тексты и фото, залей на хостинг.

    Квота

    SaaS-лендинг

    Необрутализм: толстые обводки, сдвинутые тени и живой таймер прямо в первом экране.

    Dela Gothic One + Golos Text

    Вера Остужева

    Портфолио фотографа

    Монохромная редакционная вёрстка: крупное имя, сетка-мозаика и просмотр снимков на весь экран.

    Cormorant Garamond + Manrope

    Зерно и пар

    Кофейня

    Лесная палитра, меню с точечными выносками и вкладками, часы работы и адрес.

    Prata + Jost

    Тимур Галиев

    Портфолио разработчика

    Тёмная тема, моноширинные заголовки, раскрывающиеся кейсы и стек по группам.

    JetBrains Mono + Onest

    Глина

    Интернет-магазин

    Кобальт на белом: каталог с фильтрами, рабочая корзина и блок доставки.

    Geologica

    Ритм

    Лендинг приложения

    Аврора и матовое стекло, телефон с работающим трекером привычек, тарифы и вопросы.

    Wix Madefor Display + Text

    Компоненты

    Мелочи, из которых складывается ощущение качества. Всё живое: нажимай, удерживай, наводи. Код открывается под каждой карточкой.

    Табы с clip-path

    250 мс

    Активная вкладка вырезается из копии списка, поэтому цвет текста меняется ровно по границе.

    Вкладка «Обзор»: короткое описание проекта и превью.

    Код

    Стопка уведомлений

    400 мс

    Новые тосты ложатся сверху, старые уходят назад. Наведи, чтобы развернуть стопку.

    Код

    Нажатие

    160 мс

    Сравни: левая кнопка отвечает на нажатие, правая нет.

    Код

    Переключатель

    260 мс

    Ручка проезжает с лёгким отскоком.

    Код

    Удержать, чтобы удалить

    1,6 с

    Нажатие медленное и осознанное, отпускание быстрое.

    Код

    Подсказки

    125 мс

    Первая ждёт 400 мс, соседние открываются сразу.

    Жирный Курсив Ссылка Цитата
    Код

    Поле с проверкой

    200 мс

    Подпись над полем, подсказка под ним, ошибка объясняет, что исправить.

    Нажми «Проверить», ничего никуда не отправится.

    Код

    Подсветка за курсором

    200 мс

    Рамка карточек загорается там, где курсор. Работает только на устройствах с мышью.

    Сетка12 колонок, отступ 24 px
    ТипографикаШкала 1,25, база 16 px
    ЦветОдин акцент, два фона
    Код

    Кривые анимации

    От кривой зависит, будет ли интерфейс казаться быстрым. Выбери кривую, поменяй длительность и посмотри в замедлении.

    ease out
    linear, для сравнения
    250 мс
    transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1);

    Сколько должна длиться анимация

    Интерфейсные анимации держи до 300 мс. Чем чаще человек видит анимацию, тем короче она должна быть.

    Палитры

    Восемь палитр без фиолетовых градиентов и бежа. Нажми на цвет, чтобы скопировать HEX, или забери всю палитру CSS-переменными.

    Шрифты с кириллицей

    Десять пар из Google Fonts. У каждой проверены ё, й, щ и твёрдый знак. Впиши свой текст и листай.

    Скиллы и инструменты

    На этих трёх скиллах для Claude Code собран сам Slowframe. Ниже сервисы, которые стоит держать в закладках.

    Анимация

    Цвет

    Шрифты и иконки

    Компоненты

    Насмотренность

    • Godlyлучшие сайты недели
    • Land-bookлендинги по категориям
    • Awwwardsэкспериментальный веб
    • Mobbinэкраны приложений

    Шаблон

    Открыть