Glow Effects (GlowKit)

GPU-native visual effects library for Flutter. Fragment Shaders, CustomPainter & Explicit Animations — zero external dependencies.

---

Overview

Category	Count	Effects
Shader Effects	10	Glitch, Aurora, Dissolve, Liquid, Chromatic Aberration, Pixelate, VHS, Heat Wave, Neon Glow, Holographic
CustomPainter	4	Magnetic Particles, Morph Shape, Constellation, Lightning
Text Effects	4	Typewriter Glow, Neon Flicker, Glitch Reveal, Dissolve In
Page Transitions	4	Warp, Ripple, Glitch, Fade
Presets	4	Cyberpunk, Dreamy, Retro, Minimal

Plus: Effect Composer with blend modes, Performance Manager, Debug Overlay, and full reduced motion support.

Installation

dependencies:
  glow_effects: ^0.1.0

flutter pub get

import 'package:glow_effects/glow_effects.dart';

Quick Start

Drop any effect into your widget tree with 3 lines:

GKWidget(
  effect: GlitchEffect(),
  trigger: GKTrigger.auto,
)

Add a child widget underneath:

GKWidget(
  effect: AuroraEffect(speed: 0.5),
  trigger: GKTrigger.auto,
  interactive: true,
  child: Text('Hello Flutter Shader Effects'),
)

Compose multiple effects:

GKWidget(
  effect: GKEffectComposer(
    effects: [
      GlitchEffect(blockSize: 0.04),
      NeonGlowEffect(glowColor: Colors.cyan),
    ],
    blend: GKBlendMode.screen,
  ),
  trigger: GKTrigger.auto,
)

Or use a preset:

GKWidget(
  effect: GKAnimationPresets.preset(GKPreset.cyberpunk),
  trigger: GKTrigger.auto,
)

Shader Effects

GlitchEffect

Block displacement, RGB split, scanlines, and frame flicker.

GKWidget(
  effect: GlitchEffect(
    blockSize: 0.05,   // glitch block height
    rgbOffset: 0.01,   // RGB channel split distance
  ),
  trigger: GKTrigger.auto,
)

AuroraEffect

Northern lights with layered sine waves and HSL color cycling.

GKWidget(
  effect: AuroraEffect(
    speed: 1.0,        // animation speed
    colorShift: 0.0,   // hue rotation 0.0-1.0
  ),
  trigger: GKTrigger.auto,
  interactive: true,   // pointer warps aurora shape
)

DissolveEffect

Noise-based dissolve with glowing spark edges. Requires a child widget.

GKWidget(
  effect: DissolveEffect(
    progress: 0.5,       // 0.0 = visible, 1.0 = dissolved
    noiseScale: 4.0,     // noise frequency
    edgeSoftness: 0.1,   // glow edge width
  ),
  child: Image.asset('photo.png'),
)

LiquidEffect

Smooth organic flowing color waves.

GKWidget(
  effect: LiquidEffect(
    speed: 1.0,
    viscosity: 0.5,    // 0.0 = thin, 1.0 = thick
    colors: [Colors.purple, Colors.blue, Colors.cyan],
  ),
  trigger: GKTrigger.auto,
)

ChromaticAberrationEffect

RGB channel split with radial falloff.

GKWidget(
  effect: ChromaticAberrationEffect(
    offset: 0.01,   // shift distance
    angle: 0.0,     // direction in radians
  ),
  trigger: GKTrigger.auto,
)

PixelateEffect

Mosaic pixelation with color quantization.

GKWidget(
  effect: PixelateEffect(
    pixelSize: 8.0,    // pixel block size
    animate: true,     // pixel size pulses with time
  ),
  trigger: GKTrigger.auto,
)

VHSEffect

Retro VHS tape with scanlines, noise, tracking errors, and vignette.

GKWidget(
  effect: VHSEffect(
    noiseAmount: 0.1,
    trackingError: 0.05,
  ),
  trigger: GKTrigger.auto,
)

HeatWaveEffect

Rising heat shimmer distortion.

GKWidget(
  effect: HeatWaveEffect(
    frequency: 8.0,
    amplitude: 0.01,
  ),
  trigger: GKTrigger.auto,
)

NeonGlowEffect

Neon shapes with bloom glow and flicker.

GKWidget(
  effect: NeonGlowEffect(
    glowRadius: 0.05,
    flickerSpeed: 3.0,
    glowColor: Colors.cyan,
  ),
  trigger: GKTrigger.auto,
)

HolographicEffect

Rainbow iridescent surface with fresnel highlights and sparkle.

GKWidget(
  effect: HolographicEffect(
    speed: 1.0,
    fresnelPower: 2.0,
  ),
  trigger: GKTrigger.auto,
  interactive: true,   // pointer tilts the hologram
)

CustomPainter Effects

MagneticParticlesPainter

Particles attracted to pointer with spring physics.

