Theme: ← Übersicht Builder Katalog-Verwaltung Tokens

Effekt-Rahmen

Hülle mit dekorativem Hintergrund oder Rand für beliebige Inhalte: laufender Rand-Glanz, Punkt-/Linien-Raster oder Verlaufs-Schein — alle Effekte aus Tokens und mit prefers-reduced-motion-Rückfall

Im Builder nutzen
Layouts v1.0.0 Layout WebsiteAppDesktop layout.effect-frame

Beispiele

Laufender Rand-Glanz (border-beam)

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

PropTypDefaultBuilder-Label
effectstring: border-beam | grid | dots | glow | none"border-beam"Effekt
tonestring: primary | accent | success | neutral"primary"Ton
paddingstring: none | sm | md | lg"md"Innenabstand
speedstring: slow | normal | fast"normal"Tempo (nur border-beam)

* Pflicht-Prop

Events & Slots

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

Genutzte Design-Tokens

border.hairlinecolor.accentcolor.action.primarycolor.border.defaultcolor.status.successcolor.surface.defaultcolor.text.mutedradius.surfacesize.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.