Layout

HUD viewfinder frame

HUD viewfinder frame: Ein kamerainspirierter Rahmen für beliebige Inhalte mit einrastenden Eckmarken, laufendem Zeitcode, kleinen Beschriftungen und einer Leiste, die den Fortschritt anzeigt.

Every frame on purpose.

Brackets snap in when the frame enters view. Move the pointer to lean them.

HUD viewfinder frame verwenden

HUD viewfinder frame verwendet das Vorschauformat „breit“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`label`	`text`	`fb / motion reel`	Bis zu 32 Zeichen
`code`	`text`		Bis zu 24 Zeichen
`footer`	`text`	`easing study, take 3`	Bis zu 32 Zeichen
`fps`	`select`	`24`	Optionen: 24, 25, 30
`loopSeconds`	`number`	`12`	Von 4 bis 60; Schrittweite 1
`accent`	`color`	`#FF3A22`	Keine weitere Grenze in den Metadaten.
`recording`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`crosshair`	`boolean`	`false`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist HUD viewfinder frame verfügbar?

HUD viewfinder frame ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat HUD viewfinder frame?

Die React-Metadaten nennen keine zusätzlichen npm-Abhängigkeiten neben React.

Welche Details zur Barrierefreiheit sind in HUD viewfinder frame erkennbar?

Der React-Quellcode von HUD viewfinder frame enthält: Attribute und Ereignisbehandler (aria-hidden). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt HUD viewfinder frame reduzierte Bewegung?

HUD viewfinder frame liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). Von der Einstellung abhängige Ausdrücke in index.tsx: armed || moving || advancing ? -1 : runtime.focusWait; u: armed && !reduced ? clamp((entrance - i * 0.05) / 0.44) : 1. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Curved Scroll Wall von Fieldbook aus der Kategorie Layout.

2330Curved Scroll WallLayoutEine horizontal scrollende Wand aus Fotos, die auf einer sanft gekrümmten, gebogenen Ebene gerendert wird und endlos in beide Richtungen scrollt.

Standbild der UI-Komponente Drag split panels von Fieldbook aus der Kategorie Layout.

2342Drag split panelsLayoutDurch dünne ziehbare Griffe unterteilte Bereiche, die die Größe der angrenzenden Bereiche in Echtzeit ändern, in einer Reihe angeordnet oder gestapelt.

Standbild der UI-Komponente Focus scroll list von Fieldbook aus der Kategorie Layout.

2357Focus scroll listLayoutEine scrollbare Warteschlange, deren Zeilen in voller Größe und opacity erscheinen, wenn sie die Mitte der Ansicht erreichen, mit Hover und Tastaturauswahl.

Standbild der UI-Komponente Masked reveal disclosure von Fieldbook aus der Kategorie Layout.

2384Masked reveal disclosureLayoutEine Offenlegung, deren Panel auf seine natürliche Höhe anwächst, während ein weicher Verlaufsrand den Inhalt von oben ins Blickfeld wischt und beim Schließen dann rückwärts läuft.

Standbild der UI-Komponente Masonry flow von Fieldbook aus der Kategorie Layout.

1532Masonry flowLayoutEine Mauerwerkswand, die Kacheln unterschiedlicher Höhe in Säulen packt, jede einzelne anhebt, während sie ins Blickfeld gescrollt wird, und das gesamte Raster neu positioniert, wenn sich die Anzahl der Säulen ändert.

Standbild der UI-Komponente Overlay scroll panel von Fieldbook aus der Kategorie Layout.

2396Overlay scroll panelLayoutEin begrenztes Panel, das die Bildlaufleiste der Plattform verbirgt und eine eigene schlanke Overlay-Spur zeichnet, die in Daumengröße dem Inhalt entspricht.