Documentation

How to use Storiefied

From signing up to publishing on your own domain. The reference sections — 102 components, 50 design styles, 34 motion presets — are generated from the product itself, so they are never out of date.

Step one

Getting started

A workspace holds everything you make. Sign up and you get one, along with a sample project already wired to a sequence — it is there to be pulled apart, and nothing about it is public.

Create an account and find your way around

1Sign up at /signup with an email and a password, or with Google.
2A guided tour runs once on your first visit to the dashboard. It rings each control as it explains it — skip it any time, and it will not come back.
3Open My first project from the dashboard. That is the sample.
4Change the headline, then look at the preview. That round trip is the whole editing loop.

Workspaces and people

Projects, footage and members all belong to a workspace. Invite people from Settings → Members with one of four roles.

Role	Can do
Owner	Everything, including billing and removing the workspace
Admin	Everything except owner-only actions; can manage members
Editor	Create and edit projects, upload footage, publish
Viewer	Read only

Invitations are claimed the first time the person signs in with that address, so you can invite somebody before they have an account.

Footage

Zoetropes

A zoetrope is a clip taken apart into frames. Named for the pre-cinema device that made motion out of sequential images, which is exactly what it holds.

It belongs to the workspace, not to a project, because a sequence is expensive to produce and worth reusing.

Upload a clip

1Go to Zoetropes and choose a file. Video and GIF only (mp4, quicktime, webm, x-matroska, x-msvideo, mpeg, gif) — a still image would make a one-frame sequence, which is never what anyone meant.
2Give it a name. This is required: a workspace list of untitled sequences is unusable after the third one.
3Pick a frame rate between 1 and 30. Higher is smoother and heavier; 1 to 12 suits slow, deliberate scrolling, 24 to 30 suits motion.
4Upload. Progress is live, and it survives a page reload — the work is on the server, not in your tab.

Length limit

Clips are capped at 30 seconds. The check runs on the real file after upload, so trimming beforehand saves you the wait.

While it processes, and when it fails

Cancel at any point. The job stops at the next frame rather than finishing quietly in the background.
A failed clip tells you why — unsupported codec, no video stream, a broken container — rather than only that it failed.
Retry after a failure or a cancellation without re-uploading.
Frames are numbered from zero, so a 300-frame zoetrope runs 0 to 299.

Editing

Pages and the builder

A project is a site: pages, the header and footer they share, and the theme they inherit. The editor has two tabs — Pages and Publish.

Building a page

The builder is one column: layers, then properties, then the preview. Select a block in the layers panel, change it in the inspector, and the preview follows.

Insert from the palette, grouped by category. Presets drop several blocks at once.
Section blocks and column blocks accept nested children, up to eight deep.
Reorder and nest with move up/down and indent/outdent — all reachable from the keyboard.
Duplicate, group, lock and delete from the layers panel.
Undo and redo are per page. Typing into one field is a single step, not one per keystroke.

The preview shows saved state

It is a real render of your page, not a second implementation that might disagree with the published one. That is why it refreshes when a save lands rather than on every keystroke.

Site header and footer

Edited from Site layout in the Pages rail, using the same blocks and the same builder as a page. They render around every page that has not opted out, so adding a page never means editing the navigation in all the others.

Reference

Component reference · 102 blocks

Every component you can drop on a page, with what it does, what you can set on it, and the configuration it arrives with.

Beyond its own settings, every block also takes an animation, an icon, a scrollbar treatment, and section styling — width, height, padding, background, alignment and position.

Layout6

Section

section · accepts nested blocks

Groups blocks together and constrains their width.

What you can set

Content width — Narrow · Normal · Wide · Full bleed
Gap between blocks — None · Small · Medium · Large

Example

{
  "maxWidth": "normal",
  "gap": "md"
}

Columns

columns · accepts nested blocks

Lays child blocks out side by side; stacks on mobile.

What you can set

Columns — 2 columns · 3 columns · 4 columns
Gap — None · Small · Medium · Large
Vertical align — Stretch · Top · Center

Example

{
  "count": 2,
  "gap": "md",
  "align": "stretch"
}

Accordion

accordionGroup · accepts nested blocks

Collapses each nested block behind its own heading.

What you can set

Panel titles — A list of titles · One per block inside, in the same order.
Open the first panel — On or off

Example

{
  "titles": [],
  "openFirst": true
}

Tabs

tabsGroup · accepts nested blocks

Shows one nested block at a time behind tab buttons.

What you can set

Accessible group label — Text
Tab labels — A list of labels · One per block inside, in the same order.

Example

{
  "label": "Sections",
  "labels": []
}

Spacer

spacer

Vertical breathing room between sections.

What you can set

Size — sm · md · lg

Example

{
  "size": "md"
}

Bento grid

bentoGrid

Mixed-size tiles for a dense feature overview.

What you can set

Heading — Text
Tiles — A list of tiles

Example

{
  "heading": "",
  "items": [
    {
      "eyebrow": "",
      "title": "The big one",
      "text": "The headline capability.",
      "span": 4,
      "featured": true
    },
    {
      "eyebrow": "",
      "title": "Supporting",
      "text": "",
      "span": 2,
      "featured": false
    },
    {
      "eyebrow": "",
      "title": "Another",
      "text": "",
      "span": 3,
      "featured": false
    },
    {
      "eyebrow": "",
      "title": "And this",
      "text": "",
      "span": 3,
      "featured": false
    }
  ]
}

Hero4

Split hero

heroSplit

Headline and buttons beside a supporting image.

What you can set

Eyebrow — Text
Headline — Text
Subheading — Long text
Primary button — Text
Primary href — Link
Secondary button — Text
Secondary href — Link
Image URL — Link
Image alt — Text
Image side — image right · image left

Example

{
  "eyebrow": "",
  "headline": "A headline that earns the scroll",
  "sub": "One or two lines explaining what this is and who it is for.",
  "primaryLabel": "Start here",
  "primaryHref": "#",
  "secondaryLabel": "",
  "secondaryHref": "",
  "imageUrl": "",
  "alt": "",
  "mediaSide": "right"
}

Media hero

heroMedia

Full-bleed image with the headline over it.

What you can set

Eyebrow — Text
Headline — Text
Subheading — Long text
Button label — Text
Button href — Link
Background image URL — Link
Overlay darkness (%) — min 0, max 95 · Raise this until the headline is comfortably readable.
Height (% of screen) — min 30, max 100

Example

{
  "eyebrow": "",
  "headline": "Set the scene",
  "sub": "A short line that carries over the image.",
  "ctaLabel": "Watch",
  "ctaHref": "#",
  "imageUrl": "",
  "overlay": 55,
  "minHeightVh": 70
}

Proof hero

heroStats

Headline backed by a row of key numbers.

What you can set

Eyebrow — Text
Headline — Text
Subheading — Long text
Button label — Text
Button href — Link
Numbers — A list of numbers

Example

