Framer

👾Pixel Distortion для Framer👾

Компонент добавляет WebGL-эффект пиксельного искажения на hover: изображение, видео или Framer-компонент разбивается на сетку блоков, которые смещаются вслед за движением курсора.

Можно настроить:

— размер сетки
— радиус курсора
— силу искажения
— скорость возврата
— displacement
— chromatic aberration
— качество рендера

Эффект работает в Preview и на опубликованном сайте.

Как добавить:

Скопируйте ссылку:

https://framer.com/m/PixelDistortion-ngj8Ej.js

И вставьте её в свой Framer-проект.

Предпросмотр:
https://formal-salmon-595048.framer.app/

#component

🧠Во Framer появился Fable 5🧠

Framer добавил новую модель для AI Agent.

По заявлению команды, Fable 5 лучше справляется с:

— дизайном с нуля
— шейдерами
— сложными анимациями
— визуальной консистентностью
— созданием и переиспользованием стилей

Во внутренних тестах Framer модель набрала 83% overall и 81% по дизайну.

Но есть нюанс — Fable 5 расходует примерно в 2 раза больше AI credits, чем GPT-5.5.

Модель уже доступна в выборе моделей Framer Agent.

#update

ZIP-архив из Framer сайта⚡️

Друзья, рады объявить набор на тестирование сервиса выгрузки сайтов Framer в ZIP-архив. Выдадим первым 5 людям бесплатный доступ на 2 выгрузки.

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

Заинтересованным писать сюда:

https://t.me/deframersupport

📸Кинематографичный слайдер для Framer📸

Distorto Slider FX — WebGL-карусель с 30+ shader-переходами: liquid, ripple, pixelate, swirl, glass distort, prism wipe и другими эффектами.

Можно настроить:

— изображения
— thumbnails
— autoplay
— скорость перехода
— layout
— padding / radius / background
— режимы анимации

Подойдёт для портфолио, hero-секций, fashion/editorial сайтов, product reveal и студийных лендингов.

Как добавить:

Скопируйте ссылку:

https://framer.com/m/DistorttoSlider-AHYQNq.js

И вставьте её в свой Framer-проект.

Предпросмотр:
https://wondrous-beaver-606599.framer.app/

#component

⬇️Морфинг секций при скролле во Framer⬇️

Scroll Morph Section — компонент для плавных переходов между секциями через SVG-morph эффект.

Работает от скорости скролла: края секции мягко изгибаются и создают более живой переход между блоками.

Можно настроить:

— цвет заливки
— глубину изгиба
— верхний и нижний край
— силу velocity-эффекта
— stiffness / damping / mass

Подойдёт для лендингов, портфолио, промо-страниц и сайтов, где хочется сделать скролл менее статичным.

Как добавить:

Скопируйте ссылку:

https://framer.com/m/Scroll-Morph-Section-B9Wwad.js

И вставьте её в свой Framer-проект.

Предпросмотр:
https://gray-exercise-530060.framer.app/

#component

🔍В поиске крутых компонентов🔍

Давно хотели использовать какой-то компонент с Framer Marketplace, но нет возможности оплатить его?

Кидайте в комментарии ссылку на классные компоненты, выберем самые залайканные и сольем их в ближайшее время!

Выбрать компонент можно тут:

https://www.framer.com/community/marketplace/components/

#component

💬Анимированный ASCII-текст компонент за $10💬

ASCII Font Engine — компонент, который превращает текст, картинку или вектор в анимированную ASCII-графику прямо внутри Framer.

Можно использовать для:

— hero-заголовков
— постеров
— glitch/electro вайба
— ретро-интерфейсов
— промо-страниц
— экспериментальных портфолио

Подойдёт, если нужно быстро добавить на сайт более техничный, цифровой или “хакерский” визуальный стиль.

Как добавить:

Скопируйте ссылку:

https://framer.com/m/ASCIIFontEngine-7S1gSS.js

И вставьте её в свой Framer-проект — компонент появится внутри проекта.

Предпросмотр:

https://delicate-approach-791741.framer.app/

#component

Сливаем красивейший WebGL-слайдер для Framer за $20⬇️

Kinetic Slider Mask — карусель с маской появления, jelly-искажением и chromatic aberration при drag.

Что внутри:

— WebGL-анимации
— mask reveal при загрузке
— физика движения карточек
— RGB split на быстрых свайпах
— split-text анимация текста
— horizontal / vertical режимы

Подойдёт для портфолио, студийных сайтов, fashion/editorial-проектов и эффектных showcase-блоков.

Как использовать:

Откройте remix-ссылку и скопируйте проект себе:

https://framer.com/remix/rytcaKtvE8KD0qLxhnzH

#framer #component #carousel

🔐PIN-код для страниц во Framer🔐

Page Pin Lock — code component, который закрывает страницу полноэкранным оверлеем с 6-значным кодом.

Можно использовать для:

— приватных страниц
— клиентских превью
— закрытых материалов
— демо-страниц
— временной защиты контента

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

Как добавить:

Скопируйте ссылку:

https://framer.com/m/Pagelockcomponent-qRA4.js

