Warum sind scroll-carousel und scroll-sheet so klein, und warum ist das wichtig?
Jedes Kilobyte JavaScript muss geladen, entpackt und ausgeführt werden, bevor eine Seite auf Eingaben reagiert. Auf einem Mittelklasse-Smartphone im Mobilfunknetz spürt man das. Gemessen gebündelt, minifiziert und mit gzip: scroll-carousel braucht 3,4 kB, Swiper mit Pfeilen und Punkten 23,9 kB, der Kern von Embla 7,4 kB. scroll-sheet braucht mit seiner React-Komponente 3,7 kB, Vaul, die Grundlage des Drawers von shadcn/ui, 21,4 kB. Weniger Code heißt auch weniger, das brechen kann.
Wie kommen sie mit so wenig Code aus?
Der Browser erledigt die Arbeit. scroll-carousel und scroll-sheet bauen auf natives Scrollen mit CSS Scroll Snap: Wischen, Schwung und Einrasten fühlen sich an wie im Betriebssystem, weil sie von dort kommen. scroll-sheet nutzt dazu das native Dialog-Element, das über allem liegt und die Seite dahinter sperrt. Es gibt keine Animationsbibliothek, keine eigene Gestenerkennung und keine Abhängigkeiten.
Funktioniert das ohne JavaScript?
Ja. Eine Reihe von scroll-carousel steht und lässt sich wischen, bevor ein Skript geladen ist. Ein scroll-sheet öffnet und schließt über HTML-Befehle, auch mit Escape. Das Skript ergänzt, was HTML und CSS allein nicht können: Pfeile und Punkte, Wegwischen, Rastpunkte, die Rückkehr des Fokus.
Worin unterscheidet sich scroll-sheet vom Drawer von shadcn/ui?
Der Drawer von shadcn/ui beruht auf Vaul, das das Sheet per JavaScript verschiebt. Bei scroll-sheet ist Ziehen gewöhnliches Scrollen, die Seite dahinter bleibt, wo sie war, und das Sheet öffnet schon vor der Hydration. Für shadcn/ui gibt es eine eigene Komponente und sieben fertige Blöcke, und eine Anleitung zeigt, was beim Umstieg wegfallen kann.
Und scroll-carousel im Vergleich zu Swiper?
Swiper verschiebt die Folien mit Transformationen und rechnet Gesten selbst nach. scroll-carousel lässt den Browser scrollen und ergänzt nur die Bedienelemente. Eine eigene Seite stellt die üblichen Swiper-Optionen denen von scroll-carousel gegenüber, mit fünf typischen Mustern aus Onlineshops.
Welche Browser und Frameworks unterstützen scroll-carousel und scroll-sheet?
Aktuelle Versionen von Chrome, Firefox und Safari, auch auf iOS. Jede Änderung wird automatisch in allen drei Browser-Engines getestet. Fertige Komponenten gibt es für React, Preact und Astro, dazu den Kern für jede andere Umgebung. Mit Tailwind CSS lassen sich die Stylesheets in eine Ebene legen und mit Utilities überschreiben.
Können KI-Assistenten damit arbeiten?
Dafür ist gesorgt. scroll-carousel und scroll-sheet bringen je eine Anleitung für Coding-Agenten mit (AGENTS.md), mit Regeln, Rezepten und den Stellen, die absichtlich anders sind als gewohnt. Dieselbe Anleitung liegt als llms.txt neben der Doku, etwa unter nordwerk.studio/oss/scroll-sheet/llms.txt.
Warum veröffentlichen Sie das, und darf ich es kommerziell nutzen?
Die Pakete entstehen bei der Arbeit an Kundenseiten und an unseren eigenen Produkten und laufen dort im Einsatz. Deshalb pflegen wir sie weiter. Sie stehen unter der MIT-Lizenz und sind frei nutzbar, auch in kommerziellen Projekten.