SelfieFrame
The selfie frame of consent, visual part only (Figma "Selfie Frame" 191:1728): the camera in a 3:4 frame with the face oval, a live guide line, the hold ring, the Manual capture button and the captured photo.
The capture glow is one soft white rise and fade, never a strobe or a coloured flash, and none at all with reduced motion. The camera and face logic stay in the app's hooks.
<SelfieFrame state="guiding" media={<video ref={videoRef} autoPlay playsInline muted />} guide="Centralize o rosto na moldura" hint="A foto é tirada sozinha. Rosto visível; pode usar lenço ou óculos de grau." />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Selfie Frame
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
| Guiding | Holding | Captured | Manual |
|---|---|---|---|
Centralize o rosto na moldura A foto é tirada sozinha. Rosto visível; pode usar lenço ou óculos de grau. | Perfeito, fique assim… A foto é tirada sozinha. Rosto visível; pode usar lenço ou óculos de grau. | Toque em “Tirar a foto agora” quando estiver pronta Não deu pra tirar sozinha. Rosto visível; pode usar lenço ou óculos de grau. |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| state? | "captured" | "guiding" | "holding" | "manual" | "guiding" | Figma State: Guiding (find the face), Holding (hold still, the ring fills), Captured (the photo), Manual (after 15 s without auto-capture, "Tirar a foto agora" appears). |
| media? | ReactNode | — | The app's camera <video> (live states) or the frozen photo (Captured). It fills the frame; mirror the live video yourself. |
| guide? | string | — | The live guide line on the frame ("Não estou vendo seu rosto"), announced politely. |
| hint? | string | — | The hint under the frame ("Rosto visível; pode usar lenço ou óculos de grau."). A hint, never a block. |
| glow? | boolean | false | One soft glow at the moment of capture. Ignored with reduced motion. |
| captureLabel? | string | — | Manual: brand 48 "Tirar a foto agora". |
| onCapture? | (() => void) | — | |
| retakeLabel? | string | — | Captured: outline 48 "Tirar outra". |
| onRetake? | (() => void) | — | |
| className? | string | — |
AudioPlayer
Playback of a short recording (Figma "Audio Player" 2056:47284): a 44 px brand play/pause button, a decorative waveform and the time as text.
VoiceRecorder
The voice step of consent, visual part only (Figma "Voice Recorder" 191:1857, v2): the phrase first, then Ready (record on tap, listen, an accommodation path), Countdown 3-2-1, Reading (live prompter, "Gravando" with the time, "Terminei de ler") and Recorded (Audio Player, "Continuar", "Gravar de novo").