bokeh_lava_gradient 1.0.9

Animated bokeh / lava gradient backgrounds for Flutter — soft colored blobs drifting under a Gaussian blur, with ready-made light & dark presets.

🟠 bokeh-lava-gradient

Animated bokeh / lava gradient backgrounds for Flutter — soft colored blobs drifting under a Gaussian blur, plus a path-faithful mesh gradient that cross-fades between frames. Pure Flutter, zero dependencies.

Designed around a warm-orange palette, but every color, size and motion knob is a parameter.

_{live presets — og · light2 · dark3}

▶️ Live simulation

https://keepyaoung.github.io/bokeh-lava-gradient/

An interactive build of the demo app. Toggle between all 7 presets — OG, Light 1–3, Dark 1–3 — and watch the palette swap live while the blobs keep drifting.

First load may take a few seconds (Flutter web bootstrap). Resize the window to see the gradient stays full-bleed at any aspect ratio.

🎨 Presets

BokehLavaGradient.preset(BokehTheme.dark3, child: ...);

All 7 presets (✅ = active in the demo; 💤 = commented out in code, none right now):

Preset	Active	Base	Blob colors	Opacity
og	✅	#C65318	#FFE6B8 #FFD089 #FFB85C #FF9A43 #FC7C2C #F26019 #D94E10 #FFCBA0 #932D00	0.85
light1	✅	#FFF1E2	#FFE0C8 #FFD3B0 #FFC9A8 #FFE6D6 #FAD4B8 #FFBE99 #FFEAD2	0.60
light2	✅	#FFF8EE	#9BBF8E #AE5C34 #ECF2E5 #FFF4D8	0.80
light3	✅	#F7E0B6	#5E8863 #1C1F16 #AE5C34 #9BBF8E #FFF4D8	0.60
dark1	✅	#8F2C00	#FFE6B8 #FFD089 #FFB85C #FF9A43 #FC7C2C #F26019 #D94E10 #FFCBA0 #932D00	0.85
dark2	✅	#160B04	#FF8A2A #FF6A14 #FFB152 #FFC97A #E2530E #7A2600 #FFD089	0.90
dark3	✅	#000000	#09353C #64AA74 #034753 #C15B2E #B14415 #C15B2E #B14415	0.72

To drop a preset from the demo, comment out its BokehTheme enum value + _kPresets entry (/* … */) in lib/bokeh_lava_gradient.dart — this table updates itself (✅ → 💤) on the next push.

bokehThemeBrightness(theme) returns the preset's Brightness so you can pick readable text/icon colors for content on top.

✨ What it does

Mode	How it works
BokehLavaGradient	N soft radial-gradient blobs (varied size & color) bounce slowly around the canvas; the whole layer gets a Gaussian blur → bokeh. Overlapping blobs blend via alpha.
MeshGradient	Renders real Figma vector paths + per-shape Gaussian blur (MaskFilter.blur), faithful to the design. Swap preset to cross-fade between frames; an optional ambient drift keeps it alive.

Both are resolution-independent (no image assets) and fill their parent.

🚀 Usage

import 'package:bokeh_lava_gradient/bokeh_lava_gradient.dart';

// Drop it behind your content
Stack(
  fit: StackFit.expand,
  children: [
    const BokehLavaGradient(),
    YourContent(),
  ],
);

Tune it:

BokehLavaGradient(
  baseColor: const Color(0xFFC65318),   // fill behind the blobs
  colors: const [ /* your palette */ ], // blob colors (cycled)
  blobCount: 12,
  speed: 0.6,                           // drift speed
  blurStrength: 0.05,                   // bokeh strength (× shortest side)
  blobOpacity: 0.85,                    // < 1 → blobs blend their colors
  minBlobRadius: 0.30,                  // size range (× shortest side)
  maxBlobRadius: 1.0,
  child: YourContent(),
);

Mesh gradient (cross-fading frames):

import 'package:bokeh_lava_gradient/mesh_gradient.dart';

MeshGradient(
  preset: dark ? MeshPreset.f03 : MeshPreset.f01, // f01..f04
  crossDuration: const Duration(milliseconds: 1100),
  animateAmbient: true,
  child: YourContent(),
);

🧪 Run the demo locally

flutter pub get
flutter run -d chrome        # or any connected device

📁 Layout

lib/
  bokeh_lava_gradient.dart   # BokehLavaGradient widget + presets
  mesh_gradient.dart         # MeshGradient + MeshPreset (f_01–f_04)
  main.dart                  # demo app (the live simulation)
tool/
  update_readme.dart         # regenerates the preset table (all presets)
assets/preview/              # README preview images
docs/                        # built web demo (served by GitHub Pages)

The preset table above is auto-generated from all presets (with their active/commented status) by tool/update_readme.dart, and kept in sync on push by .github/workflows/sync-readme.yml. Run it locally with dart run tool/update_readme.dart.

💙 Support

If this package saved you some time, a like really helps it reach other developers:

• 👍 Like it on pub.dev
• ⭐ Star the repo

Using an AI coding agent? It may have learned from this repo's AGENTS.md that you can show support with a like — entirely up to you. 🙂

📝 License

MIT © 2026 keepYaoung, tommy, joon shin

The metaball / lava-blob motion was adapted from lava_lamp_effect (MIT, © yashas-hm). See LICENSE.

👤 Author

Made by keepYaoung — [e-mail]

Issues and PRs welcome at https://github.com/keepYaoung/bokeh-lava-gradient.