Wprowadzenie

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

Co to jest Paper 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.

Instalacja

Instalujemy je w następujący sposób

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

// vanilla
npm i @paper-design/shaders

Korzystanie z Paper Shaders Design

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ł.