Effekt-Rahmen — UI-Kit-Galerie

Beispiele

Laufender Rand-Glanz (border-beam)

Agenten-Fenster

Jeder Effekt nutzt nur Design-Tokens — ein Theme-Wechsel färbt ihn mit.

Rand-Glanz schnell (motion=always ist seit dem Bewegungs-Grundsatz nur noch für data-motion=reduce-Konsumenten relevant)

Agenten-Fenster

Jeder Effekt nutzt nur Design-Tokens — ein Theme-Wechsel färbt ihn mit.

Raster-Hintergrund

Agenten-Fenster

Jeder Effekt nutzt nur Design-Tokens — ein Theme-Wechsel färbt ihn mit.

Punkt-Raster

Agenten-Fenster

Jeder Effekt nutzt nur Design-Tokens — ein Theme-Wechsel färbt ihn mit.

Verlaufs-Schein

Agenten-Fenster

Jeder Effekt nutzt nur Design-Tokens — ein Theme-Wechsel färbt ihn mit.

Eigenschaften

Prop	Typ	Default	Builder-Label
effect	string: border-beam \| grid \| dots \| glow \| none	"border-beam"	Effekt
tone	string: primary \| accent \| success \| neutral	"primary"	Ton
spacing	string: none \| sm \| md \| lg \| xl	"md"	Eigenabstand
speed	string: slow \| normal \| fast	"normal"	Tempo (nur border-beam)
motion	string: auto \| always	"auto"	Bewegung (auto = respektiert System-Einstellung „Animationen reduzieren")

* Pflicht-Prop

Events & Slots

Slot default: akzeptiert ui.*, component.*, section.*, layout.*

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--effect-tone`	`var(--color-action-primary)`
`--effect-duration`	`6s`
`--effect-border`	`calc(var(--border-hairline) * 2)`

Genutzte Design-Tokens

border.hairlinecolor.accentcolor.action.primarycolor.border.defaultcolor.status.successcolor.surface.defaultcolor.text.mutedradius.surfacesize.12size.3size.4size.5size.8

LLM-Notizen

layout.effect-frame

Hülle mit dekorativem Hintergrund oder Rand für beliebige Inhalte (deckt Magic-UIs border-beam, animated-grid-pattern und Glow-Effekte ab).

Wann nutzen

Um Hero-Karten, Feature-Kacheln oder Agenten-Fenster hervorzuheben, ohne den Inhalt anzufassen.
Der Inhalt kommt in den default-Slot — der Rahmen weiß nichts davon.

Wichtige Props

effect: border-beam (laufender Rand-Glanz) · grid · dots · glow · none
tone: primary | accent | success | neutral — der Effekt nimmt die Ton-Farbe aus den Tokens.
padding: none | sm | md | lg, speed: slow | normal | fast (nur border-beam).

Beispiel-Node


{
  "definition": "layout.effect-frame",
  "props": {"effect": "border-beam", "tone": "primary"},
  "slots": {"default": [{"definition": "component.metric-card", "props": {"label": "Umsatz", "value": "48.560 €"}}]}
}

Hinweise

Alle Effekte respektieren prefers-reduced-motion (Animation aus, Optik bleibt).
Keine eigenen Farben: der Glanz ist ein conic-gradient aus dem Ton-Token, Raster/Punkte sind color-mix-Ableitungen.