MUP — браузерный плеер для альбома S_TN. Все 10 треков написаны исключительно на одном оригинальном Game Boy с картриджем LittleSoundDJ. Проект сочетает пиксельную эстетику, гиперпространственную анимацию звёзд и глубокий чиптюн-звук.
🎨 Обложки треков — художник @Katika_Taoka
| Фича | Описание |
|---|---|
| 🎵 10 треков × 2 версии | Обработанная и raw с Game Boy |
| 🌌 Hyperspace starfield | GPU-ускоренная анимация звёзд на Canvas 2D (alpha: false) |
| 🎛️ Эквалайзер | Бас + высокие частоты в реальном времени через Web Audio API |
| 🔊 Громкость | Круговой слайдер |
| 📤 Sharing | VK, Telegram, Twitter, WhatsApp и другие |
| 📱 Responsive | iOS, Android, Desktop |
| # | Название |
|---|---|
| 1 | SERENITY |
| 2 | HOLY ROCKET |
| 3 | PROMISE |
| 4 | SPACE TIME |
| 5 | POPCORN |
| 6 | GOAL ACHIEVEMENT |
| 7 | CRYOGENIC DREAM |
| 8 | STARWAY |
| 9 | IMPETUS (feat. BALLONBEAR) |
| 10 | RAILROAD SWITCH |
📀 Добавить в библиотеку (стриминг)
Starfield написан на Canvas 2D с несколькими ключевыми оптимизациями:
alpha: falseпри создании контекста — браузер не выполняет альфа-компостинг с DOM, что снимает значительную нагрузку с GPUdesynchronized: true— canvas рендерится асинхронно с основным потоком DOMwill-change: transform— CSS-подсказка браузеру для выделения отдельного GPU-слоя- Batch rendering — 250 звёзд рисуются за 5 вызовов
ctx.fill()(по бакетам яркости) вместо 250 - Перспективная проекция
sx = cx + x * (FOV / z)— правильный вылет от центра к краям - Целые пиксели (
| 0) — никакого субпиксельного сглаживания - FPS cap 30 — равномерный темп анимации, экономия на мобильных
- Равномерный z-спред при старте — нет «пустого экрана» при загрузке
| Технология | Версия | Назначение |
|---|---|---|
| React | 17 | UI-фреймворк |
| react-circular-input | 0.2.x | Круговые слайдеры |
| react-share | 4.x | Кнопки шаринга |
| sass | 1.x | Стили SCSS |
| material-icons | 0.5.x | Иконки |
| Web Audio API | native | Эквалайзер и визуализатор |
| gh-pages | 3.x | Деплой |
- Node.js ≥ 14
- Yarn
# Клонировать репозиторий
git clone https://github.com/stanislavche/mup.git
cd mup
# Установить зависимости
yarn install
# Запустить в dev-режиме
yarn startПриложение откроется на http://localhost:3000
# Продакшн-сборка
yarn build
# Деплой на GitHub Pages
yarn deploy- 🎵 Музыка: S_TN
- 🎨 Арт: @Katika_Taoka
- 💻 Разработка: stanislavche
Все треки записаны на одном Nintendo Game Boy Original
с использованием картриджа LittleSoundDJ
🎮 One console. One cartridge. Ten tracks.