@aperveil/shaders

Aperveil's free WebGPU shaders, ready to use: each one a React component, a Vue component and a custom element.

License

PolyForm Shield 1.0.0 — see the included LICENSE. Commercial and personal interface use is permitted subject to its terms, including the restrictions on competition with the software and the licensor's products using it. Keep the required notices when distributing the code. The runtime and framework adapters are separately licensed under MIT. Pro content is not included in this package or this license grant.

React

npm install @aperveil/shaders @aperveil/react

import { MeshGradient } from "@aperveil/shaders/react";

<MeshGradient style={{ height: 560 }} colorA="#2933b8" spread={0.4} />

Vue

npm install @aperveil/shaders @aperveil/vue

<script setup lang="ts">
import { MeshGradient } from "@aperveil/shaders/vue";
</script>

<template>
  <MeshGradient style="height: 560px" color-a="#2933b8" :spread="0.4" />
</template>

In Nuxt, render it inside <ClientOnly>: WebGPU exists only in the browser.

Custom element

npm install @aperveil/shaders @aperveil/element

import "@aperveil/shaders/element/mesh-gradient";

<aperveil-mesh-gradient style="display: block; height: 560px" color-a="#2933b8"></aperveil-mesh-gradient>

Props

Every prop is optional: leave one out and the shader keeps its own value. Tune a shader on aperveil.com and its editor writes the props for you. Give the surface a size; pass fallback (a slot in Vue and in the element) for browsers without WebGPU, and paused to hold the frame.