A Twitch channel points-triggered collectible card drop overlay. When a viewer redeems the reward, a randomized card flips over in OBS revealing a creature with rarity, stats, moves, type, and flavor text — complete with holographic effects on rare pulls.
Live: dexteritycs.github.io/Card-Drop/
- 5 rarity tiers: Common, Uncommon, Rare, Epic, Legendary — each with distinct colors and weighted drop rates
- Holographic foil shimmer animation on Rare+ cards
- Per-card stats: HP, type, moves with energy costs, weakness, and flavor text
- Pull history sidebar with rarity breakdown and best streak tracking
- Connects to Twitch EventSub WebSocket — triggers live on channel point redemptions
- Self-serve setup flow — other streamers can configure it for their own channel
- Credentials persist in URL hash for SLOBS browser source compatibility
| Rarity | Rate | Color |
|---|---|---|
| Common | 45% | Gray |
| Uncommon | 28% | Green |
| Rare | 17% | Blue |
| Epic | 8% | Purple |
| Legendary | 2% | Gold |
- Go to dev.twitch.tv/console
- Register a new application
- Set OAuth Redirect URL to:
https://dexteritycs.github.io/Card-Drop/ - Copy your Client ID
- Open
https://dexteritycs.github.io/Card-Drop/in a browser - Click the ⚙ Setup button
- Enter your Client ID, channel name, and the exact reward name that triggers a drop
- Click Connect with Twitch and authorize
- Click Save — the overlay is now live and listening
- Add a Browser Source
- Paste the configured URL (with hash token) from the setup flow
- Recommended size:
700wide ×500tall (adjust to your layout) - Check Refresh browser when scene becomes active
- Twitch Dashboard → Viewer Rewards → Channel Points → Manage Rewards
- Create a reward matching the name you set in the widget config (e.g.
Card Drop) - Set your point cost and enable it
- Vanilla HTML/CSS/JS — zero server, zero dependencies
- Twitch EventSub WebSocket for real-time redemption events
- Twitch OAuth Implicit Grant (token in URL hash for SLOBS)
- Canvas API for per-card generative art on the card face