Skip to content

Latest commit

 

History

History
51 lines (35 loc) · 2.44 KB

File metadata and controls

51 lines (35 loc) · 2.44 KB

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