Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Glass Dock

Drop in an image, get a glass tray composited onto it.
Runs entirely on your device — nothing is uploaded anywhere.

What it does

Point it at a screenshot or wallpaper and it renders a translucent glass tray along the bottom, sized and positioned from the image's own dimensions. Width, height, corner radius, blur, refraction, bezel width, tint, rim light, shadow and optional icons are all adjustable.

Exports at the full resolution of the source image.

The part I actually cared about

Most "glass" effects are a white rectangle at 20% opacity over a blurred backdrop. That reads as frosted plastic, not glass, because real glass bends what's behind it — it doesn't just fog it.

So the tray is drawn per-pixel instead:

  1. The background is blurred into an offscreen canvas.
  2. For every pixel inside the tray, the app computes its signed distance to the rounded-rectangle edge.
  3. Pixels within the bezel band get resampled along the outward normal of that distance field, offset by a curve that rises steeply near the rim.
  4. Optionally the red and blue channels sample at slightly different offsets, which gives the faint colour fringe you get at the edge of a real lens.

Content near the rim compresses and pulls inward, the way it does through an actual bevel — visible in the detail crop above, where the shape behind the tray shifts as it passes under the edge.

There's a small graph in the Glass section showing the displacement curve, because "refraction: 26" doesn't mean anything on its own.

Everything renders at a capped preview resolution while you drag sliders, then re-renders at full resolution on export.

Interface

Material 3, with light and dark themes following the system setting. Icons are inline SVG rather than the Material Symbols font, so the app works with no network connection at all.

The app icon and splash screens in resources/ are generated by resources/icon_gen.py using the same refraction maths as the tray itself.

Known limits

  • The theme choice doesn't persist between launches yet.
  • Clipboard copy needs a secure context, so it works over HTTPS and in the Android build but not from a file:// page. Export always works.
  • Images loaded from a remote URL would taint the canvas, so only local files, drag-and-drop and paste are accepted.
  • The Android build is a debug APK. It sideloads fine but isn't signed for the Play Store.
  • Tested on one phone so far. Reports from others welcome.

Stack

Vanilla JavaScript and Canvas 2D. Capacitor wraps it for Android, with @capacitor/filesystem and @capacitor/share handling saving, since <a download> and the image clipboard don't exist in a WebView.

License

MIT. Do whatever you like with it.

About

Drop in an image, get a liquid glass tray composited onto it. Runs entirely in the browser or as an Android app — nothing is uploaded anywhere.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages