Skip to content

Add OTC desk institutional website with narrative scroll experience - #1

Open
userresg17 wants to merge 14 commits into
mainfrom
claude/otc-crypto-site-planning-ctymal
Open

Add OTC desk institutional website with narrative scroll experience#1
userresg17 wants to merge 14 commits into
mainfrom
claude/otc-crypto-site-planning-ctymal

Conversation

@userresg17

@userresg17 userresg17 commented Jul 26, 2026

Copy link
Copy Markdown
Owner

Summary

This PR introduces a complete institutional website for a cryptocurrency OTC (over-the-counter) trading desk. The site features a cinematic, scroll-driven narrative experience with 9 scenes that tell the story of private crypto trading, built with modern web technologies including Three.js for 3D graphics, GSAP for animations, and Vite for bundling.

Key Changes

Core Architecture

  • Layout system (layout.css): Fixed stage with persistent 3D blob and world crossfades, scene-based content flow with smooth scroll integration
  • Scene orchestration (scenes.js): 9-scene narrative structure with scroll-driven progress normalization, world opacity mapping, price digit locking animation, and blob 3D state management
  • 3D blob character (blob3d.js): Real-time Three.js iridescent glass blob with morphing geometry, physically-based materials, and dynamic lighting that responds to scroll progress

Interactive Features

  • Mouse-driven video scrubbing (interact.js): Horizontal mouse movement controls playback speed of background videos and 3D blob, creating an invisible scrub interface
  • Smooth scrolling (smooth-scroll.js): GSAP ScrollSmoother integration for fluid scroll experience with parallax effects
  • Custom cursor (cursor.js): Spring-physics cursor with motion.dev, scales on hover over interactive elements
  • Magnetic buttons (magnetic.js): Interactive buttons attracted to pointer with spring physics

Visual & Content

  • Bilingual i18n (i18n.js, pt.json, en.json): Portuguese (default) and English language support with localStorage persistence
  • Noise rain effect (noise.js): Canvas-based animated price ticker with real CoinGecko data fallback for scene 1
  • Component library (components.css): Buttons, preloader, cursor, asset transitions with iridescent gradient animations
  • Base design tokens (base.css): Dark theme (near-black background), iridescent color palette (cyan→violet→magenta→amber), typography system with variable fonts

HTML Structure

  • Single-page layout (index.html): 9 narrative scenes with persistent HUD, journey progress tracker, FAQ section, and dossier content
  • Asset system (assets.js): Automatic detection and swap of real video/image assets from public/assets/ directory

Build & Config

  • Vite setup (vite.config.js): Module bundling with relative base path for flexible deployment
  • Package dependencies: GSAP (animations), Three.js (3D), motion.dev (spring physics), Lenis (smooth scroll), anime.js (SVG animations), fontsource (self-hosted fonts)

Notable Implementation Details

  1. Narrative progress normalization: Scroll position is converted to uniform "scene space" (0–1 divided into 9 equal segments) independent of actual pin heights, enabling consistent world crossfades and blob state transitions across variable scene lengths

  2. Blob 3D state machine: The character morphs through 8 distinct emotional/physical states (distant → hidden → approaching → dominant → drifting → collapsed → reborn → peaceful) driven by normalized scroll progress with smooth interpolation

  3. Iridescent visual language: Consistent use of thin-film interference gradients (cyan→violet→magenta→amber) across UI elements, buttons, and animations to reinforce the "glass blob" aesthetic

  4. Reduced motion support: Full graceful degradation for prefers-reduced-motion users with static reveals and disabled animations

  5. Mobile-first responsive design: Separate video assets for mobile (9:16 vertical blob) vs desktop (1:1 circular blob), touch-friendly cursor hiding, and adaptive typography with clamp()

  6. Asset-agnostic architecture: Placeholder system allows designers to drop Sora-generated videos and Nano Banana images into public/assets/ without code changes; site auto-detects and swaps them in

https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN

claude added 12 commits July 26, 2026 15:15
@claude
feat(site-otc): one-page premium para mesa OTC de criptoativos
e4b3285 
Site institucional bilíngue (PT/EN) sem marca, dark chrome + iridescente:
- GSAP: ScrollSmoother (smooth scroll), ScrollTrigger (pin horizontal,
  reveals, contadores), SplitText (manifesto palavra a palavra)
- Three.js: blob de vidro iridescente 3D em tempo real no hero
  (transmission + iridescence), com watchdog de FPS e fallback CSS
