the okaybabe shaders · 13 GLSL · MIT

Free animated GLSL shaders for React.

Thirteen hand-coded GLSL shaders as React wrappers with zero dependencies. Live WebGL, SSR-safe. Drop one in as a hero or section background.

Install the shaders View on GitHub
live WebGL · poster + MP4 fallback · reduced-motion safe
Halation shader

Drop one in. Ship it.

React wrappers with zero dependencies.

# npm
pnpm add @okaybabe/shaders
// then
import { Halation } from "@okaybabe/shaders";
View on npmGitHub →

How it works.

// one component, any frame
import { Halation } from "@okaybabe/shaders";

<Halation className="absolute inset-0" />
  • SSR-safe: renders a static fallback on the server, starts WebGL after hydration.
  • Auto-pauses off-screen and respects reduced motion.
  • Caps resolution per device; falls back to a poster when WebGL is unavailable.

Questions, answered.

Are the shaders free to use?
Yes. Every shader is MIT licensed, free for personal and commercial projects, with no attribution required.
Do I need three.js or react-three-fiber?
No. The components are zero-dependency React wrappers around raw WebGL. react-three-fiber is optional, via the /r3f subpath, if you are already inside an R3F scene.
Are they SSR-safe with Next.js?
Yes. Each component renders a static fallback on the server and starts WebGL after hydration, so it works in the Next.js App Router and other SSR frameworks.
What is the performance cost?
Each wrapper is about 1KB, renders at a capped resolution, pauses when off-screen, and respects reduced motion. One live shader runs comfortably; for many at once, use the MP4 previews.
Do they respect reduced motion?
Yes. When a visitor prefers reduced motion the shader freezes to a static frame, so there is no animation.
Do they work in Firefox and without a GPU?
Yes. WebGL context loss is handled and resolution is clamped. If WebGL is unavailable, the component falls back to a static poster or CSS gradient.
Can I use one as a hero or section background?
Yes. Drop a component into any positioned container and it fills its parent. Pair it with the poster or MP4 for a guaranteed static fallback.
How do I install a single shader?
Run pnpm add @okaybabe/shaders, then import the one you want, for example import { Halation } from "@okaybabe/shaders". Tree-shaking keeps only what you use.
the okaybabe studio

These shaders ship in real client work.

okaybabe runs your whole online presence: build, host, reputation, and rank. Want this level of craft on your site?

Work with the studio