{
  "eyebrow": "",
  "headline": "Results, not adjectives",
  "sub": "Lead with the numbers that make the case.",
  "ctaLabel": "See the work",
  "ctaHref": "#",
  "stats": [
    {
      "value": "4.2M",
      "label": "Views"
    },
    {
      "value": "38%",
      "label": "Lift"
    },
    {
      "value": "12",
      "label": "Markets"
    }
  ]
}

Hero

hero

Full-bleed headline with optional subheading and one button.

What you can set

Headline — Text
Subheading — Text
Call to action — CTA label, CTA href

Example

{
  "headline": "Headline"
}

Cinescroll1

Cinescroll

cinescroll

Video frames scrubbed by scroll, with text beats over them.

What you can set

Sequence — Dedicated editor

Example

{
  "zoetropeId": "",
  "heightVh": 300,
  "fitMobile": "cover",
  "beats": []
}

Navigation8

Navbar

navbar

Header with brand, links, and an optional button.

What you can set

Brand name — Text
Brand link — Link
Links — A list of links
Button label — Text
Button href — Link
Stick to top on scroll — On or off · Leave off over a Cinescroll — a floating header covers frames.

Example

{
  "brand": "Your brand",
  "brandHref": "/",
  "items": [
    {
      "label": "Work",
      "href": "#work"
    },
    {
      "label": "About",
      "href": "#about"
    },
    {
      "label": "Contact",
      "href": "#contact"
    }
  ],
  "ctaLabel": "Get in touch",
  "ctaHref": "#contact",
  "sticky": false
}

Jump links

anchorNav

Pill row that jumps to sections on this page.

What you can set

Accessible label — Text
Jump links — A list of links

Example

{
  "label": "On this page",
  "items": [
    {
      "label": "Overview",
      "href": "#overview"
    },
    {
      "label": "Details",
      "href": "#details"
    }
  ]
}

Breadcrumbs

breadcrumbs

Trail showing where this page sits.

What you can set

Trail — A list of crumbs

Example

{
  "items": [
    {
      "label": "Home",
      "href": "/"
    },
    {
      "label": "Work",
      "href": "/work"
    },
    {
      "label": "This project"
    }
  ]
}

Footer columns

footerColumns

Multi-column footer with grouped links and legal line.

What you can set

Brand name — Text
Tagline — Text
Columns — A list of columns
Legal line — Text

Example

{
  "brand": "Your brand",
  "tagline": "A one-line description of what you do.",
  "columns": [
    {
      "title": "Product",
      "links": [
        {
          "label": "Features",
          "href": "#"
        },
        {
          "label": "Pricing",
          "href": "#"
        }
      ]
    },
    {
      "title": "Company",
      "links": [
        {
          "label": "About",
          "href": "#"
        },
        {
          "label": "Contact",
          "href": "#"
        }
      ]
    }
  ],
  "legal": "© Your brand. All rights reserved."
}

Social links

socialLinks

Row of links out to your profiles.

What you can set

Lead-in text — Text
Profiles — A list of profiles

Example

{
  "heading": "Follow along",
  "items": [
    {
      "label": "Instagram",
      "href": "https://instagram.com/"
    },
    {
      "label": "YouTube",
      "href": "https://youtube.com/"
    }
  ]
}

Footer

footer

Closing strip with a line of text.

What you can set

Footer text — Text

Example

{
  "text": ""
}

Language switcher

languageSwitcher

Links to other language versions.

What you can set

Accessible label — Text
Languages — A list of languages

Example

{
  "label": "Language",
  "items": [
    {
      "label": "English",
      "code": "en",
      "href": "/",
      "current": true
    },
    {
      "label": "Français",
      "code": "fr",
      "href": "/fr",
      "current": false
    }
  ]
}

backToTop

Anchor link back to the top of the page.

What you can set

Label — Text
Target id — Text · The id of the element to jump to.

Example

{
  "label": "Back to top",
  "targetId": "top"
}

Content20

Text

text

A block of markdown copy.

What you can set

Markdown — Long text
Alignment — left · center · right

Example

{
  "markdown": "",
  "align": "left"
}

Features

features

Card grid of icon + title + description.

What you can set

Features — A list of features

Example

{
  "items": [
    {
      "icon": "⚡",
      "title": "Fast",
      "text": "Describe this feature."
    },
    {
      "icon": "🎯",
      "title": "Focused",
      "text": "Describe this feature."
    },
    {
      "icon": "✨",
      "title": "Polished",
      "text": "Describe this feature."
    }
  ]
}

Split media

split

Image on one side, heading and copy on the other.

What you can set

Eyebrow — Text
Heading — Text
Body — Long text
Image URL — Link
Image alt — Text
Media side — image left · image right

Example

{
  "eyebrow": "",
  "heading": "A compelling section heading",
  "body": "Supporting copy that tells part of your story.",
  "imageUrl": "",
  "alt": "",
  "mediaSide": "left"
}

Steps

steps

Numbered process list.

What you can set

Steps — A list of steps

Example

{
  "items": [
    {
      "title": "Step one",
      "text": "What happens first."
    },
    {
      "title": "Step two",
      "text": "Then this."
    },
    {
      "title": "Step three",
      "text": "Finally this."
    }
  ]
}

FAQ

faq

Expandable question and answer list.

What you can set

Questions — A list of questions

Example

{
  "items": [
    {
      "q": "A common question?",
      "a": "A clear, helpful answer."
    }
  ]
}

Section heading

sectionHeading

Eyebrow, heading and intro to open a section.

What you can set

Eyebrow — Text
Heading — Text
Intro — Long text
Alignment — center · left · right

Example

{
  "eyebrow": "",
  "heading": "A section heading",
  "sub": "One or two lines setting up what follows.",
  "align": "center"
}

Timeline

timeline

Dated entries down a connected rail.

What you can set

Entries — A list of entrys

Example

{
  "items": [
    {
      "when": "2024",
      "title": "Where it started",
      "text": "The first version."
    },
    {
      "when": "2025",
      "title": "What changed",
      "text": "The turning point."
    },
    {
      "when": "Today",
      "title": "Where it is now",
      "text": ""
    }
  ]
}

Callout

callout

Pulled-out line that breaks up long copy.

What you can set

Label — Text
Text — Long text

Example

{
  "label": "The point",
  "text": "One sentence you want the reader to actually remember."
}

Code

codeBlock

Monospaced code sample with an optional filename.

What you can set

Filename — Text
Code — Long text · Rendered as plain text — never parsed or executed.

Example

{
  "filename": "",
  "code": ""
}

Definitions

definitionList

Term and explanation pairs in a grid.

What you can set

Heading — Text
Definitions — A list of definitions

Example

{
  "heading": "",
  "items": [
    {
      "term": "A term",
      "definition": "What it means, in one or two lines."
    },
    {
      "term": "Another term",
      "definition": "Plain-language explanation."
    }
  ]
}

Post grid

blogGrid

Cards for articles with image, excerpt and byline.

What you can set

Heading — Text
Posts — A list of posts

Example

