Marquee (цифровая вывеска)
Приложение цифровой вывески для полноэкранного анимированного текста. Типичные случаи: объявления в витрине, ресепшен мероприятия, "вернёмся через 5 мин" в кафе, мотивационный баннер на вторичном мониторе, подсказка для вызова кого-то в открытом офисе.
Что делает
- Пишете текст, выбираете эффект анимации, цвет фона, цвет текста, скорость
- Полноэкранный режим одной клавишей (
Fили кнопка⛶) - Работает на любом мониторе — просто перетащите окно на другой экран и в полноэкранный
Доступные эффекты
| Эффект | Поведение |
|---|---|
| Горизонтальная прокрутка | Текст скользит справа налево (классическая вывеска) |
| Вертикальная прокрутка | Текст поднимается (титры фильма) |
| Fade in/out | Текст пульсирует по центру |
| Bounce | Текст прыгает из угла в угол |
| Glow | Неоновая пульсация, идеально для чёрного фона |
| Wave | Символы волнообразно качаются (ретро-эффект) |
| Статический | Текст неподвижен (простой баннер) |
Цвета и фон
- Цвет текста: HEX-пикер
- Цвет фона: HEX-пикер
- Пресеты (тогл): чёрный/белый, чёрный/неоновый зелёный, чёрный/жёлтый (предупреждающие знаки), красный/белый (экстренный), синий/белый (корпоративный)
- Тогл градиента: фон превращается в мягкий градиент (3 пресета)
Скорость
Слайдер от 0.5× до 5×. По умолчанию 1× (~10 сек для прохождения текста из 30 символов).
Полноэкранный режим
Кликните ⛶ в правом верхнем углу или нажмите F. Выход с Esc.
В полноэкранном режиме:
- Обои, dock, menubar исчезают
- Элементы управления окна (X, _, ▢) исчезают
- Курсор скрывается через 3 секунды без движения
Лучшая практика мобильного: блокировка ориентации. В альбомной длинный текст помещается больше.
Мобильный
Работает на смартфоне/планшете. Кнопка мобильного drawer вверху показывает элементы управления. В мобильном полноэкранном режиме swipe вверх от нижнего края для возврата элементов управления.
Решённый анти-паттерн (2026-04-26)
Предыдущая версия применяла touch-action: none к <html> для захвата кастомных полноэкранных жестов. Баг: если приложение закрывалось OS-level swipe-down (не кнопкой), класс оставался глобально приклеенным и ломал swipe-to-close всех последующих приложений до перезагрузки страницы.
Фикс: теперь использует нативный Fullscreen API браузера (element.requestFullscreen()), который сам разрешается при уничтожении. Без глобальных классов в <html>.
Клавиатурные сочетания
| Клавиша | Действие |
|---|---|
F | Тогл полноэкранного |
Esc | Выход из полноэкранного |
Space | Пауза/возобновление анимации |
↑ / ↓ | Увеличить/уменьшить скорость |
← / → | Сменить эффект |
Ограничения
- Пока не сохраняет пресеты (текст теряется при закрытии)
- Без плейлиста (ротация между 5 сообщениями)
- Без звука
- Не импортирует изображения (только текст)
Эти в roadmap для v2, когда спрос оправдает.
Реальные случаи использования
| Сетап | Конфигурация |
|---|---|
| Витрина "вернёмся через 5 мин" | Чёрный фон, жёлтый текст, медленная горизонтальная прокрутка (0.7×) |
| Ресепшен мероприятия "Welcome to ROADSHOW 2026" | Неоновое зелёное свечение, статический |
| Шоу-пойнт с именем текущего спикера | Корпоративный синий градиент, fade in/out 2с |
| "Комната занята" дверь переговорки | Красный/белый, bounce |
| Мотивационный баннер на вторичном десктопе | Wave + фон-градиент, скорость 1× |
Ссылки
- Приложение зарегистрировано в
src/config/apps.js(искатьid: 'marquee') - Компонент:
src/components/roqueos/apps/ROSMarquee.vue - Правило регрессии
.claude/rules/10-ui-patterns.mdраздел "АНТИПАТТЕРН: глобальные классы в<html>/<body>"