Twenty-nine tools for makers

WhyEvery game portal and social network wants the same art at a different shape, and a wide piece of key art cannot just be center-cropped into a tall portrait without slicing the character out of frame. Doing the set by hand in an image editor is slow, and the online crop tools cap your batch, watermark the output, or only make one size at a time.

HowDrop one image or a batch, pick your sizes (the three CrazyGames covers are on by default, plus social and web presets, plus a custom width and height), and every crop renders at once. Each image gets a draggable focal point and a zoom, so you choose what stays in frame and the whole set re-anchors to it live. Cover fills and trims, Contain fits and pads with a chosen color. A single shared draw model powers both the preview canvases and the encoded output, so what you frame is exactly what you download. PNG, JPG, or WebP, save one or grab the batch as a ZIP. All client-side, no upload, no signup, no watermark.

WhyMatching a real-world color to a vendor code usually means eyeballing tiny swatches against a carpet or running to a paint store with a torn cushion. Phone cameras and CIE Lab Delta-E math can do it in a browser tab, no install, no signup.

HowCamera (getUserMedia rear-facing) or upload, with a center crosshair that lives-samples and an arbitrary-point click sample on the canvas. HSL sliders nudge the picked color to compensate for room lighting. Three reference databases bundled: 140 CSS Named, 213 RAL Classic (industrial paint / textile standard), and ~120 community-compiled Pantone Solid Coated approximations sampled across the wheel. Nearest matches are ranked by Delta E CIE76 in Lab space. Hex / RGB / HSL / CMYK output, all click-to-copy. Pantone column carries a clear 'approximate references, not official identifiers' disclaimer for trademark hygiene. No upload, no signup, no watermark.

WhyAdding a quick voiceover to a screen recording or gameplay clip usually means firing up Audacity, lining up a separate audio file, then exporting through a real video editor. Wanted that collapsed into one tab.

HowDrop a video, scrub to where the voice should start, hit Record. The video plays muted while a MediaRecorder captures the mic. Stop saves the take locally. Volume sliders mix the original audio against the voice take in both preview (HTMLAudio + video element synced via timeupdate) and final export (Web Audio API: MediaStreamAudioSourceNode for video + AudioBufferSourceNode for the voice blob, both through gain nodes into a single MediaStreamDestination). Canvas captureStream + the destination's audio tracks feed MediaRecorder for the MP4 or WebM output. Single take, re-record to redo. No upload, no signup, no watermark.

WhyAdding a quick caption or a red box-and-arrow to a screen recording usually means opening a real video editor and exporting twenty minutes later. Wanted the 90% case to be open-page, drop-clip, drag, render.

HowDrop in any video, then layer text plus boxes, circles, triangles, and arrows on top. Drag on the video to position and resize, drag on the timeline to set when each element shows up. Live preview composites overlays on a canvas at the source resolution. Export goes through canvas.captureStream + MediaRecorder so the original audio survives, with MP4 (H.264) where supported and WebM (VP9) as a universal fallback. No upload, no signup, no watermark.

WhyGame projects accumulate ad-hoc colors fast. Browsing other people's palettes on the web is great inspiration but the round-trip back to your code is screenshots and eyedropper apps. Wanted that loop to be two clicks: pick, copy.

HowForty hand-picked six-color palettes across Game UI, Pixel Classics, Warm, Cool, Earthy, Neon, Pastel, Vintage, Monochrome. Click a palette, it goes active. Click any swatch to copy its hex. Click the ✎ icon to edit individual colors with a picker. Or flip to the Generator: pick a base color and one of nine harmony rules (complementary, triadic, analogous, split-comp, tetradic, square, monochromatic, warm-shades, cool-shades), get six colors out. Export Hex List, CSS variables, JSON, or PNG. Recents + Saved presets in localStorage.

WhySuno reads 'at 20 seconds' as a length cap and clips songs short. The fix is bracketed song sections instead of timestamps. Needed a tool that enforces that by design.

HowChip-based picker for genre, mood, tempo, instruments, vocals, plus a section sequence builder (Intro, Verse, Chorus, Bridge, Outro). Output is bracketed structure tags followed by a natural-language style description. Save Preset and Recents work like Button Forge. No backend, no API calls — the prompt goes to your clipboard.

WhyThe engine was done but the UI sat unused. Every preview required a backend call. Time to make it real.

HowWired the engine to a React UI with live SVG preview, recipe picker, dynamic per-recipe parameter controls grouped into collapsible sections (Shape, Color, Texture, Text, Effects). Browser-side texture loader fetches and caches material PNGs as data URLs. Download PNG rasterizes from SVG with no server round-trip.

WhySix preset fonts per recipe wasn't enough. Picking a button style is half about the typography.

HowCurated 83 Google Fonts into 12 groups (Fantasy, Display, Heavy, Retro, Sci-fi, Script, Cute, Western, Edgy, Serif, System). One stylesheet link loads them lazily. Engine now honors top-level fontWeight and fontStyle overrides; Bold and Italic chips live inside the Text group.

WhyEvery iteration of a button was vanishing on refresh. You'd nail the look at 11pm, close the tab, gone.

HowTwo localStorage lists. Recents auto-snapshots on every Download PNG, dedup'd by config, capped at 12. Saved is named and explicit, capped at 50. Most recent auto-restores on next visit. Tiles render the actual SVG inline, no rasterization.