Так если Вы уже знаете библиотеку, которая решает Ваш вопрос, может Вам и вопрос стоит соответствующий задать? Сделать демку, показать как что подключаете, какой ожидаемый результат, а какой фактический. И задать вопрос, в чём ошибка, которая приводит к несоответствию результатов?
Вам сейчас предложат другую библиотеку. Вы с ней тоже не разберётесь. Не очень эффективно получается.
Drno, не смотря на то, что я, в целом, тоже делаю некоторые движения для лучшей статистики, вы абсолютно правы. Суть площадки именно в помощи другим.
Использование площадки для прокачки личного бренд это, в лучшем случае, приятный бонус, в худшем - яд, "убивающий" площадку, так как если все начнут так делать, то начинающие не будут получать ответы на свои вопросы, что приведёт к тому, что рано или поздно вопросы практически перестанут задаваться и лишь тогда, заскучавшие "мастера" начнут отвечать снова на вопросы новичкам. Скорее всего не развёрнуто, лениво и местами токсично...
Ну... исходя из того что вы скинули, что не достаточно для того чтобы говорить прям уверенно, и с учётом того что мой ес линт ни на что не ругается, кроме того что скорее всего buttonRef стоит добавить в зависимости к useEffect, у Вас в целом какая-то проблема с настройкой линтера, раз ругается на line 0.
А так, если на гридах, то, для удобства чтения\разработки сделать сетку 3 на 3, задать именованные области через grid-area, а потом обойти картинки и назначить им эти зоны через Math.random, не забыв исключать уже назначенную.
Но ведь разработчику, если он видит в этом смысл, ничего не мешает сделать на vue, а потом сгенерировать это сборщиком в статику со всеми оптимизациями, например, картинок, которые у него в сборщике уже настроены? Не знаю правда есть ли у генераторов статики настройки чтобы это всё осталось читабельно, но тем не менее.
ну вариантов несколько, выбирайте на свой вкус(то что больше подходит, так как контекста недостаточно):
1) Верхняя секция не имеет своего фона, имеет абсолютное\фиксированное или sticky позиционированием и на деле размещена поверх секции с огнём.
2) Второй вариант - верхняя секция всё так же не имеет своего фона, а огонь задан общему блоку, который оборачивает обе секции.
3) Ого как фоновая картинка задан обоим секциям и идеально спозиционирован так, что совпадает в единую картинку.
А демка где?