{
  "heading": "Latest",
  "items": [
    {
      "title": "How we cut the launch film",
      "excerpt": "Eight beats, one sequence, and the decisions in between.",
      "category": "Process",
      "author": "Jane Doe",
      "date": "12 Sep",
      "imageUrl": "",
      "alt": "",
      "href": ""
    }
  ]
}

Article header

articleHeader

Title, standfirst, byline and lead image for a post.

What you can set

Category — Text
Title — Text
Standfirst — Long text
Author — Text
Date — Text
Reading time — Text
Lead image URL — Link
Image alt — Text

Example

{
  "category": "",
  "title": "The headline of this piece",
  "standfirst": "A sentence that makes the reader want the rest.",
  "author": "Jane Doe",
  "date": "12 September",
  "readingTime": "6 min read",
  "imageUrl": "",
  "alt": ""
}

Author bio

authorBio

Byline box to close an article.

What you can set

Lead-in — Text
Name — Text
Bio — Long text
Photo URL — Link
Link — Link
Link label — Text

Example

{
  "label": "Written by",
  "name": "Jane Doe",
  "bio": "Director and editor. Writes about how things get made.",
  "photoUrl": "",
  "href": "",
  "linkLabel": "More posts"
}

Media9

Image

image

A single centered image with alt text.

What you can set

Image URL — Link
Alt text — Text

Example

{
  "alt": ""
}

Gallery

gallery

Responsive grid of square image tiles.

What you can set

Images — A list of images

Example

{
  "items": []
}

Video embed

videoEmbed

Responsive YouTube or Vimeo player.

What you can set

Video URL — Link · YouTube or Vimeo. Loaded cookie-free until the visitor presses play.
Player title — Text · Announced to screen readers — describe the video.
Caption — Text

Example

{
  "url": "",
  "title": "",
  "caption": ""
}

Carousel

carousel

Swipeable row of images that snap into place.

What you can set

Heading — Text
Slide width — Text · Any CSS length. Slides shrink to full width on small screens.
Slides — A list of slides

Example

{
  "heading": "",
  "slideWidth": "22rem",
  "items": []
}

Masonry grid

masonry

Staggered image grid that keeps original proportions.

What you can set

Column width — Text · Columns are added as the screen allows.
Images — A list of images

Example

{
  "columnWidth": "18rem",
  "items": []
}

Audio

audioPlayer

Native audio player for a track or episode.

What you can set

Title — Text
Description — Long text
Audio file URL — Link

Example

{
  "title": "",
  "description": "",
  "url": ""
}

Before / after

imageCompare

Draggable wipe between two images.

What you can set

Before image URL — Link
Before alt text — Text
Before caption — Text
After image URL — Link
After alt text — Text
After caption — Text
Start position (%) — min 0, max 100
Aspect ratio — Text
Slider label for screen readers — Text
Caption — Text

Example

{
  "beforeUrl": "",
  "beforeAlt": "Before",
  "beforeLabel": "Before",
  "afterUrl": "",
  "afterAlt": "After",
  "afterLabel": "After",
  "startAt": 50,
  "aspectRatio": "16 / 9",
  "sliderLabel": "Reveal the before image",
  "caption": ""
}

Portfolio grid

portfolioGrid

Project tiles with title and credit line.

What you can set

Heading — Text
Tile shape — Text
Projects — A list of projects

Example

{
  "heading": "Work",
  "aspectRatio": "4 / 3",
  "items": []
}

Video playlist

videoPlaylist

One player plus a list of further videos.

What you can set

Heading — Text
Videos — A list of videos · The first one plays inline; the rest link out, so the page stays fast.
Button label — Text
Button href — Link

Example

{
  "heading": "Watch",
  "ctaLabel": "",
  "ctaHref": "",
  "items": []
}

Social proof6

Quote

quote

Centered testimonial with attribution.

What you can set

Quote — Long text
Author — Text
Role / company — Text

Example

{
  "quote": "A short, punchy testimonial goes here.",
  "author": "Jane Doe",
  "role": "CEO, Acme"
}

Testimonial grid

testimonialGrid

Several customer quotes in cards with photos.

What you can set

Heading — Text
Testimonials — A list of testimonials

Example

{
  "heading": "What people say",
  "items": [
    {
      "quote": "It felt less like a website and more like a film I could scroll.",
      "author": "A. Director",
      "role": "Creative Lead, Acme",
      "avatarUrl": ""
    },
    {
      "quote": "Our launch page finally matches the work it is showing off.",
      "author": "R. Okafor",
      "role": "Founder, Globex",
      "avatarUrl": ""
    }
  ]
}

Rating summary

ratingSummary

Average score with a breakdown of reviews.

What you can set

Score — Text
Caption — Text
Breakdown — A list of rows · Percentages are computed from these counts.

Example

{
  "score": "4.8",
  "caption": "from 312 reviews",
  "distribution": [
    {
      "label": "5 star",
      "count": 240
    },
    {
      "label": "4 star",
      "count": 52
    },
    {
      "label": "3 star",
      "count": 14
    },
    {
      "label": "2 star",
      "count": 4
    },
    {
      "label": "1 star",
      "count": 2
    }
  ]
}

Press mentions

pressMentions

Pull-quotes credited to publications.

What you can set

Heading — Text
Mentions — A list of mentions

Example

{
  "heading": "In the press",
  "items": [
    {
      "quote": "A genuinely new way to tell a story on the web.",
      "publication": "The Verge",
      "href": ""
    },
    {
      "quote": "The scroll is the edit.",
      "publication": "Creative Review",
      "href": ""
    }
  ]
}

Case studies

caseStudyCards

Outcome-led project cards with a headline result.

What you can set

Heading — Text
Case studies — A list of case studys

Example

{
  "heading": "Selected work",
  "items": [
    {
      "client": "Acme",
      "title": "Launch film turned scrollable site",
      "result": "+38% time on page",
      "summary": "One hero sequence, cut into eight beats.",
      "imageUrl": "",
      "alt": "",
      "href": "",
      "linkLabel": "Read the story"
    }
  ]
}

Logo wall

logoWall

Grid of client or partner logos.

What you can set

Lead-in text — Text
Mute logo colors — On or off · Keeps mixed brand colors from fighting the page.
Logos — A list of logos

Example

{
  "heading": "Trusted by",
  "grayscale": true,
  "items": [
    {
      "name": "Acme"
    },
    {
      "name": "Globex"
    },
    {
      "name": "Initech"
    },
    {
      "name": "Umbrella"
    }
  ]
}

Conversion8

Call to action

cta

One large gradient button.

What you can set

Label — Text
href — Link

Example

{
  "label": "Learn more",
  "href": "#"
}

Pricing tiers

pricingTable

Side-by-side plans with features and buttons.

What you can set

Heading — Text
Subheading — Long text
Badge on featured tier — Text
Tiers — A list of tiers

Example

