Grain gradient

Flowing grainy gradients that the pointer stirs like paint.

element
webgl
pointer
background
gradient
grain
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Grain gradient example

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<axi0-grain-gradient cover></axi0-grain-gradient>

import { GrainGradient } from "./motion/react/GrainGradient";

<GrainGradient />

<script setup lang="ts">
import GrainGradient from "./motion/vue/GrainGradient.vue";
</script>

<template>
  <GrainGradient />
</template>

const fx = document.createElement("axi0-grain-gradient");
document.querySelector("#hero").append(fx);

The wrappers: GrainGradient.tsx (React, TypeScript) and GrainGradient.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`colors`	`#ff9a5a,#ff5f8f,#7c6cff,#1c1640`	four colors that flow into each other
`grain`	`0.09`	how strong the grain is (0 = smooth)
`speed`	`1`	how fast the colors flow
`stir`	`1`	how much the pointer swirls the colors
`cover`	`false`	fill the nearest positioned parent, behind its content

Decorative and opaque: put text on it only with enough contrast against all four colors. The canvas is hidden from screen readers and takes no pointer events. Frames run only on screen in a visible tab. Reduced motion: one still frame. Without WebGL a plain gradient of the same colors stands in.

Size

grain-gradient.js is 1.3 KB gzip, with gl.js 2.1 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.