0.5 ? C.green : C.pressed}`,
borderRight: 'none',
borderRadius: '8px 0 0 8px',
boxShadow: gateGlow > 0.3 ? `0 0 ${40 * gateGlow}px rgba(0, 255, 111, ${0.4 * gateGlow})` : 'none',
transition: 'border-color 200ms',
}}/>
0.5 ? C.green : C.pressed}`,
borderLeft: 'none',
borderRadius: '0 8px 8px 0',
boxShadow: gateGlow > 0.3 ? `0 0 ${40 * gateGlow}px rgba(0, 255, 111, ${0.4 * gateGlow})` : 'none',
}}/>
{/* Check mark pops when authenticated */}
{authProgress > 0.5 && (
)}
{/* The key */}
0.5 ? C.green : C.fg3} />
{/* Headline */}
Admin · API keys
API keys
Non-interactive credentials for scripts, CI, and MCP.
);
}
function KeyShape({ x, y, rotation = 0, color = C.fg3 }) {
return (
);
}
// ─── Scene 2: Key types ───────────────────────────────────────────────────
function Scene2() {
return (
{({ localTime, duration }) => }
);
}
function Scene2Content({ localTime, duration }) {
const head = fadeRise(localTime, { inDur: 0.5, outStart: duration - 0.4, outDur: 0.35 });
const card1 = fadeRise(Math.max(0, localTime - 0.5), { inDur: 0.5, outStart: duration - 0.4, outDur: 0.35 });
const card2 = fadeRise(Math.max(0, localTime - 1.0), { inDur: 0.5, outStart: duration - 0.4, outDur: 0.35 });
// Typing effect on prefixes
const typeT1 = clamp((localTime - 1.4) / 0.8, 0, 1);
const typeT2 = clamp((localTime - 2.2) / 0.8, 0, 1);
const apiKey = 'konst_api_7f4a9c8e2b1d5a0f…';
const mcpKey = 'konst_mcp_a3d8e1b6c9f2d0a7…';
return (
Key types
Two types, identified by prefix.
{/* API key card */}
);
}
function KeyTypeCard({ style, badge, prefix, accent, desc, iconKind }) {
return (
{iconKind === 'api' ? (
) : (
)}
{badge}
{/* Prefix code */}
{prefix}
{desc}
);
}
// ─── Scene 3: Generate a key (form) ───────────────────────────────────────
function Scene3() {
return (
{({ localTime, duration }) => }
);
}
function Scene3Content({ localTime, duration }) {
const dialog = fadeRise(localTime, { inDur: 0.45, outStart: duration - 0.4, outDur: 0.35 });
// Sequentially fill fields: name → type → role → expiry → button
// Name: 0.3–1.2 (typing)
const name = 'pipeline-api-key';
const nameT = clamp((localTime - 0.3) / 0.9, 0, 1);
const nameText = name.slice(0, Math.floor(nameT * name.length));
// Type select at 1.3, selection lands at 1.8
const typeOpen = localTime > 1.3 && localTime < 2.2;
const typeSelected = localTime > 2.0;
// Role select 2.3, selection 2.8
const roleOpen = localTime > 2.3 && localTime < 3.2;
const roleSelected = localTime > 3.0;
// Expiry 3.3, selection 3.7
const expirySelected = localTime > 3.5;
// Button click 4.0
const btnPress = localTime > 4.0 && localTime < 4.3;
const btnHover = localTime > 3.9;
const cursorPos = (() => {
// interp cursor path: start → name → type → role → expiry → button
const points = [
{ t: 0.0, x: 1100, y: 700 },
{ t: 0.5, x: 760, y: 300 }, // name field
{ t: 1.5, x: 760, y: 390 }, // type select
{ t: 2.5, x: 760, y: 480 }, // role select
{ t: 3.4, x: 760, y: 570 }, // expiry
{ t: 4.0, x: 900, y: 660 }, // button
];
for (let i = 0; i < points.length - 1; i++) {
if (localTime >= points[i].t && localTime <= points[i + 1].t) {
const t = (localTime - points[i].t) / (points[i + 1].t - points[i].t);
const eased = easeInOut(t);
return {
x: lerp(points[i].x, points[i + 1].x, eased),
y: lerp(points[i].y, points[i + 1].y, eased),
};
}
}
return points[points.length - 1];
})();
return (
{/* Left side: label */}
Step 1 · Generate
Create a key.
Required fields: name, type, role, and expiry. The role cannot exceed the creator's role. Maximum expiry is 30 days.
{/* Dialog (right side) */}
{/* Dialog header */}
Generate API key
{nameText}
{nameT < 1 && nameT > 0 && (
)}
{['7 days', '14 days', '30 days'].map((label, i) => {
const selected = expirySelected && i === 2;
return (
{label}
);
})}
{/* Buttons */}
{/* Cursor */}
{localTime > 0.2 && localTime < 4.5 && (
)}
);
}
function FormField({ label, children }) {
return (
);
}
function Select({ value, placeholder, open, options, highlightIndex = -1 }) {
return (
{open && (
{options.map((opt, i) => (
{opt}
))}
)}
);
}
function Cursor({ x, y, clicking }) {
return (
);
}
// ─── Scene 4: Copy the key (ONE TIME) ─────────────────────────────────────
function Scene4() {
return (
{({ localTime, duration }) => }
);
}
function Scene4Content({ localTime, duration }) {
const dialog = fadeRise(localTime, { inDur: 0.45, outStart: duration - 0.4, outDur: 0.35 });
// Key string + copy button interaction
const key = 'konst_api_7f4a9c8e2b1d5a0f3e6c4b8d1a2e5f9c';
const copied = localTime > 2.2;
const btnHover = localTime > 1.8 && localTime < 2.2;
// Warning text pulse after copy
const warnPulse = copied ? (Math.sin((localTime - 2.2) * 4) * 0.5 + 0.5) : 0;
// Cursor targets copy button
const cursorPos = (() => {
if (localTime < 0.6) return { x: 1100, y: 700, show: false };
if (localTime < 2.0) {
const t = clamp((localTime - 0.6) / 1.4, 0, 1);
return {
x: lerp(1100, 920, easeInOut(t)),
y: lerp(700, 340, easeInOut(t)),
show: true,
};
}
return { x: 920, y: 340, show: true };
})();
const clicking = localTime > 2.0 && localTime < 2.3;
return (
{/* Left label */}
Step 2 · Copy the key
Shown once.
The plaintext key is displayed only at creation. Copy it to a secret store. To recover from a missed copy, delete the key and create a new one.
{/* Dialog */}
{/* Key field with copy button */}
{key}
{copied ? (
<>
Copied
) : (
<>
Copy
)}
{/* Shell snippet */}
export KONSTRUCT_API_KEY="konst_api_…"
{/* Warning box */}
Warning — Konstruct does not store or display the plaintext key after this dialog closes.
{cursorPos.show &&
}
);
}
// ─── Scene 5: Use the key (curl + SDK) ────────────────────────────────────
function Scene5() {
return (
{({ localTime, duration }) => }
);
}
function Scene5Content({ localTime, duration }) {
const head = fadeRise(localTime, { inDur: 0.4, outStart: duration - 0.35, outDur: 0.3 });
// Phase A (0–3.2s): curl
// Phase B (3.2–8.0s): Backstage SDK integration
const curlVisible = localTime < 3.4;
const sdkVisible = localTime >= 3.0;
const curlIn = fadeRise(Math.max(0, localTime - 0.4), { inDur: 0.5, outStart: 3.0, outDur: 0.4, rise: 10 });
const sdkIn = fadeRise(Math.max(0, localTime - 3.0), { inDur: 0.5, outStart: duration - 0.4, outDur: 0.35, rise: 14 });
// curl response type
const curlT = clamp((localTime - 1.8) / 0.9, 0, 1);
// SDK code lines reveal progressively
const sdkStart = 3.4;
const sdkLine = (n) => clamp((localTime - sdkStart - n * 0.28) / 0.3, 0, 1);
// Backstage "Catalog" panel renders after SDK call at ~7.0s
const catalogIn = fadeRise(Math.max(0, localTime - 6.4), { inDur: 0.55, outStart: duration - 0.4, outDur: 0.35, rise: 18 });
// Headline swaps between phases
const showCurlHead = localTime < 3.2;
return (
Step 3 · Authenticate requests
{showCurlHead ? (
<>Direct HTTP, or use the @konstructio/konstruct-sdk.
) : (
<>The SDK plugs straight into a Backstage backend.
)}
{/* Phase A: curl — centered, single card */}
{curlVisible && (
export KONSTRUCT_API_KEY="konst_api_…"
curl -H "Authorization: Bearer $KONSTRUCT_API_KEY" \
https://<your-konstruct-host>/api/v1/health
{curlT > 0 && (
<>
↳
{'{"status":"ok"}'.slice(0, Math.floor(curlT * 15))}
)}
)}
{/* Phase B: Backstage SDK integration */}
{sdkVisible && (
{/* Code: Backstage backend plugin */}
{sdkLine(0) > 0 &&
import {'{ '}KonstructClient{' }'} from '@konstructio/konstruct-sdk';
}
{sdkLine(1) > 0 &&
import {'{ '}createRouter{' }'} from '@backstage/backend-plugin-api';
}
{sdkLine(2) > 0 && }
{sdkLine(2) > 0 &&
export async function createKonstructRouter({'{ '}config, logger{' }'}) {'{'}
}
{sdkLine(3) > 0 &&
const client = new KonstructClient({'{'}
}
{sdkLine(4) > 0 &&
apiUrl: config.getString('konstruct.apiUrl'),
}
{sdkLine(5) > 0 &&
apiToken: config.getString('konstruct.apiToken'),
}
{sdkLine(6) > 0 && {'});'}}
{sdkLine(7) > 0 && }
{sdkLine(7) > 0 &&
const router = createRouter();
}
{sdkLine(8) > 0 &&
router.get('/clusters', async (_req, res) {'=> {'}
}
{sdkLine(9) > 0 &&
const clusters = await client.clusters.list();
}
{sdkLine(10) > 0 &&
res.json(clusters);
}
{sdkLine(11) > 0 && {'});'}}
{sdkLine(12) > 0 &&
return router;
}
{sdkLine(13) > 0 && {'}'}}
{/* Right column: app-config + Backstage catalog card */}
{/* app-config */}
konstruct:
apiUrl: https://konstruct.example.io
apiToken: ${'{KONSTRUCT_API_KEY}'}
{/* Backstage catalog card result */}
{/* Backstage-style top bar */}
Backstage · Software Catalog
Konstruct clusters
{[
{ name: 'prod-eu-west-1', status: 'Healthy', color: '#00a63e' },
{ name: 'prod-us-east-2', status: 'Healthy', color: '#00a63e' },
{ name: 'staging-eu', status: 'Degraded', color: '#e17100' },
].map((c, i) => (
{c.name}
{c.status}
))}
)}
);
}
function TerminalHeader({ label, accent }) {
return (
);
}
function Line({ children, indent }) {
return (
{children}
);
}
const TokKw = ({ children }) =>
{children};
const TokStr = ({ children, style }) =>
{children};
const TokProp = ({ children }) =>
{children};
// ─── Scene 6: Usage + revoke ──────────────────────────────────────────────
function Scene6() {
return (
{({ localTime, duration }) => }
);
}
function Scene6Content({ localTime, duration }) {
const head = fadeRise(localTime, { inDur: 0.4, outStart: duration - 0.35, outDur: 0.3 });
const list = fadeRise(Math.max(0, localTime - 0.4), { inDur: 0.5, outStart: duration - 0.35, outDur: 0.3 });
// Rows pulse as activity; then delete click at ~3.0s → row flashes red → disappears
const deleting = localTime > 3.0 && localTime < 3.5;
const deleted = localTime > 3.5;
// "401 Unauthorized" toast after delete
const toast = fadeRise(Math.max(0, localTime - 3.7), { inDur: 0.4, outStart: duration - 0.4, outDur: 0.3, rise: 20 });
return (
Manage keys
Review activity. Delete to revoke.
The key list shows type, role, expiry, and recent usage.
Deletion revokes the key immediately.
{/* Table */}
{/* Header row */}
Name
Type
Role
Expires
Actions
0.8 && localTime < 2.5}
deleting={deleting}
deleted={deleted}
highlighted
/>
1.1 && localTime < 1.8} />
1.5 && localTime < 2.2} accent={C.info} />
{/* 401 Toast */}
{localTime > 3.7 && (
401 Unauthorized
Subsequent requests using the deleted key are rejected.
)}
);
}
function KeyRow({ name, type, role, expires, active, deleting, deleted, highlighted, accent }) {
const typeAccent = accent || (type === 'MCP key' ? C.info : C.green);
return (
);
}
function IconBtn({ children, active, color }) {
return (
{children}
);
}
// ─── Root scene ───────────────────────────────────────────────────────────
function App() {
return (
<>
);
}
window.App = App;