Евгений Винокуров

Сверстать - сложно. Если это кнопка, то можно псевдоэлементами ::before, ::after наложить. В общем и целом, такие "округлости" через CSS можно делать, но это clip-path нужен, пару раз делал с помощью него анимированные бэкграунды (тоже по нужде дизайнеров) - удовольствие ну очень так себе...

Это можно легко сделать через AnimeJS. Скорее всего, с помощью этой библиотеки и сделано)

Вижу, что вопрос еще не решен, но вам все правильно написали в комментариях.



Да, скорее всего, на сайте Apple используется обычный IntersectionObserver. То есть логика какая: у нас есть страничка и на ней расположены элементы с определенными дата-атрибутами. Я смотрел страницу с IPhone13 и там, к примеру, такие элементы - это data-fiesta и data-build-id (их там конечно больше, потому что анимации разные). Логика такая: при инициализации страницы с помощью querySelectorAll и IntersectionObserver поочередно создаются массивы из одинаковых по анимации элементов и на них вешается обработчик на событие появления на экране, а дальше либо ручками анимировать, либо использовать AnimeJS, GSAP и тд.

*Ничего сложного тут ничего нет, это же не игра на canvas - можно просто открыть исходный код страницы и с первого взгляда все станет +- ясно как работает.

Наверное, имеете ввиду вот эту штуку. Пользовался пару раз в рабочих проектах - работает как и нужно. Можно написать свое решение на CSS Grid с капелькой JS, но считаю, что оно того не стоит)

Обычно свойства height и max-height подразумевают под собой то, что вы будете использовать их вместе. Если вы просто укажете свойство max-height, картинка все равно будет иметь initial размер со своим initial height значением.

Можно в Figma создать такую фигуру, экспортнуть как SVG и задать через background для нужной секции. Обычно так делают)

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