{
  "heading": "Simple pricing",
  "sub": "Pick the plan that fits where you are now.",
  "featuredLabel": "Recommended",
  "tiers": [
    {
      "name": "Starter",
      "price": "$0",
      "period": "/month",
      "description": "For trying things out.",
      "features": [
        "1 project",
        "Community support"
      ],
      "ctaLabel": "Start free",
      "ctaHref": "#",
      "featured": false
    },
    {
      "name": "Pro",
      "price": "$24",
      "period": "/month",
      "description": "For work that ships.",
      "features": [
        "Unlimited projects",
        "Custom domain",
        "Priority support"
      ],
      "ctaLabel": "Go Pro",
      "ctaHref": "#",
      "featured": true
    }
  ]
}

Comparison table

comparisonTable

Feature matrix across plans or competitors.

What you can set

Heading — Text
First column header — Text
Columns — A list of columns
Rows — A list of rows

Example

{
  "heading": "How we compare",
  "rowHeader": "Feature",
  "columns": [
    "Us",
    "Them"
  ],
  "rows": [
    {
      "label": "Custom domain",
      "values": [
        "yes",
        "no"
      ]
    },
    {
      "label": "Scroll storytelling",
      "values": [
        "yes",
        "no"
      ]
    },
    {
      "label": "Support",
      "values": [
        "24/7",
        "Email"
      ]
    }
  ]
}

Signup form

signupForm

Email capture posting to your own provider.

What you can set

Eyebrow — Text
Heading — Text
Subheading — Long text
Form endpoint — Link · Your Mailchimp / ConvertKit / Formspree URL. Submissions go straight there, never through us.
Email field name — Text · Whatever your provider expects — often EMAIL or email.
Placeholder — Text
Button label — Text
Fine print — Text

Example

{
  "eyebrow": "",
  "heading": "Get the next one first",
  "sub": "One email when something new goes live. No noise.",
  "action": "",
  "fieldName": "email",
  "placeholder": "you@example.com",
  "submitLabel": "Subscribe",
  "note": "Unsubscribe any time."
}

CTA band

ctaSplit

Closing pitch with buttons on a contrasting panel.

What you can set

Heading — Text
Subheading — Long text
Primary button — Text
Primary href — Link
Secondary button — Text
Secondary href — Link

Example

{
  "heading": "Ready when you are",
  "sub": "Tell us what you're making and we'll take it from there.",
  "primaryLabel": "Start a project",
  "primaryHref": "#",
  "secondaryLabel": "See pricing",
  "secondaryHref": "#"
}

Trust badges

trustBadges

Row of guarantees or reassurances.

What you can set

Badges — A list of badges

Example

{
  "items": [
    {
      "title": "30-day guarantee",
      "text": "Full refund, no questions."
    },
    {
      "title": "Secure checkout",
      "text": "Payments handled by Stripe."
    },
    {
      "title": "Cancel any time",
      "text": "No lock-in contracts."
    }
  ]
}

Countdown

countdown

Live timer counting down to a launch or deadline.

What you can set

Heading — Text
Subheading — Long text
Target date/time — Text · ISO 8601. Add a Z for UTC, or an offset like +05:30.
Heading after it ends — Text
Button label — Text
Button href — Link

Example

{
  "heading": "Launching soon",
  "sub": "Doors open when the clock runs out.",
  "targetIso": "2027-01-01T00:00:00Z",
  "expiredHeading": "We're live",
  "ctaLabel": "",
  "ctaHref": ""
}

Commerce5

Product grid

productGrid

Catalogue cards with price and a link out.

What you can set

Heading — Text
Default button label — Text
Products — A list of products

Example

{
  "heading": "Shop",
  "ctaLabel": "View",
  "items": [
    {
      "name": "Print — Edition of 50",
      "description": "Archival giclée, signed.",
      "price": "$180",
      "compareAt": "",
      "badge": "Limited",
      "imageUrl": "",
      "alt": "",
      "href": "",
      "ctaLabel": ""
    }
  ]
}

Product detail

productDetail

One product, full width, with features and a buy button.

What you can set

Eyebrow — Text
Name — Text
Description — Long text
Price — Text
Was price — Text
Features — A list of features
Image URL — Link
Image alt — Text
Button label — Text
Buy link — Link
Fine print — Text

Example

{
  "eyebrow": "",
  "name": "The product",
  "description": "What it is and why someone wants it.",
  "price": "$180",
  "compareAt": "",
  "features": [
    "Made to order",
    "Ships worldwide"
  ],
  "imageUrl": "",
  "alt": "",
  "ctaLabel": "Buy now",
  "ctaHref": "",
  "note": ""
}

Category tiles

categoryTiles

Image tiles that link to collections.

What you can set

Heading — Text
Tiles — A list of tiles

Example

{
  "heading": "Browse",
  "items": [
    {
      "label": "Prints",
      "count": "24 items",
      "imageUrl": "",
      "href": ""
    },
    {
      "label": "Film",
      "count": "8 items",
      "imageUrl": "",
      "href": ""
    }
  ]
}

Promo strip

promoStrip

Full-width offer bar with a discount code.

What you can set

Message — Text
Discount code — Text
Link label — Text
Link href — Link

Example

{
  "text": "Free shipping on orders over $100",
  "code": "",
  "ctaLabel": "",
  "ctaHref": ""
}

Order summary

orderSummary

Itemised list with a total — quotes, packages, invoices.

What you can set

Heading — Text
Line items — A list of lines
Total label — Text
Total amount — Text
Button label — Text
Button href — Link
Fine print — Text

Example

{
  "heading": "What's included",
  "lines": [
    {
      "label": "Pre-production",
      "detail": "Treatment, storyboard",
      "amount": "$1,200"
    },
    {
      "label": "Shoot day",
      "detail": "Crew of four",
      "amount": "$2,400"
    },
    {
      "label": "Edit & colour",
      "detail": "Two revisions",
      "amount": "$1,200"
    }
  ],
  "totalLabel": "Total",
  "totalAmount": "$4,800",
  "ctaLabel": "Book this package",
  "ctaHref": "",
  "note": ""
}

Data13

Stats

stats

Row of big metrics with captions.

What you can set

Stats — A list of stats

Example

{
  "items": [
    {
      "value": "10k+",
      "label": "Users"
    },
    {
      "value": "99%",
      "label": "Uptime"
    },
    {
      "value": "24/7",
      "label": "Support"
    }
  ]
}

KPI cards

kpiGrid

Metric cards with an up/down change.

What you can set

Metrics — A list of metrics

Example

{
  "items": [
    {
      "label": "Monthly viewers",
      "value": "128k",
      "delta": "12% vs last month",
      "direction": "up"
    },
    {
      "label": "Avg. watch time",
      "value": "3m 42s",
      "delta": "8s",
      "direction": "up"
    },
    {
      "label": "Bounce rate",
      "value": "24%",
      "delta": "3%",
      "direction": "down"
    }
  ]
}

Bar chart

barChart

Compare values across categories.

What you can set

Heading — Text
Description — Long text
Bars — A list of bars
Category column name — Text · Used in the hidden data table screen readers get.
Value column name — Text

Example

{
  "heading": "Monthly growth",
  "sub": "",
  "labelHeader": "Month",
  "valueHeader": "Viewers",
  "items": [
    {
      "label": "Jan",
      "value": 12
    },
    {
      "label": "Feb",
      "value": 19
    },
    {
      "label": "Mar",
      "value": 15
    },
    {
      "label": "Apr",
      "value": 27
    }
  ]
}

