30 Farcaster Frames & Patterns
30 Farcaster Frames & Patterns
My Favorite Farcaster Frames
Random Observation/Comment #837: Farcaster Frames. So hot right now.
Why this List?
This post is 2 months late, but Consensys is doing a “Farcaster Frames Takeover” internal hackathon so maybe I’m right on time. For those who aren’t cool (or web3 nerds), Farcaster is the protocol behind Warpcast, which is a web3 version of Twitter/X with some cool embedded web3 wallet features. For terminology, the “cast” is equivalent to a “tweet”/”post”.
The Farcaster Frame is an extension to the Open Graph standard that allows developers to embed an interactive app into any cast. A Frame page renders a static image, clickable buttons (up to 4), and input text. The magic of Frames is in the buttons. A developer can define up to 4 buttons that appear under the image. When a user clicks a button, this sends a signed request to the server (usually vercel-hosted). The server can then respond with another Frame, which can have its own buttons. The user can continue to interact with the Frame again as an open ended flow. Your signed server request can make backend API calls or pull from other Web3 endpoints.
The Frame signed requests from the “verified address” connected to your account through the Farcaster client . The “Frame Signature” has a series of permissions for the account that is restricted.
So what’s the big deal? On platforms like Twitter/X, the development of in-app rendering for images, videos, and links are all restricted. In Frames, you can create those interactive links to APIs with native wallet connected actions. Crazy number of possibilities for native integrations. This also reminds me of the early days of Facebook embedded apps.
For those developing on frames, we’ve been using Neynar (docs) which has some cool APIs and recipes for using it. You can token gate, get usernames of followers, and fetch casts within Warpcast. Airstack is another option for building some of these design patterns.
There are some super creative frames and patterns I’ve played around with that I want to highlight here for Consensys hackathon participants. A larger list made by Corbin Page is on Topframes and by David Furlong on github as Awesome Frames.
MetaMask Fox Yourself - This frame uses your profile image and then has buttons to move and scale the fox ears around on the page. Each button is adjusting the size and position of the overlay fox image. From looking at the code internally, “axios” library is used to fetch the image from the profile variable and “sharp” library is used for moving the overlapping fox ears.
Linea LXP Balance Check - This frame requires you to have a connected “verified address” to your profile. If you own LXP, the API call will search for your LXP balance on Linea and share it.
MetaMask Gas Station with Infura API - This frame will call the Infura Gas API to render a dashboard page that shows the current amount. There’s a button to refresh to the latest Gas API call. There’s also a link to the documentation around this API.
MetaMask Learn - This frame has images/pages that include buttons to “Learn More” and link to the MetaMask Learn site for the particular topic lessons.
Linea Dapp Explorer - This frame has a few goodies. The “Explore” button randomizes across 300 dapps on Linea with a link to its website. Each randomization logs your click. There’s a “Leaderboard” button that opens to a separate page https://mframes.vercel.app/dapps which shares the number of explores per user.
Linea NFT Mint with Phosphor API - This frame will use the Phosphor API to mint an NFT to your verified address. Unfortunately this particular NFT collection is fully minted. Note that the frame shows an animated NFT image and has a catch image loaded for errors thrown from the “Mint Now” button.
Swaye Marketplace Voting - This frame is simple, but shows the integration with a Yes/No marketplace where you can bet into a pool. Your “verified address” can directly submit a bet to the API and the frame shows the current results. It links to swaye.app which I assume automatically does an equal distribution payout based on the oracle decision at the given date. So far I just see a lot of price prediction examples.
Coopah Troopa’s Ecosystem mapping - There’s not much clever functionality here, but I like the use case of creating content and having a mint snapshot of it through Zora. The frame itself looks fairly straightforward.
Onframe chess - While the buttons are a terrible way to make any moves, you have to admit that the backend logic is pretty cool. Even though it’s a solved application, the frame rendering and move choices must have had some complexity. The rendered pieces also show previous moves nicely.
Generative Art Frame - This frame is more complex than it looks. It uses Pinata FDK to generate a piece based on the FID of the user with Canvas. It then uploads the art to imgur and returns the art to the frame. If you mint it, then it uploads the art to IPFS with the JSON with some unique ownership verifications and then mints it. The generations based on FID is pretty clever as it is generative off of your number which introduces additional entropy of the number of lines to the artwork. More details.
Favorite Warpcast moments frame - This frame takes your Warpcast URL and the backend builds the image of the cast to mint. From there you can just mint that snapshot to the user’s address. There’s also a “I’m feeling lucky” button that gives a random cast.
AI Image Generator Frame - This frame uses an AI image generator to generate an image that fits into the frame. It’s fairly responsive in the refresh.
4 layer artwork frame - This frame is super creative as it takes different layers of artwork and lets the user interact with it by toggling on/off different layers of colors. I wonder if they drew all 16 photos based on the binary combinations.
Simple Far Cat game - This frame is like a one-time winner crossword puzzle where each page shows a clue for a Secret Recovery Phrase. If you guess all the clues right then you can import it into your MetaMask and do what you like with the NFT it owns. While you could just do this in a doc, I think it’s a really clever way of having one winner with a global competition.
Yoink - This frame is a global game where only one person can have the flag. The backend keeps track of the time your FID has owned the flag and the number of times it’s been yoinked between users. Fun leaderboard.
LearnWeb3 Testnet Faucet - This frame mints testnet Sepolia ETH (sETH) to your “verified address” from ETH, Base, and OP. It doesn’t seem to be working, but it showcases on-chain interaction and a faucet API call.
Farschool Game - This frame has a lot happening with some gifs and random spins. I think this shows some potential for a lot of different simple games. It also does a short little survey/quiz.
Farcaster Doom - Doom in a frame is pretty crazy. I don’t see how anyone can actually play the game, but it does actually show the rendering of the game in more than just 8-bit action. Also, you can only turn right.
Framedl - How cool is this. Just make a guess and it’ll show you a regular wordle. It’s even unique for the day!
Farcaster Book - The group interaction in this is interesting. It’s basically a database of randomized comments in the book. The comments get organized and can likely be added to the book.
Matcha on $Degen - Airdrops via frames is a great concept since it’s web3 native. We already see a few apps considering how they can directly appeal to new web3 users and experiment with using their APIs in creative ways.
Sons of Glitches - The frame pulls your PFP image (profile picture) and adds on a glitch animation to it. It then lets you download the unique GIF associated with it. Image augmentation is a popular pattern.
Layer 3 Frames Cube Mint - As with most Layer 3 quests, it’ll verify based on different checks of on-chain activity. Before you can mint, it needs to check that you have follow, liked, recasted, and commented on the particular post. Also like most Layer 3 mints, they sometimes don’t check. (Anyway, this one is minted out).
eCommerce store frame - This is a simplified form-based frame to create images of custom material and then link you to the checkout page with these details. It would be nice if it actually purchased it with my $DEGEN tokens, but the checkout with Coinbase commerce is a nice touch. Honestly, I didn’t even know coinbase commerce was a thing.
Framechat - You can enter a shared chatroom and append your message to the chat interface. This is another example of early Internet innovation where the servers are just saving messages onto a single thread pulling from FID and PFPs to render, but it’s a great testing idea.
Noun’s Auction - Similar to the Swaye voting frame, this one loads a live auction on the set of NFTs all within a frame. It is mostly read-only.
Follow for POAP claim - This frame checks to make sure you’re following the user and then you can claim a POAP and use it to unlock additional token-gated benefits. It’s a great pattern for growing your own followers.
Paragraph.xyz frames - This is slightly janky, but it does show how you can read inline or subscribe to specific articles. This is the closest to a Post embedding the article into the platform. I’m surprised there isn’t one for mirror.xyz yet.
Newsletter and Podcast frames - This is another way of using web3 platforms to distribute your artist work. Here you can subscribe with hypersub and also collect a podcast via Pods.media
“Our Life in Lists of 30” NFT Mint via Phosphor - Jumped on the bandwagon. I’m in space.
~See Lemons Experiment with Farcaster