Guides

Make your own style

A style is a folder. Put one in ~/.framejam/presets and it shows up in the gallery next to the built-in ones, with Use this style and everything else.

The easy way: ask your agent

Your agent already knows the format from the built-in styles. Describe your look, or point it at a video you like:

Make a Frame Jam style for my brand in ~/.framejam/presets/my-brand. Start from the closest built-in preset, use our colors and fonts, and render the preview.

What's in the folder

~/.framejam/presets/my-brand/
  style.json      # the style your agent follows
  composition/    # a working Hyperframes template (index.html + assets)
  preview.mp4     # what plays in the gallery
  poster.jpg      # the still shown before it plays

Only style.json is required. Without preview.mp4 and poster.jpg the gallery has nothing to show, so render them with npx hyperframes render. The folder name is used as the id if style.json doesn't set one.

style.json

{
  "id": "my-brand",
  "name": "My Brand",
  "tagline": "Calm product shots on warm paper",
  "description": "One or two sentences about the look and when to use it.",
  "mood": ["calm", "editorial"],
  "pacing": "medium",
  "format": "16:9",
  "width": 1920,
  "height": 1080,
  "durationSeconds": 12,
  "palette": { "background": "#f4f1ea", "text": "#18181b", "primary": "#e4572e" },
  "fonts": {
    "display": { "family": "Instrument Serif", "weights": [400], "source": "Google Fonts", "usage": "Headlines, 120px" }
  },
  "easing": { "enter": "power3.out", "exit": "power2.in" },
  "transitions": ["soft cross-fade", "paper slide from the right"],
  "textAnimations": ["words rise in with a 0.06s stagger"],
  "rhythm": { "averageShotSeconds": 3, "notes": "Hold each headline a beat before the next shot." },
  "tags": ["product", "launch"],
  "guide": "- Rules your agent should follow, one per line.\n- Be specific: sizes, timings, what never to do."
}

mood, pacing and format are what list_presets filters on. pacing is slow, medium or fast; format is 16:9, 9:16 or 1:1.
guide matters most. It's the written rulebook your agent reads before it builds anything.
The gallery page for the style shows the palette, fonts, easing, transitions and text animations, so name them the way you'd explain them to a designer.

Changing a built-in style

A style in your folder with the same id as a built-in one replaces it. Copy the built-in folder from the framejam package, keep its id and edit it. Delete your copy to get the original back.

Browse the built-in styles for ideas in the gallery.