gitmyhub

goo

TypeScript ★ 2 updated 2mo ago

Power Goo (JS)

A browser-based image distortion tool inspired by Kai's Power Goo, offering grow, shrink, smear, twirl, and ripple effects with no server uploads.

TypeScriptReactViteTailwind CSSCanvas APIsetup: easycomplexity 2/5

Goo is a browser-based image manipulation tool inspired by Kai's Power Goo, a classic photo distortion application. It runs entirely in the browser — no server uploads required. When you open it, a dark editor appears preloaded with a generated Renaissance-style portrait. You can replace that image with any local file using a file picker or by dragging and dropping it in.

Once your image is loaded, you can distort it using several creative tools: Grow (enlarges parts of the image outward), Shrink (pulls areas inward), Smear (drags pixels across the canvas), Twirl (spins areas of the image), Ripple (creates a wave-like distortion), and GOOplicate. You control the intensity of each effect with adjustable brush size and force settings. The canvas also supports zoom, pan (called Hand mode), fit-to-view, and reset.

Pixel-heavy brush operations run in Web Workers — background threads separate from the main browser thread — so the interface stays responsive while distortions are being applied. An undo/redo stack backed by a bounded pixel snapshot manager lets you step back through changes.

The editor is built with Vite, React, TypeScript, and Tailwind CSS v4, using the browser's built-in Canvas API for rendering.

You would use this if you want a playful, local-only image warping tool that runs directly in the browser with no sign-up and no file uploads to a server.

Where it fits