Никаких заимствованных компонентов. Каждый эффект ниже — мой собственный код на чистом Canvas / CSS / SVG. Наведи мышью или коснись на телефоне.
Текст рендерится в offscreen-canvas, пиксели сэмплируются в частицы. При распаде каждая частица получает восходящую скорость и турбулентный снос — как дым, — затем фраза собирается заново. Моя реализация, отличная от той, что была в присланном компоненте.
Стеклянная панель преломляет анимированный фон: размытие и насыщение через backdrop-filter, живое «дрожание» края — через SVG feTurbulence + feDisplacementMap. Панель можно перетаскивать мышью, она слегка наклоняется как физическое стекло.
Товар в объёме: наклон следует за курсором (rotateX/rotateY), слои вынесены по оси Z для параллакса и глубины, бегущий блик имитирует стекло экрана. Плавающие бейджи «висят» над устройством. Убери мышь — вернётся к мягкому авто-вращению.
Частицы дрейфуют в пространстве и соединяются светящимися линиями при сближении — как нейронная сеть в темноте. Курсор отталкивает соседей: чем ближе, тем сильнее вихрь. Яркость и толщина линий зависят от расстояния.
Многослойные полотна авроры рисуются в реальном времени: каждый слой — сумма синусоид разных частот с мягким свечением через globalCompositeOperation:screen. Звёздное небо мерцает. Двигай мышью или пальцем — сияние изгибается и смещается вслед за тобой.
Органические капли жидкости сливаются при сближении в единую форму. Трюк — SVG-фильтр: feGaussianBlur размывает формы, feColorMatrix обрезает альфа-канал по порогу, превращая мягкие градиенты в чёткие органические стыки без единой строки pixel-шейдера. Двигай мышью или пальцем — одна капля тянется к тебе.
Капля чернил падает в тёмную воду: четыре кольца расходятся с разной скоростью — как настоящие водяные волны. Там, где волны от разных капель пересекаются, цвета складываются аддитивно, как лазерные лучи. Тапни или кликни в любое место — брызги разлетятся в стороны, породив новые светящиеся кольца.
Слово прогоняется сквозь «шифровальный шум»: каждый символ мерцает случайными глифами — греческими буквами, математическими знаками — прежде чем встать на своё место. Волна дешифровки идёт слева направо: правая половина ещё в хаосе, когда левая уже сложилась в буквы. Полоска внизу показывает прогресс. Тапни мышью или пальцем — мгновенный переход к следующему слову.