Никаких заимствованных компонентов. Каждый эффект ниже — мой собственный код на чистом Canvas / CSS / SVG. Наведи мышью или коснись на телефоне.
Текст рендерится в offscreen-canvas, пиксели сэмплируются в частицы. При распаде каждая частица получает восходящую скорость и турбулентный снос — как дым, — затем фраза собирается заново. Моя реализация, отличная от той, что была в присланном компоненте.
Стеклянная панель преломляет анимированный фон: размытие и насыщение через backdrop-filter, живое «дрожание» края — через SVG feTurbulence + feDisplacementMap. Панель можно перетаскивать мышью, она слегка наклоняется как физическое стекло.
Товар в объёме: наклон следует за курсором (rotateX/rotateY), слои вынесены по оси Z для параллакса и глубины, бегущий блик имитирует стекло экрана. Плавающие бейджи «висят» над устройством. Убери мышь — вернётся к мягкому авто-вращению.
Частицы дрейфуют в пространстве и соединяются светящимися линиями при сближении — как нейронная сеть в темноте. Курсор отталкивает соседей: чем ближе, тем сильнее вихрь. Яркость и толщина линий зависят от расстояния.
Многослойные полотна авроры рисуются в реальном времени: каждый слой — сумма синусоид разных частот с мягким свечением через globalCompositeOperation:screen. Звёздное небо мерцает. Двигай мышью или пальцем — сияние изгибается и смещается вслед за тобой.
Органические капли жидкости сливаются при сближении в единую форму. Трюк — SVG-фильтр: feGaussianBlur размывает формы, feColorMatrix обрезает альфа-канал по порогу, превращая мягкие градиенты в чёткие органические стыки без единой строки pixel-шейдера. Двигай мышью или пальцем — одна капля тянется к тебе.
Капля чернил падает в тёмную воду: четыре кольца расходятся с разной скоростью — как настоящие водяные волны. Там, где волны от разных капель пересекаются, цвета складываются аддитивно, как лазерные лучи. Тапни или кликни в любое место — брызги разлетятся в стороны, породив новые светящиеся кольца.
Слово прогоняется сквозь «шифровальный шум»: каждый символ мерцает случайными глифами — греческими буквами, математическими знаками — прежде чем встать на своё место. Волна дешифровки идёт слева направо: правая половина ещё в хаосе, когда левая уже сложилась в буквы. Полоска внизу показывает прогресс. Тапни мышью или пальцем — мгновенный переход к следующему слову.
Тысячи частиц следуют по векторному полю, построенному на основе многочастотного шума. Поле медленно дышит и эволюционирует само по себе, создавая живые органические течения. Подведи мышью или проведи пальцем — возникает вихрь, закручивающий поток вокруг точки касания.
Молнии строятся алгоритмом рекурсивного смещения средней точки: каждый отрезок делится пополам со случайным отклонением, образуя органичный зигзаг. От главного разряда отходят ветви. Свечение — несколько проходов с разной толщиной и shadowBlur. Без взаимодействия удары бьют сами по себе. Тапни мышью или пальцем — молния ударит из этой точки.
Частицы обращаются вокруг центральной сингулярности по кеплеровым орбитам: скорость обратно пропорциональна квадратному корню расстояния — как в Солнечной системе. Внутренние орбиты стремительны, внешние — величавы. В центре пылает горячий аккреционный диск. Поднеси мышь или палец — возникает вторая точка притяжения, искажающая орбиты и закручивающая их в новые траектории.
Звёзды разгоняются от единой точки схода до краёв экрана — эффект прыжка в гиперпространство. Гексагональные кольца расширяются как волны нейросети изнутри наружу. Точка схода следует за мышью или пальцем; у краёв скорость нарастает экспоненциально. Без касания — точка медленно дрейфует сама.
Классический демосценовый эффект: каждый пиксель окрашивается суммой четырёх синусоид — горизонтальной, вертикальной, диагональной и радиальной. Вокруг курсора или пальца вращается дополнительная спираль-вихрь, искажающая рисунок. Алгоритм работает напрямую с ImageData — без единого draw-call, только математика. Двигай мышью или пальцем — вихрь тянется за тобой.
Сотни «железных опилок» ориентируются по силовым линиям двух магнитных полюсов, движущихся по траектории Лиссажу. Каждая опилка плавно разворачивается к мгновенному направлению поля — как настоящие опилки вокруг магнита. Подведи мышь или коснись экрана пальцем — третий полюс искажает паттерн, создавая живые вихри.
Сотни «птиц» образуют живой рой, следуя трём правилам: держись подальше от соседей, выравнивай скорость со стаей, держись поближе к её центру. Никакой центральной координации — только локальные взаимодействия порождают сложный органический рисунок, как у скворцов в небе. Двигай мышью или пальцем — рой расступается и обтекает тебя.
Плоскость делится на N ячеек по простому правилу: каждая точка принадлежит ближайшему узлу. Узлы дрейфуют сами по себе — ячейки плавно переконфигурируются в реальном времени. Границы горят неоновым свечением, как голографическая сеть. Подведи мышь или коснись пальцем — в этом месте возникает дополнительный узел, разрезающий соседние ячейки.
Регулярная сетка узлов деформируется многослойными синусоидальными волнами — как натянутая ткань пространства-времени. В точке притяжения курсора возникает вихревое искажение, закручивающее окружающую сетку в воронку. Узлы светятся: чем сильнее смещение, тем ярче переход от синего к фиолетовому и розовому. Двигай мышью или пальцем — пространство гнётся вокруг тебя.
Модель Грея–Скотта: два химических вещества конкурируют за пространство и самоорганизуются в органические паттерны — пятна, лабиринты, кораллы — как пигментация кожи животных по теории Тьюринга. Параметры f и k медленно дрейфуют, паттерны морфируют сами по себе. Тапни или проведи мышью/пальцем — вбросишь реагент, породив новый рост узоров.
Клеточный автомат пиксель за пикселем моделирует пламя: температура каждой точки — среднее трёх соседей снизу минус случайное охлаждение. Из этого простого правила возникают органические языки огня, никогда не повторяющиеся дважды. Цветовая палитра — не физическая, а кибернетическая: чёрный фон, ультрафиолет, электрический синий, белое ядро. Проведи мышью или пальцем — вспыхнет новый очаг прямо под курсором.
Шестнадцать светящихся нитей подвешены в невидимой точке вверху и болтаются под действием гравитации. Каждая нить — цепочка частиц, связанных пружинными ограничениями: физика Верле сохраняет длину звеньев и даёт плавное органическое качание. Невидимый ветер задаёт медленное расхождение нитей. Двигай мышью или пальцем — нити расступаются и обтекают тебя, как занавеска из неонового шёлка.
Каждый штрих мгновенно отражается в 12 секторах — как в настоящем калейдоскопе. Трюк — матрица rotate + scale(−1, 1): зеркальные и прямые копии чередуются вокруг центра, создавая идеальную вращательную симметрию. Следы постепенно растворяются, уступая место новым узорам. Без касания мышь рисует сама по себе, следуя кривой Лиссажу. Рисуй мышью или пальцем — любой штрих превращается в мандалу.
Трёхмерная сетка сферы строится вручную через матрицы вращения и перспективную проекцию — без WebGL, только Canvas 2D и чистая математика. Глубина передаётся яркостью: ближние грани ярче и теплее, дальние — почти невидимы. Три светящихся орбитальных кольца с частицами вращаются на разных плоскостях. Тяни мышью или пальцем — глобус крутится в любую сторону, инерция плавно угасает.
Ретро-эстетика «аутрана»: бесконечная перспективная сетка летит навстречу, закатное солнце с горизонтальными полосами висит над горным силуэтом. Горизонтальные линии сжимаются к горизонту по степенному закону перспективы, вертикальные сходятся в одну точку. Звёздное небо мерцает. Двигай мышью или пальцем — точка схода перемещается, камера дрейфует.
Японские символы, хексадецимал и математические знаки сыплются вниз в неоновой палитре студии: голова каждого потока — яркая белая с cyan-свечением, хвост затухает от фиолетового к бирюзовому. У каждой колонки своя скорость и случайная фаза; символы периодически перетасовываются. Наведи мышью или коснись пальцем — соседние колонки резко ускоряются, создавая воронку потока прямо под курсором.
Снаряды взлетают вверх и в вершине рассыпаются в сотню светящихся искр. Каждая искра подчиняется гравитации и сопротивлению воздуха — физика Эйлера без лишних абстракций. Следы затухают естественно: вместо хранения истории каждый кадр накладывается полупрозрачный тёмный слой. Аддитивное смешивание globalCompositeOperation:lighter создаёт настоящее свечение там, где искры перекрываются. Тапни мышью или пальцем — запусти снаряд из этой точки.
Шесть траекторий хаотической системы Лоренца разворачиваются в трёхмерном пространстве. Начальные условия отличаются лишь на тысячные доли — но через тысячи шагов пути расходятся непредсказуемо: «эффект бабочки» в реальном времени. Два крыла аттрактора светятся аддитивным смешиванием, в точках пересечения траектории вспыхивают ярче. Тяни мышью или пальцем — поверни аттрактор в любую сторону.
Вращающиеся стрелки-эпициклы с разными частотами складываются в сложную светящуюся кривую — это визуализация ряда Фурье в действии. Каждое нажатие переключает набор частот: числа Фибоначчи, нечётные гармоники, простые числа и степенной ряд — каждая комбинация рисует уникальный орнамент. Кончик последней стрелки оставляет светящийся след, который тает аддитивным смешиванием.
Три источника круговых волн дрейфуют по экрану. Там, где гребни разных волн совпадают, яркость вспыхивает — конструктивная интерференция; там, где гребень встречает впадину, цвет гасится — деструктивная. Рисунок непрерывно меняется: живая стоячая рябь, как на поверхности воды после трёх брошенных камней. Расчёт идёт попиксельно через ImageData с предвычисленной цветовой палитрой. Тапни мышью или пальцем — добавить новый источник волн (до шести).
Замкнутый контур строится по полярным координатам: 72 точки вокруг центра, радиус каждой — сумма нескольких синусоидальных гармоник плюс гауссов «шип» в сторону притягивающей точки, совсем как настоящая магнитная жидкость, вытянутая к магниту. Пока никто не касается экрана, притяжение само медленно облетает каплю по орбите; тронь мышью или пальцем — капля мгновенно потянется за тобой, а на пике натяжения с кончика шипа срываются капли.
Больше тысячи частиц-«песчинок» рассыпаны по виртуальной пластине. Каждый кадр под ними считается стоячая волна двух гармоник (m, n) — там, где амплитуда велика, песчинки дрожат и разбегаются, а вдоль узловых линий, где колебаний почти нет, они оседают и складываются в симметричный узор — совсем как настоящая пластина Хладни под смычком. Тронь пластину мышью или пальцем в разной точке — сменится пара гармоник и узор перестроится; без прикосновений плата сама медленно перебирает красивые комбинации.
Карта наклоняется в 3D вслед за указателем (rotateX/rotateY через CSS-переменные), а поверх — радужная плёнка из conic-gradient с blend-mode color-dodge, которая едет вслед за точкой касания и медленно вращает оттенок сама по себе. Отдельный canvas добавляет слой мерцающих блёсток фольги, которые вспыхивают ярче рядом с бликом. Без прикосновений карта сама плавно покачивается по кругу и переливается — тронь мышью или пальцем, чтобы блик и наклон пошли за тобой.
Сетка узлов, связанных пружинными ограничениями Верле, подвешена за верхний край и провисает под собственной тяжестью. Незримый ветер постоянно меняет направление порывами, поэтому полотно живёт само по себе даже без прикосновений. Проведи мышью или пальцем по ткани — она промнётся вслед за пальцем и упруго вернётся на место, а грани сетки подсвечиваются по углу наклона, как будто на них падает свет.
Сетка неоновых гвоздиков-пикселей, будто в детской игрушке-пинарте. Даже без единого касания по стене сами собой расходятся концентрические волны — она живая. Нажми пальцем или веди мышью — под кончиком гвоздики продавятся и засветятся ярче, оставив объёмный оттиск, который затем медленно оседает обратно.
Изометрическая сетка домов-вокселей, нарисованная на canvas без единой 3D-библиотеки — только проекция и порядок отрисовки «сзади наперёд». Город никогда не замирает: по кварталам сами собой бегут медленные волны высоты. Веди пальцем или мышью над сеткой — дома под ней вытягиваются вверх, как эквалайзер, а короткое касание запускает круговую ударную волну, что расходится между зданиями и затухает.
Под слоем густого тумана спрятана звёздная карта с созвездиями и путевыми огнями — она рисуется на canvas целиком, а туман вырезается вокруг луча через composite-режим destination-out, оставляя настоящую мягкую дыру со шлейфом, а не имитацию прозрачности. Никого не трогаешь — луч сам блуждает по карте, будто что-то ищет. Веди пальцем или мышью — открывай карту сам, тапни — вспышка на миг расширит круг света.
Слои узлов соединены рёбрами графа — по ним бегут импульсы активации и каскадом ветвятся на следующий слой, как электрический сигнал в нейросети. В покое сеть сама себе устраивает случайные вспышки мысли. Коснись пальцем или наведи мышью на любой узел — от него побежит цепная реакция импульсов через всю сеть до последнего слоя.
От точки удара расходятся ломаные радиальные трещины со случайным изломом на каждом сегменте, а поверх них ложатся рваные концентрические кольца скола — как в закалённом стекле. Каждый разлом светится через shadowBlur и медленно гаснет несколько секунд, а из эпицентра разлетаются осколки с гравитацией и вращением. Стекло потрескивает само по себе в простое — коснись пальцем или кликни мышью в любую точку, чтобы ударить по нему.
Панельки перещёлкиваются в 3D, как буквы на старом вокзальном или аэропортовском табло — перед тем как встать на место, символ проходит через несколько случайных промежуточных знаков. В простое табло само волной меняет надпись слева направо. Коснись пальцем или кликни мышью по табло — оно тут же перещёлкнет на следующую фразу.