HYVE v—
SALA 00 Vestíbulo

Arquivo vivo.
Sinal preciso.

Skeu Refinado v1.1.0 9 Salas · 51 componentes

Sala 00 · Vestíbulo

Manifesto material

Este museu existe pra dar matéria a um sistema. Cada sala demonstra uma camada do design — cor, token, estado, decisão. Você não lê o canon: toca, pressiona, ouve. As legendas aparecem como notas de curador.

Nota

O canon vivo continua em DESIGN.md e DESIGN-COMPLETE.md. Aqui, ele se apresenta: cards afundam quando tocados, botões pressionam de fato, LEDs respiram, cavidades têm profundidade. Skeu Refinado é tátil — não decorativo.

Vitrais — 6 cores brand · clica pra abrir
Princípios — 9 canon · clica pra ver mini-demo
0
salas vivas
0
componentes canon
0
anti-patterns
0
princípios
0
cores brand
0
temas
Sala 01 · Tokens

Galeria dos Tokens

Token não é valor abstrato — é matéria. Spacing como bloco. Radius como corte. Tipo como espécime. Motion como deslocamento físico. Cada vitrine isola um ângulo do sistema.

Nota

Toda peça HYVE puxa daqui. Hardcodar valores brutos é cortar o vínculo com o sistema — o componente vira bonito mas amarrado a um único contexto. Tokens deixam o componente theme-aware: ele responde, não decora.

§4.1 SPACING

Grid 4 px

Toda métrica nasce de uma escala única. Dezessete passos do space-px ao space-32. O bloco laranja mostra a proporção real — passe o cursor pra ver crescer.


§4.2 RADIUS · NO-PILL

Cantos lapidados

Skeu Refinado não usa pílula em retângulos — é cápsula dos anos 2010. Em hardware, cantos chanfrados leem premium. Pílula só em LEDs e avatares circulares puros. Rotacione passando o mouse.


§3 TIPOGRAFIA

Geist como única voz

Família única — Geist sans + mono. Mono uppercase com letter-spacing 0.04 a 0.16 em é a assinatura HYVE: parece decal em equipamento físico. Hover desliza o espécime.


§5 MOTION

Tempo como gesto

Cinco durações, cinco curvas. ease-out chega desacelerando — cinematográfico. ease-mech é tátil, sub-frame. Os puks rodam ao vivo na curva canônica.


§6.1 SKEU PRIMITIVES

Camadas da matéria

Profundidade canon não vem de um único drop shadow — vem de seis camadas combinadas. Top-light no topo, contact próximo, near, deep-near, deep-far afastando-se. Cada camada isolada e a soma final.


§7 LED + GLOW

O que acende

Três sizes (sm 6 px / md 8 px / lg 10 px), quatro tiers de glow (off / sm / md / lg). Glow só em estados active / recording / pressed / on — hardware key real só acende quando ativada.


§8 DENSITY · CANON v1.1

Respiro adaptativo

Três modos canon — standard é o default (subiu na v1.1: 32 / 48 / 24 / 1.75). editorial é hero / marketing premium (48 / 64 / 32 / 1.9). dense só em admin / dashboard / tabela. Toque pra ver o preview se reorganizar.

v1.1 shift: o ex-standard (16/12/1.55) era apertado demais — virou dense. O ex-relaxed virou o novo padrão. Adicionado editorial com respiro cinematográfico.

Edição 042 — A barreira não é acesso, é direção.

Humanos definem intenção, contexto e gosto. Agentes executam, aceleram e escalam dentro desse enquadramento. Densidade controla quanto respiro a página tem entre elementos — e o canon HYVE prefere respirar a comprimir.

META · 12 min ago · Editorial

Sala 02 · Estados

Câmara dos Estados

Um botão. Onze estados. Selecione cada um e o componente responde com a microinteração canônica — hover afunda 1 px, active afunda 2 px, selected acende um inset, loading respira em LoadingDots, error ganha ring vermelho. Sem shake — Skeu HYVE não treme.

Nota

Os estados são organizados em três categorias canon — interaction (6), async (3) e content (2). A divisão importa: a11y muda, transitions mudam, e implementação separa overlays de placeholders. O botão central é o mesmo PressButton que vive em @the-hyve-company/ds/components/patterns/skeu.

default Surface base, highlight inset soft, sem transformação. Aguarda input.
Matriz multi-componente — mesmo estado, 5 componentes
PressButton (tactile)
PressButton (soft)
HoverCard
Item · 12 · ago
CavityInput
Toggle
Tabs
Visão Editar Histórico
Sala 03 · Decisão

