Every tool, slider, preset and shortcut in TAPREVEAL studio — the tap & hold reveal maker for X.
The one idea: the base image gets the transparent pattern and fuses into X's background. The front layer — clothing, an overlay, a “Tap me” stamp — stays 100% opaque and is all your followers see. Tapping brings the base image back.
X keeps PNG files that contain transparency — fully opaque uploads get re-encoded as JPEG and lose it. The whole trick lives in that rule.
The base image is riddled with a 1-pixel lattice of transparent holes. The front layer stays 100% opaque.
In the timeline, X composites the image over the viewer's theme background and downscales it hard. The 1-pixel lattice is far too fine to survive that: it averages out and fuses with the background, so the base image sinks away. The opaque front layer keeps its full contrast and is the only thing that reads.
Tap or long-press and X serves the image at full resolution in the media viewer. The lattice is spatially resolved instead of averaged away, and the base image comes back. That is the reveal.
Dark themes hide best. On Lights out the patterned base fuses into black and vanishes; on Light it only washes to pale grey and stays half-readable. Most of X browses dark, which is why this works.
fig.01 — patterned base (left) vs opaque front layer (right)
Why PNG-8? Indexed color (a palette of ≤256 entries plus one transparent slot via the tRNS chunk) keeps files small and stable, so X preserves the exact pixel pattern instead of resampling it away. The app writes the PNG byte stream itself and re-decodes every export to verify it.
Everything runs in your browser. No image ever leaves your device — there is no server.
01 ⁄ Interface map
Header — Open image, Add layer, Save project / Load, ✳ tex (toggles the grain / light-leak texture overlays — cosmetic only, disable on slow devices), ? (in-app README, F1), Export PNG-8.
Left rail — the six tools, undo / redo, fit-to-view.
Canvas — your document. Wheel zooms around the pointer (×1.12 per notch, 3%–3200%), Space-drag pans, 0 fits.
Right panel — five numbered sections: layers, tool options, reveal effect, preview, export.
Footer — zoom %, document size, contextual hint for the active tool, autosave status.
02 ⁄ Getting images in
Open image or drag & drop onto the window — the first image becomes the base layer and sets the document size. PNG / JPG / WebP; EXIF rotation is respected.
Ctrl+V pastes an image straight from the clipboard.
Add layer stacks additional images on top — e.g. a separate clothes / accessory PNG over the base artwork. See §04 for the one-click mask trick this enables.
If a previous session was autosaved, the start screen shows Restore session / Discard.
03 ⁄ Tools
Tool
Key
What it does
Move
V
Drag a layer to reposition it. Click selects the layer under the pointer (rotated layers hit-test correctly). Fine-tune rotation / scale / opacity in §04's layer properties.
Brush
B
Paints the reveal mask (shown as a blue tint). Size 4–400 px ([ / ] = ∓8), Hardness 0–100 — low hardness gives a soft edge, which the exporter converts into a gradual pattern falloff.
Erase
E
Same brush, removes mask instead of adding it.
Wand
W
Click a color region to mask it in one go. Tolerance 0–120 sets how similar colors must be; Contiguous only restricts the selection to the connected area under the click — untick it to grab that color everywhere in the image.
Text
T
Click the canvas to place a text stamp (default “TAP & HOLD!!”) so viewers know to interact. It is a normal layer: move it with V, style it in §04.
Pan
H
Drag to pan. Holding Space pans temporarily from any tool.
The rail also holds Undo / Redo (Ctrl+Z / Ctrl+Shift+Z or Ctrl+Y) — history covers mask edits, up to 30 steps — and Fit (0).
04 ⁄ Layers
The list shows every layer, topmost first-in-stack; the 👁 toggle hides / shows a layer, clicking selects it. Delete or the Delete button removes the selected layer.
Properties (text layers): multi-line text box, font (10 stacks — Impact by default; Yu Gothic covers Japanese), Size 8–600, Outline width 0–60, fill + outline colors, bold.
Mask from alpha — the power move: it adds the selected layer's opaque silhouette to the reveal mask. Workflow: base artwork + a separate clothes PNG on top → select the clothes layer → one click, and exactly that shape is masked. No painting.
05 ⁄ The front layer (the mask)
The blue tint marks the front layer — what stays 100% opaque and sharp in the timeline. Everything you leave unpainted receives the pattern and hides. Paint nothing and the entire image hides, which is the simplest and often the best result.
Three ways in, from the Front layer panel:
⇪ Upload overlay — drop in a separate PNG (clothing, a logo, a censor bar). It is added as a layer and its opaque shape becomes the front layer automatically. Reposition it, then hit Mask from alpha again.
✎ Cut from base — switches to the brush so you can paint the front layer straight onto the base image. The wand (W) grabs flat regions in one click.
∅ Hide everything — clears the front layer entirely.
The readout under those buttons always states the split, e.g. front layer covers ~18% — the other 82% hides.
Select skin tones — a heuristic tuned for anime-style skin; it seeds the mask, you refine with brush / erase.
Soften edges — feathers the mask (~2.5 px blur). Feathered zones export as a gradual falloff of the pattern instead of a hard cut, so the hidden area melts into the visible one.
Invert mask — swaps front layer ↔ hidden.
Clear mask — starts over (undoable).
06 ⁄ Reveal effect
Presets are one-click bundles of the settings below — Classic 1px checker is the recommended default; Classic + compensation adds brightness correction for the tap view; Soft veil / Heavy hide trade subtlety against concealment; Scanlines / Bars / 2px checker are stylistic or robustness variants.
Pattern
Removed
Character
1px checkerboard
50%
The classic. Strongest optical fusion, disappears best on Light theme.
2px checkerboard
50%
Coarser blocks — more resistant if a client re-compresses the image, slightly more visible up close.
Sparse dots
25%
Gentle veil: the area stays readable in the timeline, just washed out.
Dense
75%
Aggressive hide; the tap view darkens noticeably — pair with compensation.
Rows / Columns
50%
Every other line — CRT / scanline aesthetic.
Custom density
10–90%
Free removal amount via ordered (Bayer) dithering; the Removal slider appears when selected.
Full-view luminosity compensation — the tap view composites over near-black, so a 50% pattern reads ~50% darker. This pre-brightens the kept pixels by the inverse of the kept fraction (capped ×4) so the revealed area reads near-normal. Works best on mid / dark tones; very bright pixels clamp at white.
Legacy: pattern inside the mask only — the pre-v2 behaviour, where the painted area was the part that hid. Kept so older saved projects still open; leave it off.
Live effect on canvas — renders the pattern directly in the editor. It is pixel-exact when Export width = Original; at other widths trust the preview panel instead.
07 ⁄ Preview — X simulation
Timeline theme — Lights out is the default and the best case; Light is the weak one, where the base only washes to pale grey. Check all three before posting.
The preview runs your image through the exact export pipeline (pattern applied in final pixels), then composites and downscales it the way X's timeline does. The readout under it shows output dimensions and render time.
Press & hold the preview — it switches to the tapped full view (black backdrop), released = back to timeline. Same gesture as on X.
Side-by-side opens both states in one modal for direct comparison; Refresh forces a re-render.
08 ⁄ Export
Width — Original / 2048 / 1600 / 1200 / 1080 px (height follows). Keep ≥1200 px: the timeline must downsample your image for the pattern to fuse.
Palette — 255 / 128 / 64 colors. 255 for photos and gradients; fewer colors = smaller files for flat-color art.
Floyd–Steinberg dithering — smooths gradient banding on photographic sources at the cost of a little grain. Leave off for flat colors.
Export PNG-8 (Ctrl+E) — writes the file, re-decodes it to verify byte-for-byte, then downloads as tapreveal_{width}px_{pattern}.png. The toast reports dimensions, color count, file size and the verification result.
×3 strengths — batch-exports soft (25%), classic (50%) and strong (75%) variants in one go, so you can pick after a test post.
Files approaching 5 MB (X's PNG limit) trigger a warning — reduce width or palette.
09 ⁄ Projects & autosave
Save project (Ctrl+S) downloads a JSON containing all layers, the mask and every setting; Load restores it. This is the reliable way to keep work.
Autosave writes to the browser's local storage a few seconds after each change — the footer shows the last save time. Very large documents exceed the browser quota; the footer will tell you to use Save project instead. Autosave is a safety net, not an archive: clearing browser data clears it.
10 ⁄ Shortcuts
Key
Action
Key
Action
VBEWTH
Tools (§03)
Space
Hold to pan
[ / ]
Brush size ∓8
0
Fit to view
+ / −
Zoom ±20%
Wheel
Zoom at pointer
Ctrl+Z
Undo mask edit
Ctrl+Shift+Z / Ctrl+Y
Redo
Ctrl+S
Save project
Ctrl+E
Export PNG-8
Ctrl+V
Paste image
Delete
Delete selected layer
F1
In-app README
11 ⁄ Posting on X
Post from x.com on desktop web when possible — it uploads the PNG untouched most reliably.
Always do one test post (a secondary account works), Dark theme first. Rendering differs across X clients and versions; the preview is a faithful simulation, not a guarantee.
Never route the PNG through a chat app as a “photo” — it gets re-compressed and the transparency dies. Send it as a file/document, or download it straight onto the posting device.
Add a text stamp or caption so people know to tap — the effect is invisible by design.
Label your posts according to X's media policies; mark sensitive media where applicable.
12 ⁄ Troubleshooting & limits
“I can still see the base image” — check the export width first. If the pattern reads as visible dots or dashes instead of fusing, the timeline never downscaled it: export at 1600–2048 px. Then check the theme — Light is the weak case by design.
“X turned my upload into a JPEG” — the pattern was lost before upload (an app re-encoded it) or the file had no transparency. Re-export and upload the untouched PNG from desktop web.
“Download does nothing” — in-app browsers (Instagram / TikTok) sometimes block downloads. Open the tool in your real browser.
File over the 5 MB warning — drop to 1600 or 1200 px width, or 128 colors.
Sluggish on an old machine — hit ✳ tex to kill the texture overlays, and disable Live effect.
v1 limits — undo covers mask edits only (not layer moves / deletes); PNG-8 alpha is binary, so semi-transparent source pixels are thresholded at 50%; no pinch zoom yet — the editor is desktop-first, exports view fine everywhere.
tapreveal studio · vol.01 · cyanotype ed. · MMXXVI·appgithub