Exemplos

Seis exemplos implantáveis separadamente exercitam a mesma API pública. Eles compartilham layout, rótulos, controles, padrões e apresentação em CSS puro. Só a integração com o framework muda.

Os domínios dos exemplos são destinos de implantação. DNS e produção são gerenciados separadamente da estrutura desta documentação.

O que cada exemplo demonstra

• os cinco estados e seus perfis de movimento
• controles de tamanho e velocidade
• pausa, elevação e movimento reduzido
• seis presets integrados
• paleta estrita de cinco cores
• alternância clara entre preset e cores personalizadas
• estado nativo do framework controlando <orb-z>
• texto semântico fora do Shadow DOM fechado

A interface idêntica faz parte da demonstração: usar Vue em uma superfície e React em outra não deve mudar o produto ao adotar um componente web.

Execute o workspace de exemplos

Na raiz do repositório:

pnpm install --frozen-lockfile
pnpm build

pnpm build compila as seis aplicações com o pacote publicado. Inicie todos os servidores de desenvolvimento com o comando raiz:

pnpm showcase

Cada exemplo usa a porta da tabela, permitindo executar os seis simultaneamente sem disputar um endereço.

Implante como projetos Vercel separados

Crie um projeto Vercel por exemplo e selecione sua pasta como Root Directory:

sandbox/vanilla
sandbox/react
sandbox/vue
sandbox/svelte
sandbox/angular
sandbox/next

Cada exemplo é privado, tem dependências e configuração próprias e inclui um vercel.json local. São ferramentas e demonstrações do repositório, fora do pacote npm.

Cada exemplo usa uma versão publicada exata como dependência comum. Nunca importe o diretório src/ do pacote nem outro exemplo.

Compare integrações, não designs

Use os exemplos para responder a perguntas do framework:

• Onde registrar no navegador?
• Como vincular atributos booleanos de elementos personalizados?
• Qual configuração do compilador reconhece orb-z?
• Como TypeScript obtém OrbzState e OrbzElement?
• Onde começa a fronteira cliente React/Next?

Veja Receitas por framework para exemplos compactos. Para interfaces com frameworks mistos e implantação independente, veja Orbz em microfrontends.