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
• Commercial license (MIT)

Quick Start

1. Purchase and Download

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

2. Install

# If using the npm package (open source limited version)
npm install @caustics/shader-gradient

# If using the full purchased version, extract the zip and install locally
npm install ./caustics-shader-gradient

3. Import and Use

Svelte:

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

<ShaderGradient preset="aurora" />

React:

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

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

Vanilla JS:

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

const gradient = new ShaderGradient('#hero', { preset: 'aurora' });

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