Skip to content
Godsend

Beautiful shaders.
A feel all your own.

Expressive shader components for React, Svelte, and Vue. Give your next interface a material all its own.

Explore the shaders Read the docs

A different kind of material.
For the tools you already use.

React
Svelte
Vue

The detail that changes everything.

Light that bends. Metal that moves. Images that respond. Explore the collection and find a starting point for something distinctly yours.

Fits right intoyour workflow.

The same effect, written for React, Svelte, and Vue. Familiar props on the outside. Editable shader source on the inside.

Three frameworks. One collection.

<script lang="ts">
	import GrainyMesh from '$lib/components/ui/GrainyMesh.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<GrainyMesh
		class="absolute inset-0"
		speed={0.8}
		color1="#15161D"
	/>

	<div class="relative z-10">Your content</div>
</section>
<script lang="ts">
	import GrainyMesh from '$lib/components/ui/GrainyMesh.svelte';
</script>

<section class="relative h-128 overflow-hidden">
	<GrainyMesh
		class="absolute inset-0"
		speed={0.8}
		color1="#15161D"
	/>

	<div class="relative z-10">Your content</div>
</section>
import { GrainyMesh } from '@/components/ui/GrainyMesh';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<GrainyMesh
				className="absolute inset-0"
				speed={0.8}
				color1="#15161D"
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}
import { GrainyMesh } from '@/components/ui/GrainyMesh';

export function Hero() {
	return (
		<section className="relative h-128 overflow-hidden">
			<GrainyMesh
				className="absolute inset-0"
				speed={0.8}
				color1="#15161D"
			/>

			<div className="relative z-10">Your content</div>
		</section>
	);
}
<script setup lang="ts">
import GrainyMesh from '@/components/ui/GrainyMesh.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<GrainyMesh
			class="absolute inset-0"
			:speed="0.8"
			color1="#15161D"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>
<script setup lang="ts">
import GrainyMesh from '@/components/ui/GrainyMesh.vue';
</script>

<template>
	<section class="relative h-128 overflow-hidden">
		<GrainyMesh
			class="absolute inset-0"
			:speed="0.8"
			color1="#15161D"
		/>

		<div class="relative z-10">Your content</div>
	</section>
</template>

A familiar workflow

Designed for a shadcn registry and your existing component folder.

Source you can shape

Adapt each component to your project, right where you work.

Every detail documented

Explore typed props, framework examples, and live controls in the docs.

Read the integration guide

Under the surface

Good looks. Thoughtful engineering.

An effect belongs to a real interface. Its runtime should know when to draw, when to adapt, and when to stop.

GPU rendering

WebGPU when available, with a WebGL fallback built into the runtime.

Motion with care

Respects reduced-motion preferences. Gives you control over playback.

Only when it's in view

Pauses offscreen and when the browser tab is hidden. Resumes when you return.

Fits your layout

Fills its container, responds to resizing, and cleans up when unmounted.

Control the cost

Tune resolution and pixel density to balance detail with rendering cost.

Native to your framework

Typed props and editable source for React, Svelte, and Vue.

Your workflow

From a first look to your next project.

Explore the live previews, find your settings, and see how the component fits your code.

1

Find your material

Browse backgrounds, image effects, and logo treatments. Every preview is public.

2

Make it your own

Adjust color, texture, and motion in the live controls. See each change as you make it.

3

Explore the integration

Choose your framework and inspect the code examples. Installable releases are on the way.

Read the shader guide

The collection

One collection. Every project.

Editable source for React, Svelte, and Vue. One developer license for unlimited personal and client projects.

At launch · first 100 licenses

Founding Lifetime

Join at the beginning. Keep the collection as it grows.

$99

USD · one payment

  • Lifetime access to the core collection
  • Every future core shader and update
  • No recurring subscription

After the founding offer

Annual

A year of new material, with room to keep creating.

$89

USD · per year

  • 12 months of downloads and updates
  • Locked renewal price while subscribed
  • Cancel renewal at any time

After the founding offer

Lifetime

Make it part of your toolkit. For this project and the next.

$179

USD · one payment

  • Lifetime access to the core collection
  • Every future core shader and update
  • No recurring subscription

Currently in public preview. Purchasing and installation will open with the first release.

A few things to know

Good questions.

A closer look at the collection, the public preview, and how Godsend fits your work.

What is Godsend?

A collection of GPU-rendered effects for websites: animated backgrounds, image treatments, and effects for logos. Each shader has a live preview, adjustable parameters, and documentation for React, Svelte, and Vue.

Can I try the shaders without an account?

Yes. Every published preview and its documentation is public. Open an effect, adjust its controls, and see how it behaves in your browser. You do not need an account to explore.

Do I need to know shader programming?

You can work with familiar component props to change color, motion, and material. The documentation covers each parameter and the layout it needs. The underlying shader source is there for deeper changes.

How will the components fit into my project?

Godsend is designed to deliver editable component source into your project through a shadcn-compatible registry. Components use Pixi.js and the documented framework setup. You can inspect the integration examples now; installation will become available as releases are ready.

How do the effects handle motion and performance?

The runtime prefers WebGPU and falls back to WebGL. Effects respect reduced-motion preferences and pause when offscreen or when the browser tab is hidden. Resolution controls let you balance detail and rendering cost for your layout. Check each effect on the devices you support.

Can I buy or install Godsend yet?

Godsend is currently in public preview. You can explore all published effects, but purchasing and component installation are not available yet. Each component page shows its current availability.

Make something worth looking at.

Find the effect that makes it yours.

Explore the shaders