references/template.html
references/template.htmlBrowse 22 files
1,916 tokens
6,418 bytes
Token encoding: o200k_base
Snapshot 24fd22b
← Back to SKILL.md
1<!doctype html>2<!--3 scrollcraft skeleton.4 5 Start here, then delete what you do not need and write your own markup for6 what you keep. This is a starting point, not a layout: a page that keeps this7 structure verbatim will look like every other page that kept it verbatim,8 which is the failure this skill exists to avoid.9 10 The act order below is one score (scrub > pin > flow > scrub > pan > pin).11 Score YOUR journey per SKILL.md Step 2 and rearrange accordingly. The rules12 that do carry over: four or more device families, never the same one twice in13 a row, at most two scrub acts, and the closing act is the last element on the14 page.15-->16<html lang="en">17<head>18<meta charset="utf-8">19<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">20<title>BRAND · the one-line promise</title>21<meta name="description" content="One sentence a search result would show.">22<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>">23<link rel="stylesheet" href="scrollcraft.css">24<style>25 /* The whole rebrand: six colours and two faces. Everything else in26 scrollcraft.css derives from these. */27 :root {28 --sc-canvas: #08090b;29 --sc-surface: #101217;30 --sc-ink: #f4f2ef;31 --sc-ink-soft: #9a9ba1;32 --sc-accent: #d8ff3e;33 --sc-accent-ink: #08090b;34 --sc-font-display: "Archivo", system-ui, sans-serif;35 --sc-font-text: "Geist", system-ui, sans-serif;36 }37 /* Your page's own classes go here. Do not restyle .sc-stage, .sc-copy or any38 [data-sc-*] selector: those are the mechanism. */39</style>40</head>41<body>42 43<span data-sc-progress></span>44<div class="sc-grain" aria-hidden="true"></div>45 46<header class="site-bar"><!-- mark + ONE cta label, used everywhere --></header>47 48<main id="top">49 50 <!-- 1 · RECOGNITION: scrub -->51 <section data-sc-act="scrub" data-sc-span="2.6" data-sc-dwell="0.34" data-sc-drift="#08090b">52 <div data-sc-stage>53 <img class="sc-stage__poster" src="assets/01-poster.webp" alt="">54 <video data-sc-scrub data-sc-src="assets/01.mp4"55 data-sc-src-mobile="assets/01-m.mp4" muted playsinline></video>56 <div class="sc-scrim sc-scrim--lead" aria-hidden="true"></div>57 <!-- third value 0 = greet: on screen the instant the page lands -->58 <div class="sc-copy sc-copy--lead" data-sc-cue="0 0.78 0">59 <h1 class="sc-display sc-display--xl" data-sc-kinetic="lines">The promise, in under nine words.</h1>60 <p class="sc-body">One plain sentence. Twenty words at the outside.</p>61 </div>62 </div>63 </section>64 65 <!-- 2 · TENSION: pin. Overlap the windows ~15% so there is never a gap. -->66 <section data-sc-act="pin" data-sc-span="3.4" data-sc-drift="#101217">67 <div data-sc-stage class="argument">68 <p data-sc-cue="0 0.32 0">The situation they recognise.</p>69 <p data-sc-cue="0.26 0.60">What it actually costs them.</p>70 <p data-sc-cue="0.54 0.88">Why it keeps happening.</p>71 <p data-sc-cue="0.82">The line that turns it.</p>72 </div>73 </section>74 75 <!-- 3 · TURN: flow + reveal -->76 <section class="sc-section" data-sc-act="flow" data-sc-drift="#0b0c0f">77 <div class="sc-wrap split">78 <div class="sc-stack" data-sc-in data-sc-stagger="70">79 <h2 class="sc-display sc-display--lg">What changes.</h2>80 <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>81 </div>82 <figure data-sc-reveal="left" data-sc-reveal-at="0.18 0.62">83 <img src="assets/03.webp" width="1920" height="1080" alt="Describe the image, not the brand.">84 </figure>85 </div>86 </section>87 88 <!-- 4 · SUBSTANCE: scrub. The second and LAST clip. -->89 <section data-sc-act="scrub" data-sc-span="2.2" data-sc-dwell="0.28" data-sc-drift="#0e0f13">90 <div data-sc-stage>91 <img class="sc-stage__poster" src="assets/04-poster.webp" alt="">92 <video data-sc-scrub data-sc-src="assets/04.mp4"93 data-sc-src-mobile="assets/04-m.mp4" muted playsinline></video>94 <div class="sc-scrim sc-scrim--trail" aria-hidden="true"></div>95 <div class="sc-copy sc-copy--trail" data-sc-cue="0.14 0.86">96 <h2 class="sc-display sc-display--lg" data-sc-kinetic="lines">The proof, in one line.</h2>97 </div>98 </div>99 </section>100 101 <!-- 5 · RANGE: pan. Span ≈ one viewport-height per item, plus one. -->102 <section data-sc-act="pan" data-sc-span="3.2" data-sc-drift="#0a0b0d">103 <div data-sc-stage>104 <div class="rail" data-sc-pan="0.06">105 <div class="rail__lead sc-stack">106 <h2 class="sc-display sc-display--md">The set.</h2>107 <p class="sc-body">One line on how to choose.</p>108 </div>109 <article class="item"><div data-sc-tilt="6"><img src="assets/item-1.webp" alt=""></div><h3>One</h3><p>…</p></article>110 <article class="item"><div data-sc-tilt="6"><img src="assets/item-2.webp" alt=""></div><h3>Two</h3><p>…</p></article>111 <article class="item"><div data-sc-tilt="6"><img src="assets/item-3.webp" alt=""></div><h3>Three</h3><p>…</p></article>112 </div>113 </div>114 </section>115 116 <!-- 6 · COMMITMENT: pin + pointer. LAST element on the page, short span,117 one-value cues so nothing fades out before the page ends, footer inside118 the stage so there is no dead tail after the CTA. -->119 <section id="join" data-sc-act="pin" data-sc-span="1.15" data-sc-drift="#08090b">120 <div data-sc-stage class="close" data-sc-spotlight>121 <div class="close__inner">122 <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>123 <!-- magnet and cue both write transform, and the magnet writes it every124 frame. data-sc-rise="0" makes the cue's rise a no-op so the125 entrance is not silently lost to the race. Opens early so a126 keyboard user cannot land on it at opacity 0. -->127 <a class="cta" href="#" data-sc-magnet="0.26" data-sc-cue="0.06" data-sc-rise="0">Same label as the nav</a>128 </div>129 <footer class="foot"><!-- mark + the small print --></footer>130 </div>131 </section>132 133</main>134 135<script src="scrollcraft.js"></script>136<script>ScrollCraft.mount(document.body);</script>137</body>138</html>139