Live demo: https://xmasify.cc 🎄

Xmasify is a Christmas avatar generator built with SvelteKit. Upload your avatar, pick a preset style or write your own prompt, and instantly add festive elements like Santa hats, scarves, snow, gifts and more – all with background Christmas music.

• 🎄 Animated landing screen with smooth transition into the app
• 🖼️ Avatar upload & crop
  • Supports jpg / png / gif / webp / svg / bmp / tiff
  • Crop the avatar area with the built-in AvatarCropper component
• ✏️ Xmasify styles
  • Multiple presets: Christmas hat, antlers, scarf, Christmas tree, lights, snow, gifts, etc.
  • Custom prompt mode for fine‑grained control
• 🧠 Xmasify API integration
  • Frontend calls the backend Xmasify service via src/lib/api/xmasify-api.ts, sending the cropped avatar plus prompt
• 🧩 Avatar painting & preview
  • AvatarPainter for interactive avatar painting/preview
  • Support for multiple generated results
• 💾 Export tools
  • One‑click download (PNG)
  • One‑click copy to clipboard (Clipboard API, converted to PNG automatically)
• 🎵 Built‑in music player
  • MusicPlayer component that plays multiple Christmas tracks from static/music/
• 📱 Mobile friendly
  • Tailwind CSS + Skeleton UI for responsive layout

• Framework: Svelte 5 + SvelteKit
• Build tool: Vite
• UI & styling:
  • Tailwind CSS
  • Skeleton UI (@skeletonlabs/skeleton + @skeletonlabs/tw-plugin)
• Animation & interaction:
  • @formkit/auto-animate
  • Svelte transitions (fade, slide, etc.)
  • @lottiefiles/dotlottie-svelte for loading Lottie animations
• Icons: lucide-svelte
• Deployment:
  • Cloudflare Workers / Pages (@sveltejs/adapter-cloudflare + wrangler.toml)

src/
  app.html / app.css / app.postcss    # Global entry & styles
  lib/
    api/
      xmasify-api.ts                  # Xmasify backend API wrapper
    components/
      avatar-cropper/                 # Avatar cropper component
      avatar-painter/                 # Avatar painter & preview component
      music-player/                   # Music player component
  routes/
    +layout.svelte                    # Global layout
    +page.svelte                      # Landing page with intro & transition
    home/+page.svelte                 # Main flow: upload, crop, style selection, generate, export
static/
  images/                             # UI images (Christmas tree, Santa, etc.)
  icons/                              # Small icons used in style selector
  music/                              # Christmas music tracks
  demo/                               # Demo videos of the flow

• Node.js 18+ (20+ recommended)
• Any package manager: pnpm / npm / yarn

# Using pnpm (recommended)
pnpm install

# Or using yarn
yarn install

# Or using npm
npm install

# Dev mode
pnpm dev
# Or
npm run dev

# Open browser automatically
npm run dev -- --open

The app will usually be available at http://localhost:5173 (or the port shown in the terminal).

pnpm lint      # ESLint
pnpm check     # Svelte Check

# Production build
pnpm build
# Or
npm run build

# Preview production build locally
pnpm preview
# Or
npm run preview

The frontend talks to the Xmasify backend through src/lib/api/xmasify-api.ts. Configure it according to your backend:

• API base URL
• Auth method (API key / token / cookies, etc.)
• Image upload / generation endpoints

If you deploy with Cloudflare Workers / Pages, put related configs into wrangler.toml and environment variables.

This project is wired for SvelteKit + Cloudflare:

• Production build: pnpm build
• Deploy to Cloudflare:
  • Configure your Cloudflare project in wrangler.toml
  • Use npx wrangler pages deploy or wrangler deploy

You can also swap to other adapters (Node, Vercel, etc.) following the SvelteKit docs.

1. Open the site (or the live demo at https://xmasify.cc)
2. Step 1: upload your avatar and crop the region you like
3. Step 2:
   • Pick a preset style or switch to Custom Prompt and edit the prompt text
   • Click Xmasify! to send the request to the backend
4. Step 3: preview your Xmasified avatar, then:
   • Try again to regenerate
   • Download PNG
   • Copy image to clipboard