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

Initial implementation of latent: film-effects editor + develop-later server
All checks were successful
Docker / build-and-push (push) Successful in 3m29s
Details

Browse Source 
Canvas-based client-side editor (grain, vignette, halation, procedural
light leaks, color-cast presets) plus a small Express/SQLite server for
the two paths that need persistence: instant share links and delayed
"send to develop" links with a randomized reveal time.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Fredrik Johansson
2026-07-16 15:19:48 +02:00
commit 5a5c0da8a6
20 changed files with 2611 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
index.html Normal file
View File

@@ -0,0 +1,92 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>latent</title>
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div class="header-row">
<h1>latent</h1>
</div>
<p class="hint">film-style edits, in the browser — develop instantly, or wait</p>
<div class="card" id="drop-card">
<label class="drop-zone" id="drop-zone" for="file-input">
<span class="drop-zone-label">choose a photo, or drag one here</span>
<span class="drop-zone-sub">nothing leaves your browser until you say so</span>
</label>
<input type="file" id="file-input" accept="image/*" capture="environment" hidden>
</div>
<div class="card" id="editor-card" hidden>
<div class="canvas-wrap">
<canvas id="canvas"></canvas>
</div>
<div class="controls">
<div class="control-group">
<div class="control-label">vibe</div>
<div class="preset-row" id="preset-row">
<button class="preset-btn active" data-preset="none">none</button>
<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>
</div>
</div>
<div class="control-group">
<div class="control-label">
<span>grain</span>
<span class="control-value" id="grain-value">0</span>
</div>
<input type="range" id="grain" min="0" max="100" value="0" class="slider">
</div>
<div class="control-group">
<div class="control-label">
<span>vignette</span>
<span class="control-value" id="vignette-value">0</span>
</div>
<input type="range" id="vignette" min="0" max="100" value="0" class="slider">
</div>
<div class="control-group">
<div class="control-label">
<span>halation</span>
<span class="control-value" id="halation-value">0</span>
</div>
<input type="range" id="halation" min="0" max="100" value="0" class="slider">
</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>
</div>
<div class="actions actions-row">
<button class="btn" id="reset-btn">reset</button>
<button class="btn" id="new-photo-btn">new photo</button>
<button class="btn btn-primary" id="download-btn">download</button>
</div>
<div class="actions actions-row">
<button class="btn" id="share-btn">generate share link</button>
<button class="btn btn-develop" id="develop-btn">send to develop</button>
</div>
<div id="result-panel" class="result-panel" hidden></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>