Skip to content

feat: PHANTOM VPN — VHS-inspired Russian VPN website#1

Draft
nikitawebdeg-debug wants to merge 1 commit into
mainfrom
cursor/russian-vhs-vpn-website-1cd3
Draft

feat: PHANTOM VPN — VHS-inspired Russian VPN website#1
nikitawebdeg-debug wants to merge 1 commit into
mainfrom
cursor/russian-vhs-vpn-website-1cd3

Conversation

@nikitawebdeg-debug

Copy link
Copy Markdown
Owner

PHANTOM VPN — VHS-инспирированный сайт для VPN-сервиса

Полноценный одностраничный сайт для VPN-сервиса в стиле аналоговой VHS-эстетики 80–90-х, полностью на русском языке.

Tech Stack

  • React 19 + Vite 8
  • Tailwind CSS v4 (via @tailwindcss/vite)
  • Framer Motion for all animations

Структура сайта

Секция Описание
Tape Loading Интро-заставка с прогресс-баром загрузки ленты и терминальным логом
Hero «Тебя уже отслеживают» — RGB-сплит глич-заголовок, параллакс-скролл, VHS-шум
Запись найдена 4 фичи безопасности с картами с distortion-эффектом при hover
Глобальная сеть SVG-карта мира с пульсирующими нодами серверов и мигающими линиями соединений
Производительность Аналоговые индикаторы, спидометры, live-монитор в VHS-UI стиле
Интерфейс CRT-экран с интерактивным мокапом приложения (кнопка подключения работает)
Отзывы Стилизованы как субтитры VHS-записи с тайм-кодом
Тарифы Карточки в стиле кассетных этикеток с accent-полосой
Final CTA «Отключись от слежки» — countdown + красная CTA-кнопка с глич-эффектом

VHS-эффекты

  • Film grain canvas — перформансный canvas с рандомным шумом (каждый 3-й фрейм)
  • Glitch bands — случайные белые полосы-артефакты
  • Scanlines — CSS overlay на весь экран
  • Timecode HUD●REC 00:00:00 в нижнем левом углу, ▶ PLAY справа
  • RGB split — раздвоение текста по красному и синему каналам
  • Tracking shift — горизонтальные смещения при глич-анимации
  • CRT screen — скруглённый экран, вигнетирование, inner glow
  • Tape loading intro — CRT-on эффект при первом запуске

Дизайн

  • Палитра: глубокий чёрный / выцветший красный / синий / cyan (#00e5ff)
  • Шрифты: Oswald (display) + Share Tech Mono (VHS UI элементы) + Inter (текст)
  • Все анимации оптимизированы через Framer Motion (GPU-accelerated)
  • Строгий баланс: эффекты усиливают, а не перегружают UX
npm install
npm run dev
Open in Web Open in Cursor 

- Vite + React 19 + Tailwind CSS v4 + Framer Motion
- Tape loading intro screen with terminal log animation
- Global VHS overlay: film grain canvas, glitch bands, scanlines, timecode HUD (●REC)
- Hero: 'Тебя уже отслеживают' with RGB-split glitch headline and parallax
- Features (Запись найдена): 4 security feature cards with hover distortion
- Network (Глобальная сеть): SVG world map with pulsing nodes and connection lines
- Performance (Производительность): analog bars, speedometer gauges, live monitor UI
- Interface (Интерфейс): CRT screen with interactive one-click VPN app mockup
- Testimonials (Отзывы): VHS recording caption style with tape reel metadata
- Pricing (Тарифы): cassette label pricing cards in three tiers
- Final CTA: 'Отключись от слежки' with countdown + red glitch CTA
- Custom VHS CSS: scanlines, film grain, tracking shift, RGB split animations
- All content in Russian; Share Tech Mono + Oswald fonts

Co-authored-by: 1mpruf <nikitawebdeg-debug@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants