Вайбкодим ТОПОВЫЙ Сайт В Стиле Apple Бесплатно с Gemini AI

Друзья, всем привет. Давайте посмотрим на это. Чистый современный сайт с живой анимацией, плавный паралакс, аккуратные слои и макет, который выглядит так, как будто бы над ним работал профессиональный дизайнер. Это именно то, как ощущается современный сайт, когда эстетика и анимация работают вместе. Большинство современных сайтов либо хорошо выглядят, либо хорошо работают, и они редко совмещают и то, и другое. Но уж если мы туда хотим применить анимации, то это часто занимает часы. дни, иногда даже недели. Все мы часто видим в своих социальных лентах, как перед нами хвастаются подобными дизайнами, сайтами, которые были созданы буквально за одну секунду. Но чаще всего это ложь. Ради хайпа люди адаптируют работы профессиональных дизайнеров для того, чтобы собрать свои лайки. Поэтому вместо пустых демонстраций давайте сегодня посмотрим на реальные методы, которые позволяют создавать подобные сайты, используя анимации, паралакс, красивые эффекты, которые точно приведут вас к приемлемому результату. Всё это мы будем делать с помощью бесплатных инструментов или, по крайней мере, с помощью инструментов, у которых есть бесплатный usage. Нам с вами понадобится Google Nно банана для генерирования классных иллюстраций, Google Flow, чтобы добавить между ними движение, ну и курсор, либо любая ваша любимая среда разработки, с которой вы привыкли работать. Ну что, давайте повторим весь этот процесс на практике по шагам, не пропуская ни одного шага. Поэтому, если вам такое интересно, лайк, коммент, подписка и смотрим до самого конца. Это будет очень ценно для меня. Первое, что нам с вами понадобится - это подобрать качественную иллюстрацию, с помощью которой мы будем делать магический эффект паралакса. Я для своего сайта выбрал Google Airpods Max, поэтому так и гуглим. Переходим на вкладочку картинки и давайте подберём какую-то иллюстрацию, которая действительно нам подходит. Ну вот иллюстрация, которая действительно кажется годной, с хорошим качеством, которое мы можем использовать как исходный материал. Эта иллюстрация имеет формат один к одному. Давайте сделаем из неё формат 16x9. Мы просто с вами берём, копируем это изображение и идём в Фигму либо в любой другой графический редактор, который вы используете. В Фигме открываем пустой проект, нажимаем кнопочку А. Здесь на вкладке Презентация есть форматы слайдов. Например, слайд 16x9 нам подходит, мы его добавляем, нажимаем Ctrl V. Вставляем нашу картинку и скачиваем весь этот артборд с помощью кнопочки экспорт. Всё, теперь наши наушники в формате 16 на9 уже скачаны. Отлично. Следующий сервис, который нам понадобится, называется Google Wisk. Кстати, ссылки на все эти сервисы я, как всегда, прикрепляю в своей бесплатной Telegram-группе, чтобы вы всегда могли повторить мой путь шаг за шагом. Поэтому заходите туда, забираете. Здесь мы нажимаем кнопочку "Залогиниться" с помощью Google. Логинимся. У нас появляется здесь кнопка "Воспользоваться инструментом". Нажимаем эту кнопку, и всё, мы в среде работы с графическими материалами Wisk. Вы можете спросить, чем отличается Wisk Aistudio либо от gemini. com? На самом деле, всё это очень похожие инструменты работают на одних и тех же нейронках. Но у есть прикольная история с тем, что вы можете добавить так называемый subject, то есть объект, с помощью которого вы будете генерить изображение, потом сцену, описать непосредственную сцену, в которой этот объект участвует, и даже стиль указать. Таким образом, это даёт вам намного больше гибкости с получением конечного результата. Давайте в эту область добавим нашу картинку. И она у нас загружается. Также мы можем добавить сцену. Мы можем, например, загрузить какую-то картинку, которая отображает вайп этой сцены. Либо ввести, например, я, допустим, для примера наберу что-нибудь типа фотостудия, нажму кнопочку сгенерировать. И мы видим, как сейчас нам сгенерируется под наш промт непосредственно сцена, которая нам нужна. Вот сцена фотостудии. Это значит, что наши наушники будут в фотостудийной атмосфере. Вы, конечно, можете подобрать сцену ту, которая вам подходит. Ну что, пора написать наш промпт. Я напишу его на английском, но суть такая. Допустим, я хочу, чтобы мне сгенерировались те же самые наушники, но из которых разлетаются цветные части и микросхемы широко, равномерно. Не добавляем никаких теней, не добавляем никаких микрофонов, потому что иногда это может случиться. Здесь в настройках оставляем формат 169 и запускаем генерацию. Ждём, пока наше изображение сгенерируется. Да, посмотрите, с первого раза явно промпт был не особенно понят нашей нейронкой. То есть тут есть микрофоны и как-то не очень равномерно разлетаются кусочки. Поэтому мы с вами продолжаем, генерируем столько раз, сколько нам понадобится для того, чтобы получить классный результат. Так, ну вот, спустя некоторое количество попыток, вы видите, сколько это у меня заняло, довольно много генераций. Я нашёл наконец изображение, которое мне подходит. Вот, например, эти два довольно круто выглядят и отображают именно мою идею. Теперь я скачиваю это изображение и перехожу в следующий сервис. Следующий сервис называется Google Flow. Это тоже сервис, который находится по адресу Labs Google. Открываем этот сервис. Здесь нажимаем Create, создаём себе аккаунт, и нам Google выделит какое-то количество

