Files
open-design/plugins/_official/examples/deck-open-slide-canvas/example.html
T
2026-06-29 15:00:45 +00:00

603 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Open-Slide Canvas · Open Design · Cloud or Desktop?</title>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<style>
/* Sea Indigo - locked palette: bg #0a0e1a / ink #f5f5f7 / accent #5ac8fa */
:root{
--bg:#0a0e1a;
--ink:#f5f5f7;
--ink-dim:rgba(245,245,247,.68);
--ink-faint:rgba(245,245,247,.56);
--accent:#5ac8fa;
--line:rgba(245,245,247,.14);
--ease:cubic-bezier(.16,1,.3,1);
}
html,body{margin:0;padding:0}
body{
font-family:'Inter Tight',system-ui,sans-serif;
background:#020306;
height:100vh;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
.stage{
width:1920px;height:1080px;
flex:none;
transform:scale(0.625);
transform-origin:center center;
position:relative;
background:var(--bg);
color:var(--ink);
/* single-accent ambient glow, cyan family only */
background-image:
radial-gradient(circle at 18% 82%, rgba(90,200,250,.10) 0%, transparent 50%),
radial-gradient(circle at 84% 22%, rgba(90,200,250,.045) 0%, transparent 55%);
}
/* ---- multi-slide canvas: stacked sections, one active ---- */
.slide{
position:absolute;inset:0;
padding:160px;
box-sizing:border-box;
display:flex;flex-direction:column;justify-content:space-between;
opacity:0;visibility:hidden;
transition:opacity .4s var(--ease), visibility .4s;
}
.slide.active{opacity:1;visibility:visible}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.accent{color:var(--accent)}
.meta{
display:flex;align-items:baseline;justify-content:space-between;
font-size:17px;text-transform:uppercase;
}
.meta-top{letter-spacing:.18em;color:var(--ink-dim);
border-bottom:1px solid var(--line);padding-bottom:28px}
.meta-bottom{letter-spacing:.18em;color:var(--ink-faint);
border-top:1px solid var(--line);padding-top:28px}
.meta-bottom .link{color:var(--accent)}
.kicker{
font-size:19px;letter-spacing:.22em;text-transform:uppercase;
color:var(--accent);
}
/* signature underline device */
.u{box-shadow:inset 0 -10px 0 0 rgba(90,200,250,.45)}
h1{
margin:36px 0 0;
font-size:160px;
font-weight:900;
line-height:.98;
letter-spacing:-.025em;
}
h1 .cloud{color:var(--accent)}
h1 .desk{
font-style:normal;
box-shadow:inset 0 -10px 0 0 rgba(90,200,250,.45);
}
.sub{
margin:56px 0 0;
font-size:36px;
font-weight:400;
color:var(--ink-dim);
max-width:1380px;
line-height:1.45;
}
/* staggered entrance: transform + opacity only */
.reveal{opacity:0;transform:translateY(24px)}
.slide.active .reveal{animation:reveal .8s var(--ease) forwards}
.slide.active .d1{animation-delay:.05s}
.slide.active .d2{animation-delay:.13s}
.slide.active .d3{animation-delay:.21s}
.slide.active .d4{animation-delay:.29s}
.slide.active .d5{animation-delay:.37s}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
.slide{transition:none}
.reveal,.slide.active .reveal{animation:none;opacity:1;transform:none}
}
/* ---- 02 · asymmetric split ---- */
.split{display:flex;align-items:flex-end;gap:120px}
.split-main{flex:1 1 auto}
.split h2{
margin:36px 0 0;
font-size:120px;font-weight:900;line-height:1.0;letter-spacing:-.02em;
}
.split-aside{
flex:0 0 460px;
align-self:flex-start;
margin-top:96px;
border-left:1px solid var(--line);
padding-left:48px;
}
.split-aside p{
margin:0 0 36px;
font-size:28px;line-height:1.55;color:var(--ink-dim);font-weight:400;
}
.split-aside .tags{
font-size:18px;letter-spacing:.18em;color:var(--accent);margin:0;
}
/* ---- 03 · full-bleed section break ---- */
.break-wrap{align-self:flex-start}
.break-wrap h2{
margin:40px 0 0;
font-size:220px;font-weight:900;line-height:.95;letter-spacing:-.02em;
}
.break-sub{
margin:48px 0 0;
font-size:36px;color:var(--ink-dim);font-weight:400;
}
/* ---- 04 · oversized numeral stat ---- */
.stat-row{display:flex;align-items:baseline;gap:64px;margin-top:40px}
.stat-num{
font-size:220px;font-weight:900;letter-spacing:-.03em;line-height:1;
box-shadow:inset 0 -14px 0 0 rgba(90,200,250,.45);
}
.stat-label{
font-size:48px;font-weight:400;color:var(--ink-dim);
}
.stat-foot{
margin:72px 0 0;
font-size:22px;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;
}
.stat-foot b{color:var(--ink);font-weight:500}
/* ---- 05 · three-column evidence ---- */
.cols3{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:80px;
margin-top:64px;
}
.col{border-top:1px solid var(--line);padding-top:44px}
.col-num{
font-size:88px;font-weight:900;letter-spacing:-.02em;line-height:1;
color:var(--accent);
}
.col-name{
margin-top:20px;
font-size:36px;font-weight:700;
}
.col-desc{
margin:24px 0 0;
font-size:24px;line-height:1.55;color:var(--ink-dim);font-weight:400;
}
/* ---- 06 · comparison spread ---- */
.cmp-row{display:flex;align-items:baseline;gap:96px;margin-top:56px}
.cmp-label{font-size:18px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.cmp-label.on{color:var(--accent)}
.cmp-old{
font-size:120px;font-weight:900;letter-spacing:-.02em;line-height:1;
color:var(--ink-faint);margin-top:28px;
text-decoration:line-through;
text-decoration-color:rgba(90,200,250,.55);
text-decoration-thickness:8px;
}
.cmp-new{
font-size:220px;font-weight:900;letter-spacing:-.03em;line-height:1;
margin-top:28px;
box-shadow:inset 0 -14px 0 0 rgba(90,200,250,.45);
}
.cmp-arrow{font-size:88px;color:var(--accent);font-weight:400;align-self:center}
.cmp-sub{margin-top:28px;font-size:24px;color:var(--ink-dim);font-weight:400}
.cmp-foot{
margin:64px 0 0;
font-size:22px;letter-spacing:.14em;color:var(--accent);
}
/* ---- 07 · flow built from positioned blocks ---- */
.flow{position:relative;height:560px;margin-top:48px}
.node{
position:absolute;box-sizing:border-box;
border:1px solid var(--line);
padding:36px 40px;
background:rgba(245,245,247,.03);
}
.node.on{border-color:rgba(90,200,250,.65)}
.node .n{font-size:18px;letter-spacing:.18em;color:var(--accent)}
.node h3{margin:18px 0 0;font-size:36px;font-weight:700;line-height:1.1}
.node p{margin:16px 0 0;font-size:22px;line-height:1.5;color:var(--ink-dim);font-weight:400}
.edge{
position:absolute;height:1px;background:rgba(90,200,250,.5);
transform-origin:0 0;
}
/* ---- 08 · editorial long-quote ---- */
.quote-wrap{padding-left:200px;position:relative;align-self:flex-start;max-width:1340px}
.qmark{
position:absolute;left:0;top:-40px;
font-size:220px;font-weight:900;color:var(--accent);line-height:1;
}
blockquote{
margin:0;
font-size:64px;font-weight:700;line-height:1.3;letter-spacing:-.01em;
}
.cite{
margin-top:56px;
font-size:19px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
}
/* ---- 09 · principles list ---- */
.list-head{
margin:36px 0 0;
font-size:88px;font-weight:900;letter-spacing:-.02em;line-height:1.02;
}
.plist{list-style:none;margin:72px 0 0;padding:0}
.plist li{
display:grid;grid-template-columns:120px 420px 1fr;align-items:baseline;
border-top:1px solid var(--line);
padding:30px 0;
}
.pnum{font-size:19px;letter-spacing:.18em;color:var(--accent)}
.pname{font-size:36px;font-weight:700}
.pdesc{font-size:24px;color:var(--ink-dim);font-weight:400}
/* ---- 10 · closing CTA ---- */
.cta-head{
margin:36px 0 0;
font-size:160px;font-weight:900;line-height:.98;letter-spacing:-.025em;
}
.cta-links{
display:flex;gap:80px;margin-top:88px;
}
.cta-link .ch{font-size:18px;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase}
.cta-link .cv{margin-top:14px;font-size:26px;color:var(--accent)}
@media print{
body{display:block}
.stage{transform:none}
.slide{position:relative;opacity:1;visibility:visible}
}
</style>
</head>
<body>
<div class="stage">
<!-- 01 · full-bleed question cover -->
<section class="slide active" data-slide-id="1">
<header class="meta meta-top mono">
<span>OPEN DESIGN · DECK · OPEN-SLIDE CANVAS</span>
<span>SEA INDIGO</span>
<span>№01 / 10</span>
</header>
<div>
<div class="kicker mono reveal d1">The Question</div>
<h1 class="reveal d2">
AI can design now.<br/>
Keep it in the <span class="cloud">cloud</span>,<br/>
or on your <span class="desk">desktop</span>?
</h1>
<p class="sub reveal d3">
Open Design's answer: open source, local, agent-driven — the whole flow runs on your own machine.
</p>
</div>
<footer class="meta meta-bottom mono">
<span>1920 × 1080 · CANVAS · KBD ← →</span>
<span class="link">github.com/nexu-io/open-design</span>
<span>00 : 00 : 00</span>
</footer>
</section>
<!-- 02 · asymmetric split: statement + narrow aside -->
<section class="slide" data-slide-id="2">
<header class="meta meta-top mono">
<span>OPEN DESIGN · DECK · OPEN-SLIDE CANVAS</span>
<span>SEA INDIGO</span>
<span>№02 / 10</span>
</header>
<div class="split">
<div class="split-main">
<div class="kicker mono reveal d1">The Answer</div>
<h2 class="reveal d2">
Open source.<br/>
Local.<br/>
<span class="u">Agent-driven.</span>
</h2>
</div>
<aside class="split-aside reveal d3">
<p>
Open Design is a design platform that lives on your machine.
Describe what you need; coding agents build the design system,
components, and pages right in your repo.
</p>
<p>Nothing leaves your desk unless you push it.</p>
<p class="tags mono">APACHE-2.0 · BYOK · NO SIGN-UP</p>
</aside>
</div>
<footer class="meta meta-bottom mono">
<span>1920 × 1080 · CANVAS · KBD ← →</span>
<span class="link">github.com/nexu-io/open-design</span>
<span>00 : 02 : 40</span>
</footer>
</section>
<!-- 03 · full-bleed section break -->
<section class="slide" data-slide-id="3">
<header class="meta meta-top mono">
<span>OPEN DESIGN · DECK · OPEN-SLIDE CANVAS</span>
<span>SEA INDIGO</span>
<span>№03 / 10</span>
</header>
<div class="break-wrap">
<div class="kicker mono reveal d1">Part 01 — Evidence</div>
<h2 class="reveal d2">PROOF<span class="accent">.</span></h2>
<p class="break-sub reveal d3">Numbers from a community that chose local.</p>
</div>
<footer class="meta meta-bottom mono">
<span>1920 × 1080 · CANVAS · KBD ← →</span>
<span class="link">discord.gg/mHAjSMV6gz</span>
<span>00 : 05 : 05</span>
</footer>
</section>
<!-- 04 · oversized numeral stat -->
<section class="slide" data-slide-id="4">
<header class="meta meta-top mono">
<span>OPEN DESIGN · DECK · OPEN-SLIDE CANVAS</span>
<span>SEA INDIGO</span>
<span>№04 / 10</span>
</header>
<div>
<div class="kicker mono reveal d1">Community</div>
<div class="stat-row reveal d2">
<span class="stat-num">60K+</span>
<span class="stat-label">GitHub stars</span>
</div>
<p class="stat-foot mono reveal d3">
<b>300+ contributors</b> building the platform in the open — no growth team, no ad budget.
</p>
</div>
<footer class="meta meta-bottom mono">
<span>1920 × 1080 · CANVAS · KBD ← →</span>
<span class="link">github.com/nexu-io/open-design</span>
<span>00 : 07 : 30</span>
</footer>
</section>
<!-- 05 · three-column evidence grid -->
<section class="slide" data-slide-id="5">
<header class="meta meta-top mono">
<span>OPEN DESIGN · DECK · OPEN-SLIDE CANVAS</span>
<span>SEA INDIGO</span>
<span>№05 / 10</span>
</header>
<div>
<div class="kicker mono reveal d1">Ecosystem</div>
<div class="cols3">
<div class="col reveal d1">
<div class="col-num">217+</div>
<div class="col-name">plugins</div>
<p class="col-desc">Decks, sites, image, video, audio — install any of them with one command.</p>
</div>
<div class="col reveal d2">
<div class="col-num">129</div>
<div class="col-name">design systems</div>
<p class="col-desc">Brand DESIGN.md files, ready to bind to any project in your workspace.</p>
</div>
<div class="col reveal d3">
<div class="col-num">21</div>
<div class="col-name">coding agents</div>
<p class="col-desc">Claude Code, Codex, Gemini and more — every one a first-class citizen.</p>
</div>
</div>
</div>
<footer class="meta meta-bottom mono">
<span>1920 × 1080 · CANVAS · KBD ← →</span>
<span class="link">github.com/nexu-io/open-design</span>
<span>00 : 10 : 15</span>
</footer>
</section>
<!-- 06 · comparison spread: the bill -->
<section class="slide" data-slide-id="6">
<header class="meta meta-top mono">
<span>OPEN DESIGN · DECK · OPEN-SLIDE CANVAS</span>
<span>SEA INDIGO</span>
<span>№06 / 10</span>
</header>
<div>
<div class="kicker mono reveal d1">The Bill</div>
<div class="cmp-row">
<div class="reveal d2">
<div class="cmp-label mono">Seat-based cloud stack</div>
<div class="cmp-old">$500</div>
<div class="cmp-sub">per designer, per month</div>
</div>
<div class="cmp-arrow reveal d3">→</div>
<div class="reveal d4">
<div class="cmp-label mono on">Open Design + BYOK</div>
<div class="cmp-new">~$73</div>
<div class="cmp-sub">tokens you already pay for</div>
</div>
</div>
<p class="cmp-foot mono reveal d5">$500 → ~$73 (−80%) · SAME OUTPUT, YOUR KEY, YOUR MACHINE</p>
</div>
<footer class="meta meta-bottom mono">
<span>1920 × 1080 · CANVAS · KBD ← →</span>
<span class="link">x.com/nexudotio</span>
<span>00 : 13 : 00</span>
</footer>
</section>
<!-- 07 · flow built from positioned blocks -->
<section class="slide" data-slide-id="7">
<header class="meta meta-top mono">
<span>OPEN DESIGN · DECK · OPEN-SLIDE CANVAS</span>
<span>SEA INDIGO</span>
<span>№07 / 10</span>
</header>
<div>
<div class="kicker mono reveal d1">How It Works</div>
<div class="flow">
<div class="node reveal d2" style="left:0;top:30px;width:430px">
<div class="n mono">01 · DESCRIBE</div>
<h3>One prompt</h3>
<p>A goal, a vibe, a deadline — written in plain language.</p>
</div>
<div class="edge" style="left:430px;top:160px;width:212px;transform:rotate(33deg)"></div>
<div class="node on reveal d3" style="left:610px;top:190px;width:460px">
<div class="n mono">02 · AGENTS RUN LOCALLY</div>
<h3>Your repo, your key</h3>
<p>Any of 21 coding agents executes the brief on your machine.</p>
</div>
<div class="edge" style="left:1070px;top:330px;width:200px;transform:rotate(36deg)"></div>
<div class="node reveal d4" style="left:1190px;top:360px;width:410px">
<div class="n mono">03 · YOU SHIP</div>
<h3>Committed as code</h3>
<p>design.md, component library, blocks — all in version control.</p>
</div>
</div>
</div>
<footer class="meta meta-bottom mono">
<span>1920 × 1080 · CANVAS · KBD ← →</span>
<span class="link">github.com/nexu-io/open-design</span>
<span>00 : 16 : 20</span>
</footer>
</section>
<!-- 08 · editorial long-quote -->
<section class="slide" data-slide-id="8">
<header class="meta meta-top mono">
<span>OPEN DESIGN · DECK · OPEN-SLIDE CANVAS</span>
<span>SEA INDIGO</span>
<span>№08 / 10</span>
</header>
<div class="quote-wrap">
<div class="qmark reveal d1">&ldquo;</div>
<blockquote class="reveal d2">
Your design system should live where your code lives —
on your machine, in your repo, <span class="u">under your license</span>.
</blockquote>
<div class="cite mono reveal d3">— Open Design principles · README, line one</div>
</div>
<footer class="meta meta-bottom mono">
<span>1920 × 1080 · CANVAS · KBD ← →</span>
<span class="link">discord.gg/mHAjSMV6gz</span>
<span>00 : 19 : 45</span>
</footer>
</section>
<!-- 09 · principles list -->
<section class="slide" data-slide-id="9">
<header class="meta meta-top mono">
<span>OPEN DESIGN · DECK · OPEN-SLIDE CANVAS</span>
<span>SEA INDIGO</span>
<span>№09 / 10</span>
</header>
<div>
<h2 class="list-head reveal d1">No lock-in, <span class="u">by design</span>.</h2>
<ul class="plist">
<li class="reveal d2">
<span class="pnum mono">01</span>
<span class="pname">Apache-2.0</span>
<span class="pdesc">Read it, fork it, ship it commercially. The license is the contract.</span>
</li>
<li class="reveal d3">
<span class="pnum mono">02</span>
<span class="pname">BYOK</span>
<span class="pdesc">Your API key, your model choice, your bill — no middleman markup.</span>
</li>
<li class="reveal d4">
<span class="pnum mono">03</span>
<span class="pname">No sign-up</span>
<span class="pdesc">No account, no upload, no waitlist. Clone and run.</span>
</li>
<li class="reveal d5">
<span class="pnum mono">04</span>
<span class="pname">Local-first</span>
<span class="pdesc">The entire flow executes on your desktop, even offline.</span>
</li>
</ul>
</div>
<footer class="meta meta-bottom mono">
<span>1920 × 1080 · CANVAS · KBD ← →</span>
<span class="link">github.com/nexu-io/open-design</span>
<span>00 : 22 : 10</span>
</footer>
</section>
<!-- 10 · closing CTA -->
<section class="slide" data-slide-id="10">
<header class="meta meta-top mono">
<span>OPEN DESIGN · DECK · OPEN-SLIDE CANVAS</span>
<span>SEA INDIGO</span>
<span>№10 / 10</span>
</header>
<div>
<div class="kicker mono reveal d1">Closing</div>
<h2 class="cta-head reveal d2">Run it <span class="u">tonight</span>.</h2>
<div class="cta-links reveal d3">
<div class="cta-link">
<div class="ch mono">Star &amp; fork</div>
<div class="cv mono">github.com/nexu-io/open-design</div>
</div>
<div class="cta-link">
<div class="ch mono">Community</div>
<div class="cv mono">discord.gg/mHAjSMV6gz</div>
</div>
<div class="cta-link">
<div class="ch mono">Updates</div>
<div class="cv mono">x.com/nexudotio</div>
</div>
</div>
</div>
<footer class="meta meta-bottom mono">
<span>1920 × 1080 · CANVAS · KBD ← →</span>
<span class="link">github.com/nexu-io/open-design</span>
<span>00 : 24 : 30</span>
</footer>
</section>
</div>
<script>
// keyboard left/right + hash sync (#1 .. #10)
(function(){
var slides = Array.prototype.slice.call(document.querySelectorAll('.slide'));
var cur = 0;
function show(i){
i = Math.max(0, Math.min(slides.length - 1, i));
if (i === cur && slides[cur].classList.contains('active')) return;
slides[cur].classList.remove('active');
cur = i;
slides[cur].classList.add('active');
var h = '#' + (cur + 1);
if (location.hash !== h) history.replaceState(null, '', h);
}
function fromHash(){
var n = parseInt(location.hash.slice(1), 10);
if (n >= 1 && n <= slides.length) show(n - 1);
}
addEventListener('keydown', function(e){
if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') show(cur + 1);
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') show(cur - 1);
});
addEventListener('hashchange', fromHash);
fromHash();
})();
</script>
</body>
</html>