szoloth/grainrad-clone

Grainrad Clone

Overview

Create a faithful Grainrad-style interface and control system, or apply Grainrad’s effects locally using the provided scripts.

Quick Start

1. Read references/grainrad-spec.md for the full layout and control inventory.
2. Read references/grainrad-style.md for fonts, colors, and theme behaviors.
3. Read references/grainrad-filters.md for all filters and settings from the screenshot.
4. Use scripts/grainrad_fx.py to apply effects locally.

Workflow

1. Layout Shell

• Implement a three-column layout: left panel, center workspace, right panel.
• Keep the panels fixed width and scrollable; center is flexible.
• Use a terminal-like, low-contrast palette and monospace typography.

2. Controls and State

• Reproduce section headers with "−" and "+" expand/collapse cues.
• Preserve effect list order and the "●" vs "○" selection indicator.
• Match default values for sliders and text inputs.
• Keep the empty-state copy and the button labels verbatim.

3. Rendering and Sources

• Support file input and drag/drop for the listed formats.
• Include webcam as a source, even if it is stubbed.
• Show the render backend label in the center workspace.

4. Export Pipeline

• Present the same export formats as discrete buttons.
• Gate the primary export action until an input source is loaded.

5. Secondary Pages

• Implement simple About and Changelog pages using the structure in the spec.

Local Effects Pipeline (No Browser)

Use the local script for all effect processing. Do not open or automate the Grainrad website.

Script

• scripts/grainrad_fx.py

Effects

• grain
• rad
• ascii
• dithering
• halftone
• matrix rain
• dots
• contour
• pixel sort
• blockify
• threshold
• edge detection
• crosshatch
• wave lines
• noise field
• voronoi ("ruanoi" maps here)
• vhs

Examples

python3 ~/.agents/skills/grainrad-clone/scripts/grainrad_fx.py \
  --input /path/to/input.jpg \
  --output /path/to/output.png \
  --effect "dithering"

python3 ~/.agents/skills/grainrad-clone/scripts/grainrad_fx.py \
  --input /path/to/input.mp4 \
  --output /path/to/output.mp4 \
  --effect "vhs"

python3 ~/.agents/skills/grainrad-clone/scripts/grainrad_fx.py \
  --input /path/to/input.png \
  --output /path/to/output.txt \
  --effect "ascii" \
  --ascii-text

python3 ~/.agents/skills/grainrad-clone/scripts/grainrad_fx.py \
  --input /path/to/input.png \
  --output /path/to/output_dir \
  --all

Resources

references/

• references/grainrad-spec.md contains the detailed UI layout, control lists, and default values.
• references/grainrad-style.md contains the typography, colors, and theme notes.
• references/grainrad-filters.md enumerates all filters and settings from the screenshot.

scripts/

• scripts/grainrad_fx.py applies all effects locally using ImageMagick and ffmpeg.