Live / GSAP + Three.js
TRIONN
- Смотреть
- Кинематографичный hero, дисциплина между 3D и DOM-слоем.
- Берём
- Чёткий момент входа и один сильный visual plane.
- Не берём
- WebGL как условие для чтения контента.
Motion system / v0.1
Движение
доказывает.
Здесь собраны реальные сайты, которые мы исследовали, и правила, по которым motion работает в Arena Elite: помогает увидеть состояние, но не имитирует live-игру.
CSS-first / native scroll
transform + opacity only
reduced-motion = полный static fallback
Title studies / pick one
Три варианта для оценки.
Надпись «Arena Elite» живёт в DOM, поэтому остаётся резкой, доступной и меняется без пересборки графики. Изображение не рамка — оно растворяется в void-фоне.
Variant 01 / Colosseum Gate
Arena
Elite.
Главная / сильный cinematic hero
Variant 02 / Signal Monolith
Arena
Elite.
Arena Pulse / технический status hero
Variant 03 / Proof Horizon
Arena
Elite.
Leaderboard / фон результата
Reference library
Смотреть ↗
Live / R3F + GLSL
GHEAT
- Смотреть
- HUD-слой, техническая типографика, CRT-логика.
- Берём
- Telemetry-ритм и restrained scanline.
- Не берём
- Постоянные particles и тяжёлый camera fly-through.
Live / immersive 3D
Noomo Showcase
- Смотреть
- Как скролл ведёт историю через пространство.
- Берём
- Последовательность stage → proof → CTA.
- Не берём
- Scroll hijack и сложную 3D-навигацию.
Catalog
GSAP Showcase
- Смотреть
- Лучшие живые примеры micro-motion и scroll storytelling.
- Берём
- Ритм reveal, а не копирование визуала.
- Не берём
- Зависимость страницы от крупной animation-библиотеки.
Catalog
Awwwards / GSAP
- Смотреть
- Pinned narratives, gallery pacing, CTA physics.
- Берём
- Один motion-хук на экран.
- Не берём
- Параллельные эффекты, конкурирующие с таблицей результата.
Engineering case study
Codrops / ZERO
- Смотреть
- Progress gates и performance work за интерактивной историей.
- Берём
- Видимый progress и выбор пользователя.
- Не берём
- Обязательные hold-gates для входа или действий оператора.
Engineering case study
Codrops / TRIONN
- Смотреть
- Как команда синхронизирует много motion-систем.
- Берём
- Единый язык motion-токенов.
- Не берём
- Lenis и audio на критическом пути.
Open source
GHEAT source
- Смотреть
- Структуру HUD поверх canvas и одну шкалу progress.
- Берём
- Разделение data/UI/motion.
- Не берём
- Перенос чужого кода или ассетов без лицензии.
Current implementation
Motion без фальши.
Hero
Boot-reveal, scanline и магнитный CTA только для fine pointer.
Arena Pulse
Reveal фактического state и telemetry; без поддельных матчей.
Leaderboard
Stagger строк и flicker только при реальном изменении score.