CTA Split
Призыв полосой: текст слева, кнопки справа.
MOTIVAВыпуск №249
Категории анимаций и UI-блоков
Весь каталог — 249 записей в 22 рубриках: эффекты, секции и готовые страницы. У каждой записи живое превью, открытый исходный код и установка одной командой. Строка фильтра сужает список с первого символа.
Секции
sectionFeatures Columns
Возможности колонками: появление ведёт ОДИН наблюдатель на секцию, очередь раздаётся переменной --i, и наблюдатель о…
Hero Centered
Центрированный первый экран: заголовок выезжает по словам, за текстом дышит аура акцента.
Hero Product
Продуктовый первый экран в духе больших витрин: крупная плотная типографика, две ссылки-пилюли и продукт, который вы…
Showcase Masonry
Витрина работ стеной в духе Pinterest — вариант showcase-gallery для случая, когда у работ разные форматы и подгонят…
Specs Grid
Характеристики сеткой на волосяных линиях: у ячейки только верхняя и левая границы, лишние гасятся по nth-child — на…
Story Sticky
Скроллителлинг: кадр закреплён и меняется под активную главу.
Testimonials Marquee
Отзывы двумя встречными лентами: контент дублируется дважды, трек едет на -50% — стыка нет.
CTA Glow
Финальный призыв: кнопка с бегущим бликом и дышащее пятно акцента, анимированное transform и opacity — а не backgrou…
FAQ Accordion
Аккордеон на нативных details: клавиатура, скринридер и поиск по странице бесплатно.
FAQ Columns
Вопросы двумя колонками, все ответы на виду — для коротких ответов, где аккордеон только берёт лишний клик.
Features Bento
Секция возможностей на bento-сетке.
Footer CTA
Подвал с формой подписки наверху.
Footer Minimal
Подвал: колонки перестраиваются одним auto-fit без единого медиазапроса — раскладка зависит от реально доступной шир…
Hero Split
Герой со строками, выезжающими из-под маски.
Logos Grid
Логотипы спокойной сеткой: при наведении на один притухают остальные — одной строкой на :has(), без обработчиков.
Logos Strip
Полоса клиентов бесконечной лентой: контент дублируется дважды, трек едет на -50% — стыка не существует.
Nav Minimal
Минималистичная шапка с полноэкранным меню на нативном popover: верхний слой, Esc и клик мимо — от платформы.
Nav Sticky
Липкая шапка: подложка активного пункта переезжает между ссылками, уплотнение панели ловится маячком и IntersectionO…
Pricing Tiers
Тарифы: рекомендованный план выделен масштабом, а не отдельными размерами и отступами — сетка остаётся ровной, а на…
Pricing Toggle
Тарифы с переключателем месяц/год.
Showcase Gallery
Витрина работ: по наведению приближается картинка внутри неподвижной рамки, а не карточка — соседи не сдвигаются и р…
Stats Band
Полоса цифр: счётчики стартуют, когда полоса реально попала в кадр, и засыпают по достижении цели.
Testimonials Grid
Отзывы сеткой с крупной цитатой во всю ширину.
Contact Split
Форма связи рядом с прямыми контактами.
Comparison Table
Таблица сравнения тарифов с липкой первой колонкой: на телефоне она едет вбок, а названия строк остаются на месте…
Steps Flow
Процесс шагами с линией, которая дорисовывается по мере появления шагов.
Blog Grid
Сетка статей, у которой в ряду совпадают все линии — низ обложки, дата, заголовок, врезка, подпись.
Blog Index
Журнальный список статей: крупные строки, соседи наведённой приглушаются, а за курсором плывёт снимок статьи.
Integrations Orbit
Интеграции кольцом вокруг центрального узла.
Nav Blend
Липкая шапка, которая выворачивается по тому, что под ней едет: mix-blend-mode: difference вместо наблюдателя и клас…
Team Grid
Сетка команды: aspect-ratio на рамке и object-fit на снимке принимают кадры любых пропорций, явные width/height убир…
Timeline Rail
История по периодам: линия дорисовывается и события проявляются за движением прокрутки, метка на рельсе тянется за к…
Video Facade
Видео-секция как фасад: до клика на странице лежит кадр-заставка и кнопка, а не плеер.
Integrations Beam
Интеграции живой схемой: сервисы по бокам, продукт в центре, по связям бегут световые импульсы — слева данные входят…
Newsletter Inline
Строчная форма подписки с двумя ловушками для ботов: правильно спрятанное поле-приманка (не display:none, плюс tabin…
Banner Countdown
Полоса с обратным отсчётом — вариант banner-sticky для события с дедлайном: релиз, конференция, конец распродажи.
Banner Sticky
Липкая полоса-объявление с закрытием, которое запоминается.
Comparison Cards
Сравнение карточками — вариант comparison-table для узких экранов и коротких списков: таблица на телефоне скроллится…
Download CLI
Установка через команду — вариант download-panel для инструмента разработчика: файлы никто не скачивает, ставят паке…
Hero Video
Hero с фоновым видео — четвёртый вариант вида hero: несёт свой фон (сокета нет намеренно).
Cookie Notice
Cookie-плашка — третий вариант вида banner: спрашивает, а не зовёт.
Download Panel
Панель загрузки, которая подсвечивает подходящую сборку, но не прячет остальные: детект отвечает не «что показать»…
Newsletter Split
Подписка с лид-магнитом — вариант newsletter-inline для случая, когда рассылку надо продать: слева оффер и «что внут…
Team Spotlight
Один человек крупно — вариант team-grid для случая, когда лицо одно и оно продаёт: автор курса, основатель, эксперт.
Video Chapters
Ролик с главами — вариант video-facade для видео длиннее минуты: клик по главе перематывает и играет, досматривать ц…
Contact Panel
Контакты без формы — вариант contact-split для случая, когда писать в форму никто не хочет: адрес удобнее скопироват…
Error Search
404 с выходом — вариант error-state для сайта с поиском: тупик превращается в развилку.
Error State
Страница «не найдено», которая угадывает нужный адрес по расстоянию редактирования.
Footer Reveal
Подвал из-под страницы — третий вариант вида footer: контент уезжает вверх и открывает подвал, который будто всегда…
Product Grid
Витрина товаров: карточки с ценой, плашкой и ховер-подъёмом;
Schedule Grid
Расписание сеткой — второй вариант вида timeline: timeline-rail рассказывает историю по периодам, здесь — план по ко…
Checklist Steps
Чек-лист прогресса — второй вариант вида steps: steps-flow рассказывает процесс, здесь — состояние прохождения: галк…
Product Feature
Один товар крупно — второй вариант вида products: страница-презентация флагмана.
Menu List
Меню с ценами — третий вариант вида pricing для локального бизнеса: группы позиций с точечной отбивкой до цены, как…
Фоны
backgroundsShader Flow
Full-bleed WebGL-градиент на голом three.js: плавно перетекающая плазма с IQ-палитрой.
Flow Strands
Светящиеся ленты, текущие через кадр: полноэкранный фрагментный шейдер на OGL.
Aurora Field
Северное сияние одним фрагментным шейдером: у занавеса резкая нижняя кромка и вертикальные лучи разной длины над ней…
Bubble Rise
Пузырьки, всплывающие снизу вверх.
Metaballs
Шары сливаются и растекаются, как капли ртути.
Particle Network
Созвездие: точки дрейфуют, близкие соединяются линиями, курсор притягивает соседей.
Interactive Dot Grid
Фон-сетка из точек, которые подсвечиваются прожектором вокруг курсора.
Particle Field
Медленно дрейфующее 3D-поле из ~1800 частиц — фон на настоящем WebGL (голый three.js, без React Three Fiber).
Grid Beams
Фон-сетка с бегущими лучами: кометы с градиентными хвостами летят по горизонталям и вертикалям решётки.
Shard Ribbon
Лента из скруглённых треугольных плиток течёт через кадр по наклонной оси и скручивается вокруг неё.
Noise / Grain
Плёночное зерно поверх любого фона: SVG feTurbulence как data-URI + steps()-джиттер — зерно «живёт» как на плёнке.
Liquid Glass
Сетка стеклянных плиток лежит поверх снимка и преломляет то, что под ними.
Retro Grid
Ретро-сетка: клетчатая плоскость уходит к горизонту и едет на камеру.
Meteors
Метеоры: светящиеся росчерки падают по диагонали, каждый со своей задержкой и скоростью.
Flickering Grid
Мерцающая сетка: поле квадратов, случайные клетки перемигиваются.
Gradient Mesh
Мягко дышащий фон из размытых цветных пятен — чистый CSS, ноль JS.
Gradient Orb
Пульсирующий градиентный шар с настраиваемыми оттенком, размером, свечением и скоростью — крути в панели и копируй.
Fluid Reveal
Снимок проступает там, где курсор размазал жидкость, и след сам зарастает.
Anamorph Box
Приём анаморфных билбордов, тех самых «naked-eye 3D» экранов на углу дома: в кадре стоит ящик, его переднее отверсти…
Caustics Pool
Свет сквозь воду: по кадру идёт волновое поле, а на дне бассейна светятся жилы каустики.
DNA Helix
Вертикальная двойная спираль из скруглённых треугольных плиток: две нити вьются вокруг оси, между ними идут перемычк…
Ripple Rings
Пульс от центра: кольца расходятся и тают, фазы распределены отрицательными задержками одной анимации.
Silk
Атласная ткань: складки текут, и по их склонам бежит блик.
Bloom Garden
Сад, который накапливается: по клику распускается цветок и остаётся навсегда.
Fluid Smudge
Настоящая жидкость на GPU: поле скорости и краска живут в текстурах и пересчитываются каждый кадр парой буферов «чит…
Light Rays
Объёмные лучи из источника над кадром: веер прутьев света в запылённом воздухе.
Lit Tubes
За курсором тянутся светящиеся трубки: голова идёт к указателю, хвост отстаёт цепочкой и плавно догоняет.
Portal Window
Сцена рисуется в свой буфер (render target) и попадает на экран через форму окна — и за стеклом стоит МЕСТО, а не аб…
Volume Fog
Объёмный свет: луч камеры идёт сквозь дымку шагами и на каждом шаге набирает свет, гася то, что за ним.
Halftone Scene
Живая 3D-сцена выведена полиграфическим растром: точками переменного размера, штриховкой или ASCII-глифами.
Iridescence
Бензиновая плёнка: радужные разводы текут по кадру, и цвет тут не назначен, а вычислен из физики тонкой плёнки.
Type Tunnel
Камера летит сквозь коридор объёмных слов: они проносятся мимо, поворачиваются боком и тают в тумане.
Studio Floor
Предмет стоит на полированном полу студии: под ним живое отражение, контактная тень и свет софтбокса, курсор поворач…
Scroll Color Shift
Фон страницы плавно перекрашивается по мере прокрутки: тон идёт по цветовому кругу, и каждая секция оказывается в св…
Типографика
text-effectsASCII Text
Слова и цифры из ASCII-символов: поле шума, из которого проступают буквы.
Shiny Text
Металлический блик по тексту: градиент шире строки едет по background-position, текст работает маской.
Text Scramble
Текст «расшифровывается» из случайных символов на входе.
Rotating Words
Ротатор слов: рамка обжимается по ширине текущего слова, слово уезжает вверх, следующее приходит снизу.
Text Reveal Scrub
Манифест-текст: слова проявляются по одному в такт прогрессу скролла (scrub);
Blur Mask Reveal
Строки текста проявляются на скролле из блюра и клип-маски (scrub): из расфокуса в резкость.
Variable Font Hover
Вес букв тянется к курсору: чем ближе буква, тем жирнее (гаусс по расстоянию, font-variation-settings).
Split Reveal
Заголовок, где каждое слово выезжает из-под маски со стаггером — классический вход текста.
Chrome Type
Заголовок как отливка из жидкого хрома.
Gradient Text
Анимированный градиентный текст: background-clip:text, широкий градиент бесконечно течёт по буквам.
Letter Morph
Буквы летят по выбранному маршруту сквозь кадр и на ходу переливаются одна в другую: через кадр слева направо, из гл…
Glitch Text
Глитч-надпись: слои-каналы в псевдоэлементах порезаны clip-path и дёргаются step-end всплесками.
Text Mask Media
Текст как окно: сквозь буквы видно фотографию или живое видео.
Magnet Text
Надпись из частиц с НАСТОЯЩЕЙ физикой курсора: наведение расталкивает, зажатая кнопка притягивает, пружина возвращае…
Text Particles
Надпись, собранная из частиц: они разлетаются по щелчку и стягиваются обратно.
Focus List
Список с линзой: строка у середины кадра — крупная и яркая, к кромкам сжимается и гаснет, фокус непрерывный и отматы…
Heading Inline Image
Снимки вшиты прямо в строку заголовка и раскрываются по прокрутке — слова честно раздвигаются, освобождая им место.
Rolling Text
Посимвольный барабан, как на табло аэропорта: при смене фразы каждый знак прокручивается своей колонкой через случай…
Highlight Lines
Маркер ведёт по тексту вслед за прокруткой: строки подсвечиваются по очереди, как будто читают с фломастером.
Stroke Fill Scroll
Контурный заголовок заливается цветом по мере прохождения через кадр — индикатор прогресса, живущий прямо в буквах…
RGB Shift Scroll
Заголовок разъезжается на цветные каналы тем сильнее, чем быстрее крутят страницу.
Type Tunnel
Камера летит сквозь коридор объёмных слов: они проносятся мимо, поворачиваются боком и тают в тумане.
Typewriter
Печатная машинка: текст набирается посимвольно с мигающей кареткой — чистый CSS (steps).
Spoiler Text
Спойлер как в Telegram: текст спрятан под дымкой мерцающих частиц, клик раскрывает (частицы разлетаются), клик снова…
Word Fade Scroll
Абзац проявляется по словам вслед за прокруткой (приём длинных манифестов Apple/Linear): один именованный view()-тай…
Assemble Heading
Заголовок собирается по строкам: каждая въезжает из-под своей маски со сдвигом по времени.
Bubble Text
Буквы надуваются под курсором и опадают за ним.
Hero
heroShader Flow
Full-bleed WebGL-градиент на голом three.js: плавно перетекающая плазма с IQ-палитрой.
Floating Blob
Парящий деформирующийся 3D-блоб с физическим материалом: рельеф дописан в вершинную программу штатного PBR-материала…
Grid Motion Reveal
Grid-интро: центральная плитка уменьшается из scale(3) до своего места в сетке, слои соседних плиток проявляются кас…
Distortion Sphere
Дышащая сфера с вершинной дисторсией (слоистый шум в vertex-шейдере) и фейк-френелем;
Photo Grid Intro
Фото-интро: одна карточка во весь экран уезжает в свою ячейку мозаики 5×3, остальные влетают со своих краёв с расфок…
Split Text Hero
Хиро-вход: слова заголовка выезжают из overflow-масок снизу stagger-ом (ручной split), затем подзаголовок и CTA.
Shard Ribbon
Лента из скруглённых треугольных плиток течёт через кадр по наклонной оси и скручивается вокруг неё.
Chrome Type
Заголовок как отливка из жидкого хрома.
Spotlight Hero
Прожектор на hero: широкий луч из угла одним радиальным градиентом — мягкость без blur.
Letter Morph
Буквы летят по выбранному маршруту сквозь кадр и на ходу переливаются одна в другую: через кадр слева направо, из гл…
Lamp Glow
Лампа над сценой: тонкая перекладина света разгорается из середины, вниз идёт конус, и содержимое стоит в освещённом…
SVG Parallax Scene
Пейзаж, у которого семь планов разъезжаются на прокрутке, целиком лежит в одном svg: планы живут в координатах viewB…
Drink Lab
Мини-игра «собери напиток»: стакан в центре, кнопки ингредиентов, жидкость льётся сверху, лёд ПАДАЕТ кубиками и плещ…
Anamorph Box
Приём анаморфных билбордов, тех самых «naked-eye 3D» экранов на углу дома: в кадре стоит ящик, его переднее отверсти…
DNA Helix
Вертикальная двойная спираль из скруглённых треугольных плиток: две нити вьются вокруг оси, между ними идут перемычк…
Crystal Refract
Гранёный кристалл преломляет снимок за собой по-настоящему: луч ломается дважды — на входной грани и на выходной…
Fluid Smudge
Настоящая жидкость на GPU: поле скорости и краска живут в текстурах и пересчитываются каждый кадр парой буферов «чит…
Paper Fold
Печатный лист складывается гармошкой и раскрывается обратно.
Lit Tubes
За курсором тянутся светящиеся трубки: голова идёт к указателю, хвост отстаёт цепочкой и плавно догоняет.
Portal Window
Сцена рисуется в свой буфер (render target) и попадает на экран через форму окна — и за стеклом стоит МЕСТО, а не аб…
Volume Fog
Объёмный свет: луч камеры идёт сквозь дымку шагами и на каждом шаге набирает свет, гася то, что за ним.
Halftone Scene
Живая 3D-сцена выведена полиграфическим растром: точками переменного размера, штриховкой или ASCII-глифами.
Type Tunnel
Камера летит сквозь коридор объёмных слов: они проносятся мимо, поворачиваются боком и тают в тумане.
Studio Floor
Предмет стоит на полированном полу студии: под ним живое отражение, контактная тень и свет софтбокса, курсор поворач…
Скролл
scrollParallax Depth Scene
Параллакс на настоящей перспективе: камера летит сквозь коридор из планов фотографий — ближние проносятся мимо, даль…
Scroll Parallax
Scroll-driven секция: плавный скролл на Lenis + parallax-слои и reveal на GSAP ScrollTrigger.
Sticky Image Reveal
Скролл-история: главы текста слева, липкое изображение справа меняется кинематографичным кроссфейдом (blur+scale) на…
Zoom Through
Скролл «везёт камеру» сквозь слои: каждый масштабируется на зрителя и растворяется, финал — посадка на контент.
Image Sequence Scroll
Секвенция кадров по скроллу (техника Apple): прокрутка мотает «видео» на canvas.
Horizontal Scroll
Секция горизонтального скролла: вертикальный скролл двигает пришпиленную ленту панелей вбок (ScrollTrigger pin+scrub…
Sticky Stack
Стек секций: карточки липнут к верху и наезжают друг на друга, уходящая сжимается и темнеет.
Parallax Panels
Панели-сервисы с разнослойным параллаксом: визуал едет внутри clip, крупный контурный номер — навстречу скроллу.
Scroll Progress
Полоса прогресса чтения вверху страницы на чистом CSS scroll-driven — ноль JS.
SVG Parallax Scene
Пейзаж, у которого семь планов разъезжаются на прокрутке, целиком лежит в одном svg: планы живут в координатах viewB…
Tracing Beam
Луч вдоль контента, прорисовываемый прокруткой: pathLength=1 и stroke-dashoffset 1→0 от view-timeline.
Scroll Vars Loop
Прокрутка как два числа на элементе: положение и скорость.
Focus List
Список с линзой: строка у середины кадра — крупная и яркая, к кромкам сжимается и гаснет, фокус непрерывный и отматы…
Heading Inline Image
Снимки вшиты прямо в строку заголовка и раскрываются по прокрутке — слова честно раздвигаются, освобождая им место.
Highlight Lines
Маркер ведёт по тексту вслед за прокруткой: строки подсвечиваются по очереди, как будто читают с фломастером.
Photo Ring
Кольцо снимков, которое вращает прокрутка: сцена липнет к экрану, кадры идут по кругу, и каждый держится вертикально…
Stroke Fill Scroll
Контурный заголовок заливается цветом по мере прохождения через кадр — индикатор прогресса, живущий прямо в буквах…
Speed Smear
Смаз скорости: пока страница летит, за снимком тянутся призрачные копии — чем быстрее прокрутка, тем длиннее шлейф;
Keyhole Reveal
Сплошная шторка поверх содержимого с вырезанным окном: прокрутка раздвигает окно, пока шторка не исчезнет.
Scroll Color Shift
Фон страницы плавно перекрашивается по мере прокрутки: тон идёт по цветовому кругу, и каждая секция оказывается в св…
Word Fade Scroll
Абзац проявляется по словам вслед за прокруткой (приём длинных манифестов Apple/Linear): один именованный view()-тай…
Clip Reveal
Блок проявляется через раскрывающийся вырез, пока входит в кадр: снизу вверх, из середины, шторкой или по диагонали.
Изображения
image-fxASCII Image
Фотография, пересобранная из ASCII-символов.
Grid Distortion
Картинка под резиновой сеткой: курсор оставляет расходящуюся волну, которая гаснет сама.
Image Distortion
WebGL-дисторсия фотографии: под курсором «капля»-линза, движение гонит рябь с хроматической аберрацией (кастомный ше…
Hover Reveal
Список ссылок: при наведении под курсором всплывает изображение и следует за ним с инерцией и наклоном по скорости.
Image Trail
Шлейф изображений за курсором: каждые N пикселей пути всплывает картинка со случайным наклоном и тут же тает (пул та…
Image Ripple
Вода по фотографии на чистом canvas 2D: курсор гонит круги, клик роняет крупную каплю.
Before/After Slider
Сравнение «до/после»: разделитель перетаскивается мышью, тачем или клавиатурой;
Liquid Glass
Сетка стеклянных плиток лежит поверх снимка и преломляет то, что под ними.
Glass Lens
Живая капля стекла тянется за курсором, увеличивает и преломляет снимок под собой, на рывке вытягивается нитью и рвё…
Depth Scan
Фотография разобрана на облако точек, и по кадру идёт медленная волна глубины: на гребне точки выходят из плоскости…
Displacement Slider
Слайдер, у которого кадры не сменяют друг друга, а растекаются один в другой: оба берутся из смещённых координат, по…
Text Mask Media
Текст как окно: сквозь буквы видно фотографию или живое видео.
Gravity Gallery
Снимки падают в кадр и скачут по полу, пока не улягутся;
Photo Fan
Веер снимков, как карты в руке: в покое стопка почти сложена, под курсором раскрывается и доворачивается за рукой.
Crystal Refract
Гранёный кристалл преломляет снимок за собой по-настоящему: луч ломается дважды — на входной грани и на выходной…
Paper Fold
Печатный лист складывается гармошкой и раскрывается обратно.
Cloth Drape
Полотно со снимком висит на кромке и ведёт себя как настоящая ткань: провисает под тяжестью, ходит от порывов ветра…
Halftone Scene
Живая 3D-сцена выведена полиграфическим растром: точками переменного размера, штриховкой или ASCII-глифами.
Speed Smear
Смаз скорости: пока страница летит, за снимком тянутся призрачные копии — чем быстрее прокрутка, тем длиннее шлейф;
Glitch Image
Цифровой глитч картинки по ховеру — медиа-родня glitch-text: две копии кадра как «разъехавшиеся каналы» (фильтры + s…
Clip Wipe
Кадр раскрывается вайпом по вырезу и одновременно съезжает с зума.
Страницы
pageLanding Product
Лендинг SaaS-продукта из тех же секций, что и лендинг студии: другой характер собирается пропсами и двумя переменным…
Landing Studio
Готовый лендинг креативной студии из семи секций каталога.
Landing Device
Продуктовая страница в духе больших витрин Apple.
Landing Agency
Лендинг креативного агентства — первая страница каталога с живым фоном в сокете: hero держит light-rays через проп b…
Landing App
Лендинг настольного приложения — самая длинная готовая страница: тринадцать секций, из них восемь впервые на страниц…
Landing Event
Лендинг конференции — первый событийный архетип: обратный отсчёт тикает в баннере, северное сияние в сокете hero, пр…
Landing Course
Лендинг онлайн-курса — образовательный архетип: продаёт путь (программа шагами) и человека (автор прожектором team-s…
Landing Devtool
Лендинг CLI-инструмента — инженерный архетип: установка одной командой сразу после hero (разработчик пришёл ставить…
Landing Portfolio
Личный сайт — портфольный архетип и самая короткая готовая страница: семь секций, потому что у одного человека нет т…
Landing Game
Инди-игра — самый тёмный архетип: атмосфера продаёт, поэтому живой фон (metaballs) прямо в hero.
Landing Fintech
Финтех — архетип «деньги»: банковский тон, тихий градиент в hero, аптайм в цифрах, безопасность — самая большая плит…
Landing Shop
Магазин — десятый архетип и первая страница с товарной витриной (product-grid): промо-баннер с кодом, короткий hero…
Landing Travel
Экспедиции выходного дня — архетип «путешествия» и первая страница с hero-video: атмосферу природы продаёт движущийс…
Landing Hotel
Отель/загородный дом — архетип гостеприимства: продают фотографии и прямые цены.
Landing Podcast
Подкаст — архетип «шоу»: продаётся привычка слушать.
Landing Realty
Жилой дом — архетип «недвижимость»: хребет из проверяемых фактов.
Landing Waitlist
Вейтлист — страница до продукта: шесть секций, одна цель — почта.
Landing Charity
Приют/фонд — архетип «нонпрофит»: страница просит доверия, а не денег.
Landing Magazine
Журнал — архетип «медиа»: страница продаёт привычку читать.
Landing Cafe
Кофейня-пекарня — архетип «локальный бизнес»: страница зовёт дойти ногами, а не купить по кнопке.
Landing Consulting
Юридическая фирма — архетип «профессиональные услуги»: выбирают, кому доверить проблему.
Декор
decorGlobe
Глобус из точек: сфера вращается сама и раскручивается рукой, между узлами тянутся дуги больших кругов.
Animated Beam
Луч между двумя DOM-узлами: путь меряется по раскладке, по нему бежит световой импульс.
Card Stack
Колода карточек: верхняя по кругу уходит под низ — сама по таймеру или свайпом.
Confetti
Конфетти по клику: залп из точки клика, своя физика на canvas — гравитация, трение, вращение.
Orbiting Circles
Узлы едут по круговым орбитам: угол каждого задаёт отрицательная задержка одной общей анимации, контр-вращение держи…
Animated List
Живой список уведомлений: новое въезжает сверху, остальные сдвигаются layout-анимацией, лишнее тает.
Magnet Lines
Поле штрихов смотрит на курсор: угол каждого считает сам CSS через atan2(), скрипт шлёт только координату курсора в…
Terminal
Печатающийся терминал на чистом CSS: команды набираются посимвольно (width в ch + steps), вывод появляется разом, сц…
Anamorph Box
Приём анаморфных билбордов, тех самых «naked-eye 3D» экранов на углу дома: в кадре стоит ящик, его переднее отверсти…
Crystal Refract
Гранёный кристалл преломляет снимок за собой по-настоящему: луч ломается дважды — на входной грани и на выходной…
Volume Fog
Объёмный свет: луч камеры идёт сквозь дымку шагами и на каждом шаге набирает свет, гася то, что за ним.
Chat Bubbles
Диалог с «печатает…»: переписка проигрывается как в настоящем мессенджере — три дышащие точки, пузырь снизу с наддув…
Elastic Line
Линия-струна: курсор оттягивает разделитель, отпустил — пружинит и дозванивает.
Line Draw
Контур прорисовывается штрихом и следом наливается цветом.
Микро-интеракции
micro-interactionClick Spark
Искры от клика на canvas 2D.
Magnetic Button
Кнопка-магнит с ГЛУБИНОЙ: корпус тянется к курсору, а подпись внутри едет дальше него отдельным слоем — двухслойный…
Theme Toggle Morph
Переключатель темы: солнце превращается в луну ОДНОЙ фигурой — круг выгрызается вторым кругом через SVG-маску, лучи…
Spring Reveal
Пружинный stagger-выход карточек на Motion (motion.dev) с hover-откликом.
Toggle Switch
Пружинный переключатель: ручка прыгает spring-ом, трек плавно меняет цвет;
Drink Lab
Мини-игра «собери напиток»: стакан в центре, кнопки ингредиентов, жидкость льётся сверху, лёд ПАДАЕТ кубиками и плещ…
Radial Menu
Радиальное меню: пункты разлетаются веером из центральной кнопки и складываются той же пружиной.
Link Styles
Инвентарь ссылок для билдера: семь характеров подчёркивания и хода — выезд слева, рост из центра, «уходит и приходит…
Number Ticker
Число плавно «прокручивается» от нуля до значения при появлении.
Chat Bubbles
Диалог с «печатает…»: переписка проигрывается как в настоящем мессенджере — три дышащие точки, пузырь снизу с наддув…
Scratch Card
Скретч-карта: серебристый слой стирается указателем как монеткой (canvas + destination-out), доля стёртого считается…
Spoiler Text
Спойлер как в Telegram: текст спрятан под дымкой мерцающих частиц, клик раскрывает (частицы разлетаются), клик снова…
Карточки
cardBento Grid
Bento-сетка: плитки разного размера в одной решётке, подсветка следует за курсором.
Tilt Card
Карточка наклоняется в 3D вслед за курсором, по поверхности скользит блик.
Glare Card
Карточка-стекло: наклоняется за курсором, по поверхности едет продолговатый блик как по глянцевой печати.
Card Image Parallax
Сетка work-карточек: обложка крупнее контейнера и движется внутри clip при скролле;
Spotlight Card
Карточка с мягким прожектором, который следует за курсором.
Tilt on Scroll
3D-наклон по прогрессу скролла: панель входит завалённой в перспективу, в центре вьюпорта выпрямляется и уходит в об…
Flip Card
Карточка переворачивается в 3D по клику (spring), у лицевой и обратной стороны свой контент.
Glow Border
Карточка с вращающимся conic-градиентным свечением по краю — чистый CSS на @property.
Direction Aware Hover
Подложка въезжает в карточку с той же кромки, через которую зашёл курсор, и уезжает в ту, через которую он вышел;
Product Lift
Карточка товара, из которой по наведению выталкивается сам товар: растёт от донышка, приподнимается и чуть кренится…
Push Spring
Товар выбрасывается из карточки пружиной с перелётом и лёгкой тряской, а направление берётся из того, с какой сторон…
Курсор
cursorCursor Follow
Кастомный курсор: кольцо плавно следует за мышью, точка — точно за ней;
Cursor Trail
Шлейф частиц за курсором на canvas: рождаются вдоль движения, разлетаются с гравитацией и гаснут;
Blend Cursor
Кастомный курсор-круг с mix-blend-mode:difference: инвертирует всё под собой, над интерактивным текстом растёт.
Glass Lens
Живая капля стекла тянется за курсором, увеличивает и преломляет снимок под собой, на рывке вытягивается нитью и рвё…
Fluid Smudge
Настоящая жидкость на GPU: поле скорости и краска живут в текстурах и пересчитываются каждый кадр парой буферов «чит…
Lit Tubes
За курсором тянутся светящиеся трубки: голова идёт к указателю, хвост отстаёт цепочкой и плавно догоняет.
Cursor Ghost
Упругий хвост за курсором: цепочка догоняющих друг друга узлов.
Elastic Line
Линия-струна: курсор оттягивает разделитель, отпустил — пружинит и дозванивает.
Cursor Tooltip
Поповер, который едет за курсором: у краёв экрана переворачивается на другую сторону, а на прокрутке прячется — инач…
Переходы
transitionView Transition (CSS)
Переход страниц на View Transitions API: анимация описана только в CSS (::view-transition-old/new), JS — один вызов.
View Transition Morph
Морф общего элемента без библиотек: одно свойство view-transition-name — и браузер сам интерполирует миниатюру в обл…
Morph Transition
Переход общим элементом: карточка из сетки не исчезает, а физически перелетает и разворачивается в обложку детальной…
Iris Transition
Переход-диафрагма: новая страница раскрывается кругом из точки клика (clip-path circle), радиус считается до дальнег…
Pixel Transition
Пиксельный переход: экран рассыпается на квадраты, вспыхивающие в случайном порядке, под ними меняется страница — и…
Stack Transition
Переход стопкой в духе iOS: текущая страница отъезжает вглубь и притухает, новая въезжает снизу отдельным листом с т…
Curtain Transition
Переход между страницами шторкой: полосы наезжают снизу stagger-ом, контент меняется под ними, полосы уходят вверх.
Paper Fold
Печатный лист складывается гармошкой и раскрывается обратно.
Keyhole Reveal
Сплошная шторка поверх содержимого с вырезанным окном: прокрутка раздвигает окно, пока шторка не исчезнет.
Бегущие строки
marqueeDepth Wave Gallery
3D-галерея-«док на боку»: центральный кадр крупнейший, соседи пакуются плотнее и веером уходят вниз в глубину;
Wave Marquee
Три волновые WebGL-ленты (волна · дуга · скрутка) на скролл-странице: увлекаются скроллом, панель Tweakpane с табами…
Coverflow Carousel
3D coverflow-карусель на чистом CSS-3D: активный слайд фронтально, соседи развёрнуты и утоплены;
Draggable Gallery
Перетаскиваемая галерея: тяни ленту мышью или тачем, отпусти — доедет по инерции (Draggable + InertiaPlugin).
Velocity Marquee
Бегущая строка, у которой скорость и наклон берутся из СКОРОСТИ прокрутки, а не из её положения.
Path Marquee
Лента, которая едет ПО САМОЙ кривой: буквы стекают в провис, выныривают на гребень и наклоняются по касательной весь…
Arc Marquee
Бегущая строка с провисающей базовой линией: слова висят на гирлянде и наклоняются вместе с ней.
Infinite Marquee
Бесконечная бегущая строка с плавными краями и паузой на hover — чистый CSS.
Галереи
galleryIsotope Filter
Фильтруемая сетка в духе Isotope: плитки переезжают на новые места, уходящие тают, приходящие всплывают.
Masonry Columns
Пинтерест-стена на чистом CSS: одно свойство columns, ни строчки JS и ни одного медиазапроса.
Masonry Grid
Masonry как у Pinterest: плитка уходит в самую короткую колонку, а высота считается из соотношения сторон — ни одног…
Gravity Gallery
Снимки падают в кадр и скачут по полу, пока не улягутся;
Photo Fan
Веер снимков, как карты в руке: в покое стопка почти сложена, под курсором раскрывается и доворачивается за рукой.
Photo Ring
Кольцо снимков, которое вращает прокрутка: сцена липнет к экрану, кадры идут по кругу, и каждый держится вертикально…
Expanding Panels
Аккордеон-галерея: полосы кадров, раскрывающиеся по наведению и клику — классика фотопортфолио.
Кнопки
buttonsMagnetic Button
Кнопка-магнит с ГЛУБИНОЙ: корпус тянется к курсору, а подпись внутри едет дальше него отдельным слоем — двухслойный…
Shimmer Button
Кнопка с бегущим бликом: по кайме крутится коническая подсветка (@property), по плашке раз в цикл проходит зайчик.
Like Burst
Кнопка-лайк: по клику сердце пружинит, вокруг разлетаются и гаснут цветные частицы.
Border Beam
Светящийся луч бежит по периметру рамки: анимированный угол conic-gradient (@property) + маска-кольцо, чистый CSS.
Button Styles
Инвентарь кнопок для билдера: ВИД (solid, outline, ghost, soft, gradient, glow) и ДВИЖЕНИЕ (lift, press, блик, залив…
Ripple Button
Кнопка с Material-рябью, расходящейся из точки клика.
Лоадеры
loaderProgress Ring
Кольцо прогресса: дуга через stroke-dashoffset, число доезжает до значения rAF-анимацией, которая засыпает по достиж…
Page Loader
Прелоадер страницы: прогресс-бар со счётчиком %, шторка уезжает вверх, контент входит каскадом.
Skeleton Shimmer
Скелетон-карточка с бегущим бликом: одна keyframes-анимация синхронно ведёт shimmer по всем «костям».
Gradient Spinner
Кольцевой спиннер загрузки с conic-градиентом — чистый CSS, маска вырезает центр.
Pulse Loader
Лоадер из трёх пульсирующих точек с градиентом — чистый CSS, ноль зависимостей.
Playground
playgroundWave Marquee
Три волновые WebGL-ленты (волна · дуга · скрутка) на скролл-странице: увлекаются скроллом, панель Tweakpane с табами…
Drink Lab
Мини-игра «собери напиток»: стакан в центре, кнопки ингредиентов, жидкость льётся сверху, лёд ПАДАЕТ кубиками и плещ…
Scratch Card
Скретч-карта: серебристый слой стирается указателем как монеткой (canvas + destination-out), доля стёртого считается…
Формы
formsFloating Label Input
Поле с плавающей подписью: подпись уезжает в вырез рамки.
Newsletter Split
Подписка с лид-магнитом — вариант newsletter-inline для случая, когда рассылку надо продать: слева оффер и «что внут…
Дизайн-система
foundationDesign Tokens
Дизайн-система каталога: шесть ручек — тон, насыщенность и светлота акцента, скругление, плотность и масштаб текста…
showcase
showcaseDNA Helix
Вертикальная двойная спираль из скруглённых треугольных плиток: две нити вьются вокруг оси, между ними идут перемычк…
3D-сцена
3d-sceneFloating Blob
Парящий деформирующийся 3D-блоб с физическим материалом: рельеф дописан в вершинную программу штатного PBR-материала…
Ничего не совпало. Сотрите часть запроса.