Success story про дизайнерский вайбкодинг Делали мы недавно задачу по AI дайджесту на главной для ПРО пользователей. Хотелось сделать «магическую» анимацию генерации дайджеста, тем более, что генерируется он достаточно медленно и было бы банально оставить обычный крутящийся лоадер. Мне пришла идея с «рассыпающимися» звездочками, реализацию которой я нашла потом на ютубе в видеоуроке по афтеру. Всего час работы и получилось в AE сделать достаточно прикольную анимашку, которую потенциально можно потом выгрузить в лотти, но, увы, для оптимизации загрузки страницы, в вебе мы не используем никакие сторонние библиотеки для анимаций. А это значит нужна чистая JS анимация, которую разработчику будет скорее всего лень делать и все участники процесса аккуратненько сольются, как это обычно бывает. Тут то на помощь мне и пришёл вайбкодинг. Пару часов и получилось сделать ровно то, что я задумывала, а также заложить разные настройки кастомизации такой штуки. По итогу анимацию действительно затащили и сегодня её уже можно наблюдать в проде если вы юзер подписки. Правда разрабу пришлось таки переписать говнокод, полученный от меня, но тем не менее он переиспользовал формулы и логику того, что я наделала самостоятельно. А это как раз самое важное, потому что я сама придумала приколюху, сама сделала и остаётся только вопрос нормальной интеграции в кодовую базу без рисерча возможностей реализации на стороне разработки. Создала и проверила финальный промт всей этой штуки, так что можете тоже заюзать: Сделай fullscreen HTML + Canvas (JS), который рисует halftone-сетку из маленьких SVG-звёздочек “Stella” (Path2D из stellaPath, viewBox 28×28). Центр волн (cx, cy) задаётся мышью/тачем (по умолчанию центр экрана). Ключевое требование: звёздочки НЕ должны меняться “рандомно”. Их размер должен меняться строго по кольцам на воде: - В момент, когда фронт кольца проходит через точку — звёздочка максимального размера. - Когда кольцо уходит — звёздочка плавно уменьшается до минимального размера. Алгоритм: 1) Сетка: шаг gridSize. В каждой клетке рисуй 1 звёздочку по центру (x, y). 2) Для каждой звёздочки считай расстояние до центра в ПИКСЕЛЯХ: r = sqrt((x - cx)^2 + (y - cy)^2) (так круги будут кругами; при необходимости нормализуй через min(width, height)). 3) Фронт основного кольца: R(t) = v t (v зависит от speed) 4) “Насколько точка близко к кольцу”: d = abs(r - R(t)) A = exp(-(d^2)/(2sigma^2)) (sigma = ringWidth, ширина кольца) 5) Масштаб звезды: scale = minScale + (maxScale - minScale) A Это гарантирует: на кольце scale≈maxScale, вне кольца scale→minScale. 6) Несколько колец: Для k=0..ringCount-1 используй Rk(t)=R(t) - kringSpacing. Для итоговой амплитуды бери max(Ak) (или sum с clamp 0..1). Рендер звезды: - Используй stellaPath (SVG path из Stella Invert.svg) как Path2D. - Без stroke, только fill (patternColor). - Трансформации: ctx.save(); ctx.translate(x, y); ctx.scale((stellaBaseSize/28) scale, (stellaBaseSize/28) scale); ctx.translate(-14, -14); ctx.fill(path); ctx.restore(); Canvas качество: - High-DPI: canvas.width = innerWidthdpr, canvas.height = innerHeightdpr, ctx.scale(dpr,dpr) - imageSmoothingEnabled = true, imageSmoothingQuality = 'high' Контролы (минимум): speed, gridSize, stellaBaseSize, minScale, maxScale, ringWidth(sigma), ringSpacing, ringCount, backgroundColor + patternColor (HEX ввод допускается без “#”). Сохранение параметров в URL (querystring) и восстановление из URL. Важно: - Никакого Math.random и шумов. - Размер в точке зависит только от r и t (через близость к фронту колец). - Кольца должны выглядеть как идеальные круги, а не овалы.