PokeCry Pack is my hackathon entry: an interactive mini-game built in Framer with AI agents, where you open card packs, listen to a Pokémon’s real cry, and guess which one it is to unlock it in your collection.
What makes it special
All the information is live from external APIs, not hardcoded data. The game connects to PokeAPI and the Pokémon TCG API to pull in real time:
The real cries of each Pokémon, with a fallback system if one source fails.
Pokédex data: type, generation, height, weight, habitat, description.
TCG card data: rarity, HP, attacks, set, artist, and even the price update date.
There’s also a nice detail: the Pokémon silhouette in the guessing phase is generated on the fly from the API image, darkening it with a CSS filter in real time, instead of using pre-made images.
The game
You open a pack and pick 1 of 3 cards.
You hear the cry and guess between 4 options (with 2 audio modes: classic and “scanner”).
The card is revealed, and if it’s Holo or Ultra Rare, it appears with a shiny holographic finish.
Your collection, stats, and best streak are saved between sessions.
Why the agents were key
None of this is just design: it’s API calls with caching and fallback, on-the-fly image manipulation with CSS, an audio system with fallback, animations, and state persistence. It’s real logic that I couldn’t have built without an AI agent inside Framer. What surprised me most is how well they handle the interactive side, not just content and design.
Built with Framer 3.0 AI agents.
PokeCry Pack is my hackathon entry: an interactive mini-game built in Framer with AI agents, where you open card packs, listen to a Pokémon’s real cry, and guess which one it is to unlock it in your collection.
What makes it special
All the information is live from external APIs, not hardcoded data. The game connects to PokeAPI and the Pokémon TCG API to pull in real time:
The real cries of each Pokémon, with a fallback system if one source fails.
Pokédex data: type, generation, height, weight, habitat, description.
TCG card data: rarity, HP, attacks, set, artist, and even the price update date.
There’s also a nice detail: the Pokémon silhouette in the guessing phase is generated on the fly from the API image, darkening it with a CSS filter in real time, instead of using pre-made images.
The game
You open a pack and pick 1 of 3 cards.
You hear the cry and guess between 4 options (with 2 audio modes: classic and “scanner”).
The card is revealed, and if it’s Holo or Ultra Rare, it appears with a shiny holographic finish.
Your collection, stats, and best streak are saved between sessions.
Why the agents were key
None of this is just design: it’s API calls with caching and fallback, on-the-fly image manipulation with CSS, an audio system with fallback, animations, and state persistence. It’s real logic that I couldn’t have built without an AI agent inside Framer. What surprised me most is how well they handle the interactive side, not just content and design.
Built with Framer 3.0 AI agents.