Decision Theater

Cinco perguntas, uma resposta canônica. Cada decisão ilumina a próxima; o painel à direita revela o componente certo com tier, explicação e import pronto pra colar no código.

Nota

A matriz vive em DESIGN-COMPLETE.md §1. Quase sempre a decisão certa é Tier A (Core). Tier D (Studio) entra em hardware aesthetic — knobs, sliders táteis, MPC pads. Misturar Tier A + Tier D no mesmo painel é anti-pattern.

0 · 5
Browser de componentes — 51 canon do DS
Sala 04 · Archetypes

Archetype Wing

Quatro dioramas em escala miniatura — dashboard, form, empty, content. Cada um respeita o canon completo: section transparent, gradient dividers, mono uppercase em meta, tactile em primárias, cards skeu afundando no toque.

Nota

Archetypes são as 4 superfícies que cobrem 80 % do produto HYVE. Cada padrão é uma worked-example do DESIGN-COMPLETE.md §3: dashboard como app principal (densidade standard), form como entrada de dados (CavityField + helper + error), empty como estado de ausência (icon + headline + CTA), content como consumo editorial (skeleton mirroring layout final).

Tier A · Dashboard
CMS · /editions
Edições
42
Drafts
7
Live
3
Dashboard archetype Standard density
Tier A · Form

Nova edição

3-80 caracteres
slug em uso
Form archetype CavityField + a11y
Tier A · Empty

Nenhuma edição ainda

Comece criando a primeira edição. Drafts ficam salvos automaticamente até a publicação.

Empty archetype EmptyState canon
Tier A · Content

A barreira para trabalhar bem com IA não é acesso. É direção.

Humanos definem intenção, contexto e gosto. Agentes executam, aceleram e escalam dentro desse enquadramento. HYVE fecha o gap entre potencial e capacidade.

Content archetype SkelMirror trailing
Surfaces flutuantes — Modal · Drawer · Toast · Command Palette
Tier B · Modal
Modal · centered + focus trap
Tier B · Drawer
Drawer · right-slide
Tier B · Toast queue
Toast · queue + auto-dismiss
Tier B · Command Palette
Command Palette · ↑↓ navega · ↵ seleciona ⌘ K canon
Settings page — editorial breathing canon §8.1
Pricing 3-tier — toggle monthly / yearly
§3 ARCHETYPES · PRICING

Planos HYVE

Free
0 / mês

Pra explorar o canon HYVE e construir os primeiros experimentos.

  • Acesso ao DS canônico
  • 3 archetypes / mês
  • Comunidade Discord
Studio
R$ 149 / mês

Vitrine editorial. Studio Layer completo, formatos premium, AV pipeline.

  • Tudo do Pro
  • AV pipeline (Remotion)
  • Brand Studio export
  • Suporte dedicado
Editorial longform — TOC sticky + reading progress
Edição 042 2026-05-09 9 min de leitura

A barreira para trabalhar bem com IA não é acesso. É direção.

01 · A barreira não é acesso

Por anos a indústria contou a história do acesso. Quem consegue rodar o modelo, quem tem a chave, quem está na lista. Mas acesso é só a porta — não o trabalho. O trabalho começa quando você precisa decidir o que pedir, em que ordem, e o que fazer com o resultado.

Humanos definem intenção, contexto e gosto. Agentes executam, aceleram e escalam dentro desse enquadramento. A HYVE fecha o gap entre potencial e capacidade — não dando mais acesso, mas mais direção.

02 · O loop entre aprender e fazer

Cursos antigos separavam o estudo da prática. Você aprendia primeiro, executava depois. Não funciona mais. Hoje você aprende fazendo, e refina quando vê o resultado. O loop é contínuo.

Aprender e fazer são o mesmo movimento. Educação não é pré-jogo, execução não é etapa separada.

Quando o ciclo é curto, o repertório acumula. Cada execução vira material pro próximo aprendizado. É assim que profundidade nasce — não de conteúdo, mas de iteração com critério.

03 · Contexto como multiplicador

O que separa um output mediano de um excelente raramente é o modelo. É o contexto: que persona, que precedente, que repertório, que voz. Sem contexto, agentes geram média. Com contexto rico, geram autoria.

Por isso a HYVE investe em memory persistente, perfis, assets, repertório acumulado. Não é uma feature — é a infraestrutura que torna o resto possível.

04 · Soberania como objetivo