Line chart

lineChart

Show a trend over time.

What you can set

Heading — Text
Description — Long text
Points — A list of points
Start the axis at zero — On or off · Turning this off exaggerates small differences — use with care.
Point column name — Text
Value column name — Text

Example

{
  "heading": "Audience over time",
  "sub": "",
  "labelHeader": "Point",
  "valueHeader": "Value",
  "fromZero": true,
  "items": [
    {
      "label": "W1",
      "value": 4
    },
    {
      "label": "W2",
      "value": 9
    },
    {
      "label": "W3",
      "value": 7
    },
    {
      "label": "W4",
      "value": 16
    },
    {
      "label": "W5",
      "value": 22
    }
  ]
}

Donut chart

donutChart

Show how a total splits into parts.

What you can set

Heading — Text
Description — Long text
Ring thickness — min 2, max 20
Slices — A list of slices · Percentages are computed for you.

Example

{
  "heading": "Where traffic comes from",
  "sub": "",
  "thickness": 8,
  "items": [
    {
      "label": "Search",
      "value": 48
    },
    {
      "label": "Social",
      "value": 30
    },
    {
      "label": "Direct",
      "value": 22
    }
  ]
}

Progress bars

progressBars

Labelled percentage bars, e.g. skills or capacity.

What you can set

Heading — Text
Description — Long text
Bars — A list of bars

Example

{
  "heading": "",
  "sub": "",
  "items": [
    {
      "label": "Direction",
      "percent": 90
    },
    {
      "label": "Editing",
      "percent": 75
    },
    {
      "label": "Colour",
      "percent": 60
    }
  ]
}

Data table

dataTable

Rows and columns of figures or specs.

What you can set

Heading — Text
Caption — Text
Columns — A list of columns
Rows — A list of rows

Example

{
  "heading": "",
  "caption": "",
  "columns": [
    "Package",
    "Delivery",
    "Price"
  ],
  "rows": [
    {
      "cells": [
        "Teaser",
        "3 days",
        "$900"
      ]
    },
    {
      "cells": [
        "Full film",
        "2 weeks",
        "$4,800"
      ]
    }
  ]
}

Leaderboard

leaderboard

Ranked list with a value per entry.

What you can set

Heading — Text
Description — Long text
Entries — A list of entrys

Example

{
  "heading": "Top performing",
  "sub": "",
  "items": [
    {
      "name": "Launch film",
      "detail": "Campaign",
      "value": "412k"
    },
    {
      "name": "Behind the scenes",
      "detail": "Series",
      "value": "268k"
    },
    {
      "name": "Founder interview",
      "detail": "Long form",
      "value": "94k"
    }
  ]
}

Period comparison

statCompare

This period against the last, side by side.

What you can set

Heading — Text
Description — Long text
Current period name — Text
Previous period name — Text
Comparisons — A list of comparisons

Example

{
  "heading": "",
  "sub": "",
  "currentLabel": "This quarter",
  "previousLabel": "last",
  "items": [
    {
      "label": "Revenue",
      "current": "$182k",
      "previous": "$146k"
    },
    {
      "label": "New clients",
      "current": "14",
      "previous": "9"
    }
  ]
}

API list

apiList

Fetches a public JSON endpoint and lists the items it returns.

What you can set

Heading — Text
JSON endpoint — Link · Must be https and publicly reachable. Responses are cached for 5 minutes.
Path to list — Text · Leave empty if the response is already an array.
Title field — Text
Text field — Text
Link field — Text
Image field — Text
Max items — min 1, max 50
Empty state — Text

Example

{
  "heading": "",
  "url": "",
  "itemsPath": "",
  "titleKey": "title",
  "textKey": "",
  "linkKey": "",
  "imageKey": "",
  "limit": 10,
  "emptyText": "Nothing to show right now."
}

Board

kanbanBoard

Columns of cards — show a workflow or a roadmap.

What you can set

Heading — Text
Columns — A list of columns

Example

{
  "heading": "Roadmap",
  "columns": [
    {
      "title": "Now",
      "cards": [
        {
          "title": "Shooting the pilot",
          "meta": "Week 3",
          "tag": "In progress"
        }
      ]
    },
    {
      "title": "Next",
      "cards": [
        {
          "title": "Colour grade",
          "meta": "",
          "tag": ""
        }
      ]
    },
    {
      "title": "Later",
      "cards": [
        {
          "title": "Festival cut",
          "meta": "",
          "tag": ""
        }
      ]
    }
  ]
}

Calendar

calendarMonth

One month with highlighted dates.

What you can set

Heading — Text · Leave blank to show the month and year.
Year — min 1900, max 2200
Month — min 1, max 12 · 1 = January. The grid is fixed to these values, never today's date.
Highlighted days — A list of days

Example

{
  "heading": "",
  "year": 2026,
  "month": 9,
  "marked": [
    {
      "day": 12,
      "label": "Premiere"
    },
    {
      "day": 24,
      "label": "Q&A"
    }
  ]
}

Spec panel

settingsPanel

Grouped label/value rows — specs, settings, tech sheets.

What you can set

Heading — Text
Groups — A list of groups

Example

{
  "heading": "Technical",
  "groups": [
    {
      "title": "Capture",
      "rows": [
        {
          "label": "Camera",
          "value": "Alexa Mini LF"
        },
        {
          "label": "Format",
          "value": "4.5K open gate"
        }
      ]
    },
    {
      "title": "Delivery",
      "rows": [
        {
          "label": "Master",
          "value": "ProRes 4444"
        },
        {
          "label": "Web",
          "value": "H.264 1080p"
        }
      ]
    }
  ]
}

Forms3

Form

contactForm

Build any form — contact, booking, survey, waitlist.

What you can set

Heading — Text
Intro — Long text
Send responses to (optional) — Link · Leave blank and responses are collected here — see them under Analytics. Set a Formspree / Mailchimp URL to send them to that provider instead.
Form id — Text · Only used to keep input ids unique if you place two forms on one page.
Button label — Text
Thank-you message — Text · Shown in place of the form once it sends — the page does not reload.
Fine print — Text
Fields — A list of fields

Example

{
  "heading": "Get in touch",
  "sub": "Tell us what you're making and we'll come back to you.",
  "action": "",
  "formId": "contact",
  "submitLabel": "Send",
  "successMessage": "Thanks — your message has been sent.",
  "note": "",
  "fields": [
    {
      "kind": "text",
      "label": "Name",
      "name": "name",
      "placeholder": "",
      "required": true,
      "options": []
    },
    {
      "kind": "email",
      "label": "Email",
      "name": "email",
      "placeholder": "you@example.com",
      "required": true,
      "options": []
    },
    {
      "kind": "textarea",
      "label": "Message",
      "name": "message",
      "placeholder": "",
      "required": true,
      "options": []
    }
  ]
}

searchBar

Search box that sends visitors to a results page.

What you can set

