Демо 18 Apr 2023
bellatrix - тактильный генератор минифигурок
- Vue 3.5
- Vite 6
- TypeScript
- Inline SVG
- Cloudflare
Конструктор минифигурок, переписанный вокруг инлайн-SVG - настоящие векторные детали, весь персонаж сериализуется в ссылку, экспорт в PNG одним кликом. Vue 3.5 + Vite, без бэкенда.
Задача
Конструктор минифигурок, где фигуры остаются чёткими в любом масштабе, а весь персонаж умещается в одну шарящуюся ссылку - без бэкенда и регистрации.
Подход
Каждая деталь - инлайн-SVG с заливками, нормализованными в CSS-переменные, поэтому фигуры собираются из настоящих векторов и чисто экспортируются в любом размере. Один композабл держит выбор и двусторонне синхронизирует его с URL, так что персонаж сериализуется в ссылку и точно восстанавливается на другой стороне.
Результат
Тактильный 'Brick Studio' с девятью категориями деталей, живым треем вариантов и экспортом в PNG одним кликом - полностью на клиенте. Vue 3.5 и Vite, задеплоено на Cloudflare.