live project document
The JSON behind this page This is the validated Flyframe project model used to render the page above—not a
separate mockup or hand-built marketing template.
Copy JSON {
"version": 1,
"project": {
"editorVersion": 1,
"lastMigration": 7
},
"site": {
"title": "Flyframe",
"description": "AI-first visual website building, grounded in a typed project model.",
"language": "en",
"favicon": null,
"socialImage": null,
"robots": "index",
"author": "Flyframe"
},
"theme": {
"colors": {
"primary": "rgb(139 92 246)",
"secondary": "rgb(52 211 153)",
"accent": "rgb(167 139 250)",
"background": "rgb(13 10 16)",
"surface": "rgb(23 18 29)",
"text": "rgb(247 242 255)",
"muted": "rgb(170 160 184)",
"border": "rgb(52 40 63)",
"success": "rgb(52 211 153)",
"warning": "rgb(251 191 36)",
"danger": "rgb(251 113 133)"
},
"contentWidth": "76rem",
"navHeight": "4rem",
"borderWidth": "1px",
"sectionDividers": true,
"sectionDividerWidth": "1px",
"variants": {
"button": "primary",
"card": "bordered",
"form": "outlined",
"navigation": "standard",
"band": "standard"
},
"typography": {
"headingFont": "Inter, ui-sans-serif, system-ui, sans-serif",
"bodyFont": "Inter, ui-sans-serif, system-ui, sans-serif",
"monospaceFont": "ui-monospace, SFMono-Regular, Menlo, monospace",
"roles": {
"headline": {
"size": "clamp(2.4rem, 5vw, 4.75rem)",
"weight": 750,
"lineHeight": 1.02,
"tracking": "-0.045em",
"font": "heading"
},
"subheadline": {
"size": "clamp(1.05rem, 2vw, 1.3rem)",
"weight": 400,
"lineHeight": 1.55,
"font": "body"
},
"accent": {
"size": "0.85rem",
"weight": 700,
"lineHeight": 1.2,
"tracking": "0.08em",
"font": "mono",
"transform": "uppercase"
},
"eyebrow": {
"size": "0.75rem",
"weight": 700,
"lineHeight": 1.2,
"tracking": "0.12em",
"font": "mono",
"transform": "uppercase"
},
"body": {
"size": "1rem",
"weight": 400,
"lineHeight": 1.65,
"font": "body"
}
}
},
"spacing": {
"xs": "0.25rem",
"sm": "0.625rem",
"md": "1.25rem",
"lg": "2.25rem",
"xl": "clamp(4rem, 8vw, 7rem)"
},
"radius": {
"sm": "0.375rem",
"md": "0.75rem",
"lg": "1.25rem"
},
"fontSize": {
"xs": "0.75rem",
"sm": "0.875rem",
"base": "1rem",
"lg": "1.25rem",
"xl": "2rem"
},
"shadow": {
"sm": "0 1px 2px rgb(0 0 0 / 0.35)",
"md": "0 8px 24px rgb(0 0 0 / 0.32)",
"lg": "0 24px 64px rgb(0 0 0 / 0.45)"
},
"noise": true
},
"navigation": {
"primary": [
{
"id": "nav-ai",
"pageId": null,
"overrideLabel": "AI workflow",
"externalUrl": "#n-ai-first",
"target": "_self",
"children": []
},
{
"id": "nav-editor",
"pageId": null,
"overrideLabel": "Visual editor",
"externalUrl": "#n-visual-editor",
"target": "_self",
"children": []
},
{
"id": "nav-renderer",
"pageId": null,
"overrideLabel": "Renderer",
"externalUrl": "#n-renderer",
"target": "_self",
"children": []
},
{
"id": "nav-json",
"pageId": null,
"overrideLabel": "Project JSON",
"externalUrl": "#project-json",
"target": "_self",
"children": []
}
],
"footer": [
{
"id": "footer-builder",
"pageId": null,
"overrideLabel": "Open Flyframe",
"externalUrl": "https://flyframe.io",
"target": "_self",
"children": []
},
{
"id": "footer-source",
"pageId": null,
"overrideLabel": "Project JSON",
"externalUrl": "#project-json",
"target": "_self",
"children": []
}
],
"utility": [],
"hiddenPageIds": [],
"settings": {
"sticky": true,
"showChildrenAsDropdown": false
}
},
"documents": [
{
"id": "website",
"type": "website",
"title": "Flyframe",
"slug": "main",
"pages": [
{
"id": "home",
"title": "Home",
"slug": "home",
"parentId": null,
"isHome": true,
"layout": {
"type": "default"
},
"seo": {
"title": "Flyframe — AI-first visual website builder",
"description": "Build, visually refine, validate, and publish responsive websites with an AI-first editor and multi-tenant renderer.",
"canonical": null,
"ogImage": null,
"noIndex": false
},
"root": {
"id": "home-root",
"component": "stack",
"version": 1,
"data": {},
"style": {
"layout": {
"gap": "0"
}
},
"children": [
{
"id": "hero",
"component": "hero",
"version": 1,
"data": {
"headline": "Build by describing. Refine by pointing.",
"subheadline": "Flyframe is an AI-first visual website builder with a typed project model and a fast, multi-tenant renderer.",
"image": null,
"buttons": [
{
"label": "Open Flyframe",
"action": {
"type": "link",
"href": "https://flyframe.io",
"target": "_self"
},
"variant": "primary",
"animation": "shine"
},
{
"label": "See how it works",
"action": {
"type": "open-popup",
"popupId": "flyframe-overview"
},
"variant": "outline"
}
],
"textAlign": "left"
},
"style": {
"layout": {
"paddingY": "spacing.xl",
"minHeight": "min(78vh, 50rem)"
},
"appearance": {
"background": {
"type": "gradient",
"from": "rgb(13 8 19)",
"to": "rgb(36 16 68)",
"angle": 128,
"blend": "smooth",
"splitPercent": 50,
"animated": true,
"durationMs": 18000
},
"divider": "bottom",
"dividerColor": "rgb(109 59 209)"
},
"typography": {
"shadow": "0 0 2.5rem rgb(139 92 246 / 0.18)"
}
},
"children": []
},
{
"id": "ai-first",
"component": "section",
"version": 1,
"data": {},
"style": {
"layout": {
"paddingY": "spacing.xl"
},
"appearance": {
"background": {
"type": "solid",
"color": "colors.background"
}
},
"animation": {
"preset": "fade-up",
"durationMs": 650
}
},
"children": [
{
"id": "ai-first-intro",
"component": "stack",
"version": 1,
"data": {},
"style": {
"layout": {
"gap": "spacing.lg"
}
},
"children": [
{
"id": "ai-first-eyebrow",
"component": "text",
"version": 1,
"data": {
"content": "01 / ai-first workflow"
},
"style": {
"appearance": {
"color": "colors.secondary"
},
"typography": {
"role": "eyebrow"
}
},
"children": []
},
{
"id": "ai-first-heading",
"component": "headline",
"version": 1,
"data": {
"content": "An editor that understands the page, not just the prompt.",
"role": "headline",
"level": "2",
"emphasis": {
"text": "understands the page",
"gradient": {
"from": "colors.primary",
"to": "colors.secondary",
"angle": 105,
"animated": true
}
}
},
"style": {
"typography": {
"shadow": "0 0 2rem rgb(139 92 246 / 0.12)"
}
},
"children": []
},
{
"id": "ai-first-copy",
"component": "text",
"version": 1,
"data": {
"content": "Flyframe turns requests into a visible plan, validates structured edits, repairs deterministic design issues, and shows anything that still needs attention before publishing."
},
"style": {
"layout": {
"maxWidth": "48rem"
},
"appearance": {
"color": "colors.muted"
}
},
"children": []
}
]
},
{
"id": "ai-first-grid",
"component": "grid",
"version": 1,
"data": {
"columns": 3
},
"style": {
"layout": {
"gap": "spacing.lg"
}
},
"children": [
{
"id": "ai-plan",
"component": "card",
"version": 1,
"data": {
"title": "Structured AI planning",
"body": "Provider-neutral, schema-constrained plans and edits replace fragile prose parsing.",
"iconColor": "colors.primary",
"iconAlign": "center",
"icon": "sparkles"
},
"style": {
"appearance": {
"preset": "bordered",
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
},
{
"id": "ai-health",
"component": "card",
"version": 1,
"data": {
"title": "Page Health built in",
"body": "Layout, motion, overflow, contrast, empty content, and form diagnostics are visible to you and the AI.",
"iconColor": "colors.secondary",
"iconAlign": "center",
"icon": "shield"
},
"style": {
"appearance": {
"gradientBorder": {
"from": "colors.primary",
"to": "colors.secondary",
"angle": 120,
"blend": "smooth",
"splitPercent": 50,
"width": "2px",
"animated": true,
"durationMs": 12000
},
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
},
{
"id": "ai-replace",
"component": "card",
"version": 1,
"data": {
"title": "Safe full-page rebuilds",
"body": "Rebuild a page when you mean it, with confirmation, validation, history, and project settings preserved.",
"iconColor": "colors.primary",
"iconAlign": "center",
"icon": "layers"
},
"style": {
"appearance": {
"preset": "bordered",
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
}
]
}
]
},
{
"id": "visual-editor",
"component": "section",
"version": 1,
"data": {},
"style": {
"layout": {
"paddingY": "spacing.xl"
},
"appearance": {
"background": {
"type": "gradient",
"from": "rgb(23 16 31)",
"to": "rgb(15 21 18)",
"angle": 112,
"blend": "hard",
"splitPercent": 58
},
"divider": "bottom",
"dividerColor": "rgb(49 92 67)",
"dividerWidth": "2px"
},
"animation": {
"preset": "fade-up",
"durationMs": 650
}
},
"children": [
{
"id": "visual-editor-intro",
"component": "stack",
"version": 1,
"data": {},
"style": {
"layout": {
"gap": "spacing.lg"
}
},
"children": [
{
"id": "visual-editor-eyebrow",
"component": "text",
"version": 1,
"data": {
"content": "02 / visual editing"
},
"style": {
"appearance": {
"color": "colors.secondary"
},
"typography": {
"role": "eyebrow"
}
},
"children": []
},
{
"id": "visual-editor-heading",
"component": "headline",
"version": 1,
"data": {
"content": "Point at what you mean.",
"role": "headline",
"level": "2",
"emphasis": {
"text": "what you mean",
"gradient": {
"from": "colors.primary",
"to": "colors.secondary",
"angle": 105,
"animated": true
}
}
},
"style": {
"typography": {
"shadow": "0 0 2rem rgb(139 92 246 / 0.12)"
}
},
"children": []
},
{
"id": "visual-editor-copy",
"component": "text",
"version": 1,
"data": {
"content": "Select one or several rendered elements directly in the embedded preview. Flyframe sends stable component references, plain-language labels, and rendered context into the next AI request."
},
"style": {
"layout": {
"maxWidth": "48rem"
},
"appearance": {
"color": "colors.muted"
}
},
"children": []
}
]
},
{
"id": "visual-editor-grid",
"component": "grid",
"version": 1,
"data": {
"columns": 3
},
"style": {
"layout": {
"gap": "spacing.lg"
}
},
"children": [
{
"id": "visual-select",
"component": "card",
"version": 1,
"data": {
"title": "Multi-select preview",
"body": "Hover outlines, persistent numbered selections, parent navigation, and a keyboard-friendly page outline.",
"iconColor": "colors.primary",
"iconAlign": "center",
"icon": "check"
},
"style": {
"appearance": {
"preset": "bordered",
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
},
{
"id": "visual-images",
"component": "card",
"version": 1,
"data": {
"title": "Typed media editing",
"body": "Replace component images, backgrounds, textures, slides, focal points, crop behavior, and alt text.",
"iconColor": "colors.secondary",
"iconAlign": "center",
"icon": "image"
},
"style": {
"appearance": {
"gradientBorder": {
"from": "colors.primary",
"to": "colors.secondary",
"angle": 120,
"blend": "smooth",
"splitPercent": 50,
"width": "2px",
"animated": false,
"durationMs": 12000
},
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
},
{
"id": "visual-inspector",
"component": "card",
"version": 1,
"data": {
"title": "One coherent inspector",
"body": "Content, layout, typography, borders, dividers, gradients, hover states, and animation share the same model.",
"iconColor": "colors.primary",
"iconAlign": "center",
"icon": "settings"
},
"style": {
"appearance": {
"preset": "bordered",
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
}
]
}
]
},
{
"id": "renderer",
"component": "section",
"version": 1,
"data": {},
"style": {
"layout": {
"paddingY": "spacing.xl"
},
"appearance": {
"background": {
"type": "solid",
"color": "colors.surface"
}
},
"animation": {
"preset": "fade-up",
"durationMs": 650
}
},
"children": [
{
"id": "renderer-intro",
"component": "stack",
"version": 1,
"data": {},
"style": {
"layout": {
"gap": "spacing.lg"
}
},
"children": [
{
"id": "renderer-eyebrow",
"component": "text",
"version": 1,
"data": {
"content": "03 / renderer"
},
"style": {
"appearance": {
"color": "colors.secondary"
},
"typography": {
"role": "eyebrow"
}
},
"children": []
},
{
"id": "renderer-heading",
"component": "headline",
"version": 1,
"data": {
"content": "One renderer. Many domains. Clean output.",
"role": "headline",
"level": "2",
"emphasis": {
"text": "Many domains",
"gradient": {
"from": "colors.primary",
"to": "colors.secondary",
"angle": 105,
"animated": true
}
}
},
"style": {
"typography": {
"shadow": "0 0 2rem rgb(139 92 246 / 0.12)"
}
},
"children": []
},
{
"id": "renderer-copy",
"component": "text",
"version": 1,
"data": {
"content": "Projects publish as validated documents. The renderer resolves the requested domain, loads the correct immutable publication, and renders only that site with safe assets, accessible UI, and responsive behavior."
},
"style": {
"layout": {
"maxWidth": "48rem"
},
"appearance": {
"color": "colors.muted"
}
},
"children": []
}
]
},
{
"id": "renderer-grid",
"component": "grid",
"version": 1,
"data": {
"columns": 3
},
"style": {
"layout": {
"gap": "spacing.lg"
}
},
"children": [
{
"id": "renderer-domains",
"component": "card",
"version": 1,
"data": {
"title": "Multi-tenant by design",
"body": "Custom domains map to isolated published projects while Flyframe itself lives at flyframe.site.",
"iconColor": "colors.primary",
"iconAlign": "center",
"icon": "globe"
},
"style": {
"appearance": {
"preset": "bordered",
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
},
{
"id": "renderer-motion",
"component": "card",
"version": 1,
"data": {
"title": "Motion with restraint",
"body": "Entrance effects, counters, Ken Burns, sliders, and gradients pause offscreen and honor reduced motion.",
"iconColor": "colors.secondary",
"iconAlign": "center",
"icon": "zap"
},
"style": {
"appearance": {
"preset": "bordered",
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
},
{
"id": "renderer-popups",
"component": "card",
"version": 1,
"data": {
"title": "Real detached popups",
"body": "Project-level dialogs use the browser top layer, add no page height, restore focus, and remain fully editable.",
"iconColor": "colors.primary",
"iconAlign": "center",
"icon": "menu"
},
"style": {
"appearance": {
"preset": "bordered",
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
}
]
}
]
},
{
"id": "capabilities",
"component": "section",
"version": 1,
"data": {},
"style": {
"layout": {
"paddingY": "spacing.xl"
},
"appearance": {
"background": {
"type": "solid",
"color": "colors.background"
}
},
"animation": {
"preset": "fade-up",
"durationMs": 650
}
},
"children": [
{
"id": "capabilities-intro",
"component": "stack",
"version": 1,
"data": {},
"style": {
"layout": {
"gap": "spacing.lg"
}
},
"children": [
{
"id": "capabilities-eyebrow",
"component": "text",
"version": 1,
"data": {
"content": "04 / system capabilities"
},
"style": {
"appearance": {
"color": "colors.secondary"
},
"typography": {
"role": "eyebrow"
}
},
"children": []
},
{
"id": "capabilities-heading",
"component": "headline",
"version": 1,
"data": {
"content": "Flexible enough to design. Strict enough to trust.",
"role": "headline",
"level": "2",
"emphasis": {
"text": "Strict enough to trust",
"gradient": {
"from": "colors.primary",
"to": "colors.secondary",
"angle": 105,
"animated": true
}
}
},
"style": {
"typography": {
"shadow": "0 0 2rem rgb(139 92 246 / 0.12)"
}
},
"children": []
},
{
"id": "capabilities-copy",
"component": "text",
"version": 1,
"data": {
"content": "The visual layer stays expressive while shared schemas, registry metadata, project migrations, and publication checks keep builder and renderer behavior aligned."
},
"style": {
"layout": {
"maxWidth": "48rem"
},
"appearance": {
"color": "colors.muted"
}
},
"children": []
}
]
},
{
"id": "capability-stats",
"component": "grid",
"version": 1,
"data": {
"columns": 3
},
"style": {
"layout": {
"gap": "spacing.lg"
}
},
"children": [
{
"id": "stat-references",
"component": "counter",
"version": 1,
"data": {
"value": 20,
"suffix": " refs",
"decimals": 0,
"durationMs": 1600,
"label": "contextual preview selections per request",
"role": "headline"
},
"style": {
"appearance": {
"color": "colors.primary"
}
},
"children": []
},
{
"id": "stat-repair",
"component": "counter",
"version": 1,
"data": {
"value": 1,
"suffix": " repair",
"decimals": 0,
"durationMs": 1600,
"label": "bounded AI repair pass after deterministic fixes",
"role": "headline"
},
"style": {
"appearance": {
"color": "colors.secondary"
}
},
"children": []
},
{
"id": "stat-source",
"component": "counter",
"version": 1,
"data": {
"value": 1,
"suffix": " model",
"decimals": 0,
"durationMs": 1600,
"label": "shared source of truth from editor to renderer",
"role": "headline"
},
"style": {
"appearance": {
"color": "colors.primary"
}
},
"children": []
}
]
},
{
"id": "capability-grid",
"component": "grid",
"version": 1,
"data": {
"columns": 3
},
"style": {
"layout": {
"gap": "spacing.lg"
}
},
"children": [
{
"id": "capability-forms",
"component": "card",
"version": 1,
"data": {
"title": "Intelligent forms",
"body": "Top labels by default, smart columns, full-width textareas, typed validation, and durable submissions.",
"iconColor": "colors.primary",
"iconAlign": "center",
"icon": "mail"
},
"style": {
"appearance": {
"preset": "bordered",
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
},
{
"id": "capability-design",
"component": "card",
"version": 1,
"data": {
"title": "Expressive design controls",
"body": "Smooth and hard gradients, animated gradient borders, text shadows, semantic colors, and per-section dividers.",
"iconColor": "colors.secondary",
"iconAlign": "center",
"icon": "palette"
},
"style": {
"appearance": {
"gradientBorder": {
"from": "colors.primary",
"to": "colors.secondary",
"angle": 120,
"blend": "smooth",
"splitPercent": 50,
"width": "2px",
"animated": false,
"durationMs": 12000
},
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
},
{
"id": "capability-history",
"component": "card",
"version": 1,
"data": {
"title": "Recoverable changes",
"body": "Revision-aware saves, publishing state, and history make manual edits and AI rebuilds safer to explore.",
"iconColor": "colors.primary",
"iconAlign": "center",
"icon": "clock"
},
"style": {
"appearance": {
"preset": "bordered",
"radius": "radius.md"
},
"hover": {
"preset": "lift",
"borderColor": "colors.primary",
"translateY": "-4px",
"duration": 220
}
},
"children": []
}
]
}
]
},
{
"id": "source",
"component": "cta",
"version": 1,
"data": {
"headline": "This page is a Flyframe project, too. Inspect the live JSON below.",
"button": {
"label": "View project JSON",
"action": {
"type": "link",
"href": "#project-json"
},
"variant": "secondary",
"animation": "grow"
}
},
"style": {
"appearance": {
"background": {
"type": "gradient",
"from": "rgb(18 12 28)",
"to": "rgb(16 26 22)",
"angle": 112,
"blend": "smooth",
"splitPercent": 50
},
"divider": "none"
},
"animation": {
"preset": "fade-up",
"durationMs": 650
}
},
"children": []
}
]
}
}
]
}
],
"popups": [
{
"id": "flyframe-overview",
"name": "Flyframe overview",
"title": "How Flyframe works",
"size": "lg",
"showClose": true,
"closeOnBackdrop": true,
"closeOnEscape": true,
"root": {
"id": "overview-root",
"component": "stack",
"version": 1,
"data": {},
"style": {
"layout": {
"gap": "spacing.lg"
}
},
"children": [
{
"id": "overview-heading",
"component": "headline",
"version": 1,
"data": {
"content": "Describe. Select. Refine. Publish.",
"role": "headline",
"level": "2"
},
"style": {
"typography": {
"shadow": "0 0 2rem rgb(139 92 246 / 0.12)"
}
},
"children": []
},
{
"id": "overview-copy",
"component": "text",
"version": 1,
"data": {
"content": "Start with an idea or an existing page. Flyframe plans a structured change, lets you point to the exact rendered areas you mean, validates the result, and publishes the same typed document through its domain-aware renderer."
},
"style": {
"layout": {
"maxWidth": "48rem"
},
"appearance": {
"color": "colors.muted"
}
},
"children": []
},
{
"id": "overview-button",
"component": "button",
"version": 1,
"data": {
"label": "Open the builder",
"action": {
"type": "link",
"href": "https://flyframe.io"
},
"variant": "primary",
"animation": "shine"
},
"children": []
}
]
}
}
]
}