owned this note changed a year ago
Published Linked with GitHub

⚔️ Intro to Frames

Hack-a-thons

Workshops

⚔️ Tools

Resources

WTF are Frames?

Frames are a new design pattern. A way of interacting with dynamic content. Developers can build a multi-view experience in the feed. The app has user context. The user is able to send data to the server. It allows developers to embed parts of their app in the feed and link users to specifc parts of your app.

Frames extend the OpenGraph standard and turn static embeds into interactive experiences.

Frames are simple af!

They are essentially just dynamic images that are interacted with intents.

image

All they are really doing is generating meta tags in HTML.

<meta property="fc:frame" content="vNext" />

Required Properties

  • fc:frame
  • fc:frame:image
  • og:image

Optional Properties

  • fc:frame:button:$idx
  • fc:frame:post_url
  • fc:frame:button:$idx:action
  • fc:frame:button:$idx:target
  • fc:frame:input:text
  • fc:frame:image:aspect_ratio
  • fc:frame:state

Don't know why but I am kinda obsessed with meta data. Probably cause it is easy for my smooth brain to understand. Sam has called me, "The unfurl guy." I had also been looking into htmx so some things just clicked and I kinda geeked out as soon this stuff was released. Here is the simple first Yeet frame I made:

image

That one did not even have any dynamic image ish. It just updated the metadata with a different .png based on what button was pushed.

<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content="${NEW_IMAGE_URLimage}" />
<meta property="fc:frame:button:1" content="YEET" />
<meta property="fc:frame:button:2" content="YEET" />
<meta property="fc:frame:button:3" content="YEET" />
<meta property="fc:frame:button:4" content="YEET" />
<meta property="fc:frame:post_url" content="${POST_URL}" />

The only real PITA was that it is a full Next.js app that had to be deployed to Vercel and checked in the Frame Validator to test every small change. Being able to do most of that locally in a sexy console was one of the things that got me so excited about frog.

image

Vanilla made the first RaidGuild frame:

image

Image

image

The image is 1200x630 which is a aspect ratio of 1.91:1. If you use 1:1 you still need the og:image fallback for clients that do not support frames.

Intents

import { TextInput, Button, Frog } from 'frog';

Where is this going?

While this fuel has been poured on Farcaster frames.js is enabling Display Frames in any site or app and pushing for Open Frames Spec [Draft v0.0.2] to become a standard.

Frames in CharmVerse

jaymehoffman.eth wrote a good article about Framing Frames on Paragraph.

Six Mental Models to Help You Think about Farcaster Frames

  1. Frames: [OG+]
  2. Billboarding with frames
  3. Headless marketplaces
  4. Many-to-many mini apps
  5. Bring your product into frames
  6. Small Apps, Growing Protocols

Features

image

In just over a month we have gone from meta tags to transactions

Vision

Comms are critical to coordination. Farcaster is a new standard for social communication. And it appear to be the first real demand for DAOs. PFP projects and memecoins are bringing communities together fast.

There is governace of:

  • Coins
  • NFTs

Frames can already hold tokens and I assume there will be governance over frames themselves.

This community is actually asking for DAO tools.

Let's sneak the Moloch pill into a hotdog and get the baseheads doing real onchain shit.

Nouns is active on Warpcast and if we wait too long we may lose governance of the culture layer like we missed governance of defi protocols with Compound.

Examples

There are some good examples in this thread: Since Frames launched, we’ve announced four rounds of grants for builders creating /frames on Base

Frames

Repos

storage-fairy (frog.fm)

  "dependencies": {
    "@neynar/nodejs-sdk": "^1.11.0",
    "frog": "latest",
    "hono": "^4",
    "viem": "^2.7.19"
  },
  "devDependencies": {
    "tsx": "^4.7.1",
    "typescript": "^5.3.3",
    "vercel": "^32.4.1"
  }

adventure_frame

stateful-counter-frog-demo

yoink

Tips

Routes

Unsure of best practices but think most of these are intended to be a single file.

But if you create multiple pages:

  • view.tsx
  • vote.tsx

Just add them in the src directory and import them into index.tsx

import { app as view } from './view';
import { app as vote } from './vote';

app.frame('/', c => {});

app.route('/view', view);
app.route('/vote', vote);

Design

The css-in-js is pretty simple. But you can also use images for more detailed designs.

FrogUI is

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

horsefacts said Satori might be the way to include fonts without React.

Tailwind is not necessary. But

Building Farcaster Frames with Frog

Select a repo