Begriffe für Scroll-Animationen als Prompting-Hilfe für KI-Tools

X-PostGabriel6. Oktober 2026Sammlung

Gabriel stellt ein Video als Spickzettel vor, das gängige Fachbegriffe für Scroll-Animationen zeigt. Die Bezeichnungen sollen Nutzern helfen, gewünschte UI-Effekte gegenüber KI-Werkzeugen wie Claude oder Codex präziser zu beschreiben.

Das Wichtigste

Präzise Fachbegriffe für Scroll-Animationen erleichtern das Prompting in KI-Modellen wie Claude und Codex.
Das geteilte Video dient Einsteigern als kompakte Übersicht gebräuchlicher Interaktionsmuster.
Der Autor stellt klar, dass sich die Begriffe auf klassische Web-Interaktionen (wie beispielsweise Sticky-Elemente) und nicht auf 3D-Kamerabewegungen beziehen.
Der sinnvolle Einsatz einzelner Animationen hängt laut Gabriel stark vom jeweiligen Anwendungsfall ab.

Warum das relevant ist

Wer Frontend-Animationen mit KI-Assistenten generiert, scheitert oft an ungenauen Umschreibungen. Etablierte Fachbegriffe führen in LLMs schneller zum gewünschten UI-Code als langatmige Beschreibungen.

Einordnung

Gabriel adressiert ein typisches Problem im KI-gestützten Frontend-Workflow: Komplexe Scroll-Verhalten in natürlicher Sprache exakt zu vermitteln. Das geteilte Video-Glossar demonstriert standardisierte Bezeichnungen für gängige Scroll-Effekte, wodurch Prompts kompakter und die Code-Ergebnisse verlässlicher werden.

Original-Post

Gabriel

@gabriell_lab · 6. Oktober 2026

If you struggle to describe scroll animations in Claude or Codex, these commonly used terms can help. Save this for later. t.co/PuHebRB23w

5736 Likes54 Antworten8679 Lesezeichen224.034 Aufrufe

Auf X ansehen

Weitere Posts im Thread (6)

@LLiepenieks Exactly little cheat sheet for someone just starting
@stevencheng No this has nothing to do with 3D... or maybe I understood your question wrong
@maglev_eth I would say It heavy depends on the use case
@Ubendev Hahaha ofc man🙏🏻 glad it helped
@Fevra_ 🫂
@RealVicHere You mean sticky?

Ausgewählte Antworten (5)

@Ubendev @gabriell_lab Thanks I just told claude move the images right when i scroll down, this certainly helps, lol
@LLiepenieks @gabriell_lab naming the pattern is most of the prompt. 'sticky' beats a paragraph of description
@BDoma @gabriell_lab Take Emil’s reverse animation scale takes or poorly described terms and turns them into the professional ones, it also has taught me a whole bunch of new animation terms t.co/yEafgyTJ9N
@maglev_eth @gabriell_lab Quite annoying when a websites does any of this
@RealVicHere @gabriell_lab Claude Code 特别喜欢用第 2 个滚动动画效果，但是这一个用起来实在是非常的别扭。

Erwähnte Links

Original Post on X by Gabrielx.com/gabriell_lab/status/2107443057805476100

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 7. Oktober 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Inhaltlich ähnlich, ermittelt über die KI-Suche.

X-Post:code w/Guillaume 💻6. Okt. 2026
Prompt Motion: Galerie für Motion-Graphics mit Claude Opus 5.5
Die Website prompt-motion.com sammelt auf X geteilte Motion-Design-Animationen, die mit Claude Opus 5.5 erstellt wurden, zusammen mit den zugehörigen Prompts.
1154Lesezeichen52.664Aufrufe
KI & AI· Sammlung
Link:scrolltide.co8. Okt. 2026
Scrolltide: Scroll-basierte Website-Prompts und UI-Templates
Scrolltide bietet eine Sammlung von Templates, Komponenten und GPU-Shadern zusammen mit optimierten Prompts für KI-Codierungsassistenten wie Claude, Cursor und v0.
KI & AI· Sammlung
Link:scrolltide.co19. Sep. 2026
Scrolltide: Bibliothek für scroll-gestützte Website-Prompts und Templates
Scrolltide ist eine kuratierte Plattform für scroll-basierte Vorlagen, UI-Komponenten und Shader, die speziell als Prompts für KI-Codierungs-Tools wie Claude, Cursor und v0 optimiert sind.
KI & AI· Sammlung
X-Post:Florence15. Okt. 2026
Motion Design mit Claude Opus 5.5: Prompts und Workflows
Florence präsentiert Claude Opus 5.5 als Werkzeug für Motion Design und teilt einen Leitfaden sowie eine PDF-Prompt-Vorlage für studioähnliche Animationen.
1286Lesezeichen80.123Aufrufe
KI & AI· Sammlung
Video
Video:Chase AI23. Juli 2026
Besseres Webdesign mit Claude Code in drei Schritten
Chase AI stellt einen dreistufigen Workflow vor, um bei der Frontend-Entwicklung mit Claude Code generisches 'AI Slop' zu vermeiden. Der Ansatz kombiniert eine eigene Inspirationsbibliothek, spezialisierte Werkzeuge wie Impeccable oder den Higgsfield-MCP und einen visuellen, iterativen Build-Prozess mit interaktiven Tweak-Leisten.
KI & AI· Anleitung
Video
Video:Nate Herk | AI Automation22. Aug. 2026
Scrollcraft: Interaktive, scrollbasierte Websites mit Claude Code erstellen
Nate Herk stellt Scrollcraft vor, einen Skill für Claude Code zum Erstellen individueller, scrollgesteuerter Websites. Der Workflow umfasst einen strukturierten Fragebogen zur Nutzerführung, automatisierte Asset-Generierung über key.ai sowie eine visuelle Selbstüberprüfung während des Build-Prozesses.
KI & AI· Demo