A Wallpaper Engine web wallpaper inspired by Arknights Main Theme EP17
- Layer 0 — Native 4K video/image background (3840×2400, 16:10)
- Layer 1 — Canvas-rendered HUD effects: scanlines, arc trails, particles, noise, glow, depth bars, quadrant labels
- Layer 2 — DOM-rendered large typography: month label, date number, HH:mm digital clock, corner labels
- Layer 3 — PNG clock hands (hour / minute / second) with mechanical overshoot tick animation
- 4K 16:10 native — designed for 3840×2400, logical coordinates at 1920×1200
- Mechanical clock hands — PNG hands tick every second with overshoot rebound easing
- Dual text rendering — large time/date via DOM for sharpness; small HUD labels via Canvas + Pretext for performance
- Canvas effects — scanlines, arc trails, particle drift, noise grain, center glow (low-res offscreen buffer)
- 16:9 compatible — core content stays within a 1920×1080 safe area; top/bottom edges may crop
- Offline-first — no external fonts, assets, or network requests at runtime
- Performance-aware — DPR cap, RAF pause on tab hide, no full-screen blur, no per-frame React state
| Concern | Choice |
|---|---|
| Framework | React 19 + React Compiler |
| Build | Vite 8 |
| Language | TypeScript |
| Package manager | pnpm |
| Small HUD text layout | @chenglou/pretext |
| Animation | requestAnimationFrame + custom easing |
| Background | Native <video> / <img> (never drawn to Canvas) |
| Target Chromium | 124.0.0.0 (Wallpaper Engine embedded browser) |
pnpm install
pnpm dev # Start dev server
pnpm build # Build for production
pnpm preview # Preview production build- Run
pnpm build - Copy the entire
dist/folder into Wallpaper Engine's web wallpaper directory - Ensure
dist/project.jsonanddist/preview.jpgare present - Select "Esperanta" from Wallpaper Engine's wallpaper list
The wallpaper runs fully offline — no internet connection required after installation.
src/
app/ # App entry, composition root
components/
BackgroundLayer/ # Native video/img background
CanvasEffects/ # RAF-driven HUD effects
Clock/ # PNG hands + overshoot tick
HudText/ # DOM large typography
SafeFrame/ # 16:10 cover scaling + debug overlay
hooks/ # useClockTick, useViewport, etc.
lib/
clockMath.ts # Angle calculation, time formatting
easing.ts # backOut easing for overshoot
layout.ts # DESIGN constants, cover scale, safe area
text/ # Pretext wrapper — layout, cache, draw
styles/ # CSS variables, global reset
public/
project.json # Wallpaper Engine metadata and user properties
preview.jpg # Wallpaper Engine preview image
Inspired by Arknights Main Theme EP17.
Designed by tomo.
Animated by u202f.
Licensed under CC BY-NC-ND 4.0 License.