A local-first creative effects editor built with the browser's native graphics stack.

Why Grainframe is fun

Grainframe turns a browser tab into a compact creative studio. Drop in an image, stack effects non-destructively, animate their controls, and export the result—without an account, an upload, a dependency install, or a server-side processing pipeline.

The project is intentionally more than a filter gallery. It explores what a credible desktop-style editor can feel like using only HTML, CSS, JavaScript, and Canvas 2D.

Texture in motion. Color, grain, distortion, optical artifacts, generative patterns, and keyframed movement in one local-first workspace.

The good stuff

	Capability	What makes it interesting
✦	86 effects	Color, blur, film, distortion, generation, Grainrad-inspired and custom Studio families.
◫	Non-destructive stack	Reorder, duplicate, hide, blend and remove effect layers without touching the source image.
◆	Motion system	Keyframes, timeline scrubbing, looping playback, live procedural motion and one-click quick animation.
⌘	Editor workflow	Undo/redo, favorites, custom presets, randomization, projects, autosave and a command palette.
↗	Real exports	PNG, JPG, WebP and animated WebM with crop, scale and quality controls.
●	Private by design	Images stay inside the browser. No account, analytics, upload, API, or cloud processing.

Effect playground

The catalog includes practical adjustments and deliberately strange visual tools:

• Studio: posterize, solarize, neon edges, chromatic lens, film burn, light leak, kaleidoscope, fisheye, twirl, tilt shift, oil paint, watercolor, paper texture, glitch blocks and lens flare.
• Texture and signal: risograph, film grain, ink bleed, CRT, VHS, NTSC, dithering, halftone, ASCII and scan treatments.
• Color and light: levels, duotone, thermal, bloom, halation, gradient maps, color matrices and channel shifts.
• Distortion and generation: pixelation, swirl, ripple, polar transforms, Voronoi, wave lines, noise fields and matrix rain.

Every effect remains independently stackable and exposes its own controls.

Animation without ceremony

1. Choose an effect and switch to Animate.
2. Press Create motion for an instant two-keyframe move—or set values manually and capture them with ◆.
3. Scrub, change duration, enable looping, and press Play.
4. Export the timeline as animated WebM.

Procedural effects such as Matrix Rain, VHS, Wave Lines, and Noise Field can also generate live motion directly from timeline time.

Architecture

Source image
    │
    ▼
Ordered effect layers ──► Canvas rendering kernels
    │                           │
    │                           ├── Pixel transforms
    │                           ├── Canvas compositing
    │                           └── Procedural drawing
    ▼
Transform + crop
    │
    ├──► Realtime editor preview
    └──► PNG / JPG / WebP / WebM export

The interface, project model, renderer, animation timeline and export pipeline all live in three dependency-free files:

index.html   Semantic editor structure and dialogs
styles.css   Responsive product UI and Grainframe visual system
app.js       State, effects, Canvas kernels, animation and exports

Project files and presets are serialized to browser storage, with portable .grain.json project export for moving work between browsers.

Run it

No build step is required.

git clone https://github.com/yash-5mx/grainframe.git
cd grainframe
python -m http.server 4173

Open http://127.0.0.1:4173.

You can also open index.html directly, though a local server gives the most consistent browser behavior.

Keyboard flow

Action	Shortcut
Quick actions	Ctrl/Cmd + K
Undo / redo	Ctrl/Cmd + Z / Ctrl/Cmd + Shift + Z
Save project	Ctrl/Cmd + S
Play / pause animation	Space
Toggle original	\
Reset zoom	Ctrl/Cmd + 0
Delete active layer	Backspace

Performance direction

Canvas is a good fit for orchestration and compositing, while the heavier per-pixel kernels are natural candidates for a hybrid production renderer:

• move hot loops into Rust or C/C++ WebAssembly;
• share a single RGBA buffer and use SIMD;
• run CPU kernels in a Web Worker with OffscreenCanvas;
• move blur, glow, displacement and video-scale work to WebGL or WebGPU shaders.

The current implementation stays dependency-free so the rendering ideas and product interaction remain easy to inspect.

Design notes

Grainframe uses an original framed-G monogram, a restrained dark studio palette, warm off-white typography, and acid-lime interaction cues. The UI borrows familiar conventions from professional image and motion tools while remaining its own compact product.

Inspiration and provenance

The product direction was inspired by Effect.app. A set of controls and effect concepts was also functionally inspired by Grainrad. Grainrad source code, assets, branding, and production bundles are not included; all rendering kernels in this project are independent implementations based on standard graphics techniques.

Read the full effect provenance notes.

---

Grainframe · built for curious image-making