# HUD viewfinder frame

https://fieldbook.lizardi.mx/fr/components/hud-viewfinder-frame

Catégorie: Mise en page
![Image fixe du composant HUD viewfinder frame de Fieldbook, dans la catégorie Mise en page.](https://fieldbook.lizardi.mx/thumbs/hud-viewfinder-frame.webp)
Preview video: https://ejpqcxcjbiyabxkx.public.blob.vercel-storage.com/previews/hud-viewfinder-frame-e204d0ed6e.mp4 (5 s, silent)

HUD viewfinder frame: Un cadre de type viseur pour tout contenu, avec des repères d’angle qui se mettent en place, un code temporel qui défile, de petites étiquettes et une barre indiquant la progression.

## Frameworks

react, vue, svelte, astro, html

## Contrôles de l’aperçu

Ces réglages sont transmis à la démo. Les valeurs et limites décrivent l’aperçu ; consultez l’implémentation pour connaître l’ensemble des props.

| Nom | Type | Valeur initiale | Options ou contraintes |
| --- | --- | --- | --- |
| label | text | fb / motion reel | Jusqu’à 32 caractères |
| code | text |  | Jusqu’à 24 caractères |
| footer | text | easing study, take 3 | Jusqu’à 32 caractères |
| fps | select | 24 | Options : 24, 25, 30 |
| loopSeconds | number | 12 | De 4 à 60 ; pas de 1 |
| accent | color | #FF3A22 | Aucune autre limite dans les métadonnées. |
| recording | boolean | true | Aucune autre limite dans les métadonnées. |
| crosshair | boolean | false | Aucune autre limite dans les métadonnées. |

## Conseils d’utilisation

HUD viewfinder frame utilise le format d’aperçu « large » avec le thème « clair/sombre ».

### Quels frameworks sont disponibles pour HUD viewfinder frame ?

HUD viewfinder frame est disponible pour React, Vue, Svelte, Astro, HTML. L’aperçu utilise React ; les observations sur le code concernent index.tsx. Vérifiez les interactions dans le portage choisi avant de vous y fier.

### Quelles sont les dépendances de HUD viewfinder frame ?

Les métadonnées React n’indiquent aucune dépendance npm supplémentaire à React.

### Quels détails d’accessibilité sont visibles dans HUD viewfinder frame ?

Le code React de HUD viewfinder frame contient : attributs et gestionnaires (aria-hidden). Il s’agit d’observations du code. Vérifiez les noms accessibles, l’ordre du focus et le comportement au clavier dans la page assemblée.

### Comment HUD viewfinder frame gère-t-il la réduction des animations ?

HUD viewfinder frame lit la préférence de mouvement dans son code React via matchMedia(prefers-reduced-motion). Expressions de index.tsx dépendant de cette préférence: armed \|\| moving \|\| advancing ? -1 : runtime.focusWait; u: armed && !reduced ? clamp((entrance - i \* 0.05) / 0.44) : 1. Vérifiez l’implémentation complète, les styles partagés et le portage choisi avec la réduction des animations activée ; ces observations ne garantissent pas l’arrêt de toutes les animations.

## Installer via MCP

Connectez votre client, appelez get_component pour récupérer l’implémentation, puis get_install_command pour les instructions d’installation. Choisissez un framework proposé, intégrez le code et vérifiez son fonctionnement dans votre application.

```json
{
  "tool": "get_component",
  "arguments": {
    "slug": "hud-viewfinder-frame",
    "framework": "react"
  }
}
```

[Pour les agents](https://fieldbook.lizardi.mx/fr/docs/agents)
[MCP](https://fieldbook.lizardi.mx/api/mcp)

## Composants ouverts similaires

- [Curved Scroll Wall](https://fieldbook.lizardi.mx/fr/components/curved-scroll-wall)
- [Drag split panels](https://fieldbook.lizardi.mx/fr/components/drag-split-panels)
- [Focus scroll list](https://fieldbook.lizardi.mx/fr/components/focus-scroll-list)
- [Masked reveal disclosure](https://fieldbook.lizardi.mx/fr/components/masked-reveal-disclosure)
- [Masonry flow](https://fieldbook.lizardi.mx/fr/components/masonry-flow)
- [Overlay scroll panel](https://fieldbook.lizardi.mx/fr/components/overlay-scroll-panel)