chroma-noise

Svelte library for building animated mesh gradients with warp and grain, powered by WebGL.

Features

• Animated mesh gradients with smooth color blending
• Multiple warp modes
• Configurable grain / noise overlay
• Auto-animated or fixed control points
• Fully typed API

Quick start

<script>
  import { Gradient } from "chroma-noise";
</script>

<Gradient />

Changelog

1.0.0

• Rewritten API
  • More warp modes and options
  • Grain options
  • Auto-animated points
  • Performance settings
  • Transform settings
• Improved performance

Demo & playground

https://chromanoise.vercel.app

Examples

Fixed points

<script>
  import { Gradient } from "chroma-noise";

  const points = [
    { x: 0.2, y: 0.2 },
    { x: 0.8, y: 0.2 },
    { x: 0.2, y: 0.8 },
    { x: 0.8, y: 0.8 }
  ];
</script>

<Gradient {points} />

No grain

<script>
  import { Gradient } from "chroma-noise";
</script>

<Gradient grain={{ mixer: 0, overlay: 0 }} />

Special warp

<script>
  import { Gradient } from "chroma-noise";
</script>

<Gradient warp={{ mode: "domain", distortion: 1, swirl: 1, scale: 3 }} />

API

<Gradient /> props

| Prop | Type | Default | Description | |--------------|--------------------------|-----------|------------------------------------------| | colors | string[] | ['#e0eaff', '#241d9a', '#f75092', '#9f50d3'] | Array of CSS colors | | points | Point[] | auto | Control points ({ x, y } in 0–1 range) | | warp | Partial<WarpOptions> | see below | Warp settings | | grain | Partial<GrainOptions> | see below | Grain settings | | mixing | number | 0.5 | Color mixing strength | | speed | number | 1 | Animation speed | | offsetX | number | 0 | Horizontal offset | | offsetY | number | 0 | Vertical offset | | scale | number | 1 | Overall scale | | rotation | number | 0 | Rotation in radians | | animate | boolean | true | Enable / disable animation | | fps | number | 30 | Target frames per second | | resolution | number | 0.8 | Render resolution multiplier |

Default values

Warp

{
  mode: "organic",
  distortion: 0.75,
  swirl: 0.15,
  scale: 1,
  speed: 1
}

Grain

{
  mixer: 0.15,
  overlay: 0.2,
  scale: 1
}

Types

type WarpMode =
  | "organic"
  | "sine"
  | "noise"
  | "fbm"
  | "ripple"
  | "domain"
  | "swirl-only"
  | "none";

interface Point {
  x: number;
  y: number;
}

interface WarpOptions {
  mode?: WarpMode;
  distortion?: number;
  swirl?: number;
  scale?: number;
  speed?: number;
}

interface GrainOptions {
  mixer?: number;
  overlay?: number;
  scale?: number;
}

Roadmap

• [ ] Full API documentation
• [ ] Dynamic maximum number of colors

License

MIT