/devworld-badge

Render conference badges using WebGL

Primary LanguageVue

Card flow

  1. Sign up with email address, with terms and conditions.
  2. Fill in name and profile picture
  3. Generate badge
  4. Export to GIF
  5. Share on social media

Important details:

  • Social media video dimensions
  • Social media video share restrictions

Inspirations

Neon Frosted Glass

Search: ...

  1. https://png.pngtree.com/png-clipart/20221014/original/pngtree-red-neon-border-frosted-glass-png-image_8685728.png
  2. https://png.pngtree.com/png-clipart/20230102/original/pngtree-blue-neon-border-frosted-glass-light-filter-png-image_8856466.png
  3. https://png.pngtree.com/png-clipart/20221003/original/pngtree-pink-purple-neon-border-frosted-glass-circle-png-image_8654109.png
  4. https://png.pngtree.com/png-clipart/20221228/original/pngtree-frosted-glass-neon-border-blue-rectangular-light-png-image_8816315.png
  5. https://png.pngtree.com/png-clipart/20221018/original/pngtree-pink-purple-neon-border-frosted-glass-png-image_8701738.png
  6. https://png.pngtree.com/png-clipart/20221014/original/pngtree-pink-peach-neon-border-frosted-glass-png-image_8686355.png
  7. https://png.pngtree.com/png-clipart/20220930/original/pngtree-rectangle-cyber-frosted-glass-neon-border-pink-blue-png-image_8644245.png

Ideas

  • Shiny effect
  • Mouse hover -> tilt
  • Mobile sensor -> tilt
  • Click to focus (from Pokemon Cards v2)
  • Cookie-clicker style minigame
  • Share as image, share as gif
  • Record card as animated image: (webp) https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
  • Customizable branding of the card
  • Lanyards
  • Swinging
  • Use Fluid simulation to simulate dry-ice fog effect

Fonts

Social Media Image Sizes

Brand Profile Photo Cover Photo Image Post
Twitter400 x 4001500 x 5001024 x 512
Facebook180 x 180820 x 312, 1920 x 1080 (event)1200 x 630
Instagram110 x 110N/A320 x 1080 (portrait)
1080 x 1080 (landscape)
Linkedin400 x 4001584 x 396 (personal), 1536 x 768 (company)1200 x 4620
Pinterest165 x 165600 x 900600 x 900