Shaders: WebGPU Komponentlari React, Vue, Svelte, Solid, JavaScript va Framer Uchun

Shaders — bu WebGPU komponentlari to'plami bo'lib, React, Vue, Svelte, Solid, JavaScript va Framer uchun mo'ljallangan. Bu to'plam 200 dan ortiq effektlarni o'z ichiga oladi, ulardan foydalanish uchun faqat komponentlarni qo'shish kerak.

Shaders Nimani Taqdim Etadi?

Shaders, WebGPU komponentlari to'plami bo'lib, turli veb-texnologiyalar uchun mo'ljallangan. Ular gradientlar, shovqinlar, shisha, metall, yorug'lik, buzilishlar, o'tishlar, bulutlar va kursor effektlarini o'z ichiga oladi. Bu effektlarni bir-biriga o'rnatish, aralashtirish yoki maskalash mumkin.

Nima Uchun Shaders?

Shaders, veb-dizaynerlar va dasturchilar uchun mo'ljallangan. Ular dizaynni vizual ravishda yaratish va kodni eksport qilish imkoniyatini beradi. Shaders.com saytida cheksiz canvasda dizayn qilish mumkin va keyin kodni eksport qilish mumkin.

Komponentlar

Shaders, turli veb-framworklar uchun bir xil komponentlarni taqdim etadi. Ular React, Vue, Svelte, Solid va JavaScript uchun mo'ljallangan. Har bir komponentning o'z xususiyatlari va reaktiv yangilanishlari bor.

Dizayn Qilish va Kod Eksport Qilish

Shaders.com saytida dizayn qilish mumkin. Cheksiz canvasda komponentlarni o'rnatish, har bir xususiyatni sozlash va natijani ko'rish mumkin. Dizaynni tugatgandan so'ng, kodni eksport qilish mumkin va uni veb-saytga qo'shish mumkin.

Komandali Interfeys (CLI)

Shaders, komandali interfeys (CLI) orqali kod bazasini dizayn editoriga ulanish imkoniyatini beradi. Bu orqali dizayn qilingan effektlarni kod bazasiga qo'shish mumkin.

• npx shaders connect — kod bazasini Shaders loyihasiga ulanish
• npx shaders install — dizayn qilingan effektlarni kod bazasiga qo'shish
• npx shaders update — dizayn qilingan effektlarni yangilash

Shaders Pro

Shaders Pro, 1000 dan ortiq tayyor effektlarni, 55 dan ortiq veb-sayt bo'limlarini, HD video va rasmlarni, Framer pluginini, cheksiz versiya tarixi va eksklyuziv Discord rolini taqdim etadi.

npm install shaders

O'z Komponentingizni Yaratish

Agar siz o'z komponentingizni yaratmoqchi bo'lsangiz, bu mumkin. Komponent, oddiy obyekt bo'lib, uning nomi, xususiyatlari va har bir pikselda nima chizish kerakligi belgilanadi.

import { Shader, LinearGradient, CursorTrail } from 'shaders/react'

<Shader className="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>

Misol uchun, Halo komponentini yaratish:

<script setup>
import { Shader, LinearGradient, CursorTrail } from 'shaders/vue'
</script>

<template>
  <Shader class="w-full h-64">
    <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
    <CursorTrail />
  </Shader>
</template>

import { defineShader, wgsl, transformColor, transformPosition } from 'shaders/std'

export const Halo = defineShader({
  name: 'Halo',
  props: {
    color: { default: '#ffd166', transform: transformColor },
    center: { default: { x: 0.5, y: 0.5 }, transform: transformPosition },
    radius: { default: 0.6 },
  },
  paint: wgsl`
    let d = length((uv - center) * vec2f(aspect, 1.0)) / radius;
    return vec4f(color.rgb, 1.0 - smoothstep(0.8, 1.0, d));
  `,
})

Litsenziya va Hisobot

Shaders, MIT litsenziyasi asosida taqdim etiladi. Dizayn editori, tayyor effektlar va boshqa platforma xususiyatlari o'z xususiy shartlarini o'z ichiga oladi.

Hisobotlar va pull requestlar qabul qilinadi. Hisobot berishdan oldin hisobot berish qo'llanmasini o'qing va bug fixdan tashqari har qanday ish uchun issue oching.

Shaders © Shader Effects, Inc.

Asl manba: github.com