И вставьте её в свой Framer-проект.

Предпросмотр:
https://fortuitous-truly-318391.framer.app/

#component

💥Тактильный отклик во Framer💥

Mobile Haptics — компонент, который добавляет вибрацию на мобильных устройствах.

Можно использовать для:

— кнопок
— успешных действий
— ошибок
— свайпов
— интерактивных элементов

Есть готовые пресеты вроде Success, Nudge и Heavy, а также режим для кастомных паттернов.

На десктопе вибрация не сработает, поэтому внутри есть Debug Mode — можно проверить ритм через звук.

Как добавить:

Скопируйте ссылку:

https://framer.com/m/Haptics-prod-OkTdZT.js

И вставьте её в свой Framer-проект — компонент появится внутри проекта.

#component

💵Экономия на Framer AI💵

Во Framer уже есть AI для сайтов и компонентов, но пользоваться им удобно не всем.

Почему:

— нужно тратить AI credits
— нет нормального выбора моделей
— не всегда хочется работать с кодом именно внутри Framer

Если привычнее писать в ChatGPT, Claude, Gemini или другой нейросети — можно использовать отдельный промпт для создания Framer Code Components.

Просто копируете промпт, вставляете в свою LLM и просите сделать нужный компонент.

Промпт:
https://docs.google.com/document/d/1nof0GR8rgqMP6nLqbebykQ_MdWDfHmvVabNIcvdD-58/edit?usp=sharing

#tips

🔼Сливаем SaaS-шаблон для Framer за $50🔼

StealthAI — большой multi-layout шаблон под AI/SaaS-проект.

Внутри:

— 3 главные страницы
— 3 pricing pages
— 2 feature pages
— страница contact / book a demo
— блог
— legal page
— about page
— 404
— адаптив под desktop / tablet / mobile

Шаблон уже собран на стилях, компонентах и CMS-коллекциях, так что его можно быстро перекинуть под свой продукт, лендинг или пет-проект

Забрать:
https://framer.com/projects/new?duplicate=wIougT5geIREaEmwN0l3&via=itsnotnabeel

Предпросмотр:
https://stealthai.framer.website/

#template

🟢Анимированные градиенты для Framer — бесплатно🟢

Super Gradients — компонент для красивых градиентных фонов с анимацией, noise/grain и настройкой цветов.

Подойдёт для:

— hero-блоков
— карточек
— промо-секций
— лендингов
— портфолио

Как добавить:

Скопируйте ссылку:

https://framer.com/m/Special-Gradient-dDzEGu.js

И вставьте её в свой Framer-проект — компонент появится внутри проекта.

#component

😱Автор Framer-шаблонов заработал $150,000+ за год😱

Designbuds опубликовал в Framer Community результаты своих шаблонов за последние 12 месяцев.

С 2024 года он начал делать Framer templates, попал в Top 25 Framer Partners, а его шаблоны принесли более $150,000 affiliate revenue.

Это примерно 10,8 млн ₽.

Топ-3 шаблона по выручке:

— Consulting — $58,156
— Plumbing — $33,432
— Gardener — $18,786

Основная стратегия — делать шаблоны для малого бизнеса: простые, понятные и применимые в реальных нишах.

После выхода Framer 3.0 автор считает, что рынок шаблонов может стать ещё актуальнее.

#community

Typing game на Framer🎮

В Framer Community появился проект SpeedType — игра для тренировки скорости печати, собранная во Framer через code component.

Внутри:

— XP-уровни
— sprint mode
— timed mode
— награды
— leaderboard
— игровая логика

Проект:
https://dee-speedtype.framer.media

Community:
https://www.framer.com/community/posts/C7R8qmMJPrYjiN67zco36z

#community

⚡️Framer представил Framer 3.0⚡️

Главное обновление — Agents, Branching и новая Community.

Что добавили:

— Agents
AI-агенты теперь работают прямо внутри Framer. Они видят canvas, компоненты, CMS, стили, SEO-настройки и могут помогать с дизайном, контентом, адаптивами, CMS-страницами, code components и аудитом сайта.

По сути, Framer описывает это как Cursor для дизайна.

— Branching
Теперь можно делать отдельные ветки проекта, тестировать идеи, сравнивать изменения и мержить их только после ревью.

Это особенно полезно для команд и клиентских проектов: можно экспериментировать, не ломая продакшен.

— Новая Framer Community
Framer обновил комьюнити вокруг платформы. Теперь внутри него есть Marketplace, Gallery, Awards, Social Feed, Members и Contests.

Для дизайнеров и создателей шаблонов это важный апдейт: больше видимости, больше точек входа в Marketplace и потенциально больше возможностей зарабатывать на шаблонах и компонентах.

❓Что это значит:

Framer всё сильнее двигается не просто в сторону конструктора сайтов, а в сторону полноценной платформы для создания, поддержки и развития сайтов с AI внутри рабочего процесса.

Самое интересное здесь — Agents + Branching. Если это будет работать стабильно, Framer может стать намного удобнее для командной работы и быстрых итераций.

Ссылка на анонс:
https://www.framer.com/blog/framer-3/

#update

Channel created