Layout
HUD viewfinder frame
HUD viewfinder frame: Uma moldura de câmera para qualquer conteúdo, com marcas que se encaixam nos cantos, um código de tempo em movimento, pequenas legendas e uma barra que mostra o progresso.
Como usar HUD viewfinder frame
HUD viewfinder frame usa o formato de prévia “amplo” com o tema “claro/escuro”.
Personalizar a prévia
Estes controles são passados para a demo. Os valores e limites descrevem a prévia; consulte a implementação para conhecer todas as props.
| Controle | Tipo | Valor inicial | Limites da prévia |
|---|---|---|---|
label | text | fb / motion reel | Até 32 caracteres |
code | text | | Até 24 caracteres |
footer | text | easing study, take 3 | Até 32 caracteres |
fps | select | 24 | Opções: 24, 25, 30 |
loopSeconds | number | 12 | De 4 a 60; passo 1 |
accent | color | #FF3A22 | Os metadados não indicam outro limite. |
recording | boolean | true | Os metadados não indicam outro limite. |
crosshair | boolean | false | Os metadados não indicam outro limite. |
Para quais frameworks HUD viewfinder frame está disponível?
HUD viewfinder frame está disponível para React, Vue, Svelte, Astro, HTML. A prévia usa React; as observações sobre o código se referem a index.tsx. Confira as interações na versão escolhida antes de depender delas.
Quais são as dependências de HUD viewfinder frame?
Os metadados React não indicam dependências npm adicionais ao React.
Quais detalhes de acessibilidade aparecem em HUD viewfinder frame?
O código React de HUD viewfinder frame inclui: atributos e manipuladores (aria-hidden). Estas são observações do código. Verifique os nomes acessíveis, a ordem do foco e o comportamento do teclado na página completa.
Como HUD viewfinder frame trata a redução de movimento?
HUD viewfinder frame consulta a preferência de movimento no código React por meio de matchMedia(prefers-reduced-motion). Expressões de index.tsx que dependem da preferência: armed || moving || advancing ? -1 : runtime.focusWait; u: armed && !reduced ? clamp((entrance - i * 0.05) / 0.44) : 1. Confira a implementação completa, os estilos compartilhados e a versão escolhida com a redução de movimento ativada; estas observações não garantem que todas as animações parem.
