CryptoX®

Beyond surveillance. Encrypted by design.
Промо-сайт мессенджера со сквозным шифрованием на базе Signal Protocol, Double Ratchet и X3DH.

---

✦ О проекте

Кинематографический лендинг для CryptoX — приватного мессенджера нового поколения. Сайт построен в эстетике Obsidian Minimalist: тёмная палитра, liquid glass-элементы, полноэкранное видео и scroll-driven анимации.

✦ Особенности

🎬 Cinematic Hero	Полноэкранный видеофон с seamless crossfade-лупом и parallax-эффектом при скролле
🧊 Liquid Glass UI	Кастомный glassmorphism с динамическими градиентными бордерами и backdrop-blur
🫧 Meniscus Navigation	Интерактивный blob-курсор в навбаре с физической деформацией и elastic-возвратом
📊 Animated Counters	Счётчики с анимацией при попадании во viewport
📜 Scroll Manifesto	Посекционная подсветка текста, привязанная к позиции скролла
↔️ Horizontal Scroll	Горизонтальная прокрутка карточек фич через GSAP ScrollTrigger
✍️ Letter-by-letter CTA	Посимвольное появление финального заголовка
📱 Mobile-first	Адаптив + full-screen меню с clip-path анимацией

✦ Стек

React 19  ·  TypeScript 6  ·  Vite 8  ·  GSAP 3.15  ·  Tailwind CSS 3.4

Шрифты: Instrument Serif + Inter

✦ Быстрый старт

# Клонировать репозиторий
git clone https://github.com/<your-username>/cryptox-landing.git
cd cryptox-landing

# Установить зависимости
npm install

# Запустить dev-сервер
npm run dev

Откроется на http://localhost:5173

✦ Сборка

npm run build    # Продакшн-билд → dist/
npm run preview  # Локальный превью билда

✦ Структура проекта

src/
├── components/
│   ├── Navbar.tsx           # Навбар с liquid glass + meniscus blob
│   ├── Section2.tsx         # Протокол — три столпа криптографии
│   ├── StatsSection.tsx     # Анимированные счётчики
│   ├── ManifestoSection.tsx # Scroll-driven подсветка слов
│   ├── FeaturesSection.tsx  # Горизонтальный скролл фич
│   └── CtaFooter.tsx        # Финальный CTA + футер
├── App.tsx                  # Корневой компонент, видео, GSAP-оркестрация
├── index.css                # Дизайн-система, liquid glass, анимации
└── main.tsx                 # Точка входа

✦ Дизайн-система

Палитра

Токен	HSL	Роль
--background	230 50% 4%	Глубокий тёмно-синий фон
--foreground	0 0% 100%	Белый текст
--muted-foreground	240 4% 66%	Приглушённый текст

Liquid Glass

Кастомный glassmorphism-эффект через ::before pseudo-element с градиентным бордером и mask-composite: exclude:

.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

✦ Лицензия

MIT © CryptoX