Недавно придумал себе челлендж: воссоздать свой любимый iPhone SE (2016), используя только Vue 3, TypeScript и возможности современного CSS 3D. Без Three.js и без тяжелых библиотек - только математика и слои

Что под капотом: - CSS 3D Transforms: Использовал preserve-3d и rotateY/rotateX для создания объема. Чтобы углы выглядели реалистично, я применил секретную технику "самса с мясом" - 34 динамически создаваемых слоя для идеального скругления (цикл в JS с созданием элементов с нужными стилями) - Математика плавности: В основе движения лежит функция LERP (Linear Interpolation, 'a+(b−a)∗t'). Она позволяет телефону не просто дергаться за мышью, а плавно "догонять" её, создавая эффект инерции - Оптимизация: Анимация завязана на requestAnimationFrame. Это база. Гарантирует стабильные 60+ FPS и не нагружает процессор, когда вкладка неактивна - Vue 3 Composition API: Вся логика вынесена в чистый композабл с использованием useTemplateRef и строгой очисткой слушателей через AbortController

Результат: интерактивная моделька, которая "чувствует" юзера и выглядит объемно даже на слабых устройствах

Было крайне забавно и интересно воссоздавать телефон, который буквально лежал передо мной на столе :) Да, к сожалению, не получилось найти все нужные иконки iOS, но для первого раза я доволен результатом

(насколько я понял, Сетка еще не поддерживает загрузку видео в посты, поэтому прикреплю фото своего живого референса :) )

А какие неординарные челленджи придумывали и исполняли вы?)