Deine KI‑gebaute Seite liefert wahrscheinlich Animation aus, die niemand abschalten kann.
Verifizierte Motion für KI‑generierte Web‑Apps.
MotionSpec™ ist ein Open‑Core‑Trust‑Layer, der die UI‑Animation in KI‑generierten Web‑Apps prüft und kompiliert — reduced‑motion‑sicher (WCAG 2.2.2 / 2.3.3) und im Performance‑Budget, erzwungen vom Tool, nicht im Prompt erhofft.
Füge eine beliebige URL ein für einen kostenlosen Motion‑Accessibility‑Check — jeder Kandidat mit Fix. Von 196 KI‑gebauten Apps, die wir am 16.07.2026 gemessen haben, liefen 53,9–77,2 % mit einem Loop, den man nicht pausieren kann (WCAG 2.2.2, Level A), und 90,1–100 % ohne reduced‑motion‑Guard.
keine Anmeldung · nichts wird gespeichert
Design‑Partner werden · $29 Report & Pläne · MCP kostenlos testen →
Wir haben 196 KI‑generierte Produktiv‑Apps auf Motion‑Barrierefreiheit gescannt. Die meisten liefern Motion aus, die man nicht abschalten kann.
laufen mit einem Loop ohne Pausier‑Möglichkeit. WCAG 2.2.2 (Pause, Stopp, Ausblenden) · Level A — der eigentliche, tragende Fehler.
liefern Motion ohne reduced‑motion‑Guard. WCAG 2.3.3 — eine Best‑Practice‑Lücke, kein A/AA‑Verstoß.
Median distinkter Motion‑Ursachen pro App — die meisten Seiten haben reichlich zu beheben.
kamen sauber zurück. Nicht alles fällt durch — wir sagen es, wenn eine Seite besteht.
Was genau würden wir auf eurer Seite finden?
Fügt eine beliebige Seite ein. Wir scannen ihre CSS‑Motion statisch gegen WCAG 2.3.3 (reduced‑motion) und WCAG 2.2.2 (Pause/Stopp) und zeigen jeden Kandidaten mit dem Fix. Es ist dieselbe Engine, die wir über den Output eurer Plattform laufen lassen würden — kein Mock.
Direktlink zum Teilen: motionspec.dev/motion-check (Englisch)
Nachweis nötig? Motion‑Report für $29 — wo euer Score unter 196 geprüften KI‑Sites liegt.
Sieh jede Motion‑Schwachstelle, die wir in deinem CSS finden — kostenlos.
Der kostenlose Motion‑Check scannt dein verlinktes CSS gegen WCAG 2.2.2 (Pause, Stop, Hide — Stufe A) und WCAG 2.3.3 und zeigt jede erkannte CSS‑Motion‑Schwachstelle mit dem Fix. Datiert, zitiert und gegen 196 KI‑gebaute Seiten benchmarked? Der $29‑Report ist innerhalb von 14 Tagen erstattbar, ohne Nachfragen.
Wollt ihr sehen, wie die Korrektur wirkt — und die Engine selbst testen?
Zwei Live‑Demos: was eine Reduced‑Motion‑Korrektur für echte Besucher bedeutet — und der offene Validator, der generierte Motion in den Regeln hält.
Vorher → nachher →
Einen „Reduce Motion“‑Schalter umlegen: ungeschützte Animation ignoriert ihn — die geschützte Version wird ruhig. Die Korrektur, sichtbar gemacht.
Freies MCP testen →
Eine MotionSpec einfügen und das Live‑Tool motion_validate aus unserem schlüssellosen MCP laufen lassen — dieselbe Vertrauensgrenze wie im Compiler. Nichts wird gespeichert.
Open Source →
Der MIT‑Kern ist öffentlich auf GitHub — lesen, ausführen oder eigene Prüfung mitbringen. Kein Lock‑in.
Was ist bisher belegt — und was könnt ihr heute prüfen?
Ein Live‑Pilot bisher — kommerzielle Konditionen in Arbeit — plus ein Core, den jeder in fünf Minuten verifizieren kann. Wir sind präzise bei gemessen vs. behauptet.
| Metrik | Vorher | Mit MotionSpec |
|---|---|---|
| Lighthouse Performance | 71 | 90 |
| Largest Contentful Paint | 1.842 ms | 983 ms (−47%) |
| Barrierefreiheit | 92 | 95 |
| Reduced‑motion‑Schutz | keiner | erzwungen |
Erster Pilot‑Einsatz — CHS Computer, Deutschland. Lighthouse, Median aus 5 Läufen, Desktop, eine Kundenseite — keine Garantie; Rohdaten auf Anfrage. CLS verbesserte sich, ist aber noch nicht im grünen Bereich — wir werben nicht mit „alle Core Web Vitals grün“.
npm motionspec v1.2.7 — MIT · 40 Primitive · 295 automatisierte Tests · 0 bekannte Schwachstellen (Stand 2026-08-05) · SBOM · fuzz‑getestet.
Hosted MCP‑Server — freier keyless‑Tier live (motion_catalog + motion_validate auf api.motionspec.dev/mcp); Keyed‑Tiers ergänzen compile/audit/stats mit fail‑closed Per‑Key‑Auth, agenten‑nativ (Model Context Protocol). Setup in zwei Minuten →
Was bekommst du konkret — messbar?
MotionSpec macht aus „Ist meine Motion OK?“ drei Zahlen, die du auf deiner eigenen Seite prüfen kannst.
Probleme auf der typischen Seite — deine siehst du kostenlos in ~10 Sek.
Füge eine beliebige URL ein: die Anzahl der Motion‑Probleme, jedes mit einem Copy‑Paste‑Fix, und dein Rang gegenüber den 196 realen Seiten, die wir gemessen haben. Kein Signup — jetzt sofort auf deiner eigenen Seite prüfbar.
Seiten ohne „Reduce‑Motion“‑Fallback → deine abgedeckt
90,1–100 % der von uns gemessenen Seiten liefern Animation ohne Fallback für Menschen, die an ihrem Gerät „Bewegung reduzieren“ eingestellt haben. MotionSpec gibt jeder Animation diesen ruhigen Fallback — so weist du diese Besucher nicht mehr ab.
leichtere, schnellere Seiten — ein gemessener Pilot
die schwere, dauerlaufende Motion, die wir markieren, ist genau das, was Seiten ruckeln und Akku leeren lässt — sie zu beheben ist zwei‑für‑eins: barrierefreier UND leichter. Erstes echtes Deployment: Hauptinhalt in ~1,0s statt 1,8s, Score 71→90.
Du musst uns kein Wort glauben — Methode und Rohdaten hinter den ersten beiden Zahlen liegen komplett offen, prüf sie selbst nach. Die Speed‑Zahlen stammen aus einem gemessenen Deployment als Beispiel — kein Versprechen.
Was kostet es, weiterzugehen?
MotionSpec hat ein kostenloses Tool und eine kurze Leiter bezahlter Optionen — für den MIT‑Core zahlst du nie.
Kostenloser Motion‑Check
Beliebige URL scannen, alle Fixes bekommen. Keine Anmeldung. Jetzt ausführen →
Motion‑Report
Eine URL, WCAG‑belegt, benchmarked gegen die 196‑Seiten‑Studie. Sofort im Browser abrufbar. Report holen →Innerhalb von 14 Tagen erstattbar
Dev Key
Schlüsselgebundenes MCP + API: kompilieren, auditieren, /certify‑Signatur für MotionSpec‑Spec‑Dokumente. Jederzeit kündbar. Status ansehen →
Agency
- Wöchentliche Re‑Scans
- Diff‑Alerts bei Regressionen
- Ein Live‑Scan‑Badge
- Eine datierte Nachweisdatei pro Domain
- Schlüsselgebundener MCP‑ + API‑Zugang
Business & Plattform
Proof Sprint → Design‑Partner‑Lizenz → OEM / eingebettet. Zum Programm →
Eure Plattform generiert tausende Seiten pro Woche. Warum ist Motion der unzuverlässigste Teil?
LLM‑geschriebener Animations‑Code halluziniert APIs, ignoriert prefers‑reduced‑motion und verschlechtert unbemerkt die Core Web Vitals. Jede Seite mit „Motion‑Slop“ setzt eure Marke aufs Spiel — und es intern zu lösen heißt, eine Motion‑QA‑Schicht zu bauen und zu pflegen, die nicht euer Kerngeschäft ist.
el.style.animation = "spin 0.4s infinite"; /* kein reduced‑motion‑Guard, kein Perf‑Budget */
Und der Druck steigt: unabhängige Audits finden Barrierefreiheits‑Fehler auf rund 95% der Top‑Million‑Startseiten, die Erwartungen an Barrierefreiheit in der EU ziehen an, und KI‑Builder vervielfachen, wie viel Web‑UI generiert wird — die schwächste, am wenigsten überwachte Schicht skaliert am schnellsten.
Wir bauen ein Tool, das das behebt — also haben wir Methode und Rohdaten veröffentlicht. Prüft unsere Arbeit nach. Studie & offenen Datensatz lesen → (englisch)
Neue Begleitstudie — derselbe Scan auf 50 echten WordPress-Seiten: Der Stand der Bewegungs-Barrierefreiheit auf WordPress →
Animation, gegen die eure Nutzer nicht ankämpfen — und die ihr nicht pflegen müsst.
Jede Animation kommt aus einem geprüften, geräte‑getesteten Katalog und wird von Haus aus reduced‑motion‑sicher und im Budget ausgeliefert — konsistent, jedes Mal.
Geprüfte Bausteine
Jede Animation wird aus 40 geprüften, geräte‑getesteten Primitiven zusammengesetzt — nicht zur Generierungszeit improvisiert. Euer Output bleibt in einem bekannt‑guten Set.
Konsistenter, cachebarer Output
Dieselbe Anfrage liefert jedes Mal denselben geprüften Output — vorhersagbar, wiederholbar und im Maßstab sicher cachebar. Nichts wird zur Generierungszeit dem Zufall überlassen.
Barrierefreundlich & im Budget by default
Ein prefers‑reduced‑motion‑Fallback und ein Performance‑Budget werden by default erzwungen — ein Prompt allein kann sie nicht abschalten. Wir sagen „reduced‑motion‑sicher per Konstruktion“ — nie „garantiert barrierefrei“.
Wie verifiziert MotionSpec Motion?
Drei Schritte, jeder heute nachprüfbar — derselbe Ablauf, den die Demos und die Docs zeigen.
Motion als Spec schreiben
Motion wird als JSON-Spec gegen den geprüften Katalog aus 40 geräte-getesteten Primitiven deklariert — komponiert aus einem bekannt-guten Set statt zur Generierungszeit improvisiert. Das schlüssellose Tool motion_validate prüft jede Spec gegen Schema, 40-Primitive-Allow-List und Parameter-Grenzen — fail-closed.
Deterministisch kompilieren
Der Compiler macht aus der Spec deterministischen Code mit prefers-reduced-motion-Fallback und Performance-Budget, beides by default erzwungen — dieselbe Spec liefert jedes Mal denselben geprüften Output.
Ergebnis verifizieren
Checker und Audit verifizieren das Ergebnis — reduced-motion-Verhalten, Performance-Budget und die WCAG-Muster 2.2.2 / 2.3.3 — und zeigen jeden Kandidaten mit Fix.
Selbst ausprobieren: Spec im Playground validieren · kostenloser Motion-Check · MCP verbinden.
Warum Motion abfangen, bevor sie ausgeliefert wird — statt sie später im Report zu markieren?
Die meisten Tools prüfen Motion, nachdem sie existiert — Scanner und Audits, stichprobenartig und beratend. MotionSpec gibt gar keine Motion aus, die ihren reduced‑motion‑Fallback überspringt oder ihr Performance‑Budget sprengt. Der Core ist MIT und öffentlich auf npm, also kein Lock‑in und volle Diligence‑Einsicht ab Tag eins — ihr bezahlt uns dafür, ihn zu betreiben, zu prüfen und mit den Standards aktuell zu halten, und diese betriebene, kontinuierlich geprüfte Schicht ist der Teil, der sich aufsummiert.
Und die üblichen Verdächtigen?
| MotionSpec | Visual-Regression-Tools | Accessibility-Linter & Performance-Audit-Tools | |
|---|---|---|---|
| Was es prüft | Die Motion-Schicht selbst — reduced-motion-Fallbacks und Performance-Budgets | Ungewollte visuelle Änderungen zwischen Builds — Animation frieren die meisten ein oder ignorieren sie | Ganze Seiten gegen allgemeine Barrierefreiheits-Regeln — Motion ist höchstens ein kleiner Teil |
| Wann es läuft | Bevor Motion ausgeliefert wird: erzwungen beim Kompilieren, plus statischer Scan für jede Live-URL | Zwischen Builds, per Screenshot-Vergleich — nachdem die Motion existiert | Nachdem die Seite existiert — stichprobenartig und beratend |
| Was es liefert | Kompilierte, reduced-motion-sichere Motion im Budget — oder jeden Kandidaten mit Fix | Markierte ungewollte visuelle Änderungen | Einen Audit-Report für die ganze Seite |
Ihr könntet es intern bauen — warum also eine Lizenz?
Das Muster ist MIT und öffentlich — die Grundlagen zu klonen sind ein paar Wochen. Wofür ihr euch tatsächlich anmeldet, ist der Für‑immer‑Teil: jede neue Motion‑Klasse handgebaut, getestet und auf Barrierefreundlichkeit geprüft, in einer Schicht, die euer Produkt nie differenziert. Unsere Schätzung: grob 0,5–1 Senior‑Engineer für 3–6 Monate bis zur Parität, plus dauerhafte Wartung. Eine Lizenz kostet einen Bruchteil davon, bleibt neutral über euren Stack und wächst mit dem MCP‑Ökosystem statt mit eurem Release‑Zug.
MotionSpec wird von Kevin Fröba (Fröba Sales Solutions UG, Deutschland) gebaut, mit dedizierter Security‑Engineering. Wir sind bewusst klein und ehrlich dabei: ihr seid nie eingesperrt — Compiler, alle 40 Primitives und der MCP-Server liegen unter MIT öffentlich auf GitHub und npm, ihr könnt sie jederzeit forken und ohne uns weiterbetreiben.
Was davon bist du?
MotionSpec bedient vier Arten von Teams — Entwickler, Agenturen, KI‑Plattformen und EAA‑betroffene Unternehmen — mit derselben geprüften Motion-Engine.
Füge deine URL ein und sieh, ob deine Animationen still die Barrierefreiheit brechen — und kopier den exakten Fix. Kostenlos.
Weise für jede ausgelieferte Seite nach, dass ihre Motion keinen Motion‑Accessibility‑Check reißt — bevor es der Anwalt des Kunden tut.
Sorgt dafür, dass jede von euren Nutzern generierte Seite Motion‑Barrierefreiheit von Haus aus besteht — ohne dass euer Team zu Motion‑a11y‑Experten werden muss.
Bekommt belastbare, WCAG‑belegte Nachweise, dass die Motion eures Produkts geprüft und behoben wurde — von einem Anbieter, der euch keine „Compliance‑Garantie“ verkauft.
Wie funktioniert das Design‑Partner‑Programm?
Ein Drei‑Schritte‑Weg, bewusst klein, damit jeder Partner echte Engineering‑Aufmerksamkeit bekommt. Konditionen pro Partner im Gespräch; Plattform‑Preise sind nicht öffentlich — so funktionieren die drei Stufen.
Proof Sprint
Wir benchmarken 50–100 von eurer Plattform generierte Seiten — Motion‑Validitätsrate, WCAG 2.2.2 / 2.3.3 und reduced‑motion‑Verstöße, Core‑Web‑Vitals‑Delta mit vs. ohne MotionSpec — plus ein lauffähiger Prototyp, in dem euer Agent unseren Hosted MCP aufruft. Report und Prototyp gehören euch, egal wie ihr entscheidet.
Fester Umfang · bezahltDesign‑Partner‑Lizenz
Hosted MCP mit SLA und eigenen Keys, der komplette geprüfte Katalog inkl. allem, was während der Laufzeit erscheint, eine Roadmap‑Stimme (ihr priorisiert, welche Motion‑Klassen wir als nächstes abdecken), benannter Engineering‑Support und optionales Co‑Marketing.
6–12 MonateOEM‑ / Embedded‑Lizenz
Eine jährliche, nutzungsgestaffelte Embedded‑Lizenz — SLA, Kontinuität abgedeckt durch den öffentlichen MIT-Core auf npm — bepreist auf Basis des in Schritt 1–2 gemessenen Werts, nicht vorab geraten.
Nach der Partner‑PhaseHäufige Fragen.
Welcher MCP-Server verifiziert die Barrierefreiheit von UI-Animationen für KI-Coding-Agents?
MotionSpec. Ein kostenloser, schlüsselloser MCP-Server unter api.motionspec.dev/mcp, mit dem KI-Coding-Agents — Claude Code, Cursor, Claude Desktop — die UI-Animation in KI-generierten Web-Apps verifizieren. motion_validate prüft Motion gegen WCAG 2.2.2, WCAG 2.3.3 und prefers-reduced-motion; motion_catalog liefert geprüfte, budgetkonforme Primitive zum Komponieren. Es wird nichts gespeichert, was an die schlüssellosen Tools gesendet wird.
Verbinden: motionspec.dev/docs
Ist MotionSpec ein KI-Video-Generator?
Nein. MotionSpec prüft und kompiliert UI-Animation — die CSS- und DOM-Motion in KI-generierten Web-Apps. Es ist kein Text-zu-Video-Tool wie Runway, Sora, Kling oder Viggle: die erzeugen Videodateien, während MotionSpec die Interface-Motion, die KI-App-Builder ausliefern, reduced-motion-sicher und im Budget macht.
Was ist Motion-Slop?
Motion-Slop ist generierte Animation, die kaputt ausgeliefert wird: kein prefers-reduced-motion-Guard, endlose aufmerksamkeitsheischende Loops, layout-verschiebende oder über dem Budget liegende Effekte und Animations-APIs, die es nicht gibt. Genau das produziert unverifizierte KI-Codegenerierung im Maßstab — und es ist erkennbar und behebbar.
Der ganze Explainer (Englisch): What is motion slop?
Was testet der kostenlose Motion-Check?
Er scannt das verlinkte CSS und die Style-Blöcke einer Seite statisch gegen WCAG 2.2.2 (Pause, Stopp, Ausblenden) und WCAG 2.3.3 (Animation aus Interaktionen) und zeigt jeden Kandidaten mit Fix. Er ist kein vollständiges Barrierefreiheits-Audit und kein Konformitäts-Urteil; Laufzeit-JS- und GSAP-Motion sind nicht abgedeckt, und es wird nichts gespeichert.
Direkt ausführen: motionspec.dev/motion-check · Schritt für Schritt (Englisch): How to verify web motion accessibility
Worin unterscheidet sich MotionSpec von Visual-Regression-QA oder Accessibility-Checkern?
Visual-Regression-Tools vergleichen Screenshots zwischen Builds — Animation frieren die meisten dafür ein oder ignorieren sie. Allgemeine Accessibility-Checker prüfen ganze Seiten, Motion ist dort höchstens ein kleiner Teil. MotionSpec ist für die Motion-Schicht selbst gebaut: es verifiziert Animation gegen Reduced-Motion- und Performance-Regeln, und der Compiler gibt keine Motion aus, die sie überspringt.
Macht MotionSpec meine Seite EAA- oder WCAG-konform?
Nein, und das behaupten wir auch nicht. MotionSpec erzwingt einen reduced-motion-Fallback und ein Performance-Budget für die Motion, die es kompiliert, und der kostenlose Check verifiziert zwei konkrete WCAG-Kriterien — das ist der ehrliche Umfang. Gesamt-Konformität hängt von der ganzen Seite und eurer rechtlichen Situation ab.
Was wir behaupten — und was nicht.
MotionSpec prüft und kompiliert UI-Animation in KI-generierten Web-Apps — es generiert keine KI-Videos. Und kein MotionSpec‑Plan macht eure Seite „EAA‑konform“, „WCAG‑konform“ oder „garantiert barrierefrei“ — kein Tool kann das versprechen, und wir tun es nicht.
Was wir tun: einen reduced‑motion‑Fallback und ein Performance‑Budget für die Motion erzwingen, die wir kompilieren, und zwei konkrete WCAG‑Kriterien (2.2.2 und 2.3.3) prüfen — mit Datum und Umfang auf jedem Report benannt. Laufzeit‑JS/GSAP‑Motion wird als nicht auditiert markiert. Braucht ihr ein vollständiges Barrierefreiheits‑Audit? Beauftragt eine Fachperson — wir koexistieren gern mit ihren Ergebnissen.
Umfang & Einschränkungen
Zur Einordnung: MotionSpec prüft und kompiliert UI-Animation in KI-generierten Web-Apps — es generiert keine KI-Videos.
Statischer Scan von verlinktem CSS + <style> only. Kein vollständiges Barrierefreiheits‑Audit, kein Konformitäts‑Urteil; Laufzeit‑JS/GSAP‑Motion ist nicht abgedeckt. Es wird nichts gespeichert. Findings werden nach Ursache gruppiert; der Score (v2) gewichtet unterschiedliche Ursachen — logarithmisch gedämpft nach Vorkommen — nicht die rohe Anzahl.
Eine Erkennungs‑Prüfung — wir finden und zeigen die Probleme; wir versprechen nicht, deine Seite konform zu machen.
Wenn ihr Web‑UI im Maßstab generiert, lohnt es sich, die Motion‑Schicht richtig zu machen.
Sagt uns, welche Plattform ihr baut, und wir umreißen einen Proof Sprint auf eurem eigenen generierten Output.