Nie jest teraz trudno zrobić aplikację czy stronę z AI. Ciężej zrobić aby wyróżniała się od innych apek zrobionych przez AI. Z tego powodu jedną z kategorii na blogu będzie design, w którym będę wrzucał efekty, biblioteki, pakiety, komponenty, elementy, które uznam za ciekawe do umieszczenia na stronie aby dodać jej trochę osobliwego charakteru. Bez przedłużania

Paper Design Shaders

https://youtu.be/CeXBoQ1ljUc

Jest to pakiet, który pozwala dodać w naszej aplikacji wyjątkowe efekty predefiniowanych shaderów, które same w sobie są ciężkie w implementacji, w bardzo prosty sposób i do tego elastyczny.

Instalujemy je w następujący sposób

// React npm i @paper-design/shaders-react // vanilla npm i @paper-design/shaders

Twórcy na ten moment udostępnili prostą wersję strony, którą planują rozszerzyć na której możemy zobaczyć jakie są dostępne shadery i jak można je modyfikować z podglądem. Znajdziesz ją tutaj. Na tej stronie można się pobawić i potem w kodzie u siebie tylko wpisać odpowiednie wartości.

Komponenty nazywają się dokładnie tak jak shadery dlatego aby użyć shadera wave to importujemy go z

import { Waves } from '@paper-design/shaders-react' <Waves />

Każdy z komponentów ma dostępne różne atrybuty, które też najdziesz na stronie powyżej. Potem można je przekazywać bezpośrednio do komponentu.

<GrainGradient colors = ["#13293d", "#2a628f", "#13293d"] colorBack = "#13293d" scale = 1 rotation = 180 />

Możemy też skorzystać z gotowych presetów dla obiektu, których nazwy można znaleźć na samej górze podglądu.

Aby go użyć musimy zaimportować ich wartości i wyciągnać je po nazwie.

// Nazwa to zawsze nazwa shaderu i suffixem Presets import { Waves, wavesPresets } from '@paper-design/shaders-react' // Wyciągamy z listy preset o danej nazwie var waveParams = wavesPresets.find(preset => preset.name === "Groovy")?.params // Możemy dostosować w razie potrzeby waveParams.scale = 0.5 // Wrzucamy preset do komponentu <Waves {...waveParams} />

W ten sposób mamy wprowadzony shader do naszej strony. Drobna uwaga na koniec. Shadery są renderowane po stronie użytkownika dlatego przy słabszym komputerze może dawać u niego efekt jakby trochę się ścinał.