LifeGrid

Premium Dynamic Wallpapers for iOS and Android Lock Screens.

LifeGrid generates high-resolution, data-driven wallpapers that help you visualize your time, goals, and life progress directly on your iPhone or Android lock screen. Designed to sit perfectly between the time, widgets, and dynamic island.

Tech Stack

Features

• Dynamic Visuals

  • Year Progress: 365 dots representing every day of the year. Active day highlighted.
  • Life Calendar: Every week of your life (up to 80+ years) in a single grid.
  • Goal Countdown: Circular progress tracker for your biggest targets.

• Pixel-Perfect

  • Native resolution generation for all modern iPhones (13 mini to 16 Pro Max).
  • Smart layout adjustments for Notch vs Dynamic Island devices.
  • Retina-quality live previews (+10% contrast boost filter).

• Architecture

  • Frontend: Lightweight Vanilla JS & CSS. No frameworks, instant load.
  • Backend: Serverless Cloudflare Worker with Rust-based SVG rendering (resvg).
  • Security: Strict Zod schema validation & XSS protection.

Screenshots

Getting Started

Prerequisites

• Node.js & npm
• Cloudflare Wrangler CLI (npm install -g wrangler)

Backend Setup (Cloudflare Worker)

Navigate to the worker directory and install dependencies:

cd worker
npm install

Run locally:

npx wrangler dev

Deploy to Cloudflare:

npx wrangler deploy

Frontend Setup

The frontend is a static site. You can serve it with any static file server.

# From project root
npx serve .

Open http://localhost:3000 to see the wallpaper generator.

Security

All inputs are sanitized and validated before processing:

• Zod Schema: Ensures dimensions, colors, and dates strictly adhere to safe formats.
• Output Encoding: Text inputs are XML-escaped to prevent injection.
• Resource Limits: Max dimensions and memory usage capped to prevent DoS.

Supported Devices

Automatically adjusts for:

• Dynamic Island: iPhone 14 Pro/Pro Max, 15 series, 16 series.
• Notch: iPhone 13 series, 14/14 Plus.
• Compact: iPhone 13 mini.

📁 Project Structure

lifegrid/
├── index.html          # Frontend (Apple-inspired dark theme)
├── styles.css          # Black & white aesthetic with ruler borders
├── app.js              # Card selection, preview, URL generation
├── data/
│   ├── countries.js    # 65+ countries with timezones
│   └── devices.js      # Device resolution presets
└── worker/
    ├── wrangler.toml   # Cloudflare Worker config
    ├── package.json    # Dependencies (resvg-wasm)
    └── src/
        ├── index.js    # Main entry point
        ├── timezone.js # Timezone utilities
        ├── svg.js      # SVG generation helpers
        └── generators/
            ├── year.js # Year progress calendar
            ├── life.js # Life calendar (dots)
            └── goal.js # Goal countdown (circle)

🔗 API Reference

GET /generate?country=us&type=year&bg=000000&accent=FFFFFF&width=1179&height=2556

Param	Description
country	ISO 2-letter code (us, in, gb)
type	year, life, or goal
bg	Background color (hex without #)
accent	Accent color (hex without #)
width	Image width in pixels
height	Image height in pixels
dob	Date of birth for life calendar
lifespan	Expected years (default: 80)
goal	Target date for countdown
goalName	Name of your goal

📱 iOS Shortcut

1. Copy your generated URL
2. Open Shortcuts app
3. New Shortcut:
   • Get Contents of URL → paste URL
   • Set Wallpaper → Lock Screen
4. Automate to run daily at 6 AM

📱 Android Setup

1. Copy URL: Configure your wallpaper above and copy the generated URL
2. Prerequisites: Install MacroDroid from Google Play Store.
3. Setup Macro: Trigger: Date/Time → Day/Time (00:01:00) → Active all weekdays
4. Configure Actions:
   • 4.1 Download Image
     Web Interactions → HTTP Request (GET)
     Paste URL. Enable "Block next actions"
     Tick "Save response" → /Download/lifegrid.png
   • 4.2 Set Wallpaper
     Device Settings → Set Wallpaper
     Select /Download/lifegrid.png
     ⚠️ Use exact same filename
5. Finalize: Give macro a name → Tap Create Macro

Contribution

Contributions are welcome! If you have ideas for new features or bug fixes, please follow these steps:

1. Fork the repository.
2. Create a new branch: git checkout -b feature/your-feature-name.
3. Make your changes and commit them: git commit -m 'Add some feature'.
4. Push to the branch: git push origin feature/your-feature-name.
5. Submit a pull request.

Please ensure your code follows the existing style and includes appropriate tests.

Author

⭐ Star This Repo

If you find this project useful, please consider giving it a star! It helps others discover the project.

License: Apache License 2.0

---

Made with ❤️ for mindful living

#ios #iphone #wallpaper #productivity #motivation #calendar #year-progress #life-grid #goal-tracking #cloudflare-workers #serverless #javascript #svg #design #minimalism