Tecnologia que aprofunda dependência é traição lenta. Toda solução HYVE é desenhada pra devolver autonomia — não criar nova. Se você usa um agente HYVE e não fica mais capaz por isso, o agente falhou.

Soberania é o objetivo final. O resto é meio.

Error 404 — when things go wrong
4 0 4

Esta página não existe — ou ainda não foi escrita.

O canon HYVE muda rápido. URLs ficam pra trás. Você pode voltar pro início ou tentar uma das sugestões abaixo.

Talvez você quis dizer /skeu-museum?
Settings page — editorial breathing canon §8.1
Tema
Auto detecta preferência do sistema. Override manual disponível abaixo.
Densidade
Standard é o default canon. Relaxed em editorial, dense só em admin/data-heavy.
Reduzir movimento
Sincroniza com prefers-reduced-motion. Pausa animações longas, mantém transições instantâneas.
Som tátil
Feedback auditivo sub-50 ms em controles Studio. Respeita user mute setting global.
Sala 05 · Studio Lab

Studio Lab

Tier D Factory — máquina na mesa. Push button industrial, slider hardware com tick mark e value bubble, switch vertical com flip, pad grid MPC-style, LCD verde com waveform. Cada componente acende quando você toca, presses afundam de fato, knobs giram. Não é decoração — é tato.

Nota

Tier D existe pra superfícies que precisam de aesthetic synth/MPC — tweak panels, builders, factory tools. Mistura com Tier A no mesmo painel é anti-pattern (§13.5). O canon vem de Teenage Engineering, Elektron Digitakt, Ableton Push: o componente é uma peça física esperando contato. Audio sutil sub-50 ms de latência (P6) é parte da assinatura — desligado aqui pra não invadir o museu.

Push · 4-button cluster
FactoryButtonPush — clica e segura. LED ring acende, botão afunda 3 px, easing mecânico 80 ms. Toggle on/off por click curto. canon §12.
Slider · horizontal hardware
OPACITY 68 %
68 %
BPM 128
128
double-tap canon · reset pra default (§12.4)
Switch · LCD readout
FREQ 128.00 Hz
GRID
DARK
LOOP
Pads · 4×4 MPC grid
FactoryButtonPadGrid — clica num pad, ele acende internamente com glow laranja. Toggle on/off. Cada pad é um preset. Aesthetic MPC/Push canônico.
Knob rack — drag vertical canon §12.0.1
Knobs · rotativo continuous
FactoryKnob — drag vertical sobe/desce valor (sem digitar número). Pointer up = release. Range -135° a +135°. Tick ring guia visual. Audio click sutil a cada 10 unidades canon §12.2.
Transport · Sequencer · Variation
Transport · DAW
BPM 128.0 · 00 : 00 : 00
FactoryPanelTransport — Play/Stop/Rec sub-frame mecânico. BPM tap, elapsed time. LCD display canon §12.
VU · stereo meter
L
−18
R
−18
VU stereo — sage até −12 dB FS, sand entre −12 e −6, error em clipping. Canon §10.3 nunca passa de −6 dB FS em surfaces user-facing.
8-step sequencer + Variation theme picker
Sequencer · 4 tracks × 8 steps
Pattern sequencer — clique pra ligar/desligar steps. Playhead orbita os 8 steps em loop, destacando o atual. Reduced motion pausa o playhead. Aesthetic Pocket Operator / Digitakt.
Variations · 10 themes preset
FactorySidebarVariations — spectrum hue + grid 10 presets. Drag spectrum pra ajuste fino, click preset pra snap.
Spectrum analyzer — FFT bars em real-time
FFT · 24-band spectrum
FREQ 2.4 kHz · PEAK −6 dB
FactoryDisplayLcd em modo spectrum — 24 bars FFT rolando em real-time, gradient laranja → sand → green canon. LCD aesthetic dark-only (§9.1 theme matrix).
Tape deck — tape flow + reels girando
Tape · 1/4" reel-to-reel
PLAY
Tape vintage — reels rotacionando 360° / 2.4s, tape line com ripple de fluxo, status LED + label. Click stop pra pausar reels (canon: reduced-motion respeitado).
Modulation matrix — 8 sources × 8 destinations
Mod matrix · routing 8×8
ModMatrix — clica numa cell pra ativar route entre source (linha) e destination (coluna). Hover sobe 1px. Cells lit ganham glow + dot central com depth proporcional. Pattern OP-1 / Maschine.
Patch bay — input · cables · output
Patch bay · physical jacks
SYNTH OUT
DRUM OUT
FX SEND
MIC IN
MASTER L
MASTER R
REVERB IN
DELAY IN
Patch bay — clique nos jacks pra conectar/desconectar. Cables curvos em SVG bezier, glow laranja ativo. Aesthetic Eurorack / studio rack vintage.
Sala 06 · Anti-pattern Vault

