Hyperframes
AI writes the content. A Hyperframe controls how it looks.
A Hyperframe is a reusable design. Echofox draws it in a browser. The same design comes out every time.
Example: the line “5 mistakes killing your Instagram reach” passes through a Hyperframe. Three Instagram slides come out. Each slide uses the same layout.
01
A Hyperframe is a reusable design.
Echofox can change the headline, the copy, the photograph, and the numbers. Typography, spacing, layout, and brand colors stay the same.
Each click writes new content into the same frame.
Changes
Stays locked
02
Hover a region, or tab to it. See what is content, and what is locked design.
03
The template stays in Echofox. The JSON changes per post. The browser draws the frame.
An AI agent can send this JSON to Echofox, including over MCP.
<hyperframe> <headline>{{ headline }}</headline> <image src="{{ image }}" /> <caption>{{ caption }}</caption> <brand-logo /> </hyperframe>
{ "headline": "Why magnesium affects sleep", "image": "studio", "caption": "Three mechanisms worth knowing" }
04
An image model invents a new layout each time. A Hyperframe applies one layout every time.
An image model can redraw the brand. A Hyperframe repeats it.
Same prompt. Three layouts.
Same template. Three posts.
Flat image. The type is painted on. You cannot edit it.
The headline, body, image, and statistic are still fields.
Prompt: “A calm post about sleep.” Run three times.
Same JSON. Run three times.
font-family: Instrument Sans size: one scale lines: 3 maximum align: left, on the grid
A new design for every post.
One template for every post.
A square picture cropped into a story. The headline is cut.
The same content, composed for each size.
05
Change the content. The design stays.
This preview runs in your browser. It uses example data.
06
The same template fills a portrait post, a square post, and a story.
The browser draws one moment.
PNG or WebP
The browser draws many moments. Those frames become a video.
MP4
07
Drag the timeline. The composition changes on a clock. A Hyperframe can be a still image or a timed sequence.
08
Hyperframes are the visual layer. Echofox is the system around them.
Strategy becomes a plan. The plan becomes words. The Hyperframe draws the frames. Echofox publishes them. The results shape the next plan.
09
Logo, colors, fonts, and style define the brand. The Hyperframe repeats that brand. The posts change.
Brand
Hyperframes
10
AI already produces information. Text, images, ideas, data, and code.
A Hyperframe is the visual system that turns that information into designed media.
Today, Echofox uses it for social posts. The same model can take other inputs.
Send structured content. Echofox draws the frames and publishes them.