Animation

Focus Lens

Focus Lens: Eine umrissene Form, die überall weich und unscharf bleibt, außer in einem kleinen Kreis, der dem Zeiger folgt und dort scharf einrastet.

Focus Lens verwenden

Focus Lens verwendet das Vorschauformat „Karte“ 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
`shape`	`select`	`roundedSquare`	Optionen: roundedSquare, disc, ring, triangle
`lensSize`	`number`	`0.3`	Von 0.1 bis 0.8; Schrittweite 0.05
`lensSoftness`	`number`	`0.5`	Von 0 bis 1; Schrittweite 0.05
`strokeWeight`	`number`	`2`	Von 1 bis 8; Schrittweite 0.5
`accent`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Focus Lens verfügbar?

Focus Lens 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 Focus Lens?

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

Welche Details zur Barrierefreiheit sind in Focus Lens erkennbar?

Der React-Quellcode von Focus Lens 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 Focus Lens reduzierte Bewegung?

Focus Lens liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). 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 Gooey blob field von Fieldbook aus der Kategorie Animation.

2159Gooey blob fieldAnimationEin Feld aus weichen Klecksen, die gesäte Pfade umkreisen und bei Annäherung miteinander verschmelzen, mit einem zusätzlichen Klecks, der dem Zeiger folgt.

Standbild der UI-Komponente Archetype morph shape von Fieldbook aus der Kategorie Animation.

2917Archetype morph shapeAnimationEine Form verwandelt sich in einen Button, Schalter, Schieberegler, eine Karte und ein Kontrollkästchen, während Liveanzeigen ihre Breite, Höhe, ihren Eckenradius und ihre Bestandteile wiedergeben.

Standbild der UI-Komponente Burst particle emitter von Fieldbook aus der Kategorie Animation.

1672Burst particle emitterAnimationUmhüllt jedes Element und feuert einen gestaffelten Fächer kleiner Flecken von einer ausgewählten Kante ab, beim Klicken, in einer Schleife oder beim ersten Scrollen in die Ansicht.

Standbild der UI-Komponente Composable Reveal von Fieldbook aus der Kategorie Animation.

1676Composable RevealAnimationEin Reveal-Wrapper, dessen Schiebe-, Fade-, Zoom- und Defokussierungsteile jeweils eingeschaltet und zu einem einzigen Federübergang kombiniert werden können.

Standbild der UI-Komponente Crank sea automaton von Fieldbook aus der Kategorie Animation.

2908Crank sea automatonAnimationEin Automat aus Sperrholz, bei dem eine Kurbel eine Reihe von Nocken dreht, die Holzfische über gleitende Wellen heben, mit genug Trägheit, um nach einem Schwung weiterzulaufen.

Standbild der UI-Komponente Directional Slide In von Fieldbook aus der Kategorie Animation.

1684Directional Slide InAnimationEine Enthüllung, die den Inhalt von einer der vier Seiten um einen festgelegten Abstand nach innen schiebt und es einer Feder ermöglicht, den ankommenden Inhalt aufzufangen.