ImagineTables

>В задумке подгружать стили ориентируясь на операционную систему.

Оффтопик по отношению к этому конкретному вопросу, но, возможно, стоит рассмотреть переезд из браузера в ОС-специфичные webview-приложения и вынос разметки/стилей в ресурсы. По крайней мере, обычно обозначенная в цитате дорога приводит именно к этому )) А от сервера оставить только веб-АПИ.

1. Я делаю…
2. Я ожидаю…
3. Вместо этого я получаю…

У вас 1 пункт из 3.

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

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

Во-первых. Для определения видимости есть специальный API. Он страшен, как жизнь простого программиста, но это, всё-таки, стандарт. Вот небольшая обёртка, которую я написал для себя:

// Starts observing visibility of the given element. On change,
// the callback is called with Boolean visibility as argument.
System.attachOnVisibilityChangedHandler = function (element, callback, visiblePart = 0.5)
{
	const options =
	{
		root: null,
		threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
	};

	const observer = new IntersectionObserver((entries, observer) =>
	{
		entries.forEach(entry =>
		{
			callback(entry.target, entry.intersectionRatio >= visiblePart);
		});
	}, options);

	observer.observe(element);
}

Во-вторых. Он тоже даёт ложноположительные срабатывания (я думаю, в этом ваша проблема). Это by design. Поэтому надо проверять предыдущее состояние, чтобы понять, изменилось ли оно:

// For all elements, marked with 'autoplay' and 'autoplay-once' classes, adds 'start-autoplaying' class when visible first time.
// For all elements, marked with 'autoplay' only, adds 'start-autoplaying' class every time, when visible, and removes it, when not.
function autoplayAnyWhenVisible()
{
	$('.autoplay').each(function ()
	{
		const startAutoplayingClass = 'start-autoplaying';
		const visiblePart = $(this).data('visible-part') ?? 0.5;

		const onElementVisibilityChanged = function (element, isVisible)
		{
			const autoplayOnce = $(element).hasClass('autoplay-once');
			const wasVisible = $(element).data('is-visible');

			if (isVisible && !wasVisible)
			{
				$(element)
					.addClass(startAutoplayingClass)
					.data('is-visible', true);
			}

			if (autoplayOnce)
				return;

			if (!isVisible && wasVisible)
			{
				$(element)
					.removeClass(startAutoplayingClass)
					.data('is-visible', false);
			}
		};

		System.attachOnVisibilityChangedHandler(this, onElementVisibilityChanged, visiblePart);
	});
}

С этим кодом просто маркируете элементы при помощи класса autoplay (плюс autoplay-once если надо проигрывать анимацию только один раз), указываете долю видимости, и при реальном показе/сокрытии будет добавляться/убираться класс start-autoplaying (куда и засовываете анимацию написания текста):

<div class="… autoplay autoplay-once" data-is-visible="false" data-visible-part="0.3">

Если анимацию должен создать непрограммист-аниматор на основе векторной графики (может, ещё и нарисовать векторную графику самому), то у него и надо спрашивать, каким инструментом он пользуется и во что вебообразное он может экспортировать свою анимацию.

Насколько я знаю, сейчас упомянутый выше Lottie это как раз один из стандартов для описания анимации.

Если подходить к анимированию со стороны кода, то сам я прописываю анимации тупо в CSS.