Skip to content
Swift

3D and WebGL Templates · v1.0.0

Caustic

WebGL shader distortion driven by scroll.

Rated 4.9 out of 5 based on 31 reviews.470 sold1 variationUpdated September 20, 2026
01 / 04Click to enlarge
Screenshots of the Caustic template: WebGL shader distortion driven by scroll.
WebGLShadersThree.jsScroll

Overview

Caustic renders imagery through a custom GLSL shader and drives the distortion from scroll velocity - move slowly and it ripples, fling the page and it tears. The noise field is Simplex-based, so the texture is organic rather than periodic.

It is the most technically demanding template in the catalogue. The shader source is commented and editable, which is the point: buyers who want a shader site usually want to change the shader.

Best for: Studios and launches where the site itself is meant to be the portfolio piece.

What makes it different

1

Velocity-driven distortion

The displacement responds to how fast you scroll, not just how far.

2

Editable GLSL

Vertex and fragment shaders ship as readable, commented source files.

3

Simplex noise field

Organic, non-repeating distortion rather than a tiling pattern.

4

Smooth scroll integration

Custom smooth-scroll implementation feeding velocity into the uniform.

In the box

  • 1 shader-driven scroll page
  • Three.js + commented GLSL vertex and fragment shaders
  • GSAP 3.15
  • Self-hosted Archivo Expanded
  • Prebuilt dist included

Built with

  • Three.js
  • GLSL
  • GSAP 3.15
  • Parcel

Questions about Caustic

Do I need to know GLSL?

Not to ship it. To change the look meaningfully, yes - though the main uniforms are exposed as plain numbers.

What about devices without WebGL?

It detects support and falls back to the undistorted layout, which still reads as a finished page.

Still unsure? Email us - or read how to choose a template.

Related

You might also consider

Vault template - A perspective grid receding through depth as you scroll.40% off

Vault

$30$18

A perspective grid receding through depth as you scroll.

3D & WebGLRated 4.8 out of 5 from 49 reviews.
Deck template - Cards stack and recede into a three-dimensional deck.50% off

Deck

$30$15

Cards stack and recede into a three-dimensional deck.

3D & WebGLRated 4.7 out of 5 from 42 reviews.
Protean template - Image panels morph between clip-path shapes on scroll.60% off

Protean

$30$12

Image panels morph between clip-path shapes on scroll.

3D & WebGLRated 4.6 out of 5 from 27 reviews.