# Halation

> Design animated gradient backgrounds behind glass in your browser

- Page: https://www.whatwemade.app/p/halation
- What it is: Web app, for design
- Made by: [Toufiq Ahmed](https://www.whatwemade.app/u/ar13x3)
- Run it yourself: get the code and run your own copy
- Live: https://ar13x3.github.io/halation
- Code: https://github.com/AR13X3/halation (AGPL-3.0, 74 stars)
- Languages: English
- Tags: webgl, wallpaper, gradient, glass, generative
- Upvotes: 2, comments: 0

## About

Halation is a free, open-source web app for making wallpapers and backgrounds. You pick a flowing color field (silk, mesh gradients, ribbons, threads of light, a fluid you paint with the mouse, or an image), put it behind reeded, frosted, wavy or crystal glass, add surface lighting, screens like halftone or contour lines and a finish, then export stills up to 16-bit PNG or seamless-loop videos.

I'm a designer and kept hunting for background images that were almost right. Making them myself, with every setting live, was faster. Everything runs on the GPU in your browser: no account, no install, and nothing you make is uploaded. It ships with 41 built-in looks, a guided tutorial, saved looks and share links that recreate a look exactly.

The hard parts were the glass and the speed. Light is traced through each pane with refraction, frost, dispersion, Fresnel reflections and caustics, and exports had to match the preview exactly at any size. Shader compile times on Windows were around 20 seconds at first and came down to a few after restructuring the loops. It's plain JavaScript and WebGL 2, with no frameworks, no build step and no dependencies.

## How it was made

- Claude Code, 50% of the work: Wrote code and shaders with me, from my designs and direction
- MCP servers: GitHub

## What you need to run it

- Tools: Node.js (optional)
- Platform: A current browser with WebGL 2

Shared on WhatWeMade: https://www.whatwemade.app/p/halation