Effekte

Die Effects API ermöglicht die Verwaltung von Schatten, Animationen, Hover-Effekten und anderen visuellen Effekten.

Endpunkte-Übersicht

Kategorie	Endpunkt-Basis
Schatten	`/api/v1/design-system/shadows`
Animationen	`/api/v1/design-system/animation-presets`
Hover-Effekte	`/api/v1/design-system/hover-effects`
Übergänge	`/api/v1/design-system/transitions`
Timing-Funktionen	`/api/v1/design-system/timing-functions`
Fokus-Ringe	`/api/v1/design-system/focus-rings`
Backdrop-Effekte	`/api/v1/design-system/backdrop-effects`
Opacity	`/api/v1/design-system/opacity`
Border-Radius	`/api/v1/design-system/border-radius`

Alle Kategorien unterstützen: GET (Liste), POST (Erstellen), GET /{id}, PUT /{id}, DELETE /{id}

Schatten

Das Shadow-Objekt

{
  "id": "shadow_abc123",
  "organizationId": "org_xyz789",
  "name": "md",
  "value": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
  "description": "Mittlerer Schatten für Cards",
  "order": 2
}

Schatten erstellen

{
  "organizationId": "org_xyz789",
  "name": "elevated",
  "layers": [
    { "x": 0, "y": 10, "blur": 15, "spread": -3, "color": "rgba(0,0,0,0.1)" },
    { "x": 0, "y": 4, "blur": 6, "spread": -2, "color": "rgba(0,0,0,0.05)" }
  ]
}

Animationen

Das AnimationPreset-Objekt

{
  "id": "anim_abc123",
  "organizationId": "org_xyz789",
  "name": "fade-in-up",
  "keyframes": {
    "from": { "opacity": 0, "transform": "translateY(20px)" },
    "to": { "opacity": 1, "transform": "translateY(0)" }
  },
  "duration": 0.5,
  "timingFunction": "ease-out",
  "delay": 0,
  "iterationCount": 1,
  "fillMode": "forwards"
}

Animation erstellen

{
  "organizationId": "org_xyz789",
  "name": "bounce",
  "keyframes": {
    "0%, 100%": { "transform": "translateY(0)" },
    "50%": { "transform": "translateY(-10px)" }
  },
  "duration": 0.6,
  "timingFunction": "ease-in-out",
  "iterationCount": "infinite"
}

Hover-Effekte

Das HoverEffect-Objekt

{
  "id": "hover_abc123",
  "organizationId": "org_xyz789",
  "name": "lift",
  "description": "Element hebt sich beim Hover",
  "properties": {
    "transform": "translateY(-4px)",
    "boxShadow": "0 10px 20px rgba(0,0,0,0.15)"
  },
  "transition": {
    "duration": 0.2,
    "timingFunction": "ease-out"
  }
}

Übergänge

Das Transition-Objekt

{
  "id": "trans_abc123",
  "organizationId": "org_xyz789",
  "name": "default",
  "properties": ["all"],
  "duration": 0.15,
  "timingFunction": "ease-in-out",
  "delay": 0
}

Vordefinierte Übergänge

Name	Eigenschaften	Dauer
`none`	–	0s
`fast`	all	0.1s
`default`	all	0.15s
`slow`	all	0.3s
`colors`	color, background-color, border-color	0.15s
`transform`	transform	0.2s

Border-Radius

Das BorderRadius-Objekt

{
  "id": "radius_abc123",
  "organizationId": "org_xyz789",
  "name": "lg",
  "value": 12,
  "description": "Großer Radius für Cards"
}

Standard-Werte

Name	Wert	Verwendung
`none`	0	Keine Rundung
`sm`	4px	Kleine Elemente
`md`	8px	Standard
`lg`	12px	Cards
`xl`	16px	Dialoge
`2xl`	24px	Modals
`full`	9999px	Kreise, Pills

CSS-Export

:root {
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.1s ease-in-out;
  --transition-default: 0.15s ease-in-out;
  --transition-slow: 0.3s ease-in-out;
}

/* Animations */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

Fehler

Code	Beschreibung
`400`	Ungültige Effekt-Konfiguration
`401`	Nicht authentifiziert
`403`	Keine Berechtigung
`404`	Effekt nicht gefunden

Nächste Schritte

Farben – Farbpalette
Design System – Übersicht