Aktion: Build Complex UIs in a Fraction of the Code
A developer-tool ad: a hook, the name, React against Aktion on screen, plain data turning into a live UI, a beat montage of what is built in, an AI that writes it and one tag for any framework.
Preview
Plays with its recorded voice-over.
⚡
16:9Developer toolReal screenshots
Aktion: Build Complex UIs in a Fraction of the Code
A developer-tool ad: a hook, the name, React against Aktion on screen, plain data turning into a live UI, a beat montage of what is built in, an AI that writes it and one tag for any framework.
9 scenes · narrated · captions included
The JSON behind it
This is all it takes.
{
"version": 1,
"title": "Aktion: Build Complex UIs in a Fraction of the Code",
"subtitle": "A developer-tool ad: a hook, the name, React against Aktion on screen, plain data turning into a live UI, a beat montage of what is built in, an AI that writes it and one tag for any framework.",
"topic": "An ad for Aktion, an open-source reactive UI language and web component that renders whole interfaces from compact plain-data code, in any framework",
"domain": "technology",
"emoji": "⚡",
"kicker": "Developer tool",
"chips": [
"16:9",
"Developer tool",
"Real screenshots"
],
"style": {
"theme": "midnight-tech",
"brandColor": "#7c8cff",
"header": [],
"camera": "dolly",
"grade": "clean",
"transition": "blur-zoom",
"effects": [
"glow",
"shine"
]
},
"brand": {
"name": "Aktion",
"tagline": "Less code, any framework.",
"logo": "/examples/ads-aktion/logo.webp"
},
"narration": {
"engine": "premium",
"premium": {
"voice": "Fenrir",
"style": "thrilled, quick and electric, like a developer showing off the thing they built, grinning, big energy but never shouting",
"pace": "brisk"
},
"pronunciations": {
"Aktion": "action",
"aktion": "action"
},
"pauses": {
"sentence": 0.18,
"section": 0.4,
"leadIn": 0.12,
"tail": 0.7
}
},
"scenes": [
{
"kind": "kinetic",
"delivery": "incredulous, then delighted, speeding up with every line",
"layout": "stack",
"lines": [
{
"text": "A button that **counts**.",
"say": "A button that counts."
},
{
"text": "Three files. A **bundler**.",
"tone": "amber",
"say": "Three files, a bundler, a build step."
},
{
"text": "Or ==one file==.",
"tone": "violet",
"say": "<short pause> Or... one file."
}
]
},
{
"kind": "brandreveal",
"delivery": "bright, unveiling something clever",
"hold": 0.5,
"reveal": "burst",
"say": "Meet Aktion, said just like action. A new language for building UIs."
},
{
"kind": "walkthrough",
"delivery": "quick and showy, comparing side by side",
"heading": "The same counter, a fraction of the code",
"screenshot": "/examples/ads-aktion/codecmp.webp",
"steps": [
{
"focus": {
"x": 1,
"y": 11,
"width": 47,
"height": 86
},
"title": "React · 3 files",
"text": "Imports, a hook, CSS and a bundler.",
"marker": "box",
"say": "In React, that takes imports, a hook, a stylesheet and a bundler."
},
{
"focus": {
"x": 51,
"y": 3,
"width": 48,
"height": 28
},
"title": "No imports. No CSS. No build.",
"marker": "box",
"pointer": true,
"say": "In Aktion? One file. No imports, no CSS, no build."
},
{
"focus": {
"x": 51,
"y": 30,
"width": 48,
"height": 36
},
"title": "Plain data in",
"text": "State is one dollar sign.",
"marker": "ellipse",
"say": "State is a single dollar sign, and the UI is just plain data."
}
]
},
{
"kind": "walkthrough",
"delivery": "excited, demoing live",
"heading": "Plain data in. **Live UI** out.",
"screenshot": "/examples/ads-aktion/showcase.webp",
"steps": [
{
"focus": {
"x": 0,
"y": 9,
"width": 50,
"height": 88
},
"title": "Plain data in",
"text": "The JavaScript syntax you already know.",
"marker": "box",
"say": "Describe a screen as plain data, in the JavaScript you already know."
},
{
"focus": {
"x": 51,
"y": 9,
"width": 48,
"height": 88
},
"title": "Live UI out",
"text": "Styled, reactive and ready to ship.",
"marker": "ellipse",
"pointer": true,
"say": "And Aktion renders it live. Styled, reactive, ready to ship."
}
]
},
{
"kind": "montage",
"delivery": "rapid-fire, punchy, one beat per cut",
"cuts": [
{
"word": "No JSX.",
"tone": "violet",
"say": "No JSX."
},
{
"word": "No bundler.",
"tone": "amber",
"say": "No bundler."
},
{
"word": "No build step.",
"tone": "fuchsia",
"say": "No build step."
},
{
"word": "No boilerplate.",
"tone": "teal",
"say": "No boilerplate."
},
{
"word": "Just UI.",
"say": "Just UI."
}
]
},
{
"kind": "showcase",
"delivery": "quick and proud, listing what comes in the box",
"heading": "Batteries **included**",
"layout": "coverflow",
"fit": "contain",
"items": [
{
"picture": "/examples/ads-aktion/components.webp",
"title": "282 components",
"text": "Charts, forms, tables, calendars and more.",
"tone": "violet",
"say": "Two hundred eighty-two components, built in."
},
{
"picture": "/examples/ads-aktion/themes.webp",
"title": "11 themes",
"text": "Light, dark, or your own brand.",
"tone": "fuchsia",
"say": "Eleven themes, or bring your own brand."
}
]
},
{
"kind": "walkthrough",
"delivery": "curious and amazed, then delighted",
"heading": "An AI can write it **too**",
"screenshot": "/examples/ads-aktion/chat-sprint.webp",
"steps": [
{
"focus": {
"x": 2,
"y": 6,
"width": 96,
"height": 14
},
"title": "Just ask",
"text": "A plain question in a chat.",
"marker": "underline",
"say": "Ask an AI for a quick read on your sprint."
},
{
"focus": {
"x": 3,
"y": 30,
"width": 94,
"height": 16
},
"title": "A real interface, streamed",
"text": "Token by token, straight into the page.",
"marker": "box",
"pointer": true,
"say": "Instead of a wall of text, a real interface streams in, token by token."
},
{
"focus": {
"x": 4,
"y": 46,
"width": 92,
"height": 42
},
"title": "Live, not a screenshot",
"text": "Every card is interactive.",
"marker": "ellipse",
"say": "Every card is live and interactive. Not a picture."
}
]
},
{
"kind": "constellation",
"delivery": "open and inclusive, with a smile",
"text": "One tag, ==any framework==",
"items": [
{
"icon": "⚛️",
"label": "React"
},
{
"icon": "💚",
"label": "Vue"
},
{
"icon": "🅰️",
"label": "Angular"
},
{
"icon": "🔥",
"label": "Svelte"
},
{
"icon": "🌐",
"label": "Plain HTML"
},
{
"icon": "▲",
"label": "Next.js"
},
{
"icon": "🎨",
"label": "Material UI"
},
{
"icon": "🅱️",
"label": "Bootstrap"
},
{
"icon": "◼️",
"label": "shadcn"
}
],
"say": "Drop it into React, Vue, Angular, Svelte, or plain HTML. One tag, any framework."
},
{
"kind": "endcard",
"delivery": "warm, confident and direct, a final grin",
"headline": "Build more with **less code**",
"text": "Open source under MIT.",
"button": "Start building",
"link": "asfand-dev.github.io/aktion",
"badges": [
"Open source · MIT",
"Any framework"
],
"say": "Learn it in an afternoon. Try Aktion today, at asfand dev dot github dot io, slash aktion."
}
],
"sound": {
"effects": "punchy",
"bed": "pulse"
}
}