Teknium
56cc2bd814
Optional skill: scroll-as-timeline landing pages on a deterministic CSS/JS engine, with interview → page grammar → signature move workflow and screenshot-based scroll verification. Engine and scripts vendored verbatim; asset generation re-anchored on image_generate with the upstream kie.ai flow kept as an optional path.
139 lines
6.3 KiB
HTML
139 lines
6.3 KiB
HTML
<!doctype html>
|
|
<!--
|
|
scrollcraft skeleton.
|
|
|
|
Start here, then delete what you do not need and write your own markup for
|
|
what you keep. This is a starting point, not a layout: a page that keeps this
|
|
structure verbatim will look like every other page that kept it verbatim,
|
|
which is the failure this skill exists to avoid.
|
|
|
|
The act order below is one score (scrub > pin > flow > scrub > pan > pin).
|
|
Score YOUR journey per SKILL.md Step 2 and rearrange accordingly. The rules
|
|
that do carry over: four or more device families, never the same one twice in
|
|
a row, at most two scrub acts, and the closing act is the last element on the
|
|
page.
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>BRAND · the one-line promise</title>
|
|
<meta name="description" content="One sentence a search result would show.">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='7' fill='%230A0807'/></svg>">
|
|
<link rel="stylesheet" href="scrollcraft.css">
|
|
<style>
|
|
/* The whole rebrand: six colours and two faces. Everything else in
|
|
scrollcraft.css derives from these. */
|
|
:root {
|
|
--sc-canvas: #08090b;
|
|
--sc-surface: #101217;
|
|
--sc-ink: #f4f2ef;
|
|
--sc-ink-soft: #9a9ba1;
|
|
--sc-accent: #d8ff3e;
|
|
--sc-accent-ink: #08090b;
|
|
--sc-font-display: "Archivo", system-ui, sans-serif;
|
|
--sc-font-text: "Geist", system-ui, sans-serif;
|
|
}
|
|
/* Your page's own classes go here. Do not restyle .sc-stage, .sc-copy or any
|
|
[data-sc-*] selector: those are the mechanism. */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<span data-sc-progress></span>
|
|
<div class="sc-grain" aria-hidden="true"></div>
|
|
|
|
<header class="site-bar"><!-- mark + ONE cta label, used everywhere --></header>
|
|
|
|
<main id="top">
|
|
|
|
<!-- 1 · RECOGNITION: scrub -->
|
|
<section data-sc-act="scrub" data-sc-span="2.6" data-sc-dwell="0.34" data-sc-drift="#08090b">
|
|
<div data-sc-stage>
|
|
<img class="sc-stage__poster" src="assets/01-poster.webp" alt="">
|
|
<video data-sc-scrub data-sc-src="assets/01.mp4"
|
|
data-sc-src-mobile="assets/01-m.mp4" muted playsinline></video>
|
|
<div class="sc-scrim sc-scrim--lead" aria-hidden="true"></div>
|
|
<!-- third value 0 = greet: on screen the instant the page lands -->
|
|
<div class="sc-copy sc-copy--lead" data-sc-cue="0 0.78 0">
|
|
<h1 class="sc-display sc-display--xl" data-sc-kinetic="lines">The promise, in under nine words.</h1>
|
|
<p class="sc-body">One plain sentence. Twenty words at the outside.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2 · TENSION: pin. Overlap the windows ~15% so there is never a gap. -->
|
|
<section data-sc-act="pin" data-sc-span="3.4" data-sc-drift="#101217">
|
|
<div data-sc-stage class="argument">
|
|
<p data-sc-cue="0 0.32 0">The situation they recognise.</p>
|
|
<p data-sc-cue="0.26 0.60">What it actually costs them.</p>
|
|
<p data-sc-cue="0.54 0.88">Why it keeps happening.</p>
|
|
<p data-sc-cue="0.82">The line that turns it.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3 · TURN: flow + reveal -->
|
|
<section class="sc-section" data-sc-act="flow" data-sc-drift="#0b0c0f">
|
|
<div class="sc-wrap split">
|
|
<div class="sc-stack" data-sc-in data-sc-stagger="70">
|
|
<h2 class="sc-display sc-display--lg">What changes.</h2>
|
|
<p class="sc-body">Two short paragraphs. This is the only act that reads like a document, which is exactly why it belongs here.</p>
|
|
</div>
|
|
<figure data-sc-reveal="left" data-sc-reveal-at="0.18 0.62">
|
|
<img src="assets/03.webp" width="1920" height="1080" alt="Describe the image, not the brand.">
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4 · SUBSTANCE: scrub. The second and LAST clip. -->
|
|
<section data-sc-act="scrub" data-sc-span="2.2" data-sc-dwell="0.28" data-sc-drift="#0e0f13">
|
|
<div data-sc-stage>
|
|
<img class="sc-stage__poster" src="assets/04-poster.webp" alt="">
|
|
<video data-sc-scrub data-sc-src="assets/04.mp4"
|
|
data-sc-src-mobile="assets/04-m.mp4" muted playsinline></video>
|
|
<div class="sc-scrim sc-scrim--trail" aria-hidden="true"></div>
|
|
<div class="sc-copy sc-copy--trail" data-sc-cue="0.14 0.86">
|
|
<h2 class="sc-display sc-display--lg" data-sc-kinetic="lines">The proof, in one line.</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5 · RANGE: pan. Span ≈ one viewport-height per item, plus one. -->
|
|
<section data-sc-act="pan" data-sc-span="3.2" data-sc-drift="#0a0b0d">
|
|
<div data-sc-stage>
|
|
<div class="rail" data-sc-pan="0.06">
|
|
<div class="rail__lead sc-stack">
|
|
<h2 class="sc-display sc-display--md">The set.</h2>
|
|
<p class="sc-body">One line on how to choose.</p>
|
|
</div>
|
|
<article class="item"><div data-sc-tilt="6"><img src="assets/item-1.webp" alt=""></div><h3>One</h3><p>…</p></article>
|
|
<article class="item"><div data-sc-tilt="6"><img src="assets/item-2.webp" alt=""></div><h3>Two</h3><p>…</p></article>
|
|
<article class="item"><div data-sc-tilt="6"><img src="assets/item-3.webp" alt=""></div><h3>Three</h3><p>…</p></article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6 · COMMITMENT: pin + pointer. LAST element on the page, short span,
|
|
one-value cues so nothing fades out before the page ends, footer inside
|
|
the stage so there is no dead tail after the CTA. -->
|
|
<section id="join" data-sc-act="pin" data-sc-span="1.15" data-sc-drift="#08090b">
|
|
<div data-sc-stage class="close" data-sc-spotlight>
|
|
<div class="close__inner">
|
|
<h2 class="sc-display sc-display--lg" data-sc-cue="0.06" data-sc-kinetic="lines">The last thing you want them to feel.</h2>
|
|
<!-- magnet and cue both write transform, and the magnet writes it every
|
|
frame. data-sc-rise="0" makes the cue's rise a no-op so the
|
|
entrance is not silently lost to the race. Opens early so a
|
|
keyboard user cannot land on it at opacity 0. -->
|
|
<a class="cta" href="#" data-sc-magnet="0.26" data-sc-cue="0.06" data-sc-rise="0">Same label as the nav</a>
|
|
</div>
|
|
<footer class="foot"><!-- mark + the small print --></footer>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<script src="scrollcraft.js"></script>
|
|
<script>ScrollCraft.mount(document.body);</script>
|
|
</body>
|
|
</html>
|