бесплатных кредитов. Обычно это 100 либо 200. Давайте нажмём Create Wordflow. Я попадаю внутрь сервиса Flow, нажимаю кнопку Новый проект и оказываюсь в воркпейсе моего нового проекта. И здесь мы сразу видим много опций, которые нам доступны. Нам сейчас нужна опция, которая называется Frames to Video. Это опция, которая позволяет задать некоторый первоначальный кадр, конечный кадр и промт, инструкцию, которая будет применена для того, чтобы обеспечить transзиition между первым кадром и последним. Я только что загрузил две своих картинки. Вот наша первоначальная картинка. Вот наша конечная картинка. Поэтому давайте первую картинку укажем здесь, вторую картинку укажем здесь. И напишем какой-нибудь мегапростой промт. Конечно же, вам можно, и вы прямо должны экспериментировать с промтами. Чем более подробно вы описываете эти промты, тем более крутой результат у вас получается. Я же напишу что-то простое. Я пишу: "Эти наушники крутятся, и в середине видео из них начинают разлетаться детали". Давайте посмотрим ещё по настройкам. Нас интересует Veo 31фast, ориентация landscape. И давайте укажем сразу два аупота. Это значит, что нам будет сгенерировано два результата. Пробуем сгенерировать. Ждём какое-то время, пока Google подготовит нам варианты. Друзья, пока идёт генерация, хочу напомнить, что все ресурсы, которые я здесь использую, ссылки на них я прикреплю в свою бесплатную Telegram-группу. А если вы развиваетесь в теме искусственного интеллекта и вам интересна тема автоматизации и генерации видео и многое другое, то обязательно посмотрите на нашу прогруппу. Там собираются и энтузиасты и делают вместе классные вещи. Там также есть мастер-класс, например, по N8N автоматизациям и огромное количество проматериалов, с помощью которых вы можете углубить свою экспертизу в искусственном интеллекте и автоматизациях. Поэтому обязательно залетайте тоже. Так, ну мы видим, как первое видео уже готово. Давайте запустим, посмотрим. Пока так. Так очень странно у нас взрываются наушники, даже не крутится ничего. Давайте посмотрим сюда. Так, тут хотя бы они начинают крутиться. Взрыв. Так, тоже взрыв меня, честно не устраивает, поэтому давайте итерировать, чуть-чуть менять промт и добиваться нужного нам результата. Итак, как вы видите, здесь я поэкспериментировал, понасоздавал массу разных вещей. Вот, например, такая у нас есть интересная анимация. Да, довольно массивно крутятся, но сами ломаются, разлетаются, что тоже меня не устраивает. Давайте посмотрим эту анимацию. Так, кручение хорошее, да? О, вот это меня уже устраивает. Довольно красиво разлетается. Думаю, что можно сделать ещё лучше, но опять же вас призываю поэкспериментировать, а я, наверное, остановлюсь на этом результате здесь. Теперь я нажимаю кнопочку скачать и сразу скачаю обскеленную версию для того, чтобы качество было выше. Нажимаю, жду, пока подготовится моё скачивание. Так, ну что, вот только что скачалось, смотрите, аsкеale хороший произошёл. Довольно высокое качество. В принципе, всё круто. Теперь наша задача - разобраться с этим видео таким образом, чтобы его можно было использовать на наших сайтах в виде паралакса. Если мы загрузим это видео as is, как есть, то весит оно очень много, и наши пользователи, которые открывают сайт, точно нам за это не скажут никакого спасибо. Поэтому давайте с этим разберёмся. Нам с вами понадобится какой-то сервис, который может делать компрессию графических материалов. Наверное, один из самых популярных - это Easy Give. Поэтому идём сюда, открываем его. И здесь есть вкладка, которая называется webp. На этой вкладке мы можем, во-первых, сжать своё видео, а потом превратить это видео в последовательность картинок, с помощью которых мы уже сможем сделать крутой паралакс-эффект. Поэтому выбираем наше видео, ждём, пока подгрузка закончится. Видим, что подгрузка у нас завершилась, и теперь нам нужно сжать это всё. Размер оставим оригинальным. Frame rate. Давайте поставим 25 кадров в секунду. Нас это устраивает. Метод оставим как есть. качество ухудшим на 15% и сконвертируем в наш формат. Смотрите, вот наша вот наш результат. Мы его сжали более чем в пять раз. Это уже приемлемо для современной скорости интернета. Здесь нам нужно будет ещё нажать вот такую кнопочку Сплит. Этот метод позволяет разделить наш видеоряд на последовательность кадров. Давайте нажмём кнопку Split to frames и видим, как наши кадры готовы. Даже если быстро поскролить, уже можно позалипать. Довольно залипательно, довольно красиво. Видим, что, в принципе, всё у нас в порядке. Как его смачно раскидывает по сторонам, мне прямо очень нравится. Возвращаемся вверх и нажимаем кнопку скачать кадры в Zip. Так. Ну вот скачались мои кадры. Видим, как это всё круто выглядит. Можем покадрово полистать. Ну что, осталась самая важная и сочная часть. Сделать из этого классный веб-сайт, который будет использовать данную последовательность картинок как паралакс-эффект. Итак, я открываю свой курсор. Как видите, у меня здесь есть

