Meta Pocket: O Guia Definitivo de Engenharia e Criação de Gizmos

Mergulhei a fundo nos testes com o Meta Pocket e analisei o comportamento do ambiente para entender exatamente como criar Gizmos mais precisos.

Com base em engenharia reversa e testes práticos de prompt, mapeei o ecossistema interno do app e desenvolvi um fluxo de trabalho que reduz drasticamente o tempo de compilação e elimina erros comuns de layout e entendimento da LLM do Pocket.

Por baixo do capô: como o Pocket executa os Gizmos

Para otimizar o fluxo de desenvolvimento, primeiro precisamos entender o ambiente de execução (runtime):

• Modelo base. O Pocket opera nativamente com o Muse Spark 1.2, da Meta. É um modelo extremamente eficiente e de baixo custo (cerca de US$ 0,10 por 1M de tokens de entrada e US$ 0,20 por 1M de saída), superando benchmarks de modelos consideravelmente mais caros.
• Runtime. Uma WebView/sandbox executando React com suporte a TypeScript e JavaScript, e os utilitários do Tailwind CSS embutidos globalmente.
• Gráficos. A sandbox usa WebGL 1.0. É detalhe crucial caso você planeje renderizar shaders personalizados ou trabalhar com manipulação direta de contexto gráfico.
• Contexto e saída. A janela de saída por mensagem tem limite de geração. Código muito extenso precisa ser conciso, bem arquitetado ou dividido em módulos, ou trunca no meio.

Arquitetura de módulos, imports e sandbox

A sandbox impõe regras rígidas de segurança e isolamento.

1. Imports permitidos. O único import aceito dentro do ecossistema é o runtime nativo:

import { gizmoRuntime } from '@gizmo/runtime';

2. Globais disponíveis. React, os hooks padrão (useState, useEffect, useRef, useCallback) e os utilitários do Tailwind já estão no escopo global.

3. Export obrigatório. O componente principal precisa sair como default:

export default function App() {
  return <div className="w-full h-full">…</div>;
}

4. Política de bloqueio. Não dá para instalar pacote npm externo por import tradicional nem fazer requisição de rede (fetch, XMLHttpRequest).

A API do @gizmo/runtime

Recurso	Assinatura	Descrição e valores aceitos
Tweaks (editor)	gizmoRuntime.tweaks({...})	Registra controles na barra lateral do editor. Tipos: color, slider (min, max, step), toggle, text, font. Aceita index para ordenar e group para separar em abas.
Uso dos tweaks	const val = tweaks.chave.useState()	Hook reativo: re-renderiza o componente sozinho quando o painel lateral muda.
Vibração tátil	gizmoRuntime.performHaptic(estilo)	Dispara o retorno háptico do aparelho. Aceita exclusivamente 'light', 'medium', 'heavy', 'soft' e 'rigid'.

Persistência, áudio e assets

• Armazenamento. O Pocket não oferece banco em nuvem nem API de storage própria no runtime. Estado, inventário e pontuação vão para o localStorage (getItem / setItem) e só.
• Áudio. Como não há asset de áudio externo, os efeitos sonoros são sintetizados na Web Audio API pura, com AudioContext, OscillatorNode e GainNode.
• Imagens. Para personalização com foto, use input local (<input type="file" accept="image/*">) lido por FileReader.readAsDataURL.

Como contornar os gargalos usando LLMs externas

O Muse Spark 1.2 é eficiente, mas pedir lógica complexa e layout fluido dentro do chat do Pocket costuma render inconsistência de enquadramento, as faixas pretas de letterboxing, ou aquele loop de ajuste em que cada correção quebra outra coisa.

A estratégia que funcionou melhor foi usar uma LLM avançada (Claude, Gemini, ChatGPT) guiada por uma System Prompt especializada, gerar o código final pronto e só colar no Pocket.

A System Prompt

Você escreve Gizmos para o Meta Pocket. Entregue SEMPRE um único arquivo
TypeScript/TSX completo, sem explicação em volta, pronto para colar.

AMBIENTE
- React em WebView, com TypeScript e Tailwind CSS já no escopo global.
- Contexto gráfico: WebGL 1.0. Nada de WebGL 2, nada de `#version 300 es`.

REGRAS DURAS
- O único import permitido é `import { gizmoRuntime } from '@gizmo/runtime'`.
  Nenhum pacote npm, nenhum CDN, nenhum asset remoto.
- Sem `fetch`, sem `XMLHttpRequest`, sem WebSocket. A rede está fechada.
- O componente principal sai como `export default`.
- Persistência só em `localStorage`.
- Som só por Web Audio API (`AudioContext`, `OscillatorNode`, `GainNode`).
- Imagem do usuário só por `<input type="file">` + `FileReader.readAsDataURL`.
- `gizmoRuntime.performHaptic` aceita apenas 'light' | 'medium' | 'heavy'
  | 'soft' | 'rigid'.

LAYOUT
- A tela é um retângulo de celular, e a altura é variável. Preencha os dois
  eixos: nada de proporção fixa, nada de letterboxing.
- Meça o container com ResizeObserver e desenhe a partir da medida, nunca
  a partir de constantes em pixel.
- Respeite as áreas seguras; o topo e o rodapé podem estar cobertos.

CONTROLES
- Exponha em `gizmoRuntime.tweaks({...})` o que faz sentido ajustar sem
  reescrever código: cor, título, e os dois ou três números que mudam a
  sensação do resultado.

SAÍDA
- Código conciso. Se ficar longo demais, corte recurso, não corte o
  fechamento. Resposta truncada não compila.

O comparativo, lado a lado

O mesmo pedido, nos dois caminhos:

Joga aí

O script abaixo saiu do Gemini e foi convertido para rodar na web. É o mesmo jogo sem o @gizmo/runtime e sem o React do Pocket, só HTML, canvas e Web Audio. É o que dá para pôr numa página aberta sem o app no meio.

Está rodando aqui mesmo. Segure o DISPARAR para carregar o propulsor e solte para lançar a moeda.

De onde saiu tudo isso

Nada aqui veio de documentação oficial, porque não existe nenhuma. Essas informações foram arrancadas por prompt injection de dentro do próprio Meta Pocket. É a IA do app descrevendo o ambiente em que ela mesma roda: o nome do modelo, os limites da sandbox, a superfície do @gizmo/runtime.

Conclusão

Entender as restrições da sandbox, o suporte a WebGL 1.0 e os hooks do @gizmo/runtime transforma a experiência de construir Gizmos no Meta Pocket. Ao desacoplar a geração de código com uma LLM externa orientada por regras estritas, você elimina erros de entendimento e ganha velocidade tanto na edição quanto na criação.

À medida que novas APIs e recursos do runtime forem liberados, atualizo este guia com novos benchmarks e novos achados da arquitetura do Pocket.