Никаких заимствованных компонентов. Каждый эффект ниже — мой собственный код на чистом 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, как буквы на старом вокзальном или аэропортовском табло — перед тем как встать на место, символ проходит через несколько случайных промежуточных знаков. В простое табло само волной меняет надпись слева направо. Коснись пальцем или кликни мышью по табло — оно тут же перещёлкнет на следующую фразу.
Стопка карточек с 3D-перспективой: верхнюю можно перетащить пальцем или мышью — она наклоняется и подсвечивается зелёно-голубым «лайком» или розовым «нопом» в зависимости от направления, а при отпускании либо улетает за край и уходит в конец колоды, либо пружиной возвращается на место. В простое колода сама изредка пролистывает верхнюю карточку, так что стопка живёт даже без прикосновений.
Настоящий объёмный куб на чистых CSS 3D-трансформациях: шесть граней с разными гранями-ярлыками, собранные в preserve-3d сцену. Крути его пальцем или мышью — вращение продолжается по инерции и плавно затухает трением, а если отпустить и не трогать пару секунд, куб сам подхватывает медленное вращение, чтобы витрина не застывала. Грани светятся неоновым градиентом и чуть пульсируют от скорости вращения.
Звёздное поле вокруг чёрной дыры: свет соседних звёзд закручивается по спирали, вытягивается в дуги у горизонта событий и гаснет за ним, а вокруг светится аккреционный диск. Веди пальцем или мышью — дыра следует за тобой и тянет звёзды за собой; отпусти — и она сама неспешно дрейфует по орбите, продолжая искривлять пространство.
Несколько капель на SVG-фильтре feGaussianBlur + feColorMatrix сливаются в единую жидкую массу, как ртуть. Одна капля-«вожак» следует за пальцем или курсором и тянет за собой остальные, а в покое все капли сами неспешно плавают и слипаются друг с другом.
Слово растеризуется в тысячи частиц-пикселей на canvas. Тронь или кликни рядом с буквами — ближайшие осколки разлетаются взрывом и плавно возвращаются на место с пружинным демпфированием. В покое текст сам периодически рассыпается и собирается заново, а слова по кругу меняются.
Двойная спираль из светящихся узлов и перекладин, спроецированная в 3D на canvas. Крути её мышью или пальцем — вращение продолжается по инерции, а в покое спираль сама неспешно вертится и пульсирует светом вдоль своей длины.
Рой светящихся узлов дрейфует по полю и сам соединяется тонкими линиями, когда оказывается рядом. Приблизь курсор или палец — частицы притягиваются к нему магнитным полем и вспыхивают линиями связи; без взаимодействия рой живёт сам по себе, мягко пульсируя и перестраивая узор.
Светящийся трос из нескольких десятков узлов подвешен между двумя точками и живёт по Verlet-интеграции: инерция и гравитация считаются на каждом узле отдельно, а форму держат упругие связи между соседями, пересчитываемые в несколько итераций за кадр. Без касаний его покачивает ветром и время от времени дёргает порывом. Схвати любую точку троса мышью или пальцем и потяни — он повиснет на пальце, а после отпускания качнётся дальше по инерции.
Бесконечная лента из слов бежит по кругу сама по себе — каждая буква мягко покачивается по синусоиде, а вся строка медленно переливается цветом. Тронь ленту мышью или пальцем — рядом с точкой касания буквы вспухают, будто плывут в жидкости, и волна расходится по соседним символам, постепенно затухая.
Холст ведёт себя как долгая выдержка фотоаппарата: любое движение оставляет светящийся, медленно гаснущий след. Пока никто не касается экрана, невидимая рука сама вычерчивает переливающуюся кривую Лиссажу — тронь холст мышью или пальцем, и рисовать начнёшь ты, свет потянется за пальцем и сгорит через пару секунд.
Под курсором плывёт стеклянная линза, которая по-настоящему увеличивает схему из светящихся узлов под ней — с лёгкой хроматической аберрацией по краю, как в старой оптике. Пока ты не касаешься холста, линза сама скользит по фигуре Лиссажу; тронь холст мышью или пальцем — и лупа послушно поедет за пальцем, увеличивая всё, над чем проходит.
Плата сама прорастает ортогональными дорожками, по которым непрерывно бегут импульсы тока — как будто под стеклом ожила настоящая микросхема. Пока ты не трогаешь холст, ток течёт по своим путям сам; проведи мышью или пальцем по полю — от ближайшей дорожки протянется новая трасса прямо к точке касания, и по ней тут же побежит яркий разряд.
Дерево прорастает само по себе рекурсивным ветвлением и покачивается от невидимого ветра, светящиеся почки пульсируют на кончиках веток. Коснись пальцем или проведи мышью по кроне — ближайшая ветка потянется новым живым побегом прямо к точке касания.
Ровная сетка точек стоит на месте, пока по ней сами по себе не пробежит случайный импульс — точки подскакивают и светятся, будто под сеткой прошла волна. Коснись поля пальцем или кликни мышью — из точки касания разойдётся настоящее концентрическое кольцо, которое толкает и подсвечивает каждую точку на своём пути.
Карточка объёмно наклоняется вслед за пальцем или курсором, а по её поверхности скользит радужный блик и мягкое световое пятно — как на голографической плёнке. Стоит отпустить карточку, и она не замирает: через секунду сама начинает плавно покачиваться и «дышать» бликом по собственной синусоидальной траектории.
Ветвящиеся ледяные узоры сами прорастают по стеклу, как морозный рисунок на зимнем окне — трещинки расходятся, разветвляются и гаснут, а на их месте вырастают новые. Коснись экрана пальцем или щёлкни мышью — в этой точке проклюнется новый кристалл и рост ускорится; без единого касания лёд всё равно не останавливается.
Каждый пиксель подчиняется правилам симуляции сыпучего вещества: падает вниз, а если путь закрыт — соскальзывает по диагонали, точь-в-точь как настоящий песок в песочных часах. Сверху сам собой сыплется цветной поток, снизу есть воронка, через которую он утекает — куча никогда не замирает без движения. Проведи пальцем или мышью по сцене, чтобы досыпать свою горсть.
Звёздное поле искривляется вокруг горизонта событий: свет далёких звёзд огибает чёрную дыру и растягивается в светящееся кольцо Эйнштейна, аккреционный диск медленно вращается, а сама дыра сама по себе дрейфует по сцене. Веди пальцем или мышью — гравитационный колодец послушно последует за тобой, затягивая и снова отпуская звёзды на своём пути.
Сотни бумажных полосок разлетаются по честной физике: гравитация тянет их вниз, воздух тормозит и раскачивает каждую от края в край, а вращение никогда не повторяется дважды. Невидимая пушка сама стреляет залпами через равные паузы — а если коснуться сцены пальцем или кликнуть мышью, залп прилетит прямо из точки касания.
Полсотни столбцов колышутся сами по себе — у каждого своя сумма синусоид, будто уровень громкости без источника звука. Проведи пальцем или мышью по сцене — соседние столбцы подпрыгивают бегущей волной и с пружинным перехлёстом оседают обратно, как будто их дёрнули по струнам.
Тёмный пруд, по которому сама по себе изредка стучит невидимый дождь — каждая капля расходится кольцами, а там, где волны встречаются, свет складывается и вспыхивает ярче, как настоящая интерференция на воде. Коснись сцены пальцем или кликни мышью — оттуда разойдётся собственный набор колец, который столкнётся с остальными.
Старый монитор сам по себе иногда ловит помехи: строки экрана рвутся и съезжают в сторону, а цветовые каналы расходятся, как при плохом кабеле. Проведи пальцем или мышью по сцене — разрыв усилится именно там, где ты коснулся, а вдалеке от пальца картинка почти успокаивается.
Тёмное поле из тысяч травинок, каждая — гибкий стебель со своей упругостью и фазой. Ветер сам по себе гуляет волнами по полю даже без единого касания. Проведи пальцем или мышью по сцене — трава расступается перед невидимым «шагом» и плавно распрямляется следом, как настоящие стебли.
Низкоразрешённый буфер накапливает «тепло» в альфа-канале: касание добавляет яркое пятно поверх старого кадра, каждый кадр слегка гаснущего. Значение альфы прогоняется через таблицу цветов (фиолетовый → пурпур → циан → белый) и масштабируется на весь экран — получается настоящий тепловизор. Несколько точек тлеют и блуждают сами по себе, а прикосновение или движение мыши оставляет за собой яркий раскалённый след.
Каждый пиксель — это точка на комплексной плоскости: для неё считается, как быстро (и считается ли вообще) убегает в бесконечность последовательность z → z² + c. Число шагов до побега красится через фиолетово-циановую палитру и даёт знаменитую самоподобную кайму множества Мандельброта. Сцена сама, без единого касания, бесконечно ныряет в заранее отмеченные «интересные» уголки — долину морских коньков, спирали, мини-копии множества — и по достижении предела масштаба плавно возвращается к общему виду. Потяни пальцем или мышью, чтобы сдвинуть картинку, коснись/кликни, чтобы приблизиться к точке, или сведи два пальца для зума.
Каждая карточка — это две грани, склеенные в 3D-сцене с perspective: лицевая повёрнута к зрителю, обратная спрятана на 180° позади неё через backface-visibility. Коснись или кликни карточку — она провернётся вокруг вертикальной оси и покажет обратную сторону. Если её не трогать, витрина не стоит на месте: раз в пару секунд сама переворачивает случайную карточку, чтобы демонстрация была живой даже без единого касания.
Облако из двух с лишним сотен светящихся частиц держит форму — звезду, кольцо, символ бесконечности — потому что каждая точка пружиной притягивается к своему месту на контуре. Проведи мышью или пальцем по сцене — частицы под курсором разлетятся, будто пыль от порыва ветра, и тут же начнут возвращаться обратно. Без единого касания скульптура сама медленно вращается и раз в несколько секунд перетекает в следующую форму.
Сцена — это не картинка, а сетка моноширинных символов: для каждой ячейки на каждом кадре считается яркость от суммы нескольких бегущих синусоид, и число превращается в символ из градиента « .:-=+*#%@» — от почти пустоты до плотного блока — с цветом от фиолетового к циану. Коснись или кликни — наружу побежит кольцевая волна яркости, как круги на воде из букв. Без касаний поле не замирает: внутренний шум течёт сам, а раз в пару секунд где-то внутри сама собой рождается новая волна.
Несколько десятков мягких световых шаров расставлены по разным «слоям глубины»: дальние — мельче и тусклее, ближние — крупнее и ярче, и каждый сам неспеша дрейфует по своей орбите. Поводи мышью или пальцем над сценой — слои сдвигаются с разной скоростью, как будто смотришь через стопку стекол, а касание или клик расталкивает огни короткой вспышкой, которая плавно затухает. Без единого прикосновения сцена не замирает: огни медленно плывут и каждые несколько секунд сами вспыхивают изнутри.
Сверху — тёмный бумажный слой с шумной фактурой волокон, под ним — живое свечение фиолетово-циановых пятен. Веди пальцем или мышью по бумаге — она рвётся неровным краем, как настоящая, открывая сияние снизу. Без касаний бумага сама надрывается в случайных местах каждые пару секунд, а старые разрывы медленно затягиваются новыми волокнами — разрыв и заживление идут по кругу.
Три слоя гор получены алгоритмом midpoint displacement — тем же приёмом, которым генерируют ландшафты в играх: отрезок делится пополам, точка посередине случайно смещается по высоте, и так рекурсивно, пока не получится рваный горный силуэт. Веди мышью или пальцем влево-вправо — слои сдвигаются каждый со своей скоростью, создавая параллакс, а светящаяся луна плывёт за кончиком пальца с лёгкой задержкой. Короткое касание или клик без движения — хребет пересчитывается заново со вспышкой, будто сверкнула молния. Без касаний сцена не стоит на месте: горы медленно плывут от ветра, луна покачивается, а звёзды мерцают.
Полотно из узких ламелей развёрнуто в 3D (CSS rotateY) поверх светящейся туманности из фиолетовых, циановых и розовых пятен. Веди мышью или пальцем по полотну — ламели рядом с точкой касания разворачиваются на ребро, и свет снизу пробивается сквозь образовавшиеся щели, а дальние ламели остаются почти закрытыми. Без касаний щель сама бежит волной слева направо и обратно, а туманность позади медленно переливается — жалюзи никогда не стоят на месте.
Каждая буква — отдельный span со своей пружинной физикой: по закону Гука она стремится вернуться в исходную точку, а вязкое затухание гасит колебания. Веди мышью или пальцем по надписи — соседние буквы разлетаются, тянутся и сжимаются как желе, а отпустив — упруго возвращаются на место с несколькими затухающими колебаниями. Короткое касание или клик даёт резкий толчок — буквы подпрыгивают взрывом. Без прикосновений надпись не замирает: лёгкий «ветер» покачивает буквы волной, будто кто-то невидимый гладит текст пальцем.
Пузыри сами собой рождаются внизу сцены и плывут вверх, покачиваясь и переливаясь мыльной радугой — оттенок плёнки крутится по кругу в зависимости от угла и времени, как настоящая тонкая пленка на свету. Проведи мышью или пальцем — пузыри рядом с точкой касания лопаются с мелкими брызгами и расходящейся ударной волной, а касание и удержание сдувает соседние пузыри потоком воздуха. Без касаний сцена не замирает: пузыри рождаются, растут, плывут и лопаются сами по себе бесконечным потоком.
Поверхность воды живёт собственной жизнью: несколько бегущих волновых фронтов складываются в карту высот, а её кривизна в каждой точке решает — фокусируется там свет в яркое пятно или рассеивается в тень, точно как настоящие каустики на дне бассейна. Коснись сцены пальцем или кликни мышью — по воде пойдёт кольцевое возмущение, будто упала капля, и рисунок света перестроится вслед за ним. Без касаний поверхность не замирает: волны бегут сами по себе, а капли падают сами по себе, подсвечивая дно случайными бликами.
Сцена тонет во тьме — лишь едва заметные светлячки мерцают где-то в глубине. Веди мышью или пальцем, и за курсором поедет круг света: всё, что в него попадает, вспыхивает яркими искрами и обретает цвет, а за пределами луча тут же гаснет обратно во мрак. Никто не трогает экран — и фонарик не гаснет: он сам плавно блуждает по сцене, выхватывая из темноты то одну, то другую группу светлячков.
Буквы светятся настоящим неоновым светом — газ в трубке гудит и сам чуть подрагивает, будто у вывески разболтался трансформатор. Коснись любой буквы пальцем или кликни по ней мышью — контакт «искрит»: из точки касания летят электрические искры, а сама буква на долю секунды гаснет и моргает заново, как при скачке напряжения. Никто не трогает вывеску — она всё равно живая: буквы периодически гудят сами по себе, а раз в несколько секунд где-то в надписи проскакивает случайная искра короткого замыкания.
Стекло запотело — сквозь плотный конденсат едва проступают размытые огни ночного города. Капли сами собой стекают вниз, набирают скорость, сливаются друг с другом и прочерчивают в тумане мокрые дорожки. Веди пальцем или мышью по стеклу — там, где коснулся, конденсат стирается, и сквозь чистый след на миг становится видно, что происходит за окном, пока туман снова не затянет это место.
Под поверхностью живёт плазменное поле в фирменных цветах студии. Каждый кадр по нему пробегает самосканирующая полоса, которая режет картинку на колонки и пересортировывает пиксели по яркости — ровно та механика, что лежит в основе классического датамош-глитча из монтажных программ, только живая и бесконечная. Проведи пальцем или мышью по полотну — под касанием возникают свои полосы расплава, которые плавно проявляются и тают, оставляя потёкший, оплавленный след.
Надпись отлита из жидкого металла: каждая горизонтальная полоса буквы плавает по собственной волне, а поверх натянут хромовый градиент с бегущим бликом — ровно то сочетание, что превращает плоский текст в расплавленный слиток. Пока ты не трогаешь холст, блик сам гуляет по надписи, слегка покачивая её; тронь мышью или пальцем — металл потечёт и вспучится под касанием, а яркий отблеск потянется за пальцем.