уже некоторая структура проекта, каким образом я строю эту структуру. Мы не будем сейчас глубоко в это копать, потому что мы это уже обсуждали неоднократно. Если вы не смотрели предыдущие видео про Vibe дизайн или Vipe cд design дизайн, посмотрите вот это видео, там настраивается. Цель простая. Нам нужно настроить новый Next JS Project. Туда сразу добавить SHCN компоненты и в стиле Tail Wind. Почему обязательно нужно добавить SHN компоненты? Это лично мои эксперименты. Если вы не добавите какую-то библиотеку компонентов, то вариативность дизайна будет очень сильно разбросана относительно того, что вы хотите. То есть каждый раз вы будете получать довольно разные результаты. Если мы с вами добавили необходимые компоненты, ваша нейронка будет следовать каким-то правилам и стилям, которые заданы в этом фреймворки. Это мегаважно, поэтому обязательно добавляйте. После этого нажимаем вот эту кнопочку, создаём новую папку. Давайте назовём её Photos. И теперь наша задача - добавить все наши фреймы, которые у нас создались, из которых мы скачали, прямо в эту папочку. Можем вот так банально перетаскиванием это сделать. И мы видим, что все наши фреймы оказались в папочке фолдера. Вот они наши красавцы, которыми мы сейчас воспользуемся. Давайте пока не будем ничего делать, кроме как того, что запустим наш проект. Напишем npm run def, что наш проект открывается на local hсте 3001. Вот у нас сам курсор рендерит нашу первую страницу. Видим, что установились шатнкомпоненты, что всё очень крепенько, как обычно с шассинко компонентами. Даже один компонент кнопки остановились. Видно, что даже есть какой-то неслучайный лейаут. Отлично. Это прекрасная база, чтобы построить нашу первую страницу. Я часто получаю под своими видео про viдизайн или Vipe cдзаign комментарии, что дизайнеры часто не хотят даже с HTML и CSS разбираться, зачем же делать Next JS проект. Моя позиция простая, мы не пытаемся здесь научиться глубине программирования, но какие-то базовые вещи для того, чтобы достигать нужных результатов, нам, как дизайнерам, необходимо знать. Но большинство вещей происходит с помощью обычного промтинга. Поэтому давайте напишем сюда самый обычный промт. Я напишу его прямо в лоб. У меня в папке Photos лежит последовательность картинок из единого видео идеально для Паралакса на скроле. Сделай мне страницу в стиле Apple. Наследуй структуру, цветовые палитры и шрифты. Размести паралакс на фоне так, чтобы на скролл страницы картинки менялись от первой до последней. Больше я не пишу ничего. Конечно же, в вашем случае, скорее всего, нужно будет указать в промте прямо намного больше деталей. Допустим, может быть, вы какой-то другой стиль хотите, какую-то структуру вашей страницы. Всё это не стесняясь прописывайте в промпте. И как только вы закончите, нажимаете запустить. И мы видим, что наша база не проиндексирована. Надо нажать проиндексировать. Но видим, что нейронка уже планирует следующие шаги. Давайте подождём, пока она их закончит. Итак, давайте вернёмся ко все ко всей последовательности. Неронка сначала подготовила мне сайт и сделала всё это в тёмной теме. Поэтому я сделал followup. Следующий промт: поменяй тему сайта на светлую. Паралакс невиден из-под чёрного бэкграунда. После этого была вторая терас, то есть это реально заняло два промта. И давайте смотреть на результат. Так, открываю свой local host. Отлично. Смотрите, как весь наш sequнс применился. То есть он реагирует чётко на скролл. меняет кадры, разлетаются наши кадры. Фокус на ощущениях. Обрати внимание, что Неронка даже вставила сюда небольшой скрипт, который считает скорость смены кадров, сколько в процентаже пути мы уже прошли. Есть футер. Вообще говоря, выглядит всё это очень круто. Это заняло у нас два промта подобающим подготовлением к этому всему. Здесь, кстати, обратите внимание, тоже стоит счётчик кадров. Это всё выглядит, на самом деле очень неплохо. Это классный задел для того, чтобы сделать свою первую страницу. На основе этой первой страницы сделать уже все внутренние страницы. Кстати, обратите внимание, что действительно из-за того, что мы используем SHC CN, сразу использует довольно крепкий лей-аут с нормальными отступами, подложки карточек. Ну и, в принципе, всё выглядит достойно и крепко, учитывая, что мы это сделали за два промта. Можно продолжать итерировать, добиваться результата. Итак, все инструкции у вас есть, как делать подобные штуки. Если вам нужен будет конкретный исходный код, вот этот, с со всеми картинками и, в принципе, готовый для запуска проект, то вы сможете его забрать в нашей прогруппе. Он там будет прямо как архив лежать и будет доступен для скачивания. А на этом всё. Я вас призываю экспериментировать, достигать классных результатов, подписываться на канал, оставлять комментарии, ставить лайки, ну и ждать

следующих встреч.