Гавкающий Тотошка, или как Cursor AI открыл мне путь в микроанимации

Гавкающий Тотошка, или как Cursor AI открыл мне путь в микроанимации

Хотел делать микроанимации, как у лидеров рынка

Хотел делать микроанимации, как у лидеров рынка

Я восхищаюсь анимациями Benji Taylor (лид дизайнер в X и SpaceX) и Emil Kowalski (Linear, ex‑Vercel) и всегда хотел делать так же.

Меня вдохновляет, когда продукт сложный по логике и чистый по UI, но в нем есть микроанимации, пасхалки и приколюхи. Это показывает, что дизайнеру было не все равно и он хотел порадовать пользователя, который чаще всего весь день пользуется этим сервисом. Claude, Linear, Vercel - потрясающее внимание к деталям.

Я восхищаюсь анимациями Benji Taylor (лид дизайнер в X и SpaceX) и Emil Kowalski (Linear, ex‑Vercel) и всегда хотел делать так же.

Меня вдохновляет, когда продукт сложный по логике и чистый по UI, но в нем есть микроанимации, пасхалки и приколюхи. Это показывает, что дизайнеру было не все равно и он хотел порадовать пользователя, который чаще всего весь день пользуется этим сервисом. Claude, Linear, Vercel - потрясающее внимание к деталям.

Кое-что научился делать, но основательно не мог засесть за анимации в АЕ и Rive

Кое-что научился делать, но основательно не мог засесть за анимации в АЕ и Rive

Я немного научился делать простые вещи в After Effects и Rive, но страх чистого листа, необходимость платить для экспорта, изобилие функций в АЕ — из‑за этого я полгода не мог плотно засесть за анимации.

Я немного научился делать простые вещи в After Effects и Rive, но страх чистого листа, необходимость платить для экспорта, изобилие функций в АЕ — из‑за этого я полгода не мог плотно засесть за анимации.

Но потом решил попробовать анимации сразу в коде

Стал делать тестовое для Озон банка — CRM для волшебников. И решил заодно заанимировать свои идеи: ИИ помощника Тотошку и табы.

  1. Тотошка AI

Вдохновлялся Clippy и псом Роджером из Windows и захотел, чтобы Тотошка AI смотрел за курсором и гавкал при нажатии. Чисто по приколу — CRM используют весь день, и такие мелочи могут приносить радость работникам, но всегда можно отключить в настройках.

Вдохновлялся Clippy и псом Роджером из Windows и захотел, чтобы Тотошка AI смотрел за курсором и гавкал при нажатии. Чисто по приколу — CRM используют весь день, и такие мелочи могут приносить радость работникам, но всегда можно отключить в настройках.

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

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

Гавкающая собака должна быть в том же контейнере (96 на 96), что и обычные собаки. Тогда движение получается +- плавное.

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

Понял, что дело в png — перенес иллюстрации в svg. Внес правки за несколько промптов, несколько раз отправлял запись экрана в ChatGPT и через него писал промпты, скормил Курсору skill для анимаций от Эмиля Ковальски и стало норм.

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

Понял, что дело в png — перенес иллюстрации в svg. Внес правки за несколько промптов, несколько раз отправлял запись экрана в ChatGPT и через него писал промпты, скормил Курсору skill для анимаций от Эмиля Ковальски и стало норм.

  1. Табы

Захотелось табы поинтереснее, как у Notion. Тут проблем с Курсором вообще не было — несколько промптов и правок и все готово.

Закидываешь анимацию из Notion в ChatGPT, и он неплохо пишет промпт.

Что дальше

Мое отношение к ИИ меняется почти каждый день. Иногда злюсь на галлюцинации и переживаю за будущее индустрии, а иногда кайфую, что благодаря ИИ экономлю время на рутине и могу делать то, что раньше не мог.

Факт в том, что без Курсора я бы непонятно когда сделал такие анимации. Он дал мне вдохновение и ощущение «я могу».

Дальше хочу:

  • пройти курс Эмиля Ковальски, чтобы нарастить вкус в анимациях и лучше понимать базовые правила

  • продолжать качать насмотренность в микроанимациях на design spells и spotted in prod

  • когда-нибудь все же освоить АЕ для сложных сцен

  1. Табы

Захотелось табы поинтереснее, как у Notion. Тут проблем с Курсором вообще не было — несколько промптов и правок и все готово.

Закидываешь анимацию из Notion в ChatGPT, и он неплохо пишет промпт.

Что дальше

Мое отношение к ИИ меняется почти каждый день. Иногда злюсь на галлюцинации и переживаю за будущее индустрии, а иногда кайфую, что благодаря ИИ экономлю время на рутине и могу делать то, что раньше не мог.

Факт в том, что без Курсора я бы непонятно когда сделал такие анимации. Он дал мне вдохновение и ощущение «я могу».

Дальше хочу:

  • пройти курс Эмиля Ковальски, чтобы нарастить вкус в анимациях и лучше понимать базовые правила

  • продолжать качать насмотренность в микроанимациях на design spells и spotted in prod

  • когда-нибудь все же освоить АЕ для сложных сцен

Create a free website with Framer, the website builder loved by startups, designers and agencies.