explewd/latent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add crop/rotate, more presets, and several new film effects
All checks were successful
Docker / build-and-push (push) Successful in 2m58s
Details

Browse Source 
Chromatic aberration, dust & scratches, light-leak shape variety
(bloom/streak/corner), double exposure, and grain size/color controls,
plus polaroid/infrared/black & white presets and non-destructive
crop+rotate ahead of the existing effect stack.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Fredrik Johansson
2026-07-17 12:16:52 +02:00
parent 6e53ae1cc9
commit 27aeef11eb
3 changed files with 487 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
index.html
View File

@@ -28,6 +28,20 @@
</div>
<div class="controls">
<div class="control-group">
<div class="control-label">crop &amp; rotate</div>
<div class="preset-row" id="aspect-row">
<button class="preset-btn active" data-aspect="original">original</button>
<button class="preset-btn" data-aspect="square">square</button>
<button class="preset-btn" data-aspect="portrait">4:5</button>
<button class="preset-btn" data-aspect="landscape">16:9</button>
</div>
<div class="inline-row">
<button class="btn btn-small" id="rotate-left-btn">rotate ⟲</button>
<button class="btn btn-small" id="rotate-right-btn">rotate ⟳</button>
</div>
</div>
<div class="control-group">
<div class="control-label">vibe</div>
<div class="preset-row" id="preset-row">
@@ -35,6 +49,9 @@
<button class="preset-btn" data-preset="warm">expired warm</button>
<button class="preset-btn" data-preset="cool">cross-processed</button>
<button class="preset-btn" data-preset="faded">faded</button>
<button class="preset-btn" data-preset="polaroid">polaroid</button>
<button class="preset-btn" data-preset="infrared">infrared</button>
<button class="preset-btn" data-preset="bw">black &amp; white</button>
</div>
</div>
@@ -44,6 +61,10 @@
<span class="control-value" id="grain-value">0</span>
</div>
<input type="range" id="grain" min="0" max="100" value="0" class="slider">
<div class="inline-row">
<label class="mini-label">size <input type="range" id="grain-size" min="0" max="100" value="40" class="slider slider-small"></label>
<button class="btn btn-small" id="grain-color-toggle" data-mode="mono">grain: mono</button>
</div>
</div>
<div class="control-group">
@@ -62,13 +83,59 @@
<input type="range" id="halation" min="0" max="100" value="0" class="slider">
</div>
<div class="control-group">
<div class="control-label">
<span>chromatic aberration</span>
<span class="control-value" id="aberration-value">0</span>
</div>
<input type="range" id="aberration" min="0" max="100" value="0" class="slider">
</div>
<div class="control-group">
<div class="control-label">
<span>dust &amp; scratches</span>
<span class="control-value" id="dust-value">0</span>
</div>
<input type="range" id="dust" min="0" max="100" value="0" class="slider">
<button class="btn btn-small" id="reroll-dust">reroll dust</button>
</div>
<div class="control-group">
<div class="control-label">
<span>light leak</span>
<span class="control-value" id="leak-value">0</span>
</div>
<input type="range" id="leak" min="0" max="100" value="0" class="slider">
<button class="btn btn-small" id="reroll-leak">reroll placement</button>
<div class="inline-row">
<div class="preset-row" id="leak-shape-row">
<button class="preset-btn btn-small active" data-shape="bloom">bloom</button>
<button class="preset-btn btn-small" data-shape="streak">streak</button>
<button class="preset-btn btn-small" data-shape="corner">corner</button>
</div>
<button class="btn btn-small" id="reroll-leak">reroll placement</button>
</div>
</div>
<div class="control-group">
<div class="control-label">double exposure</div>
<div class="inline-row">
<button class="btn btn-small" id="add-exposure-btn">add second photo</button>
<button class="btn btn-small" id="remove-exposure-btn" hidden>remove</button>
<input type="file" id="exposure-input" accept="image/*" hidden>
</div>
<div id="exposure-controls" hidden>
<div class="inline-row">
<label class="mini-label">blend
<select id="exposure-blend" class="select-small">
<option value="screen">screen</option>
<option value="lighten">lighten</option>
<option value="overlay">overlay</option>
<option value="multiply">multiply</option>
</select>
</label>
</div>
<input type="range" id="exposure-opacity" min="0" max="100" value="50" class="slider">
</div>
</div>
</div>