Accessible label — Text
Results page URL — Link
Query parameter — Text · Appended to the URL, so results stay linkable and back-button friendly.
Placeholder — Text
Button label — Text

Example

{
  "label": "Search",
  "action": "/search",
  "paramName": "q",
  "placeholder": "Search…",
  "submitLabel": "Search"
}

File upload

fileUploadForm

Let visitors send you a file.

What you can set

Heading — Text
Intro — Long text
Upload endpoint — Link · Files post straight to your own service — nothing is stored here.
Field label — Text
Field name — Text
Accepted types — Text · A convenience filter in the picker — your endpoint must still validate.
Allow multiple files — On or off
Button label — Text
Fine print — Text

Example

{
  "heading": "Send us your brief",
  "sub": "PDF or a doc is fine.",
  "action": "",
  "fieldLabel": "Choose a file",
  "fieldName": "file",
  "accept": "",
  "multiple": false,
  "submitLabel": "Upload",
  "note": ""
}

Community8

Team

teamGrid

Photo grid of the people behind the work.

What you can set

Heading — Text
People — A list of persons

Example

{
  "heading": "The team",
  "items": [
    {
      "name": "Jane Doe",
      "role": "Director",
      "bio": "",
      "photoUrl": "",
      "href": "",
      "linkLabel": ""
    },
    {
      "name": "Sam Rivera",
      "role": "Producer",
      "bio": "",
      "photoUrl": "",
      "href": "",
      "linkLabel": ""
    }
  ]
}

Profile

profileCard

One person, full width, with tags and links.

What you can set

Eyebrow — Text
Name — Text
Role — Text
Bio — Long text
Photo URL — Link
Tags — A list of tags
Links — A list of links

Example

{
  "eyebrow": "",
  "name": "Your name",
  "role": "What you do",
  "bio": "A couple of lines about the work and how you got here.",
  "photoUrl": "",
  "tags": [
    "Direction",
    "Editing"
  ],
  "links": [
    {
      "label": "Instagram",
      "href": "https://instagram.com/"
    }
  ]
}

Events

eventList

Dated list of screenings, talks or sessions.

What you can set

Heading — Text
Default button label — Text
Events — A list of events

Example

{
  "heading": "What's on",
  "ctaLabel": "Details",
  "items": [
    {
      "day": "12",
      "month": "Sep",
      "title": "Premiere screening",
      "time": "7:00pm",
      "location": "Rio Cinema",
      "href": "",
      "ctaLabel": ""
    },
    {
      "day": "04",
      "month": "Oct",
      "title": "Director's Q&A",
      "time": "6:30pm",
      "location": "Online",
      "href": "",
      "ctaLabel": ""
    }
  ]
}

Activity feed

activityFeed

Timestamped list of what has been happening.

What you can set

Heading — Text
Entries — A list of entrys

Example

{
  "heading": "Recent activity",
  "items": [
    {
      "actor": "Jane",
      "text": "uploaded the final grade.",
      "when": "2 hours ago"
    },
    {
      "actor": "Sam",
      "text": "approved the edit.",
      "when": "Yesterday"
    }
  ]
}

Notifications

notificationList

Alerts with a read/unread state.

What you can set

Heading — Text
Notifications — A list of notifications

Example

{
  "heading": "Notifications",
  "items": [
    {
      "title": "Your render finished",
      "text": "1080p, 4 min 12 s",
      "when": "10m",
      "unread": true
    },
    {
      "title": "New comment on the cut",
      "text": "",
      "when": "1h",
      "unread": false
    }
  ]
}

Conversation

chatTranscript

Message bubbles — testimonials, interviews, support examples.

What you can set

Heading — Text
Messages — A list of messages

Example

{
  "heading": "",
  "items": [
    {
      "author": "Client",
      "text": "Can we get a teaser by Friday?",
      "side": "left"
    },
    {
      "author": "Us",
      "text": "Already cutting it. You'll have three options.",
      "side": "right"
    }
  ]
}

Message list

inboxList

Rows of sender, subject and preview.

What you can set

Heading — Text
Messages — A list of messages

Example

{
  "heading": "",
  "items": [
    {
      "from": "Acme",
      "subject": "Re: launch film",
      "preview": "Looks great — one note on the third beat.",
      "when": "09:14"
    },
    {
      "from": "Globex",
      "subject": "Invoice 0042",
      "preview": "Paid, thanks.",
      "when": "Mon"
    }
  ]
}

Open roles

jobList

Vacancies with team, location and type.

What you can set

Heading — Text
Intro — Long text
Default button label — Text
Roles — A list of roles

Example

{
  "heading": "Open roles",
  "sub": "",
  "ctaLabel": "Apply",
  "items": [
    {
      "title": "Editor",
      "team": "Post",
      "location": "London / remote",
      "type": "Full time",
      "href": "",
      "ctaLabel": ""
    }
  ]
}

Utility11

Embed

embed

Third-party HTML in a sandboxed iframe.

What you can set

Embed HTML — Long text

Example

{
  "html": ""
}

Marquee

marquee

Continuously scrolling word ticker.

What you can set

Items — A list of items
Speed — slow · normal · fast

Example

{
  "items": [
    "Storytelling",
    "Motion",
    "Scroll",
    "Impact"
  ],
  "speed": "normal"
}

Theme and design styles

Two separate controls. The theme is your palette and type. A design style is an era — Victorian, Y2K, Brutalist — applied to a whole page.

The cascade

Three levels, each overriding the one above it:

1Project — the palette every page starts from.
2Page — overrides only the tokens it names. A page stores the difference, not a copy, so later project-level edits still reach it.
3Section — one block’s own background, text colour, padding and width.

Theme tokens

Token	What it colours
`bg`	Page background
`surface`	Cards and raised panels
`surface2`	Borders, insets, quieter fills
`textHi`	Headings and body text
`textLo`	Captions and metadata
`accent`	Buttons, links, emphasis
`accent2`	Secondary accent
`fontDisplay`	Headings
`fontBody`	Body text
`radius`	Corner rounding throughout
`scrollbar`	Scrollbar treatment

A theme is stored exactly like this:

{
  "bg": "#f4f1f3",
  "surface": "#f5eff4",
  "textHi": "#240f14",
  "accent": "#b54a63",
  "fontDisplay": "Sora, sans-serif",
  "radius": "0.75rem"
}

Design styles · 50

Applied per page, not per block. These are era-defining looks and mixing several down one page reads as a mistake rather than a choice. Each swatch below is drawn with that style’s own colours.

Classical & Ornate10

Neoclassical

Ivory and ink with muted gold, strict symmetry, and a fine double-rule frame.

neoclassical

Baroque

Deep umber and cream with ornate gold, heavy elevation, radial vignette and gilded corner flourishes.

baroque

Filigree

Rococo

Off-white and ink with delicate fine gold linework and an ornamental hairline frame; light and airy.

filigree

Acanthus

Classical

Parchment and brown ink with sage-olive accent and leaf-scroll corner ornament.

acanthus

Luxury Typography

Editorial