Anti-pattern Vault

Cem vitrines do que é proibido — e por quê. Cada cela mostra o errado e o canon lado a lado, com a placa de curador embaixo. A maioria dos erros é mecânica de defaults: pílula, spinner, gradient neon. O canon é cirúrgico: forma material, comportamento contido.

Nota

Os 100 anti-patterns canon vêm de DESIGN.md §13 (10 categorias §13.A–§13.J) e valem em qualquer surface HYVE. Cards físicos não sobem. Glow só em estado ativo. Pílula só em LED. Easing nunca simétrico. Section transparente por default. Scrollbar minimal e theme-aware. Designer não-técnico não digita valor numérico.

100 antipatterns canon · DESIGN.md v1.2 · 10 categorias §13.A-§13.J
100 · 100
Sala 07 · Motion Atelier

Motion Atelier

Tempo como gesto. Stagger 80 ms canon, durations 150/250/400 ms, curvas assimétricas. Aqui você dispara as choreografias e vê os puks correndo lado a lado em cinco curvas — a diferença entre ease simétrico e ease-out HYVE fica nítida em milisegundos.

Nota

Page entrance canon: header 0 ms, hero 80 ms, sub 160 ms, CTA 240 ms, cards 320 ms + stagger 80 ms cada. Saídas saem acelerando (ease-in 200 ms), reverso da entrada — LIFO em listas. Reduced motion zera tudo automaticamente. Ver DESIGN-COMPLETE.md §8.

§8.2 LIST STAGGER

Stagger 80 ms canon

Seis cards entram em sequência com 80 ms de gap. O primeiro aparece a 320 ms (após header). Saída inversa (LIFO) com ease-in 200 ms.

§5.2 EASING CURVES

Cinco curvas, mesma corrida

Mesma duração, easings diferentes. ease-out é o canon HYVE — chega desacelerando. ease-mech é tátil sub-frame. ease-spring overshoot pra delight pontual. ease simétrico é anti-pattern (§13.7) — incluído pra comparação.

Por quê assimétrico: ease (cubic-bezier 0.25, 0.1, 0.25, 1) é symmetric — lê mecânico, genérico. HYVE primary ease-out (0.16, 1, 0.3, 1) tem arrival forte: o objeto chega quase parando. Para botões/feedback mecânico, ease-mech (0.4, 0, 0.2, 1) é o canon — sub-frame, decisivo.

§8.1 PAGE ENTRANCE

Choreografia de página completa

Topbar instant, hero 80 ms, sub 160 ms, CTA 240 ms, cards 320 ms + stagger. Total ~480 ms entre primeiro e último item. Reduced motion zera tudo. Botão "Disparar" replica a entrada canônica.

0 msTopbar fade-in 150 ms
80 msHero h1 — fade-up 250 ms
160 msSubhead fade-up
240 msCTA tactile fade-up
320 msCards row + stagger 80 ms
560 msFooter fade-in 400 ms slow

§8.5 MODAL · DRAWER

Surfaces flutuantes

Modal entra com fade + scale 0.96 → 1 + translateY 16 → 0 em 250 ms ease-out. Drawer slide horizontal puro 250 ms. Saída acelerando 200 ms ease-in. Backdrop fade simultâneo.

Modal entrance · 250 ms ease-out
Drawer slide · 250 ms ease-out

§5.2 BEZIER EDITOR

Curva interativa

Arraste os handles laranja pra editar a curva. O puk abaixo roda na curva editada em loop. Presets canon HYVE pré-carregados — clique pra alternar.

cubic-bezier(0.16, 1.00, 0.30, 1.00)
Live preview — o puk segue a curva editada. Veja o "swing" do spring (0.34, 1.56) — overshoot pontual, ótimo pra delight micro. Para feedback mecânico de botão, prefira ease-mech.

§8.2 STAGGER VARIANTS

Comparativo 50 / 80 / 120 ms

Mesma lista de 20 items, três staggers diferentes. 50 ms é rápido demais (perde respiro), 120 ms é cinematográfico (premium hero). 80 ms é o canon HYVE — ponto certo entre fluidez e hierarquia.

