quiczz/motionsite

Was macht motionsite?

Erzeugt den „Motion-Site“-Look: einen vollflächigen, endlos schleifenden Video-Hero, ein dunkles Farbverlauf-Overlay für lesbaren Text, Glaskarten, animierte Wörter, reaktionsfähige Buttons und Abschnitte, die beim Scrollen erscheinen. Der Unterschied zwischen einer guten und einer langsamen, unzugänglichen Seite liegt in der untenstehenden Checkliste – daher erstellt dieses Skill die Seite und führt dann ein Audit durch.

Nicht verbunden mit motionsites.ai. Dieses Skill enthält keine Drittanbieter-Prompts oder -Assets.

Läuft eigenständig: Wenn Sie nach einer Landing Page, einem Hero oder einer animierten Website fragen, wählt Claude dieses Skill aus, baut aus dem Template und führt das Audit durch, bevor es zurückmeldet.

Ablauf

1. Briefing in einem Durchgang erfassen. Markenname, Einzeiler-Versprechen, wichtigster Call-to-Action, 3 bis 6 Abschnitte (Funktionen, Nachweise, Preise, FAQ), Ton (ruhig, kühn, verspielt, luxuriös) sowie ggf. Logo, Farben oder Schriftarten. Falls der Benutzer nichts angibt, wählen Sie selbst eine Richtung und geben Sie diese an.
2. Stack aus dem Projekt wählen. Bestehendes React/Next/Vue/Svelte-Projekt: Komponenten in diesem Stack erstellen. Leerer Ordner ohne Präferenz: die einzelne Datei templates/site.html verwenden (kein Build-Schritt, durch Doppelklick zu öffnen). Wenn React, Vite, TypeScript und Tailwind gewünscht werden, templates/Hero.tsx und templates/useReveal.ts verwenden.
3. Video ehrlich und leicht halten. Siehe references/assets.md. Verwenden Sie eigenes Filmmaterial des Benutzers oder einen generierten/lizenzierten Clip, verlinken Sie niemals das CDN eines Dritten. Solange kein echtes Filmmaterial existiert, liefern Sie den im Template enthaltenen CSS-animierten Farbverlauf-Hintergrund aus, damit die Seite bereits fertig aussieht. Echtes Filmmaterial wird durch Ausfüllen von drei Datenattributen auf .hero-media aktiviert (data-video-mp4, data-video-webm, data-poster). Web-Versionen mit scripts/make_video_assets.sh erstellen (mp4 + webm + poster).
4. Seite aus dem Template bauen. Diese Teile beibehalten: Hero (Video + Overlay + Überschrift + CTA), eine Glas-Navigationsleiste, 3 bis 6 Inhaltsabschnitte mit Reveal-Animationen, Footer. Die Designrezepte in references/design-recipes.md anwenden (Schriftgrößen-Skala, Abstände, Farbpalette, Glaskarten, Button-Zustände, Timing).
5. Performance- und Barrierefreiheitsregeln einhalten (siehe unten). Sie sind keine optionalen Extras; sie machen die Seite auf einem Telefon nutzbar.
6. Audit durchführen. Führen Sie python3 <skill-dir>/scripts/check_motion.py <site-verzeichnis> aus und beheben Sie jedes FAIL. Dann im Browser betrachten: Desktop- und Telefonbreite, reduzierte Bewegung eingeschaltet, JavaScript für den ersten Paint deaktiviert. Details in references/performance-accessibility.md.
7. Bericht erstatten über die erstellten Dateien, wie das Platzhaltervideo ersetzt wird, was das Audit ergeben hat und eine Sache, die man sich ansehen sollte.

Regeln für die Qualität

• Video: muted, loop, playsinline (ohne diese weigern sich mobile Browser, es in der Seite abzuspielen), poster gesetzt, preload="metadata", keine Tonspur. Die Wiedergabe per Skript nach Prüfung auf reduzierte Bewegung und Datensparmodus starten, wie es das Template tut, damit diese Besucher das Video nie herunterladen. Ziel: 2 bis 4 MB für den Hero-Clip, maximal 1080p, 6 bis 12 Sekunden, die sauber loopbar sind.
• Poster ist der erste Paint. Das Poster-Bild (oder der Farbverlauf) ist das, was der Besucher sieht und was Largest Contentful Paint misst. Geben Sie ihm fetchpriority="high" und genaue Abmessungen.
• Den Besucher respektieren. Bei prefers-reduced-motion: reduce oder eingeschaltetem Datensparmodus wird das Poster anstelle des Videos angezeigt und Animationen ausgeschaltet. Das Video pausieren, wenn es aus dem sichtbaren Bereich gescrollt ist.
• Nur transform und opacity animieren. Niemals top, left, width, height oder margin animieren; diese erzwingen Layout und Ruckeln auf Telefonen.
• Text bleibt über Video lesbar. Ein Farbverlauf-Overlay zwischen Video und Text einfügen, Fließtext mindestens 4,5:1-Kontrast gegen das dunkelste und hellste Bild, und niemals kleinen Text direkt auf bewegtes Filmmaterial setzen.
• Eine Idee pro Abschnitt, eine Bewegung pro Element. Zeitversatz in Schritten von 60 – 100 ms, Dauern 400 – 800 ms, ease-out. Wenn sich alles bewegt, führt nichts das Auge.
• Mobile First. Hero verwendet 100svh, nicht 100vh. Bei 375 px Breite testen; kein horizontaler Scrollbalken. Auf kleinen Bildschirmen einen leichteren oder statischen Hero in Betracht ziehen.
• Echte Inhaltsstruktur. Eine h1, Landmarken (header, main, footer), Buttons sind <button> oder <a>, Links haben Text, Bilder haben alt.
• Eigene Assets. Kein Drittanbieter-CDN für Videos, Schriftarten selbst gehostet oder von einem Schriftanbieter, Lizenzen in assets/README.md dokumentiert.

Dateien

Datei	Zweck
templates/site.html	Komplette einseitige Landing Page: Video-Hero (über Datenattribute aktiviert) mit CSS-Farbverlauf-Fallback, Glas-Navigation, animierte Überschrift, Scroll-Reveal, Karten, CTA, Footer
templates/Hero.tsx, templates/useReveal.ts	React-Versionen des Hero und des Scroll-Reveal-Hooks
references/design-recipes.md	Schrift, Farbe, Abstände, Glas, Buttons, Bewegungs-Timing, Abschnittsmuster
references/performance-accessibility.md	Budgets, reduzierte Bewegung, Video-Verhalten, Testschritte
references/assets.md	Woher das Video kommt, Lizenzierung, Cliperzeugung, Kodierung
scripts/make_video_assets.sh	ffmpeg: Eingabeclip in web mp4, webm, poster konvertieren
scripts/check_motion.py	Audit eines Website-Ordners auf die oben genannten Probleme