11 lines
878 B
Markdown
11 lines
878 B
Markdown
---
|
|
name: bento-interaction-states
|
|
description: Steuert dynamische und abwechslungsreiche Hover- und Interaktionszustände innerhalb des Bento-Grids, um den Entdeckerdrang zu wecken.
|
|
---
|
|
|
|
# Bento Interaction States Guidelines
|
|
|
|
* **Asymmetrischer Reveal:** Beim Hovern über eine Bento-Card verschieben sich Bildelemente im Inneren leicht (Parallaxe über CSS `transform: translateY(-5px)`), oder es wird ein versteckter CTA-Pfeil flüssig eingeblendet.
|
|
* **Spotlight-Glow:** Implementierung eines mausfolgenden JavaScript-freien oder minimalen CSS-Glow-Effekts, bei dem der Rand der Card exakt dort aufleuchtet (Sky-Blue), wo der Mauszeiger sich befindet.
|
|
* **Status-Indikatoren:** Jedes Template im Katalog erhält "Live-Tags" (z.B. pulsierende grüne Punkte für "Live-Vorschau aktiv" oder kleine animierte Lade-Icons bei Interaktion), die Hochwertigkeit signalisieren.
|