mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
ukimsanov
265 lines
7.4 KiB
HTML
265 lines
7.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>HyperFrames docs — current state</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
font-family:
|
|
Inter,
|
|
ui-sans-serif,
|
|
system-ui,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
sans-serif;
|
|
background: #09090b;
|
|
color: #f4f4f5;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background:
|
|
radial-gradient(circle at 80% 0%, rgba(132, 204, 22, 0.13), transparent 30rem), #09090b;
|
|
}
|
|
main {
|
|
width: min(1120px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding: 64px 0 80px;
|
|
}
|
|
.eyebrow {
|
|
color: #a3e635;
|
|
font:
|
|
700 12px/1.2 ui-monospace,
|
|
monospace;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
h1 {
|
|
max-width: 760px;
|
|
margin: 14px 0 16px;
|
|
font-size: clamp(42px, 7vw, 78px);
|
|
line-height: 0.98;
|
|
letter-spacing: -0.055em;
|
|
}
|
|
.lede {
|
|
max-width: 720px;
|
|
color: #a1a1aa;
|
|
font-size: 19px;
|
|
line-height: 1.6;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 12px;
|
|
margin: 40px 0;
|
|
}
|
|
.card,
|
|
section {
|
|
border: 1px solid #27272a;
|
|
border-radius: 18px;
|
|
background: rgba(24, 24, 27, 0.78);
|
|
}
|
|
.card {
|
|
padding: 22px;
|
|
}
|
|
.metric {
|
|
font-size: 38px;
|
|
font-weight: 760;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.label {
|
|
margin-top: 4px;
|
|
color: #a1a1aa;
|
|
font-size: 14px;
|
|
}
|
|
section {
|
|
margin-top: 16px;
|
|
padding: 28px;
|
|
}
|
|
h2 {
|
|
margin: 0 0 20px;
|
|
font-size: 22px;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
.rows {
|
|
display: grid;
|
|
gap: 1px;
|
|
overflow: hidden;
|
|
border: 1px solid #27272a;
|
|
border-radius: 12px;
|
|
background: #27272a;
|
|
}
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 160px 1fr 90px;
|
|
gap: 18px;
|
|
align-items: center;
|
|
padding: 16px;
|
|
background: #111113;
|
|
}
|
|
.row strong {
|
|
color: #e4e4e7;
|
|
}
|
|
.row span {
|
|
color: #a1a1aa;
|
|
line-height: 1.45;
|
|
}
|
|
.status {
|
|
justify-self: end;
|
|
color: #bef264 !important;
|
|
font:
|
|
700 12px/1 ui-monospace,
|
|
monospace;
|
|
text-transform: uppercase;
|
|
}
|
|
ul {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
color: #d4d4d8;
|
|
line-height: 1.7;
|
|
}
|
|
.remaining {
|
|
border-color: #3f3f46;
|
|
}
|
|
footer {
|
|
margin-top: 24px;
|
|
color: #71717a;
|
|
font-size: 13px;
|
|
}
|
|
@media (max-width: 760px) {
|
|
main {
|
|
padding-top: 40px;
|
|
}
|
|
.grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.row {
|
|
grid-template-columns: 1fr;
|
|
gap: 7px;
|
|
}
|
|
.status {
|
|
justify-self: start;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="eyebrow">Documentation refactor · journey-led state</div>
|
|
<h1>Five clear ways into HyperFrames.</h1>
|
|
<p class="lede">
|
|
The documentation now begins with the situation a person is in: understand the product, make
|
|
a first video, choose a workflow, edit a project, or recover from a problem.
|
|
</p>
|
|
|
|
<div class="grid">
|
|
<div class="card">
|
|
<div class="metric">250</div>
|
|
<div class="label">navigated pages</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="metric">5</div>
|
|
<div class="label">canonical P0 journeys</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="metric">4</div>
|
|
<div class="label">top-level tabs</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="metric">3</div>
|
|
<div class="label">old routes redirected</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section>
|
|
<h2>What changed</h2>
|
|
<div class="rows">
|
|
<div class="row">
|
|
<strong>Understand</strong>
|
|
<span
|
|
>One sendable explanation with a finished video, product loop, examples, and a clear
|
|
next step.</span
|
|
>
|
|
<span class="status">Complete</span>
|
|
</div>
|
|
<div class="row">
|
|
<strong>First video</strong>
|
|
<span
|
|
>A material-first route from a useful request through creative approval, Studio
|
|
review, and export.</span
|
|
>
|
|
<span class="status">Complete</span>
|
|
</div>
|
|
<div class="row">
|
|
<strong>Workflows</strong>
|
|
<span
|
|
>An outcome-led chooser plus consistent product, explainer, PR, recut, motion, music,
|
|
slideshow, and custom-video guides.</span
|
|
>
|
|
<span class="status">Complete</span>
|
|
</div>
|
|
<div class="row">
|
|
<strong>Studio</strong>
|
|
<span
|
|
>A task-led route for understanding an existing project, making the right kind of
|
|
change, checking it, and exporting safely.</span
|
|
>
|
|
<span class="status">Complete</span>
|
|
</div>
|
|
<div class="row">
|
|
<strong>Recovery</strong>
|
|
<span
|
|
>A symptom-first help entrance with small fixes, useful diagnostics, detailed
|
|
troubleshooting, and human escalation.</span
|
|
>
|
|
<span class="status">Complete</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Removed or corrected</h2>
|
|
<ul>
|
|
<li>False claims that Studio had no timeline or split workflow.</li>
|
|
<li>
|
|
Empty Weekly Updates and overlapping Showcase, Launch Videos, design, and
|
|
troubleshooting pages.
|
|
</li>
|
|
<li>Repository-shaped top navigation and buried Studio user instructions.</li>
|
|
<li>Rigid internal pipeline guidance presented as a requirement for every user.</li>
|
|
<li>Duplicate Catalog titles and technical file tables dominating every item page.</li>
|
|
<li>Internal telemetry specifications presented as a normal feedback guide.</li>
|
|
<li>
|
|
Duplicate Overview, Choose your path, Create with an agent, and Help entrances competing
|
|
for the same jobs.
|
|
</li>
|
|
<li>
|
|
Machine-facing Claude Design and Open Design specifications cluttering the human
|
|
creation journey.
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="remaining">
|
|
<h2>Post-release measurement</h2>
|
|
<ul>
|
|
<li>Review real Mintlify search terms and no-result queries after deployment.</li>
|
|
<li>
|
|
Use page and search analytics to decide which specialized guides should be merged later.
|
|
</li>
|
|
<li>Refresh screenshots when visible Studio controls change.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<footer>
|
|
Current implementation state · 2026-07-28 · validation and internal-link checks passed
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|