§5 SPRING PHYSICS

Tension · Friction · Mass

Arraste o bloco laranja pra qualquer canto e solte. Ele volta pro centro com física real — tension puxa, friction freia, mass dá inércia. Ajuste os 3 parâmetros e veja a curva mudar.

Tension 170
Friction 26
Mass 1.0
Trail — a linha laranja transparente mostra o caminho percorrido. Tension alto = volta rápido. Friction baixo = oscila mais. Mass alto = mais inércia.

§7 MICRO-INTERACTIONS

Catálogo de polish

12 microinterações canon HYVE. Cada uma é uma mini-decisão de craft — o que separa interface plana de interface viva. Toque cada uma pra sentir.

Like burst

Click → fill + scale spring + ring burst expanding 600ms.

Save toggle

Soft → tactile com transição 250ms ease-out.

var(--lab-accent)
Copy feedback

Click → tooltip "copiado ✓" sobe 4px + fade out 1.4s.

FRENTE
VERSO
Card flip

3D rotateY 180° spring 600ms. Backface hidden.

REVELADO
Hover reveal

Slide vertical da label inicial, reveal conteúdo embaixo.

Magnetic cursor

Botão segue o cursor dentro de uma zona, sub-pixel ease.

Ripple click

Click → onda circular emana do ponto, fade 600ms.

3
Animated counter

+/− → number rolls vertical 250ms (substituir, não recriar).

Progress → check

Submit → loader → fill 1.4s → check spring 300ms.

CARD LIFT
Card afunda

Hover translateY +1px (canon HYVE: cards afundam, não sobem).

Animated indicator

Indicator desliza 250ms ease-out entre opções.

⋮⋮ Item 01
⋮⋮ Item 02
⋮⋮ Item 03
Drag handle

Grip ⋮⋮ + cursor grab/grabbing semantically correct.

Sala 11 · Hardware

Tweaks Panel · um painel completo que vira componente global.

Sistema canon HYVE de painéis tateáveis — skeu premium tier-2, magnetic snap nos 4 cantos, double-tap reset (§12.4), 4 famílias de SFX × 5 packs distintos. Designers não-técnicos primeiro · input numérico textual é anti-pattern §13.13 · LED do header colapsa pra quadradinho mini.

Como testar

Arraste o painel pelo header — solte e vai magneticamente pro canto mais próximo (Next.js dev tools style). Click no LED da esquerda do header — colapsa pra 56×56 quadradinho com bolinha apagada bem centralizada (hover faz lift). Double-click em slider/knob — reseta pro defaultValue canon §12.4. Mute icon ou tecla M — silencia tudo. 5 packs de áudio (Mech · Tact · Calc · Synth · Pure). Painel respeita o tema da página — troque pelo seletor global do museum.

TRUCHET LAB · CONTROLS
Output
Cols12
Hot27%
Density0.65
Glow
Motion
Tom
50
Peso
70
Ritmo
30
BPM
120
120.0
BPM · TAP TO SET
Audio Pack
Sound familypure
Arraste o painel · solta = magnetic snap · click no LED = colapsa
Sala 09 · Atelier
Sala oculta · descoberta desbloqueada

Atelier

A sala que não documenta — extende. Aqui o canon vira instrumento: o logo se desenha em quatro atos, as cores brand viram timbre, os 3 temas se misturam num único dial, e a fonte Geist se estica ao vivo. Quatro instalações. Nenhuma é referência — todas são experimentos.

Nota

Esta sala não está na nav padrão. Você chegou aqui porque digitou o Konami code (↑↑↓↓←→←→ B A) ou clicou no logo HYVE do topbar. As instalações usam só o canon — Web Audio API sintetiza tons reais, color-mix interpola temas em tempo real, font-variation-settings manipula o Geist Variable. Reduced-motion respeitado em tudo.

Logo Cinema · 4 atos
Pronto
Color Mood Synth · brand colors viram tons
LAST PAD
— Hz
Sequence
Web Audio sintetiza ondas sine + envelope ADSR pra cada cor. Click pad pra hear color. Sequence toca os 16 pads em loop a 128 BPM.
Theme Time Travel · interpolação ao vivo
Dark
Studio
Light
posição 0% · tema dark · interpolação desativada
Variable Geist · live axes
HYVE
Weight 600
Size · px 96
Tracking · em 0.00
Geist Variable via font-variation-settings. Range canon: weight 100→900, size 12→160, tracking −0.05→0.20.