Osadzanie pętli.
Jedna linijka skryptu i jeden element. Pętla rusza, gdy wjeżdża w kadr, i staje, gdy z niego wyjeżdża. Bez WebGPU albo przy ustawieniu „ogranicz ruch” pokazuje plakat, czyli prawdziwy kadr pętli. W edytorze przycisk </> kod daje gotowy fragment z Twoimi kolorami i klatkami.
<script type="module" src="https://twoja-domena/monoloop/embed.js"></script> <monoloop-petla petla="sinusy"></monoloop-petla>
Paleta i druk
paleta to numer gotowej palety (0–5), a kolory to cztery kolory: tło, 1, 2, 3. druk dokłada ziarno papieru, raster offsetowy, przesunięcie kolorów jak w risografii i winietę.
<monoloop-petla petla="bauhaus" paleta="5" druk="riso:0.8,ziarno:0.6"></monoloop-petla> <monoloop-petla petla="filotaksja" kolory="#f3eee5,#141414,#e8442b,#2c62e8" druk="raster:0.6"></monoloop-petla>
Za kursorem
ruch="kursor": kadr delikatnie przesuwa się i obraca za myszą (wygładzone). Pętla gra dalej.
<monoloop-petla petla="tunel" ruch="kursor"></monoloop-petla>
Sterowana przewijaniem
ruch="przewijanie": faza pętli zależy od położenia elementu na ekranie. Pętla przechodzi jeden okres od wejścia do wyjścia z kadru.
<monoloop-petla petla="gl-korytarz" ruch="przewijanie"></monoloop-petla>
Napis
Pętle z kategorii Typografia biorą napis z atrybutu napis (do 40 znaków).
<monoloop-petla petla="ty-tasma" napis="MONOLOOP 2026"></monoloop-petla>
Wersja z edytora
stan to fragment linku z edytora (przycisk „link” albo „kod”): kolory, parametry, klatki kluczowe, miks z drugą pętlą. Ma pierwszeństwo przed petla.
Atrybuty
| atrybut | wartości | opis |
|---|---|---|
petla | id pętli | np. sinusy, ty-obrys (nazwy w galerii) |
stan | z edytora | pełna wersja z edytora; nadpisuje petla |
paleta | 0–5 | gotowa paleta |
kolory | 4 × #hex | tło, kolor 1, 2, 3 |
okres | sekundy | długość jednej pętli |
tempo | mnożnik | 0.5 = wolniej, 2 = szybciej |
ruch | auto, kursor, przewijanie, stop, plakat | sposób odtwarzania |
druk | ziarno, raster, riso, winieta (0–1) | wykończenie jak z drukarni |
napis | tekst | dla pętli z kategorii Typografia |
alt | tekst | opis dla czytników ekranu |
Rozmiar ustawiasz w CSS: element zajmuje całą szerokość, a proporcje domyślnie wynoszą 16:9 (monoloop-petla { aspect-ratio: 1 } zmienia je na kwadrat). Wszystkie pętle na stronie używają jednego urządzenia GPU.