Glow Effects (GlowKit) #

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

Overview #

Category	Count	Effects
Shader Effects	11	Glitch, Aurora, Dissolve, Liquid, Chromatic Aberration, Pixelate, VHS, Heat Wave, Neon Glow, Holographic, Radar
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.2.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
)

RadarEffect #

GPU radar/sonar pulse with expanding rings, radial gradient, and center pulse.

// Simple usage
GKWidget(
  effect: RadarEffect(config: RadarEffectConfig.green),
  trigger: GKTrigger.auto,
)

// Full-screen with results
RadarScreen(
  centerIcon: Icon(Icons.wifi, color: Colors.white, size: 28),
  label: 'Searching...',
  config: RadarEffectConfig.classic,
  showResults: true,
  resultsRadius: 130.0,
  results: [
    CircleAvatar(child: Text('A')),
    CircleAvatar(child: Text('B')),
  ],
  bottomAction: TextButton(onPressed: () {}, child: Text('Cancel')),
)

Built-in presets: green, classic, blue, dark, red

Configurable: ringColor, bgColor1/2/3, ringCount, speed, ringWidth, maxRadius, noiseAmount, ringOpacity

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.

glow_effects 0.2.0 glow_effects: ^0.2.0 copied to clipboard

Metadata