Effekt-Rahmen — layout.effect-frame
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
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 |
|---|---|---|
effect | string: border-beam | grid | dots | glow | none | "border-beam" |
tone | string: primary | accent | success | neutral | "primary" |
spacing | string: none | sm | md | lg | xl | "md" |
speed | string: slow | normal | fast | "normal" |
motion | string: auto | always | "auto" |
Events & Slots
Slot default: akzeptiert ui.*, component.*, section.*, layout.*
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--effect-tone | var(--color-action-primary) |
--effect-duration | 6s |
--effect-border | calc(var(--border-hairline) * 2) |
Genutzte Design-Tokens
border.hairline color.accent color.action.primary color.border.default color.status.success color.surface.default color.text.muted radius.surface size.12 size.3 size.4 size.5 size.8