Near-black with white text and a gold hairline; oversized Playfair, extreme heading tracking, generous negative space.

luxury-typography

Victorian

Jewel-toned deep burgundy and cream with gold, over a dense damask-patterned ground.

victorian

Art Deco

Black and gold with a teal accent, sharp corners, symmetric double-rule frames and a sunburst motif.

art-deco

Art Nouveau

Cream with muted green and gold, organic whiplash curves and floral tendril ornament.

art-nouveau

Gothic

Dark ground with bone text and blood-red accent, blackletter display, pointed-arch motif and ornate drop-cap.

gothic

Tenebrism

Baroque

Extreme chiaroscuro — a single warm light pool over near-black with deep surrounding shadow; minimal and dramatic.

tenebrism

Retro-Digital & UI10

Pixel Art

8-bit

8-bit console look: limited palette, hard-edged pixel rendering, blocky offset shadow, dithered checker ground, zero radius.

pixel-art

Y2K

1999–2003

Turn-of-millennium chrome and bubble: brushed-silver gradients, glossy highlights, hot blue and bubblegum pink, big pill radii.

y2k

Cybercore

Cyberpunk

Terminal cyberpunk: near-black ground with CRT scanlines, neon cyan hairlines and glow, mono body over a wide display face.

cybercore

Synthwave

1980s Retrowave

Retro-future sunset: magenta-to-indigo sky, a glowing neon grid horizon, hot pink and cyan, Orbitron display.

synthwave

Vaporwave

1990s Aesthetic

Dreamy mall-nostalgia: deep purple ground, mint and pink pastels, checkerboard floor, italic mono, soft glow.

vaporwave

Neo Frutiger Aero

2004–2013

Glossy nature-tech optimism: sky-to-white gradient, aqua blue, humanist type, rounded glass with a clean gloss.

neo-frutiger-aero

Glassmorphism

Frosted UI

Frosted translucent panels over a vivid gradient: blurred surface, thin light border, soft shadow, luminous text.

glassmorphism

Bauhaus

1919–1933

Primary-color geometry: red, blue and yellow on warm off-white, hard-edged circles and triangles, no radius, bold grotesque.

bauhaus

Modular Typography

Swiss / International

Swiss grid discipline: black and red on white, a faint baseline grid, huge condensed display, tight tracking, zero radius.

modular-typography

Bento Box

Modern UI

Compartmentalized modern UI: soft neutral ground, crisp white cards, generous rounding, a single calm indigo accent, gentle depth.

bento-box

Raw, Bold & Pop10

Brutalism

Raw Web

Unstyled-HTML rawness: monospace type, black hairline rules, hard offset shadows, zero radius, default-link accents.

brutalism

Neo-Brutalism

2020s

Flat candy color blocks with chunky black outlines and a hard colored drop-shadow. Loud, playful, deliberately crude.

neo-brutalism

Utilitarian

Industrial

Functional workshop signage: concrete gray, black primary, safety-yellow hazard rail, uppercase mono labels, no ornament.

utilitarian

Mid-Century Modern

1950s–60s

Atomic-age warmth: mustard, teal and burnt orange on cream, rounded organic shapes, a starburst accent.

mid-century

Memphis

1980s

Postmodern chaos: clashing pink, teal and yellow on white, terrazzo confetti, zigzag strips, mixed radii.

memphis

Pop Art

1960s Comic

Comic-book energy: primary red and blue on yellow, Ben-Day halftone dots, thick black outlines, hard shadow.

pop-art

Rebus

Playful Puzzle

Friendly picture-puzzle look: bright candy colors on warm white, big pill radii, rounded display, confetti flecks.

rebus

Conceptual Sketch

Ideation

Hand-drawn ideation on paper: pencil-hatch ground, a wobbly ink box, marker headings over typewriter body.

conceptual-sketch

Mixed Media

Collage

Torn-paper collage: muted paper tones with one bold red accent, tape strips and overlapping ragged edges.

mixed-media

Graffiti

Street

Street-wall energy: dark concrete ground, neon-green and pink spray splatter, bold neon outline and paint drip.

graffiti

Soft & Aesthetic10

Aurora

Ambient

Night-sky aurora: deep indigo ground with drifting green-and-violet light fields, luminous text, soft glow, generous rounding.

aurora

Ethereal

Dreamlike

Weightless and pale: white-to-lavender wash, low-contrast lilac text, airy spacing, a whisper of glow, serif display.

ethereal

Kawaii

Cute

Sweet pastel cuteness: candy-pink ground, rounded everything, playful rounded display, sky-blue accent, heart marks.

kawaii

Coquette

Romantic

Soft-feminine ribbon romance: cream and blush, lace edging, a bow motif, delicate serif display over gentle body.

coquette

Shabby Chic

Vintage

Distressed vintage pastel: worn cream, faded rose, mottled paper texture, a gentle handwritten display, soft florals.

shabby-chic

Japandi

Minimal

Japanese–Scandinavian calm: warm beige, charcoal text, a muted clay accent, hairline rules, restrained and quiet.

japandi

Wabi-Sabi

Imperfect

Beauty in imperfection: earthen stone ground, muted clay, asymmetric soft edges, fine paper grain, quiet serif.

wabi-sabi

Light Academia

Scholarly

Warm scholarly daylight: parchment and soft brown, classic serif pairing, book-page warmth, gentle contrast.

light-academia

Dark Magic Academia

Moody Scholarly

Candlelit dark scholarship: near-black study, oxblood and gold, engraved display, a warm pool of light, ornate but sombre.

dark-magic-academia

Bohemian

Eclectic

Warm eclectic wander: terracotta, mustard and teal on sand, macramé-geometric banding, layered and cozy.

bohemian

Themed & Cultural10

Farmhouse Cottagecore

Cottagecore

Cozy rustic homestead: cream and sage gingham with a soft barn red, typewriter body under handwritten headings.

farmhouse-cottagecore

Mystical Western

Occult Frontier

Desert dusk meets the occult: deep night purple gradient, a gold celestial orb and starfield, tan and engraved serif.

mystical-western

Southwest Wild West

Wild West

Dusty saloon warmth: sandy tan and rust with a turquoise pop, leather browns and an aztec zigzag weave.

southwest-wildwest

Nautical

Maritime

Crisp maritime: white ground with navy breton stripes, a signal-red accent and a roped dashed frame.

nautical

Steampunk

Victorian Industrial

Victorian machine age: aged sepia paper, brass and leather, riveted metal frame with faint cog gears.

steampunk

Kitsch

Maximalist Kitsch

Loud and tacky on purpose: clashing gold and hot pink over a leopard field, chunky signage and a script.

kitsch

Anthropomorphic

Mascot

Friendly mascot energy: bright cartoon primaries on white, big rounded corners, soft lift and confetti dots.

anthropomorphic

Pointillism

Post-Impressionist

Seurat-style dot painting: soft muted blue, green and ochre stippled into a gentle field under elegant serif.

pointillism

Surrealism

Dreamscape

Dreamlike and unexpected: muted sky melting into sand, a floating orb, long soft shadows and a mono display.

