# glyf — context for AI assistants

glyf is a browser-based studio that converts photos, video, procedural shaders and
animated gradients into ASCII and pattern art. Everything runs locally in the
browser: no upload, no account, no server-side processing.

## Core model

The renderer is a pure pipeline:

    source → adjust → cell grid → rasterize → post-processing

The cell grid is the important part. Every frame becomes a grid of cells, each
holding a character, a foreground color, a secondary color and a coverage value.
The canvas, the plain-text export and the SVG export are three projections of
that same grid, so text and vector output always match what you see.

A "ramp" is the core primitive: a string of characters ordered light → dark that
luminance is mapped onto. Built-in ramps are Standard (` .:-=+*#%@`), Blocks,
Binary and Code, plus any custom ramp you type.

## Styles (25)

- Characters: luminance → ramp character, monospace cells.
- Braille: 2×4 dot cells with ordered thresholds, one Unicode braille glyph per cell.
- Mixed: 70-character ramp with per-cell jitter and block characters at the top end.
- Hex Dump: offset column plus two hex digits per byte of cell luminance.
- Matrix: per-column falling streams with trailing brightness and shifting glyphs.
- Dots, Cross, Diamond, Rings, Hearts, Stars, Hexagons, Triangles, Bubbles: geometric marks scaled by cell luminance (hexagons use an offset honeycomb).
- Lines, Diagonal, Hatching: stroke weight and layered hatch levels by luminance.
- Contour: marching squares over the luminance field at N iso levels.
- Dither: Bayer 4×4 ordered dithering, one on/off cell per threshold test.
- Pixel Art: 4-level per-channel color quantization.
- Mosaic, Bricks: tile grids with gap/mortar and offset rows.
- Voxel: isometric cubes with height and three shaded faces by luminance.
- Half Blocks: two vertical samples per cell drawn as top/bottom halves.
- Disco: hue-cycling dot grid driven by the animation clock.

Universal style controls: cell size, coverage, invert, blend mode (normal,
overlay, screen, color dodge, lighter).

## Adjust

Brightness, contrast, edge emphasis (Sobel), density (gamma on the luminance →
ink mapping), an editable tone curve (monotone cubic interpolation), color grades
(B&W, sepia, warm, cool, vintage, fade, cyber), tint with 11 blend modes,
saturation, grayscale, and blur: gaussian, lens, tilt-shift, directional, zoom,
spin and progressive.

## Effects, motion, mask, lights

- Post-processing (stackable): vignette, scan lines, chromatic aberration, bloom, film grain, glitch, pixelate, halftone, film dust.
- Motion: wave, pulse, shimmer, ripple and flicker, on one global clock. Motion → Speed scales everything time-based, including the time-based effects and video playback.
- Mask: freehand, rectangle and ellipse shapes decide where the stylized look applies; everywhere else shows the original source. Invertible.
- Lights: up to four draggable lights that add radial luminance before the grid is built.

## Sources

- Photo: drop a file, or pick from the built-in library of photographs (portraits, landscapes, plants, urban, cosmic, objects, abstract).
- Video: up to 50 MB, up to 1920×1080. High-contrast footage reads best.
- Shader: 22 presets in four families — gradient (dawn, mesh, halo, aurora, veil), geometric (bars, rings, chevron, lattice, swell, glass), abstract (drift, flow, cells, mist, orbit, fold, ink) and retro (sunset, grid, scan, tracking). All deliberately minimal, broad fields rather than turbulence, with speed/spread/softness/zoom/warp/contrast and a cursor interaction mode (push, repel, swirl, ripple, light).
- Gradient: animated multi-stop gradients with grain.

## Export

- Image: PNG, JPEG, WebP at 1×/2×/3×, plus plain text (.txt) and SVG built from the cell grid.
- Animation: MP4 (H.264), WebM (VP9) and GIF, with resolution, frame rate and duration. MP4/WebM depend on the browser's recorder support; GIF always works.
- Text and SVG contain the cell grid only, so post-processing effects and the mask are not included in them.

## Recipes

A recipe is the full settings object plus a name, tags and a thumbnail, saved in
browser storage. Loading one restores every setting.

## Tech

Next.js App Router, React, TypeScript, canvas 2D rendering, zustand for state
(with undo/redo), zod for schema validation, shadcn/ui and DialKit for controls.