Gradient Flow

Smooth morphing color gradients using metaball-style blending, creating a lava-lamp-like flow of colors. Soft blobs of color drift and merge organically across the canvas.

Examples

Basic

Default settings.

Preview

Code

<template>
    <EffectDemo>
        <canvas ref="canvasRef"></canvas>
    </EffectDemo>
</template>

<script
    setup
    lang="ts">
    import { onMounted, onUnmounted, ref } from 'vue';
    import { createGradientFlow } from '@basmilius/sparkle';

    const canvasRef = ref<HTMLCanvasElement>();
    let sim: ReturnType<typeof createGradientFlow> | null = null;

    onMounted(() => {
        if (canvasRef.value) {
            sim = createGradientFlow({ scale: 1 });
            sim.mount(canvasRef.value).start();
        }
    });

    onUnmounted(() => {
        sim?.destroy();
        sim = null;
    });
</script>

Configuration

All options are passed via a config object:

import { createGradientFlow } from '@basmilius/sparkle';

const gradientFlow = createGradientFlow({
    speed: 0.5,
    colors: ['#ff6b9d', '#c44dff', '#4d79ff', '#00d4ff'],
    blobs: 5,
    resolution: 6,
    scale: 1
});
gradientFlow.mount(canvas).start();

speed

Controls how fast the color blobs drift across the canvas. Default: 0.5.

createGradientFlow({ speed: 1 });

colors

Array of colors used for the gradient blobs. Each blob picks a color from this palette.

createGradientFlow({ colors: ['#ff4444', '#ff8800', '#ffcc00'] });

blobs

Number of gradient blobs in the scene. More blobs create richer color mixing. Default: 5.

createGradientFlow({ blobs: 8 });

resolution

Pixel step size for rendering. Lower values produce smoother gradients at higher rendering cost. Default: 6.

createGradientFlow({ resolution: 3 });

scale

Scales all size-related values proportionally. Default: 1.

createGradientFlow({ scale: 1.5 });