Getting Started with Caustics

How to install and use your first Caustics component. Covers installation, framework integration, and basic configuration.

What is Caustics?

Caustics is a collection of production-ready creative web components — WebGL shader effects, particle systems, scroll animations, and more. Every component ships with:

• Svelte component version
• React component version
• Vanilla JS module
• Full TypeScript types
• Configuration API (colors, speed, density, etc.)
• Usage documentation
• Caustics Commercial License — commercial use included

Quick Start

1. Purchase and Download

After purchase, Lemon Squeezy delivers a zip file containing all framework variants, examples, and documentation.

2. Install

# Extract the purchased zip, then install it as a local dependency
pnpm add ./caustics-shader-gradient

3. Import and Use

Svelte:

<script>
  import ShaderGradient from '@caustics/shader-gradient/svelte';
</script>

<ShaderGradient preset="aurora" />

React:

import { ShaderGradient } from '@caustics/shader-gradient/react';

export function Hero() {
  return <ShaderGradient preset="aurora" />;
}

Vanilla JS:

import { mount } from '@caustics/shader-gradient';

const gradient = mount(document.querySelector('#hero'), { preset: 'aurora' });
// Later: gradient.update({ ... }), gradient.pause(), gradient.destroy()

Next Steps

• Browse the component catalog to see all available effects
• Read the configuration API on each product page
• Check the Field Notes for tutorials and technique deep-dives