Дмитрий

одинаковые по высоте пилим флексами
левый и верхний бордеры имитируем псевдоэлементами

собственно самое сложное сделать блюр по внешней кромке картинки, но с этим как раз у вас проблемы нет =))
Сейчас попробую накидать примерчик

Принцип KISS не означает что надо использовать самые примитивные инструменты.
Он означает, что не надо переусложнять систему без нужды.
Если так рассуждать, так и высшее образование не нужно: "Дед отличные бани строил, хотя вовсе был неграмотный. Я и без сопромата небоскреб построю!"
Если вы пока ещё не понимаете назначение всех этих "лееров, провайдеров и репозиториев", это не значит, что они вообще никому не нужны.

Для того, чтобы упростить управление системой, её надо усложнить.
Этот принцип относится к любой области человеческой деятельности, от постройки ракет до управления государствами.
Чем сложнее система, тем больше накладные расходы на ее управление. Хоумпейдж с котиками можно и нужно делать примитивными средствами. В большом проекте надо сразу закладываться на будущую расширяемость. То есть, заранее делить ответственность между "леерами".

И кстати. Код, в котором "всё друг на друге завязано" - это очень плохой код. Собственно, предназначение всех этих "лееров, провайдеров и репозиториев" как раз в том, чтобы компоненты были как можно более независимы друг от друга.

Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?

По смыслу - это другой элемент. Если мы говорим про более-менее компонентный подход к верстке, то это должно быть очевидно. Кнопка - один компонент. Всплывающее окошко - другой компонент. Набросал небольшую заготовку:


С такими анимациями можно долго играться, самое главное - проверить в конечном итоге кроссбраузерность. А то в хроме и FF работает, а в каком-нибудь IE всякое может случиться.

P.S.: Но в целом - я голосую за реализацию таких вещей целиком на JS. Практика показывает, что в проектах с такими анимациями очень быстро собирается большое количество одновременно анимирующихся значений у большого количества элементов, которые нужно синхронизировать между собой. На CSS голова лопнет все это делать. И да, чем больше всего меняется в CSS-анимациях в единицу времени, тем выше шанс найти какой-нибудь редкий баг и долго ломать себе голову в поисках проблемы. Лучше уж взять какую-нибудь библиотеку вроде anime.js или любимый многими GSAP и использовать их.

var numbers = [1,-3,5,-6,-10,13,4,-8];
var sum = 0;
var index = false;
for (let i=0; i<numbers.length; i++) {
   sum += numbers[i];
   if (sum == 0) { index = i; break; }
}
console.log(index); // 5

var numbers = [1,-3,5,-6,-10,13,4,-8];

var arr = numbers.slice(), sum = 0;
while((sum += arr.shift()) !== 0); // изысканный пустой while !
var index = numbers.length - arr.length - 1;  // 5

Или с рекурсией:

function sum0(arr, idx = 0, sum = 0) {
  if ((sum += numbers[idx]) === 0) return idx;
  return sum0(arr, idx + 1, sum);
}

sum0([1,-3,5,-6,-10,13,4,-8])  // 5

Универсальное решение

codepen

const boxes = document.querySelectorAll('.box');

const isNested = (f, t, c) => c + 1 >= f && c + 1 <= t;

const insertAfter = (elem, refElem) => refElem.parentNode.insertBefore(elem, refElem.nextSibling);

const transferBoxesToWrapper = (fromIndex, toIndex, wrapper) => {
  boxes.forEach((box, i) => isNested(fromIndex, toIndex, i) && wrapper.appendChild(box));
}

const createWrapper = (fromIndex, toIndex) => {
  let wrapper = document.createElement('div');
  
  wrapper.classList.add('wrapper');
  insertAfter(wrapper, boxes[fromIndex - 1]);
  transferBoxesToWrapper(fromIndex, toIndex, wrapper);
}

createWrapper(3, 5);

a = 0
b = '0'

// или

a = false
b = '0'

// или

a = ''
b = []

// или

a = 0
b = {
  valueOf: () => 0,
}

// или

a = ''
b = {
  toString: () => '',
}

https://habr.com/company/ruvds/blog/419371/

Потому что функция d ничего не возвращает, чего вы ожидали ?

let group = {

    prop: false,

    d: function () {
        return (() => {
            this.prop = true;
            return this.prop;
        })();
    },
};

console.log(group.d()); // true
console.log(group);     // {prop: true, d: ƒ}

> чтобы было удобнее удобнее ванильного JS, но наименьшего веса.

Современный ванильный дом вполне удобен. Местами он лучше чем jquery. Достаточно подключить https://polyfill.io/v2/docs/ и можно использовать все современные фишечки.

Боюсь что пока будет составляться такая схема она успеет устареть (я не шучу). И любой кто напишет готовое решение гарантированно будет как минимум заблуждаться.

Поясню. Мир IT крутится вокруг определенного набора навыков и технологий. Есть связанные навыки и не очень. Одну и ту же технологию можно применять различным образом. Как правило люди выбирают то что им проще, понятнее и одновременно интереснее всего, а потом изучают то что так или иначе связано.

Если задумка дизайнера позволяет реализовать задуманное без джаваскрипта, то понятно, что лучше реализовать без него.

Если нет, и джаваскрипт необходим для реализации, то в этом нет абсолютно ничего страшного.

В обоих случаях действует одно и то же правило: не делайте через жопу.

export default class MyClass {

  start() {
    this.elem = document.querySelector('.elem');
    this.elem.addEventListener('click', (event) => this.check(event));
  }

  check(e) {
    //код
  }

}

или

this.elem.addEventListener('click', this.check.bind(this));

в первом случае мы передаем в функцию коллбек для addListener наш контекст и, соответственно, его метод через замыкание.
во втором случае создаем функцию с прибитым гвоздями контекстом используя bind, и передаем ее как коллбек в addListener