liquiddesign

Wzorzec 15

Karuzela na scroll-snap

Karuzele z bibliotek walczą z przeglądarką o gesty i dostępność. Natywny overflow z scroll-snap daje przyciąganie do kart, działa z dotykiem, klawiaturą i czytnikami, a maski na krawędziach podpowiadają, że dalej jest więcej.

Realizacje studia na poziomym pasie

Przeciągnij pas, przewiń kółkiem albo użyj strzałek. Przyciąganie do kart robi scroll-snap, a maska wygasza tylko tę krawędź, za którą czeka kolejna karta.

  • Atlas Rebranding

    Branding

  • Panel Heliotrop

    Aplikacja

  • Sklep Novak Studio

    E-commerce

  • Portfolio Wrzos

    Strona

  • Atlas Akademia

    Platforma

  • Novak Magazyn

    Treści

Reguły

  • Przewijanie jest natywne: overflow-x auto plus scroll-snap-type x mandatory.
  • Karty deklarują scroll-snap-align i szerokość w jednostkach względnych.
  • scroll-padding dosuwa karty do krawędzi kontenera, nie ekranu.
  • Pas działa bez JavaScript, skrypt może najwyżej dodać strzałki jako ulepszenie.

Wzorzec w kodzie

Cały mechanizm karuzeli to trzy właściwości przewijania
<ul className="flex snap-x snap-mandatory gap-3 overflow-x-auto scroll-px-4 px-4">
  {cards.map((card) => (
    <li key={card.id} className="w-64 shrink-0 snap-start">
      <Card {...card} />
    </li>
  ))}
</ul>
Maska wygasza tylko tę krawędź, za którą są kolejne karty
@property --edge-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --edge-end   { syntax: "<length>"; inherits: false; initial-value: 0px; }

.carousel {
  --edge: 1.75rem;
  --edge-start: 0px;
  --edge-end: 0px;
  scrollbar-width: none;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--edge-start),
    #000 calc(100% - var(--edge-end)),
    transparent 100%
  );
  animation: reveal-start linear both, reveal-end linear both;
  animation-timeline: scroll(self x), scroll(self x);
  animation-range: 0 var(--edge), calc(100% - var(--edge)) 100%;
}

@keyframes reveal-start { to   { --edge-start: var(--edge); } }
@keyframes reveal-end   { from { --edge-end:   var(--edge); } }

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia
Zaimplementuj w moim projekcie wzorzec „Karuzela na scroll-snap" z metodologii Liquid Design.

Poziomy pas kart przewijany natywnie, z przyciąganiem scroll-snap, bez biblioteki i bez przejmowania gestów.

Wymagania:
- Przewijanie jest natywne: overflow-x auto plus scroll-snap-type x mandatory.
- Karty deklarują scroll-snap-align i szerokość w jednostkach względnych.
- scroll-padding dosuwa karty do krawędzi kontenera, nie ekranu.
- Pas działa bez JavaScript, skrypt może najwyżej dodać strzałki jako ulepszenie.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/karuzela