# saeedn504/parallax-moment architecture

> Architecture diagram of the GitHub repository saeedn504/parallax-moment, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/saeedn504/parallax-moment
- Repository: https://github.com/saeedn504/parallax-moment

## Overview

Parallax Moment turns a selected or bundled photo into a composed Android wallpaper: the WebView editor runs local subject cutout, lets the user adjust clock and composition, then sends the result through the native bridge for wallpaper application. The bridge also generates depth for the ticking live wallpaper, which reloads saved layers and renders frames. The tree contains a separate ClockVeil implementation with its own editor extension and layered renderer. The README documents the primary workflow; unsampled editor and bridge portions limit detail on their internal wiring.

Main entry points: [`www/index.html`](https://github.com/saeedn504/parallax-moment/blob/main/www/index.html) (Web editor), [`android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java`](https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java) (Native bridge), [`clockveil/app/src/main/java/com/deepfx/clock/DeepFxBridge.kt`](https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/DeepFxBridge.kt) (ClockVeil bridge), [`clockveil/app/src/main/java/com/deepfx/clock/ClockVeilWallpaperService.kt`](https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/ClockVeilWallpaperService.kt) (ClockVeil live service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Photo editor"]
  node_editor_ui["Web editor<br/>[index.html]"]
  node_native_host["WebView host<br/>[MainActivity.java]"]
  node_photo_picker["Photo picker<br/>[MainActivity.java]"]
end

subgraph group_processing["Image processing"]
  node_cutout_hook["Cutout hook"]
  node_imgly_engine["Imgly cutout engine"]
  node_imgly_assets["Imgly model assets"]
  node_depth_model["MiDaS estimator"]
  node_model_asset["MiDaS model"]
end

subgraph group_wallpaper["Wallpaper runtime"]
  node_native_bridge["Native bridge<br/>[MainActivity.java]"]
  node_wallpaper_state[("Saved wallpaper layers")]
  node_static_apply["Static wallpaper apply<br/>[MainActivity.java]"]
  node_live_service["Live wallpaper service"]
  node_parallax_renderer["Parallax renderer"]
end

subgraph group_clockveil["ClockVeil variant"]
  node_clockveil_editor["ClockVeil editor<br/>[deepfx.html]"]
  node_clockveil_hook["Motion preview hook<br/>[deepfx-hook.js]"]
  node_clockveil_host["ClockVeil WebView<br/>[MainActivity.kt]"]
  node_clockveil_bridge["ClockVeil bridge<br/>[DeepFxBridge.kt]"]
  node_clockveil_estimator["ClockVeil depth estimator"]
  node_clockveil_store[("ClockVeil settings and layers<br/>[SettingsStore.kt]")]
  node_clockveil_service["ClockVeil live service"]
  node_clockveil_layers["Layer renderer<br/>[LayerRenderer.kt]"]
  node_clock_painter["Clock painter<br/>[ClockPainter.kt]"]
end

node_user(("User"))
node_android_os(("Android system"))

node_user -->|"chooses photo"| node_editor_ui
node_editor_ui -->|"loads in"| node_native_host
node_native_host -->|"opens picker"| node_photo_picker
node_photo_picker -->|"returns image"| node_editor_ui
node_editor_ui -->|"segments locally"| node_imgly_engine
node_imgly_engine -->|"loads model"| node_imgly_assets
node_editor_ui -->|"exports cutout"| node_cutout_hook
node_cutout_hook -->|"saves cutout"| node_native_bridge
node_editor_ui -->|"applies settings"| node_native_bridge
node_native_bridge -->|"estimates depth"| node_depth_model
node_depth_model -->|"loads model"| node_model_asset
node_native_bridge -->|"saves layers"| node_wallpaper_state
node_native_bridge -->|"applies image"| node_static_apply
node_static_apply -->|"sets wallpaper"| node_android_os
node_native_bridge -->|"opens picker"| node_android_os
node_android_os -->|"starts service"| node_live_service
node_live_service -->|"loads layers"| node_wallpaper_state
node_live_service -->|"renders frames"| node_parallax_renderer
node_parallax_renderer -->|"draws surface"| node_android_os
node_user -->|"edits photo"| node_clockveil_editor
node_clockveil_editor -->|"extends preview"| node_clockveil_hook
node_clockveil_host -->|"loads page"| node_clockveil_editor
node_clockveil_editor -->|"applies layers"| node_clockveil_bridge
node_clockveil_bridge -->|"estimates depth"| node_clockveil_estimator
node_clockveil_bridge -->|"writes layers"| node_clockveil_store
node_clockveil_bridge -->|"opens picker"| node_android_os
node_android_os -->|"starts service"| node_clockveil_service
node_clockveil_service -->|"loads settings"| node_clockveil_store
node_clockveil_service -->|"draws layers"| node_clockveil_layers
node_clockveil_service -->|"draws clock"| node_clock_painter

click node_editor_ui "https://github.com/saeedn504/parallax-moment/blob/main/www/index.html"
click node_native_host "https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java"
click node_photo_picker "https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java"
click node_cutout_hook "https://github.com/saeedn504/parallax-moment/blob/main/www/depth-cutout-hook.js"
click node_imgly_engine "https://github.com/saeedn504/parallax-moment/blob/main/www/imgly/onnxruntime-web/ort-wasm-simd-threaded.mjs"
click node_imgly_assets "https://github.com/saeedn504/parallax-moment/tree/main/www/imgly/models"
click node_native_bridge "https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java"
click node_depth_model "https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/MidasDepthEstimator.kt"
click node_model_asset "https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/assets/midas_small_256_fp16.tflite"
click node_wallpaper_state "https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/DepthLiveWallpaperService.java"
click node_static_apply "https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java"
click node_live_service "https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/DepthLiveWallpaperService.java"
click node_parallax_renderer "https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/DepthParallaxRenderer.java"
click node_clockveil_editor "https://github.com/saeedn504/parallax-moment/blob/main/clockveil/web/deepfx.html"
click node_clockveil_hook "https://github.com/saeedn504/parallax-moment/blob/main/clockveil/web/deepfx-hook.js"
click node_clockveil_host "https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/MainActivity.kt"
click node_clockveil_bridge "https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/DeepFxBridge.kt"
click node_clockveil_estimator "https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/MidasDepthEstimator.kt"
click node_clockveil_store "https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/SettingsStore.kt"
click node_clockveil_service "https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/ClockVeilWallpaperService.kt"
click node_clockveil_layers "https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/LayerRenderer.kt"
click node_clock_painter "https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/ClockPainter.kt"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_editor_ui,node_native_host,node_photo_picker,node_user toneBlue
class node_cutout_hook,node_imgly_engine,node_imgly_assets,node_depth_model,node_model_asset toneAmber
class node_native_bridge,node_wallpaper_state,node_static_apply,node_live_service,node_parallax_renderer toneMint
class node_clockveil_editor,node_clockveil_hook,node_clockveil_host,node_clockveil_bridge,node_clockveil_estimator,node_clockveil_store,node_clockveil_service,node_clockveil_layers,node_clock_painter toneRose
class node_android_os toneIndigo
```

## Components

### Photo editor

- [Web editor](https://github.com/saeedn504/parallax-moment/blob/main/www/index.html): `www/index.html`
- [WebView host](https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java): `android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java`
- [Photo picker](https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java): `android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java`

### Image processing

- [Cutout hook](https://github.com/saeedn504/parallax-moment/blob/main/www/depth-cutout-hook.js): `www/depth-cutout-hook.js`
- [Imgly cutout engine](https://github.com/saeedn504/parallax-moment/blob/main/www/imgly/onnxruntime-web/ort-wasm-simd-threaded.mjs): `www/imgly/onnxruntime-web/ort-wasm-simd-threaded.mjs`
- [Imgly model assets](https://github.com/saeedn504/parallax-moment/tree/main/www/imgly/models): `www/imgly/models`
- [MiDaS estimator](https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/MidasDepthEstimator.kt): `android/app/src/main/java/com/depth/live/wallpaper/MidasDepthEstimator.kt`
- [MiDaS model](https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/assets/midas_small_256_fp16.tflite): `android/app/src/main/assets/midas_small_256_fp16.tflite`

### Wallpaper runtime

- [Native bridge](https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java): `android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java`
- [Saved wallpaper layers](https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/DepthLiveWallpaperService.java): `android/app/src/main/java/com/depth/live/wallpaper/DepthLiveWallpaperService.java`
- [Static wallpaper apply](https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java): `android/app/src/main/java/com/depth/live/wallpaper/MainActivity.java`
- [Live wallpaper service](https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/DepthLiveWallpaperService.java): `android/app/src/main/java/com/depth/live/wallpaper/DepthLiveWallpaperService.java`
- [Parallax renderer](https://github.com/saeedn504/parallax-moment/blob/main/android/app/src/main/java/com/depth/live/wallpaper/DepthParallaxRenderer.java): `android/app/src/main/java/com/depth/live/wallpaper/DepthParallaxRenderer.java`

### ClockVeil variant

- [ClockVeil editor](https://github.com/saeedn504/parallax-moment/blob/main/clockveil/web/deepfx.html): `clockveil/web/deepfx.html`
- [Motion preview hook](https://github.com/saeedn504/parallax-moment/blob/main/clockveil/web/deepfx-hook.js): `clockveil/web/deepfx-hook.js`
- [ClockVeil WebView](https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/MainActivity.kt): `clockveil/app/src/main/java/com/deepfx/clock/MainActivity.kt`
- [ClockVeil bridge](https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/DeepFxBridge.kt): `clockveil/app/src/main/java/com/deepfx/clock/DeepFxBridge.kt`
- [ClockVeil depth estimator](https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/MidasDepthEstimator.kt): `clockveil/app/src/main/java/com/deepfx/clock/MidasDepthEstimator.kt`
- [ClockVeil settings and layers](https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/SettingsStore.kt): `clockveil/app/src/main/java/com/deepfx/clock/SettingsStore.kt`
- [ClockVeil live service](https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/ClockVeilWallpaperService.kt): `clockveil/app/src/main/java/com/deepfx/clock/ClockVeilWallpaperService.kt`
- [Layer renderer](https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/LayerRenderer.kt): `clockveil/app/src/main/java/com/deepfx/clock/LayerRenderer.kt`
- [Clock painter](https://github.com/saeedn504/parallax-moment/blob/main/clockveil/app/src/main/java/com/deepfx/clock/ClockPainter.kt): `clockveil/app/src/main/java/com/deepfx/clock/ClockPainter.kt`

### Other components

- **User**
- **Android system**

## Connections

- User → Web editor: chooses photo
- Web editor → WebView host: loads in
- WebView host → Photo picker: opens picker
- Photo picker → Web editor: returns image
- Web editor → Imgly cutout engine: segments locally
- Imgly cutout engine → Imgly model assets: loads model
- Web editor → Cutout hook: exports cutout
- Cutout hook → Native bridge: saves cutout
- Web editor → Native bridge: applies settings
- Native bridge → MiDaS estimator: estimates depth
- MiDaS estimator → MiDaS model: loads model
- Native bridge → Saved wallpaper layers: saves layers
- Native bridge → Static wallpaper apply: applies image
- Static wallpaper apply → Android system: sets wallpaper
- Native bridge → Android system: opens picker
- Android system → Live wallpaper service: starts service
- Live wallpaper service → Saved wallpaper layers: loads layers
- Live wallpaper service → Parallax renderer: renders frames
- Parallax renderer → Android system: draws surface
- User → ClockVeil editor: edits photo
- ClockVeil editor → Motion preview hook: extends preview
- ClockVeil WebView → ClockVeil editor: loads page
- ClockVeil editor → ClockVeil bridge: applies layers
- ClockVeil bridge → ClockVeil depth estimator: estimates depth
- ClockVeil bridge → ClockVeil settings and layers: writes layers
- ClockVeil bridge → Android system: opens picker
- Android system → ClockVeil live service: starts service
- ClockVeil live service → ClockVeil settings and layers: loads settings
- ClockVeil live service → Layer renderer: draws layers
- ClockVeil live service → Clock painter: draws clock