- anime.js: ícones SVG desenhados traço a traço na seção segurança
- motion.dev: física de mola no cursor, botões magnéticos e tilt dos cards
- Ticker de preços via CoinGecko com fallback estático
- Preloader, i18n com persistência, responsivo, prefers-reduced-motion
- ASSETS.md com prompts prontos (Sora/Nano Banana); placeholders inclusos
  que são substituídos automaticamente ao soltar os arquivos finais

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
feat(site-otc): experiência narrativa 'A operação invisível' em 9 cenas
5d0a06a 
Redesign completo: de landing seccionada para scrollytelling contínuo,
com mobile coreografado à parte (não é desktop reduzido):
- 9 cenas dirigidas por scroll: abertura, ruído do mercado (chuva de
  preços em canvas), a porta, a mesa, preço que trava dígito a dígito,
  execução (colapso em linha + flash), liquidação T+0 (amanhecer),
  quem opera, contato — dossiê operacional estilo terminal no fim
- Palco fixo com 'mundos' em crossfade pelo scroll (ref. QClay/Titan):
  partículas → caustics → vórtice dourado → final; interface flutua parada
- Blob 3D (Three.js) como personagem que atravessa a jornada inteira:
  longe → dominante → colapsa na execução → renasce dourado → repousa;
  progresso normalizado em espaço de cenas (1/9 por cena, pins inclusos)
- Mobile próprio: vídeo vertical 9:16 como palco, curva de opacidade
  própria, pins mais curtos via gsap.matchMedia, 3D desligado
- Régua lateral com marcador deslizante + número da cena; hero cinema
  com headline central empilhada e CTA pill
- Assets reais do cliente integrados (blob, shard, torus, esfera, cubo,
  partículas, vórtice, caustics) com fallback automático p/ placeholders

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
feat(site-otc): scrub invisível de vídeo pelo mouse + PT-BR como líng…
c46d106 
…ua principal

- interact.js: o movimento horizontal do mouse acelera, freia e REVERTE
  o vídeo de fundo visível — sem botão, sem barra, pura sensação de
  estar movendo o mundo. Mouse parado = loop nativo; gesto = tempo
  manual com mola; soltou = retoma o loop de onde parou
- Blob 3D entra no mesmo relógio 'warpado' (morph e rotação respondem
  à velocidade do mouse)
- Vídeos desktop reencodados com keyframes densos (g=5) para seek
  suave nos dois sentidos
- i18n: PT-BR sempre como idioma padrão; EN apenas por escolha no
  toggle (persistida)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
chore(site-otc): deploy no Fly.io via GitHub Actions + isola subproje…
7c4bd07 
…to do lint raiz

- Dockerfile multi-stage (node build → nginx) + nginx.conf com cache/gzip
- fly.toml: app 'operacao-invisivel', região gru, autostop/autostart
- workflow fly-deploy: roda no push da branch do site (precisa do secret
  FLY_API_TOKEN em Settings → Secrets → Actions)
- eslint/prettier do repo raiz ignoram site-otc (subprojeto Vite browser
  com tooling próprio — evita no-undef de globals de browser no CI)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
fix(ci): gitleaks precisa de GITHUB_TOKEN em PRs; fly-deploy pula sem…
7d592eb 
… secret

- gitleaks-action exige GITHUB_TOKEN para escanear pull requests (falhava
  em qualquer PR, não era vazamento)
- fly-deploy: sem FLY_API_TOKEN cadastrado, o job avisa e sai verde em vez
  de quebrar o CI a cada push

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
docs(site-otc): guia de deploy local + script deploy.sh (Fly.io)
e1628cd 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
perf(site-otc): carregamento inteligente + PNGs com alpha real + copy…
d5b8669 
… compliance

Performance (design intacto):
- loader.js: preloader com progresso REAL (fontes + palco + mundo 1 até
  canplaythrough) e prefetch por proximidade — mundos futuros baixam em
  background antes do usuário chegar, nunca recarregam
- Vídeo invisível fica pausado + hidden (zero decode); exatamente 1 mundo
  ativo por cena (verificado); palco não usado no dispositivo é desligado
- blob3d: geometria detail 3, normais a cada 3 morphs, DPR<=1.25, pausa
  com aba oculta; blends de tela cheia removidos (visual idêntico no preto)
- scrub global com caches de DOM e writes só quando o valor muda; scramble
  do preço em ticker próprio (~11fps) apenas com a cena 4 ativa

Acabamento:
- obj-01..04 e security-vault recortados com alpha real (luma→alpha) —
  fim das caixas pretas; hacks de blend/brightness removidos

Copy 100% regular (PT/EN):
- Posicionamento 'execução institucional': proteção contra slippage e
  impacto de mercado, com compliance explícito (KYC/AML, contratos,
  comprovantes, reporte IN 1888) — removidos todos os termos com tom de
  ocultação; dossiê ganha 'a operação é regulada?'

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
fix(site-otc): legibilidade do copy no hero sobre o vídeo
f8dd4f3 
- véu radial escuro atrás do bloco de texto da cena 0 (vinheta sutil)
- título/sub com text-shadow e tom um ponto mais claro
- palco mobile abre em 0.62 de opacidade (antes 0.85) na cena 0

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
feat(site-otc): pin em todas as cenas + camada institucional com dado…
50d6e4d 
…s mock

Ritmo de leitura (pedido do cliente — nada 'voa' mais):
- Cenas 0, 3, 6 e 7 agora também são pinadas com timelines de leitura
  (todas as 8 primeiras cenas seguram até o texto completar); distâncias
  próprias para mobile via matchMedia

Camada institucional (aprovação de design, dados MOCK marcados):
- Seção 'A mesa': statement + 3 pilares sóbrios (mesa dedicada, liquidez
  global, compliance primeiro)
- Seção 'Números': 4 contadores animados + gráfico SVG artesanal de volume
  mensal (série única violeta #9678f2 validada p/ contraste/CVD, grid
  recessivo, crosshair+tooltip, tabela sr-only, label direto no último
  ponto) desenhado no scroll com anime.js
- Formulário DEMO na cena final (nome/e-mail/whatsapp/volume) — não envia:
  mostra aviso 'demonstração de layout'; nota '* dados ilustrativos'
- i18n PT/EN completo para toda a camada nova

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
fix(site-otc): gráfico composto para mobile + inputs iOS-safe
d13d0af 
- Gráfico deixa de ser o desktop encolhido: no mobile ganha viewBox
  próprio (360x250), 6 labels de mês, 3 linhas de grade e fonte 11px
  legível; recompõe ao cruzar o breakpoint (rotação de tela)
- Label direto do último ponto reposicionado acima do ponto (não corta
  mais na borda) nos dois modos
- Inputs/select do formulário com 16px (elimina o zoom automático do
  iOS no focus) e alvos de toque >=46px

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
feat(site-otc): infraestrutura para 3 variantes de desktop + tela de …
9ab838f 
…escolha

- variant-core.js: boot compartilhado (i18n+dict extra, preloader real,
  cursor, física, form demo, gráfico, dossiê) para páginas de variante
- i18n.registerDict, scrub genérico via video[data-scrub], preload
  crítico via data-preload=critical
- vite multipágina (inputs condicionais à existência) + escolher.html
  (seletor interno p/ o cliente comparar galeria/terminal/monolito)
- Mobile atual permanece intocado em /

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
ci: publica site-otc no GitHub Pages a cada push (preview de aprovação)
cb3b80f 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
feat(site-otc): variante A — Galeria (desktop, private bank editorial)
9d679cc 
Primeira das 3 variantes concorrentes de desktop: painéis emoldurados,
livro de ofertas simulado, banda de caustics mascarada, extrato T+0 com
checks desenhados. Build verde; verificação visual e ajustes na sequência
(Terminal e Monólito ainda em construção).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
@claude
feat(site-otc): 3 variantes de desktop do zero (galeria/terminal/mono…
3520ed4 
…lito) + seletor

Desktop refeito em três direções concorrentes para escolha do cliente
(mobile aprovado permanece intocado; variantes redirecionam touch p/ raiz):

- /galeria.html  — A: private bank editorial; assets emoldurados como obras,
  grid fantasma de 12 colunas, livro de ofertas simulado, extrato T+0 com
  checks desenhados a traço
- /terminal.html — B: a mesa como interface; card de cotação mock com relógio
  UTC, dois monitores (mercado aberto × mesa), log de sistema, ticket de
  execução carimbado, pipeline de liquidação
- /monolito.html — C: cinema de luxo; eclipse de vídeo com feather, drama
  tipográfico com dígitos caindo, horizonte de luz, sol dourado da liquidação
- /escolher.html — página interna de comparação
- Núcleo compartilhado (variant-core): preloader real, i18n (+registerDict),
  cursor, física, scrub [data-scrub], form demo, gráfico, dossiê
- Regras duras: zero 3D real-time, zero vídeo fullscreen, zero borda dura
- Fix: fromTo de .line-inner com y:0 (offset px parseado do CSS matava reveal)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MZig6t5nAVrbQckbTz9myN
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@userresg17 @claude