Canvas 2D · Fizyka cząsteczek
Tekst z cząsteczek : interaktywny napis
Tysiące świecących cząsteczek układają się w litery. Poruszaj kursorem, żeby je rozsypać, same wracają na miejsce. Wpisz nazwę swojej firmy, żeby ją zobaczyć.
Ładowanie efektu…
Próbkowanie pikseli
Tekst jest renderowany na ukrytym canvasie, a getImageData odczytuje każdy piksel. Nieprzezroczyste piksele (co 3–4 px) stają się pozycjami docelowymi cząsteczek.
Fizyka sprężyn
Każda cząsteczka dąży do swojej pozycji w literze siłą proporcjonalną do odległości (F = k·Δx). Bezwładność (friction 0.84) daje płynny, organiczny powrót.
Odpychanie od kursora
W promieniu 110 px cząsteczki uciekają od kursora. Siła maleje kwadratowo z odległością, efekt miękki na krawędziach, wyraźny w środku.
Personalizacja
Po wpisaniu nowego tekstu cząsteczki płynnie przegrupowują się w nowy kształt. Nadmiar odpływa pod ekran, brakujące przylatują z góry.
Chcesz taki efekt na swojej stronie?
Efekty cząsteczkowe mogę wbudować w hero, animację logo lub stronę ładowania, efektownie i wydajnie, bez spowalniania reszty strony.