surrealism

Scrapbook

Paper Collage

Handmade paper collage: kraft ground, cut-out cream cards, stitched dashed edges and taped-on corners.

scrapbook

Movement

Motion and scrollbars · 34 presets

Any block can take one preset. They are grouped by what starts them, which is the only decision you have to make.

On appear21

Fade in

Opacity only. The safest choice anywhere.

fade

Fade up

Rises a little as it appears. The default for most sections.

fade-up

Fade down

Settles downward. Good for headers and banners.

fade-down

Fade from left

Slides in from the left edge.

fade-left

Fade from right

Slides in from the right edge.

fade-right

Scale in

Grows from slightly small. Draws the eye without moving.

scale-in

Zoom in

A bigger scale jump. Use once per page at most.

zoom-in

Zoom out

Settles back from oversized.

zoom-out

Blur in

Comes into focus. Expensive on low-end phones — use sparingly.

blur-in

Spring up

Physical bounce as it arrives.

spring-up

Bounce in

Loose, playful overshoot.

bounce-in

Flip up

Rotates up on the X axis, like a card turning over.

flip-up

Flip sideways

Rotates around the vertical axis.

flip-y

Rotate in

Untwists into place.

rotate-in

Swing in

Hinges from the top edge.

swing-in

Skew in

Straightens out of a slant. Editorial, a bit fashion-y.

skew-in

Reveal up

Wipes into view from the bottom edge.

reveal-up

Reveal across

Wipes in from the left, like a curtain.

reveal-left

Reveal from centre

Opens outward from the middle.

reveal-center

Drop in

Falls from above and lands hard.

drop-in

Rise slowly

Long, calm ascent. Suits long-form copy.

rise-slow

While scrolling4

Parallax (slow)

Drifts upward as the page scrolls past. Adds depth.

parallax-slow

Parallax (fast)

A stronger drift. Use on background layers only.

parallax-fast

Fade with scroll

Fades in and back out as it crosses the viewport.

scroll-fade

Scale with scroll

Grows as it enters, shrinks as it leaves.

scroll-scale

On hover4

Lift on hover

Rises toward the cursor.

hover-lift

Grow on hover

Scales up slightly.

hover-grow

Tilt on hover

Leans as though picked up.

hover-tilt

Press on hover

Pushes down instead of up. Reads as a physical button.

hover-sink

Always moving5

Float

Drifts gently up and down, forever.

float

Pulse

Breathes in and out. Good for a single call to action.

pulse

Heartbeat

Two quick beats, then a rest.

heartbeat

Sway

Rocks side to side.

sway

Drift

Slides a few pixels left and right. Very subtle.

shimmer-move

Reduced motion

Every preset collapses to a plain fade for visitors whose system asks for less motion. You do not have to think about it, and you cannot switch it off — it is applied once, globally.

Scrollbar treatments9

Set on the theme for the whole site, or on a single block for just that block’s own scrolling areas. Every treatment takes its colour from your accent and surface, so it belongs to the palette rather than sitting on top of it.

Thin

Slim accent bar. A good default.

thin

Bold

Wide, square, unmistakable.

bold

Rounded

Chunky pill with no visible track.

rounded

Minimal

Barely-there hairline.

minimal

Floating

Neutral pill floating clear of the edge. Recedes on a busy page.

overlay

High contrast

Solid thumb on a visible track. The most legible option — pick it when the bar is meant to be grabbed.

contrast

Gradient

Accent gradient thumb. Expressive; pair with a restrained page.

gradient

Hairline

Square hairline flush to the edge. Reads as a progress indicator.

edge

Hidden

No visible bar. The page still scrolls by wheel, touch and keyboard, but people lose the position cue — use sparingly.

hidden

Going live

Publishing

Nothing is public until you publish it. Your draft is yours alone until then, whatever the editor says about saving.

Publish, and go back

Each publish writes a version: every page, the header, the footer and the theme, exactly as they were.
Restoring an old version brings it back as your DRAFT. Putting it live is a second, deliberate step — losing a week of work to one click is not a feature.
The editor tells you which version is live and warns when your draft has moved past it.
Preview any version at its own URL without touching the live site.

Password-protected pages

Any page can ask for a password first. It is one shared password per page, not visitor accounts — right for a client preview or an unlisted deck.

Set or change it in the page settings. It is never shown again after you save it.
Changing the password immediately locks everyone who had the old one back out.
A gated page is left out of your sitemap and asks search engines not to index it.
Restoring an old version never unlocks a page.

Your address

Custom domains

Every project gets a free address at your-project.{root}. Connect your own when you are ready.

Connecting one

1Add the hostname under the project's Domains page.
2Publish the TXT record we show you. This proves you control the name — a CNAME alone proves nothing, so without it anyone could claim any domain.
3Add the CNAME (or the A record, for an apex like example.com — apex names cannot carry a CNAME).
4Press Verify. HTTPS is arranged automatically once it resolves.

More than one name

A project can hold several hostnames but has one primary. Links, social previews, robots and the sitemap all use the primary, and the others can redirect to it — two names each calling themselves canonical splits your search ranking between them.

Visitors

Forms and analytics

Forms

A contact form submits without leaving the page and shows your success message in place. Responses appear on the project’s analytics page. Point it at an external endpoint instead if you already have one.

What we count

Page views and clicks, per page and per link, with internal and external links separated.
A rough visitor location from network-level headers. No third-party tracker is loaded.
Visitor IP addresses are salted and hashed the moment they arrive, so returning visitors can be counted without anything identifying being stored.

Limits

Plans and limits

Read from the same table the server enforces, so this page can never promise something the product refuses.

Limit	Free	Starter	Pro	Business	Enterprise
ProjectsSites you can have at once	3	10	50	200	Unlimited
Custom domainsYour own hostnames	0	1	10	50	Unlimited
MembersPeople in the workspace	1	3	10	50	Unlimited
AI generationsPer calendar month	10	100	500	2,000	Unlimited
Frames per zoetropeLength × frame rate of one clip	300	900	3,000	6,000	12,000
Custom domainsFeature, separate from the count above	No	Yes	Yes	Yes	Yes

Reaching a limit refuses the action and says so. Nothing is silently truncated, and nothing you already made is taken away.

Help

When something is wrong

What you see	What it usually is
The upload failed straight away	The file is not video or GIF, or it is over the size limit. Both are checked on the real file, not on what the browser claims.
Processing failed	The card shows the reason from the encoder. An unsupported codec or a truncated file are the common ones — re-export as MP4 and retry.
A Cinescroll shows nothing	It has no zoetrope selected, or the one it points at is still processing.
My changes are not on the live site	Saved is not published. Publish from the Publish tab; the editor warns when your draft is ahead of what is live.
The domain will not verify	DNS takes time to spread. Confirm the TXT record is on the exact name we showed, then try again in a few minutes.
A page asks me for a password	Somebody protected it. The password is not recoverable — set a new one from the page settings.

Still stuck? Write to support@storiefied.com with your workspace name and, if a site is involved, its address.

Start building Contact us