CustomPaint(
  painter: MagneticParticlesPainter(
    particleCount: 80,
    colors: [Colors.cyan, Colors.purple],
    magnetStrength: 150.0,
    animationValue: controller.value,
    pointerPosition: pointer,
    size: canvasSize,
  ),
)

MorphShapePainter

Path-to-path morph via point interpolation.

CustomPaint(
  painter: MorphShapePainter(
    fromPath: circlePath,
    toPath: starPath,
    progress: controller.value,
    color: Colors.white,
    strokeWidth: 2.0,
  ),
)

ConstellationPainter

Drifting stars connected by proximity lines.

CustomPaint(
  painter: ConstellationPainter(
    starCount: 60,
    connectionRadius: 120.0,
    starColor: Colors.white,
    lineColor: Colors.white24,
    animationValue: controller.value,
    pointerPosition: pointer,
    size: canvasSize,
  ),
)

LightningPainter

Midpoint-displacement lightning bolt with branches and glow.

CustomPaint(
  painter: LightningPainter(
    start: Offset(200, 50),
    end: Offset(200, 550),
    animationValue: controller.value,
    color: Colors.white,
    branches: 3,
    roughness: 0.5,
  ),
)

Text Effects

GKTextEffect(
  text: 'Hello World',
  effect: GKTextEffectType.typewriterGlow,
  style: TextStyle(fontSize: 32, color: Colors.cyan),
  duration: Duration(milliseconds: 2000),
  onComplete: () => print('done'),
)

Type	Description
typewriterGlow	Characters appear one by one with brightness burst
neonFlicker	All text visible, individual characters flicker
glitchReveal	Random characters resolve into real text
dissolveIn	Text fades in with opacity animation

Page Transitions

Navigator.of(context).push(
  GKPageRoute(
    page: DetailScreen(),
    type: GKTransitionType.warp,
    duration: Duration(milliseconds: 600),
  ),
);

Type	Description
warp	Scale + rotation + opacity
ripple	Circular reveal from center
glitch	Offset flicker + opacity
fade	Simple opacity (reduced motion fallback)

Core API

GKController

Extends AnimationController with effect-specific properties:

final controller = GKController(
  vsync: this,
  duration: const Duration(seconds: 2),
  playMode: GKPlayMode.loop,
  intensity: 1.0,
);

controller.time;              // elapsed seconds
controller.intensity;         // 0.0-1.0
controller.pointerPosition;   // normalized Offset
controller.play();            // starts based on playMode
controller.updatePointer(globalPos, widgetSize);
controller.updateUniforms(shader);

GKWidget

Hosts any GKEffect with trigger and interaction support:

GKWidget(
  effect: myEffect,
  trigger: GKTrigger.auto,     // auto | onTap | onHover | manual
  interactive: true,            // tracks pointer position
  child: myWidget,              // rendered beneath effect
  controller: myController,     // optional external controller
)

GKShaderLoader

Loads and caches fragment shaders:

final shader = await GKShaderLoader.load('glitch');
await GKShaderLoader.preload(['glitch', 'aurora', 'dissolve']);
GKShaderLoader.clearCache();

Custom Effects

Extend GKEffect to create your own:

class MyEffect extends GKEffect {
  const MyEffect();

  @override
  Widget build(BuildContext context, GKController controller, {Widget? child}) {
    return CustomPaint(
      painter: MyPainter(controller: controller),
      child: child,
    );
  }
}

Effect Composer

Stack and blend multiple effects:

GKWidget(
  effect: GKEffectComposer(
    effects: [GlitchEffect(), NeonGlowEffect()],
    blend: GKBlendMode.screen,   // normal | screen | overlay | multiply
  ),
  trigger: GKTrigger.auto,
)

Animation Presets

Preset	Effects
cyberpunk	Glitch + Chromatic Aberration + Neon Glow
dreamy	Aurora + Dissolve
retro	VHS + Pixelate
minimal	Neon Glow (subtle)

GKWidget(
  effect: GKAnimationPresets.preset(GKPreset.cyberpunk),
  trigger: GKTrigger.auto,
)

Performance Manager

Auto-adjusts effect intensity based on FPS:

GKManagedWidget(
  effect: GlitchEffect(),
  trigger: GKTrigger.auto,
)

Downgrades quality after 2s below 80% target FPS. Upgrades after 5s above 95%.

Quality	Intensity
high	1.0
medium	0.6
low	0.3

Debug Overlay

GKDebugOverlay(
  showFps: true,
  showUniforms: true,
  child: MyApp(),
)

Draggable, tap-to-expand. FPS color-coded: green (>55), yellow (30-55), red (<30).

Accessibility

All effects respect reduced motion preferences:

• GKWidget renders only the child, no animations
• GKPageRoute falls back to simple fade
• GKTextEffect shows full text immediately

Example

A full showcase app is included with 5 tabs demonstrating all effects:

cd example
flutter run

Requirements

• Flutter >= 3.10.0
• Dart >= 3.0.0
• No external dependencies

License

MIT License. See LICENSE for details.