Skip to content

Repository files navigation

Holosticker

Holosticker demo

Website GitHub stars License Last commit Sponsor

Holographic sticker studio. Upload an SVG or PNG, tune the foil, tilt it with your cursor, and export a realistic holofoil sticker as a transparent PNG.

Live at holosticker.dev

Features

  • Real-time three.js rendering: PBR holofoil with view-dependent diffraction bands, thin-film iridescence, metallic flakes, and studio environment reflections
  • Pointer tilt: rainbow bands sweep across the foil like a real holo card
  • Die-cut border from an exact euclidean distance transform, with cut tolerance (morphological closing) so letter counters and small gaps stay foil like a real cut path
  • Ink control: fade artwork into the foil or densify it into solid print that covers the holo
  • Refractor overlays: triangle, square, and stripe facet patterns with per-facet diffraction phase
  • 3D peel: graded hinge bend with conical curl and a glossy foil liner backside
  • Dark mode (toggle in the toolbar, or press D)
  • Save / import settings as JSON; export PNG at 1024 / 2048 / 4096 with transparency

Run

npm install
npm run dev

Stack

Vite, React, TypeScript, Tailwind CSS v4, shadcn/ui, three.js. Deployed on Vercel.

Deploy

The app is a static Vite build - Vercel auto-detects it:

vercel --prod

Support

If Holosticker is useful to you, consider sponsoring jal-co on GitHub.

Sponsors

About

holographic sticker studio

Resources

Contributing

Stars

139 stars

Watchers

0 watching

Forks

Contributors

Languages