Tuneshine Idle Animation Maker

Presets

Presets overwrite your current settings. Use Save Local Snapshot below to keep your state first.

Randomize

Colors

Top-LeftThe color of the blob anchored near the top-left corner. This is the brightest blob in the default palette, so it strongly influences the overall feel.

Top-RightThe color of the blob anchored near the top-right corner.

Bottom-LeftThe color of the blob anchored near the bottom-left corner.

Bottom-RightThe color of the blob anchored near the bottom-right corner.

Center TintA subtle fill color that blends in behind the four corner blobs, adding warmth or coolness to the middle of the image. Controlled by Center Fill below.

Animation

Duration (s)Total length of the animation before it seamlessly loops. Longer = more variety before repeating, but larger file size. At 30fps, 60s fits comfortably under 768 KB (~461 KB). At lower fps or quality you can go longer — e.g. 300s at 10fps q50 (~650 KB). Use the file size estimate below the Export button to check. Note: increasing duration with the same number of Cycles / loop will slow down all movement proportionally.

FPSFrames per second. Higher = smoother motion but larger files, since each frame costs ~180–290 bytes. 30fps looks noticeably smoother than 12. Halving fps roughly halves the file size, so this is a key lever for fitting under the 768 KB limit.

Rotation

Cycles / loopHow many full 360° orbits each blob completes over the entire animation. More cycles = faster apparent rotation. With a longer duration the same number of cycles will look slower, so increase cycles to compensate. Must be a whole number for seamless looping.

Orbit RadiusHow far each blob drifts from its home corner, in pixels (out of 64). Low values = gentle sway, high values = dramatic sweeping motion.

Gradient Shape

Blob DefinitionHow distinctly each color blob stands out. Low values produce very smooth, diffuse gradients where all colors blend softly together. High values make each blob a tighter, more defined region with visible boundaries between colors. For the smooth lava-lamp look, keep this low (0.5–1.5). For distinct color zones, push higher (2.5+).

Center FillHow much the center tint color shows through. At 0, only the four corner blobs matter. Higher values let the center color fill in the middle as a diffuse background wash, softening contrasts between corners.

Blur PassesNumber of smoothing passes applied after rendering. Each pass softens pixel-level edges. 0 = raw (can look slightly crunchy at 64px), 1–2 = smooth, 3+ = very soft and dreamy.

Pulse / Breathing

IntensityHow much each blob's influence grows and shrinks over time. At 0 the gradient is static. Higher values create more visible "breathing" — colors waxing and waning. Very high values can cause bright flashes when the brightest blob peaks.

Cycles / loopHow many full breath cycles happen over the entire animation. More cycles = faster breathing. With a longer duration the same number of cycles will breathe slower, so increase cycles to compensate. Must be a whole number for seamless looping. Best results when this doesn't share factors with rotation cycles (e.g. 11 and 23).

Phase OffsetControls the timing difference between each blob's breathing. At 0, all blobs breathe perfectly in sync — they all brighten and dim together, creating a uniform pulse. Higher values stagger them so different corners brighten at different times, creating a rolling, organic feel where color emphasis shifts around the image.

Save / Load

The Local Snapshot is saved in your browser. Export/Import lets you save and share configurations as JSON files. Saved!

Export

QualityWebP encoding quality. Lower = smaller files but slight color banding. At 64×64 the difference between 50 and 80 is barely visible. Lower quality lets you fit longer durations or higher fps under the 768 KB limit.

Credits

A Benish Design Production