Не сильно долго думая:

1. Рендерим чем-то типа https://github.com/niklasvh/html2canvas.

2. Выводим картинку в верхнем слое.

3. Снизу мгновенно меняем тему (через body.light).

4. При помощи mask-image делаем для картинки из п. 2 радиальные градиенты с несколькими частично пересекающимися кругами (как в макете). Изначально значения альфа-канала во всех опорных точках должно быть 1.0

5. Запускаем transition к таким значениям альфа-канала, чтобы был эффект распространения прозрачности по кругам от центра наружу. Круги при анимации начинают пересекаться, что даёт искомый эффект интерференции.

6. Чтобы transition сработал с градиентной заливкой, нужно задать градиент кастомными свойствами, а переход делать для них, как показано тут: https://stackoverflow.com/a/63848864/14400772

Как уже было сказано выше,

1. Брякпоинты из любимого фреймворка (чем стандартнее, тем лучше), плюс
2. Точечные фиксы для конкретных кусков, ломающиеся так далеко от брейкпоинтов (посередине, например), что на них не натянуть.

Дисклеймер: не уверен, что правильно понял проблему, но попытка не пытка. Попробуйте первый раз инициализировать контролы внутри бутстраповских табов (т.е., в данном случае, делать вызов .slick()) из события shown.bs.tab (ну и запоминать, что инициализация состоялась, чтобы при повторном выборе таба её не делать повторно, либо unslick'ать всё на парное событие hidden.bs.tab).

Событие shown.bs.tab генерирует контрол, который переключает табы. Т.е.

$('button[role="tab"]')
	.on('shown.bs.tab', function (e) { … } );

Из e достаёте таб (см. бутстраповскую документацию на событие), и для его содержимого уже делаете инициализацию.

для маркера checkbox навешен transition для плавного появления

Это плохой UX, не надо так делать. Ощущаться будет как замедленная реакция интерфейса на нажатие.

Но если приспичило, можно:

Первый вариант
1. Описать галку в начале файла:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="template">
	<defs>
		<symbol id="checkmark" class="checkmark" viewBox="0 0 16 16">
			<path fill="currentColor" … />
		</symbol>
	</defs>
</svg>

2. Вставить в кнопку:

<svg width="32" height="32"><use href="#checkmark"></use></svg>

3. Анимировать прозрачность.

Второй вариант

Если хочется сохранить растровое изображение, используйте его как маску (clip), а фон заливайте сплошным цветом. Если использовать кастомные свойства, ими можно анимировать хоть градиенты:

@property --my-color-1
{
	syntax: '<color>';
	initial-value: #000;
	inherits: false;
}