Animacja z Opus 5.5. Opisz ruch, otwórz HTML, popraw tempo

Najpierw pobawcie się orbitami

Przesuńcie suwak powyżej w prawo. Punkty przyspieszają. Kliknijcie pauzę — zostaje wybrany kadr. Cała ta scena mieści się w jednym pliku HTML, który można pobrać, otworzyć bez internetu i przerobić. Inny kolor, większa orbita, trochę spokojniejsze tempo. Nie trzeba od razu budować całej strony, żeby mieć coś własnego.

To demo przygotowaliśmy redakcyjnie; nie jest zapisem sesji z Opus 5.5. Posłuży nam jako punkt wyjścia do podobnego ćwiczenia. Tym razem zamiast orbit zrobimy animację porządkowania dokumentów. Właśnie ją opisuje prompt niżej, więc nie oczekujcie kopii ciastka.

Co ma się wydarzyć w tych sześciu sekundach?

Wyobraźcie sobie trzy kartki wpadające do pudełka. Chwilę później pojawia się uporządkowana lista i napis „Gotowe”. Taka scena może pokazać działanie automatyzacji dokumentów, zanim ktokolwiek przeczyta opis. Widać, co weszło i co z tego wyszło.

Rozpiszmy te momenty po kolei. Na początek wystarczy sześć sekund, dwa kolory i nieruchoma kamera. Łatwiej wtedy zauważyć kartkę znikającą za wcześnie albo listę, która pojawia się, zanim zdążymy obejrzeć pudełko. Cienie i obroty spokojnie poczekają.

Kod możecie zlecić Claude Opus 5.5, jeśli macie do niego dostęp w swoim narzędziu. Prosimy o animację SVG i CSS, czyli grafikę i ruch zapisane w kodzie strony. Otworzymy ją w przeglądarce; gotowego filmu z tego polecenia nie dostaniemy.

Jeden plik i od razu podgląd

Po co nam pojedynczy HTML? Żeby dało się przejść od odpowiedzi modelu do animacji bez instalowania projektu i bibliotek. Ustalmy też, co zobaczy osoba z włączonym ograniczeniem ruchu w systemie. W naszym ćwiczeniu będzie to gotowa lista dokumentów.

Wklejcie poniższy opis. Przy zapisanym pliku zachowajcie nazwę modelu, którego użyliście. Jeśli w odpowiedzi znajdzie się sam kod, poproście jeszcze o instrukcję zapisania i otwarcia pliku. Pierwsza wersja może wymagać korekty. Zacznijcie od własnej rozpiski: czy kartki, pudełko i lista pojawiają się we właściwej kolejności?

Przygotuj jeden plik index.html z osadzonym SVG i CSS.
Scena: trzy kartki wpadają do pudełka, następnie pojawia się lista trzech pozycji i napis „Gotowe”.
Czas: 6 sekund. Tło kremowe, kształty ciemne, jeden pomarańczowy akcent.
Dodaj przyciski Odtwórz ponownie i Zatrzymaj. Nie korzystaj z zewnętrznych bibliotek.
Przy prefers-reduced-motion pokaż statyczną końcową scenę.
Zadbaj o układ przy szerokości 360 px. Wyjaśnij, gdzie zmienić tekst i czas animacji.

„Pół sekundy dłużej” to już konkret

„Zrób efektowniej” zostawia modelowi mnóstwo miejsca na zgadywanie. Kiedy kartki przelatują za szybko, powiedzcie raczej: „Zatrzymaj je nad pudełkiem o pół sekundy dłużej”. Jeśli napis wyskakuje przed resztą sceny, wskażcie moment jego wejścia. Będzie wiadomo, co porównać w następnej wersji.

Przed zmianą wyglądu zachowajcie kopię. Szkoda dobrego rytmu, jeśli przy okazji nowej palety rozjedzie się ruch. Gdy scena już działa tak, jak chcecie, poproście o zebranie kolorów, odstępów i czasów w jednym miejscu w kodzie. Następny kolor zmienicie wtedy jedną wartością.

A teraz telefon i wyłączony ruch

Obejrzyjcie napisy i przyciski na telefonie, a przez sterowanie przejdźcie też klawiaturą. Potem włączcie w systemie ograniczenie ruchu. Strona powinna pokazać sensowny nieruchomy kadr. MDN opisuje odczyt tej preferencji przez prefers-reduced-motion. Sam pusty karton niewiele powie o uporządkowanych dokumentach, dlatego wybraliśmy gotową listę.

Jeśli bez animacji ginie ważna informacja, dopiszcie zwykły podpis. Do osadzenia na stronie macie już edytowalny HTML. Do mediów społecznościowych potrzebujących MP4 trzeba jeszcze przygotować nagranie albo eksport do tego formatu.