1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png"><link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> 7<link rel="apple-touch-icon" href="/apple-touch-icon.png"> 8<link rel="stylesheet" href="/nav.css"> 9<title>WriteHow: AI How-To Guide Maker for Step-by-Step Docs</title> 10<meta name="description" content="Turn a screen recording into step-by-step how-to guides with AI: auto screenshots, annotations, 50+ language translation, and native publishing to your help center, so customers self-serve and you cut support tickets."> 11<meta name="keywords" content="how-to guide maker, step-by-step guide creator, AI documentation tool, help center software, knowledge base articles, SOP software, screenshot documentation, support article generator"> 12<meta property="og:title" content="WriteHow: AI How-To Guide Maker"> 13<meta property="og:description" content="Turn a screen recording into step-by-step how-to guides with auto screenshots, annotations, and AI translation. Publish to every help center."> 14<meta property="og:type" content="website"> 15<meta property="og:url" content="https://www.writehow.com/"> 16<meta property="og:image" content="https://www.writehow.com/og-image.jpg"> 17<meta property="og:image:width" content="1200"> 18<meta property="og:image:height" content="1200"> 19<meta property="og:site_name" content="WriteHow"> 20<meta name="twitter:card" content="summary_large_image"> 21<meta name="twitter:title" content="WriteHow: AI How-To Guide Maker"> 22<meta name="twitter:description" content="Turn a screen recording into step-by-step how-to guides with auto screenshots, annotations, and AI translation."> 23<meta name="twitter:image" content="https://www.writehow.com/og-image.jpg"> 24<link rel="canonical" href="https://www.writehow.com/"> 25<style> 26 :root{ 27 --indigo:#6366f1; --violet:#8b5cf6; --pink:#ec4899; --cyan:#06b6d4; 28 --ink:#0f1021; --ink-2:#3a3b52; --muted:#6b6c84; 29 --line:#ece9ff; --bg:#ffffff; --bg-soft:#faf9ff; 30 --grad:linear-gradient(120deg,#6366f1 0%,#8b5cf6 45%,#ec4899 100%); 31 --grad-soft:linear-gradient(120deg,#eef0ff,#f7edff 50%,#ffeef7); 32 --radius:22px; --shadow:0 30px 80px -30px rgba(99,102,241,.45); 33 --shadow-sm:0 12px 40px -16px rgba(15,16,33,.18); 34 --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; 35 } 36 *{margin:0;padding:0;box-sizing:border-box} 37 html{scroll-behavior:smooth} 38 body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} 39 a{text-decoration:none;color:inherit} 40 .wrap{max-width:1180px;margin:0 auto;padding:0 24px} 41 h1,h2,h3{line-height:1.08;letter-spacing:-.02em;font-weight:800} 42 .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} 43 /* ===== hero headline animation: staggered line reveal + flowing gradient + one-time shimmer ===== */ 44 .hero h1{position:relative;overflow:hidden} 45 .hero h1 .hl{display:block;opacity:0;transform:translateY(26px);filter:blur(8px);animation:heroLineIn .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.15s + var(--i,0) * .14s)} 46 @keyframes heroLineIn{to{opacity:1;transform:none;filter:blur(0)}} 47 .hero h1 .grad-flow{background:linear-gradient(100deg,#6366f1,#8b5cf6 28%,#ec4899 52%,#8b5cf6 76%,#6366f1);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:heroLineIn .8s cubic-bezier(.2,.8,.2,1) .29s both, heroGradFlow 7s linear infinite} 48 @keyframes heroGradFlow{to{background-position:-220% 0}} 49 .hero h1::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-30%;width:28%;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-12deg);opacity:0;animation:heroShine 1s ease-in-out 1.05s 1;mix-blend-mode:overlay} 50 @keyframes heroShine{0%{left:-30%;opacity:0}
5012%{opacity:1}100%{left:118%;opacity:0}} 51 .hero .hero-kicker{animation:heroFadeUp .7s cubic-bezier(.2,.8,.2,1) .04s both} 52 .hero .sub{animation:heroFadeUp .75s cubic-bezier(.2,.8,.2,1) .52s both} 53 .hero .hero-cta{animation:heroFadeUp .75s cubic-bezier(.2,.8,.2,1) .64s both} 54 .hero .ext-link{animation:heroFadeUp .75s cubic-bezier(.2,.8,.2,1) .74s both} 55 .hero .trust{animation:heroFadeUp .75s cubic-bezier(.2,.8,.2,1) .82s both} 56 @keyframes heroFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} 57 @media (prefers-reduced-motion: reduce){ 58 .hero h1 .hl,.hero h1 .grad-flow,.hero .hero-kicker,.hero .sub,.hero .hero-cta,.hero .ext-link,.hero .trust{animation:none!important;opacity:1!important;transform:none!important;filter:none!important} 59 .hero h1::after{display:none} 60 } 61 .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);background:#f3f0ff;padding:7px 14px;border-radius:999px;border:1px solid #e7e1ff} 62 63 /* buttons */ 64 .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:14px;cursor:pointer;border:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,filter .25s;white-space:nowrap} 65 .btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px -8px rgba(139,92,246,.6)} 66 .btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 44px -10px rgba(139,92,246,.7);filter:saturate(1.15)} 67 .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)} 68 .btn-ghost:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#d9d2ff} 69 .btn svg{width:18px;height:18px} 70 71 /* nav */ 72 nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(14px);background:rgba(255,255,255,.72);border-bottom:1px solid rgba(236,233,255,.8)} 73 .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px} 74 .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.03em} 75 .logo .mark{width:34px;height:34px} 76 .wordmark .wm-ink{color:var(--ink)}.wordmark .wm-violet{color:#7c5cf0} 77 .nav-links{display:flex;gap:28px;font-weight:600;font-size:15px;color:var(--ink-2)} 78 .nav-links a{transition:color .2s}.nav-links a:hover{color:var(--violet)} 79 .nav-cta{display:flex;align-items:center;gap:18px} 80 .nav-cta .login{font-weight:700;font-size:15px} 81 @media(max-width:880px){.nav-links{display:none}} 82 83 /* hero */ 84 .hero{position:relative;padding:90px 0 80px;overflow:hidden} 85 .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:0;animation:float 14s ease-in-out infinite} 86 .blob.b1{width:520px;height:520px;background:radial-gradient(circle,#a78bfa,#6366f1);top:-180px;left:-120px} 87 .blob.b2{width:460px;height:460px;background:radial-gradient(circle,#f9a8d4,#ec4899);top:-60px;right:-140px;animation-delay:-5s} 88 .blob.b3{width:380px;height:380px;background:radial-gradient(circle,#67e8f9,#06b6d4);bottom:-160px;left:40%;opacity:.35;animation-delay:-9s} 89 @keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.06)}66%{transform:translate(-20px,20px) scale(.96)}} 90 .hero .wrap{max-width:1240px} 91 .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:0.92fr 1.08fr;gap:40px;align-items:center} 92 .hero-video{margin-right:-36px} 93 .hero h1{font-size:60px;margin:20px 0 18px} 94 .hero p.sub{font-size:20px;color:var(--ink-2);max-width:540px;margin-bottom:30px} 95 .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} 96 .trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font-size:13.5px;color:var(--muted);font-weight:600} 97 .trust span{display:inline-flex;align-items:center;gap:7px} 98 .trust svg{width:16px;height:16px;color:#22c55e} 99 @media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:36px}.hero h1{font-size:44px}} 100 101 /* hero product card */ 102 .product-card{position:relative;background:#fff;border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden} 103 .pc-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:linear-gradient(180deg,#fbfaff,#f4f1ff);border-bottom:1px solid var(--line)} 104 .dot{width:11px;height:11px;border-radius:50%} 105 .pc-url{margin-left:12px;font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:7px;padding:4px 12px;font-weight:600} 106 .rec-badge{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:#e11d48;background:#fff0f4;border:1px solid #ffd6e3;padding:5px 11px;border-radius:999px} 107 .rec-badge .pulse{width:9px;height:9px;border-radius:50%;background:#e11d48;animation:pulse 1.4s infinite} 108 @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(225,29,72,.6)}70%{box-shadow:0 0 0 9px rgba(225,29,72,0)}100%{box-shadow:0 0 0 0 rgba(225,29,72,0)}} 109 .float-badge{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);border:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;gap:9px;font-weight:700;font-size:13px;z-index:5;animation:floaty 5s ease-in-out infinite} 110 @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} 111 .hero-video{position:relative;width:100%} 112 .hero-video iframe{width:100%;aspect-ratio:1060/680;border:none;display:block;background:transparent} 113 @media(max-width:980px){.hero-video{margin-right:0}.hero-video iframe{aspect-ratio:1060/740}} 114 115 /* sections */ 116 section.block{padding:90px 0;position:relative} 117 .section-head{text-align:center;max-width:720px;margin:0 auto 56px} 118 .section-head h2{font-size:42px;margin:16px 0 14px} 119 .section-head p{font-size:18px;color:var(--ink-2)} 120 @media(max-width:720px){.section-head h2{font-size:32px}} 121 122 /* logo strip */ 123 .strip{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:38px 0} 124 .strip p{text-align:center;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:22px} 125 .logos{display:flex;justify-content:center;gap:46px;flex-wrap:wrap;align-items:center;opacity:.7} 126 .logos .lg{font-weight:800;font-size:19px;color:#8a8aa3;letter-spacing:-.02em;display:flex;align-items:center;gap:8px} 127 128 /* problem cards */ 129 .prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} 130 .prob-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:transform .3s,box-shadow .3s} 131 .prob-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)} 132 .prob-ic{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:var(--grad-soft)} 133 .prob-card h3{font-size:19px;margin-bottom:8px} 134 .prob-card p{color:var(--muted);font-size:15px} 135 @media(max-width:820px){.prob-grid{grid-template-columns:1fr}} 136 137 /* how it works */ 138 .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative} 139 .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s} 140 .step:hover{transform:translateY(-6px);box-shadow:var(--shadow)} 141 .step .num{font-size:14px;font-weight:800;color:#fff;background:var(--grad);width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:18px} 142 .step h3{font-size:20px;margin-bottom:8px} 143 .step p{color:var(--muted);font-size:15px} 144 .step-art{margin-top:20px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg-soft)} 145 @media(max-width:820px){.steps{grid-template-columns:1fr}} 146 147 /* feature blocks */ 148 .feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:70px 0} 149 .feature.rev .ftext{order:2} 150 .ftext h2{font-size:38px;margin:16px 0 16px} 151 .ftext p{font-size:17px;color:var(--ink-2);margin-bottom:22px} 152 .flist{list-style:none;display:flex;flex-direction:column;gap:13px} 153 .flist li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--ink-2);font-size:15.5px} 154 .flist .chk{flex:none;width:24px;height:24px;border-radius:8px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-top:1px} 155 .flist .chk svg{width:14px;
155height:14px;color:#fff} 156 .fart{position:relative;border-radius:24px;padding:34px;background:var(--grad-soft);border:1px solid var(--line);box-shadow:var(--shadow-sm);min-height:340px;display:flex;align-items:center;justify-content:center} 157 @media(max-width:880px){.feature{grid-template-columns:1fr;gap:36px}.feature.rev .ftext{order:0}.ftext h2{font-size:30px}} 158 159 /* stat callouts */ 160 .stat-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px} 161 .stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow-sm)} 162 .stat b{display:block;font-size:26px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} 163 .stat span{font-size:13px;color:var(--muted);font-weight:600} 164 165 /* integrations */ 166 .integ{background:var(--bg-soft)} 167 .integ-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:940px;margin:0 auto} 168 .integ-card{width:200px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 18px;text-align:center;transition:transform .3s,box-shadow .3s} 169 .integ-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} 170 .integ-card .ic{width:54px;height:54px;margin:0 auto 12px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px;animation:ibob 3.4s ease-in-out infinite} 171 @keyframes ibob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} 172 .integ-card:nth-child(2) .ic{animation-delay:.35s}.integ-card:nth-child(3) .ic{animation-delay:.7s}.integ-card:nth-child(4) .ic{animation-delay:1.05s}.integ-card:nth-child(5) .ic{animation-delay:1.4s}.integ-card:nth-child(6) .ic{animation-delay:1.75s}.integ-card:nth-child(7) .ic{animation-delay:2.1s} 173 .integ-card p{font-weight:700;font-size:15px} 174 @media(max-width:560px){.integ-card{width:140px}} 175 176 /* use cases */ 177 .uc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px} 178 .uc-card{position:relative;border-radius:var(--radius);padding:32px;color:#fff;overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .35s} 179 .uc-card:hover{transform:translateY(-8px)} 180 .uc-card.c1{background:linear-gradient(150deg,#6366f1,#8b5cf6)} 181 .uc-card.c2{background:linear-gradient(150deg,#8b5cf6,#ec4899)} 182 .uc-card.c3{background:linear-gradient(150deg,#0ea5e9,#6366f1)}.uc-card.c4{background:linear-gradient(150deg,#7c3aed,#0ea5e9)} 183 .uc-card .uc-ic{position:absolute;top:26px;left:26px;opacity:.9} 184 .uc-card h3{font-size:22px;margin-bottom:10px} 185 .uc-card p{font-size:15px;opacity:.92;font-weight:500} 186 @media(max-width:820px){.uc-grid{grid-template-columns:1fr}} 187 188 /* comparison */ 189 .cmp-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-sm)} 190 table.cmp{width:100%;border-collapse:collapse;min-width:640px;background:#fff} 191 table.cmp th,table.cmp td{padding:18px 20px;text-align:left;font-size:15px;border-bottom:1px solid var(--line)} 192 table.cmp thead th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} 193 table.cmp thead th.us{background:var(--grad);color:#fff;border-radius:12px 12px 0 0;text-align:center;letter-spacing:0;font-size:15px;text-transform:none} 194 table.cmp td.us{text-align:center;font-weight:800;color:var(--violet);background:#faf7ff} 195 table.cmp td.mid{text-align:center;color:var(--muted)} 196 table.cmp tr:last-child td{border-bottom:none} 197 table.cmp td:first-child{font-weight:700} 198 199 /* testimonials */ 200 .tst-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} 201 .tst{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm);position:relative} 202 .tst .q{font-size:46px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800} 203 .tst p{font-size:17px;font-weight:600;color:var(--ink);margin:6px 0 18px} 204 .tst .who{display:flex;align-items:center;gap:12px} 205 .tst .av{width:42px;height:42px;border-radius:50%;background:var(--grad)} 206 .tst .who b{font-size:14px}.tst .who span{font-size:13px;color:var(--muted);display:block} 207 @media(max-width:820px){.tst-grid{grid-template-columns:1fr}} 208 /* twitter-style testimonial wall */ 209 .tw-wall{position:relative;display:flex;flex-direction:column;gap:22px;padding:8px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} 210 .tw-row{display:flex;gap:22px;width:max-content;animation:marquee 56s linear infinite} 211 .tw-row.rev{animation-direction:reverse} 212 .tw-wall:hover .tw-row{animation-play-state:paused} 213 @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} 214 .tw{width:380px;flex:none;background:#fff;border:1px solid #eef0f4;border-radius:18px;padding:22px 24px;box-shadow:0 10px 30px -16px rgba(15,16,33,.12);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s} 215 .tw:hover{transform:translateY(-6px);box-shadow:0 24px 50px -20px rgba(99,102,241,.4);border-color:#e3def9} 216 .tw-top{display:flex;align-items:center;gap:12px;margin-bottom:14px} 217 .tw-av{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--grad)} 218 .tw-id{display:flex;flex-direction:column;line-height:1.25} 219 .tw-name{display:flex;align-items:center;gap:5px;font-weight:800;font-size:15px;color:var(--ink)} 220 .tw-name svg{width:16px;height:16px} 221 .tw-handle{font-size:14px;color:#8a8ba0} 222 .tw-x{margin-left:auto;width:19px;height:19px;color:#0f1021;opacity:.85} 223 .tw-body{font-size:15.5px;line-height:1.55;color:#1c1d2e;margin-bottom:16px} 224 .tw-body b{font-weight:800} 225 .tw-body .mention{color:#6d5cf0;font-weight:600} 226 .tw-foot{display:flex;align-items:center;gap:22px;font-size:13px;color:#8a8ba0;font-weight:600}
227 .tw-foot span{display:inline-flex;align-items:center;gap:6px} 228 .tw-foot svg{width:16px;height:16px} 229 .tw-foot .lk{color:#f0508a} 230 .tw-time{margin-left:auto;font-weight:500} 231 @media(max-width:560px){.tw{width:300px}} 232 233 /* final cta */ 234 .cta-final{position:relative;border-radius:30px;padding:70px 40px;text-align:center;overflow:hidden;color:#fff;background:var(--grad)} 235 .cta-final h2{font-size:46px;margin-bottom:14px;color:#fff} 236 .cta-final p{font-size:19px;opacity:.95;margin-bottom:28px} 237 .cta-final .btn-primary{background:#fff;color:var(--violet)} 238 .cta-final .btn-primary:hover{filter:none;background:#fff} 239 .cta-final .trust2{margin-top:20px;font-size:14px;opacity:.9;font-weight:600} 240 .cta-blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.4} 241 @media(max-width:720px){.cta-final h2{font-size:32px}} 242 243 /* footer */ 244 footer{background:var(--ink);color:#c9cae0;padding:64px 0 30px} 245 .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:30px} 246 footer h4{color:#fff;font-size:14px;margin-bottom:14px;letter-spacing:.02em} 247 footer ul{list-style:none;display:flex;flex-direction:column;gap:9px} 248 footer ul a{font-size:14px;color:#9a9bb8;transition:color .2s}footer ul a:hover{color:#fff} 249 .foot-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#fff;margin-bottom:14px} 250 .foot-bottom{border-top:1px solid #26273f;margin-top:44px;padding-top:24px;font-size:13px;color:#7a7b96;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} 251 @media(max-width:880px){ 252 .foot-grid{grid-template-columns:1fr 1fr;gap:16px 24px} 253 footer h4{margin:6px 0 2px} 254 footer ul{gap:0} 255 footer ul a{display:block;padding:11px 0;font-size:15px} 256 } 257 258 /* reveal */ 259 .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)} 260 .reveal.in{opacity:1;transform:none} 261 262 /* animated dashes */ 263 .flow path{stroke-dasharray:6 8;animation:dash 1.4s linear infinite} 264 @keyframes dash{to{stroke-dashoffset:-28}} 265 .rise{animation:rise 2.6s ease-in-out infinite} 266 @keyframes rise{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} 267 268 /* ===== POWERED BY AI (scroll-stack) ===== */ 269 #powered-by-ai{background:var(--ai-stage-bg,#f6f3ff);transition:background .6s ease} 270 #powered-by-ai .ai-head{text-align:center;max-width:720px;margin:0 auto;padding:74px 24px 26px} 271 #powered-by-ai .ai-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);background:#fff;padding:7px 14px;border-radius:999px;border:1px solid #e7e1ff} 272 #powered-by-ai .ai-head h2{font-size:clamp(30px,4.4vw,46px);margin:18px 0 0;line-height:1.08;letter-spacing:-.02em;font-weight:800} 273 #powered-by-ai .ai-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} 274 #powered-by-ai .ai-scroll{--n:4;height:calc(var(--n) * 100vh);position:relative} 275 #powered-by-ai .ai-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:14px 24px} 276 #powered-by-ai .ai-cards{position:relative;width:100%;max-width:1080px;height:min(620px,76vh)} 277 #powered-by-ai .card{--acc:#8b5cf6;--tint1:#f3f0ff;--tint2:#fbf9ff;position:absolute;inset:0;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:linear-gradient(150deg,var(--tint1),var(--tint2));border:1px solid rgba(15,16,33,.06);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s ease,box-shadow .6s} 278 #powered-by-ai .card.violet{--acc:#8b5cf6;--tint1:#f3f0ff;--tint2:#fbf9ff} 279 #powered-by-ai .card.cyan{--acc:#0891b2;--tint1:#ecfeff;--tint2:#f4feff} 280 #powered-by-ai .card.indigo{--acc:#6366f1;--tint1:#eef0ff;--tint2:#f6f7ff} 281 #powered-by-ai .card.pink{--acc:#ec4899;--tint1:#fdf2f8;--tint2:#fff6fb} 282 #powered-by-ai .card[data-state="future"]{transform:translateY(106%);opacity:0;box-shadow:none} 283 #powered-by-ai .card[data-state="active"]{transform:translateY(0);opacity:1;box-shadow:0 34px 80px -34px rgba(15,16,33,.4)} 284 #powered-by-ai .card[data-state="past"]{transform:translateY(calc(var(--depth,0) * -16px)) scale(calc(1 - var(--depth,0) * .035));opacity:1;box-shadow:0 18px 40px -28px rgba(15,16,33,.3)} 285 #powered-by-ai .tabs{flex:0 0 auto;display:flex;gap:4px;padding:14px 16px 0} 286 #powered-by-ai .tab{font-size:14px;font-weight:700;padding:12px 22px;border-radius:14px 14px 0 0;cursor:pointer;background:transparent;
286transition:background .25s,opacity .25s;white-space:nowrap} 287 #powered-by-ai .tab[data-c="violet"]{color:#8b5cf6}#powered-by-ai .tab[data-c="cyan"]{color:#0891b2}#powered-by-ai .tab[data-c="indigo"]{color:#6366f1}#powered-by-ai .tab[data-c="pink"]{color:#ec4899} 288 #powered-by-ai .tab.done{opacity:.6} 289 #powered-by-ai .tab.done:hover{opacity:1} 290 #powered-by-ai .tab.active{background:#fff;box-shadow:0 -3px 0 currentColor inset} 291 #powered-by-ai .card-body{flex:1 1 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;background:#fff;margin:0 7px 7px;border-radius:20px;padding:30px 40px;overflow:hidden} 292 #powered-by-ai .c-left h3{font-size:clamp(25px,3vw,38px);color:var(--ink);line-height:1.08;letter-spacing:-.02em;font-weight:800} 293 #powered-by-ai .c-left h3 .hl{color:var(--acc)} 294 #powered-by-ai .c-left p.sub{margin:15px 0 20px;color:var(--ink-2);font-size:16px;max-width:430px} 295 #powered-by-ai .pills{display:flex;flex-wrap:wrap;gap:9px} 296 #powered-by-ai .pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,#fff);border:1px solid color-mix(in srgb,var(--acc) 22%,#fff);padding:7px 12px;border-radius:999px} 297 #powered-by-ai .mock{position:relative;background:linear-gradient(150deg,var(--tint1),#fff);border:1px solid color-mix(in srgb,var(--acc) 18%,#fff);border-radius:18px;padding:18px;box-shadow:0 20px 50px -28px rgba(15,16,33,.3)} 298 #powered-by-ai .mock .badge{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--acc);background:#fff;border:1px solid color-mix(in srgb,var(--acc) 25%,#fff);padding:5px 10px;border-radius:999px;z-index:3} 299 #powered-by-ai .rec{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#ef4444;margin-bottom:7px} 300 #powered-by-ai .rec i{width:8px;height:8px;border-radius:50%;background:#ef4444;display:inline-block} 301 #powered-by-ai .wave{display:flex;align-items:flex-end;gap:4px;height:36px;margin-bottom:12px} 302 #powered-by-ai .wave span{width:5px;height:100%;border-radius:3px;background:var(--acc);opacity:.85;transform-origin:bottom;transform:scaleY(.5)} 303 #powered-by-ai .transcript{font-size:12.5px;color:var(--muted);margin-bottom:12px;min-height:16px} 304 #powered-by-ai .transcript s{color:#c0392b;opacity:.6} 305 #powered-by-ai .ai-steps{list-style:none;display:flex;flex-direction:column;gap:7px} 306 #powered-by-ai .ai-steps li{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 12px} 307 #powered-by-ai .ai-steps li b{width:20px;height:20px;border-radius:7px;background:color-mix(in srgb,var(--acc) 14%,#fff);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:11px;flex:0 0 auto} 308 #powered-by-ai .browser{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden} 309 #powered-by-ai .browser .bar{display:flex;align-items:center;gap:6px;padding:8px 11px;border-bottom:1px solid var(--line)} 310 #powered-by-ai .browser .bar i{width:8px;height:8px;border-radius:50%;background:#e2e2ec} 311 #powered-by-ai .browser .bar .url{margin-left:8px;font-size:10.5px;color:var(--muted);background:#f4f4fb;border-radius:6px;padding:4px 10px;flex:1} 312 #powered-by-ai .browser .view{padding:16px} 313 #powered-by-ai .ss-row{height:12px;border-radius:6px;background:#eef0f6;margin-bottom:10px} 314 #powered-by-ai .ss-row.short{width:55%} 315 #powered-by-ai .ss-field{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:12px;color:var(--muted);margin-bottom:10px} 316 #powered-by-ai .ss-field .blur{color:#333;filter:blur(4px)} 317 #powered-by-ai .ss-actionrow{display:flex;align-items:center;gap:13px;margin-top:12px} 318 #powered-by-ai .ss-arrow{color:var(--acc);display:flex;flex:0 0 auto} 319 #powered-by-ai .ss-arrow svg{width:28px;height:28px} 320 #powered-by-ai .ss-btn-wrap{border:2.5px solid var(--acc);border-radius:13px;padding:5px;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 16%,transparent)} 321 #powered-by-ai .ss-btn{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--acc);border-radius:9px;padding:8px 14px} 322 #powered-by-ai .doc{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px 20px} 323 #powered-by-ai .doc .title{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:12px} 324 #powered-by-ai .doc .h{height:10px;width:40%;background:color-mix(in srgb,var(--acc) 22%,#eef0f6);border-radius:5px;margin:13px 0 8px} 325 #powered-by-ai .doc .ln{height:8px;background:#eef0f6;border-radius:5px;margin-bottom:7px} 326 #powered-by-ai .doc .ln.s{width:70%} 327 #powered-by-ai .doc .stepline{display:flex;gap:10px;align-items:center;margin-bottom:8px} 328 #powered-by-ai .doc .stepline b{width:19px;height:19px;border-radius:6px;background:color-mix(in srgb,var(--acc) 14%,#fff);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:11px;flex:0 0 auto} 329 #powered-by-ai .doc .thumb{height:34px;border-radius:8px;background:linear-gradient(120deg,#eef0f6,#f7f8fc);border:1px solid var(--line);margin:5px 0 10px} 330 #powered-by-ai .langbox{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px} 331 #powered-by-ai .lang-current{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:8px} 332 #powered-by-ai .lang-list{display:flex;flex-direction:column;gap:5px} 333 #powered-by-ai .lang-item{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2);padding:7px 11px;border-radius:9px;transition:background .25s,color .25s} 334 #powered-by-ai .lang-item.on{background:color-mix(in srgb,var(--acc) 12%,#fff);color:var(--acc);font-weight:700} 335 #powered-by-ai .scroll-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:opacity .4s;z-index:6} 336 #powered-by-ai .ai-stage:not(.at-start) .scroll-hint{opacity:0;pointer-events:none} 337 #powered-by-ai .scroll-hint .mouse{width:22px;height:34px;border:2px solid var(--muted);border-radius:12px;position:relative} 338 @media (prefers-reduced-motion: no-preference){ 339 @keyframes aiScrollDot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,10px)}100%{opacity:0}
339} 340 #powered-by-ai .scroll-hint .mouse::after{content:"";position:absolute;top:6px;left:50%;width:3px;height:6px;background:var(--muted);border-radius:2px;transform:translateX(-50%);animation:aiScrollDot 1.4s ease infinite} 341 @keyframes aiWave{0%{transform:scaleY(.3)}100%{transform:scaleY(1)}} 342 @keyframes aiStepIn{0%{opacity:0;transform:translateY(10px)}14%{opacity:1;transform:none}88%{opacity:1}100%{opacity:0;transform:translateY(10px)}} 343 @keyframes aiPulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 16%,transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--acc) 4%,transparent)}} 344 @keyframes aiNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}} 345 @keyframes aiBlur{0%,28%{filter:blur(0)}52%,100%{filter:blur(4px)}} 346 @keyframes aiRise{0%{opacity:0;transform:translateY(12px)}16%{opacity:1;transform:none}92%{opacity:1}100%{opacity:0;transform:translateY(12px)}} 347 @keyframes aiBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} 348 @keyframes aiLangHop{0%,6%{background:transparent;color:var(--ink-2)}10%,16%{background:color-mix(in srgb,var(--acc) 14%,#fff);color:var(--acc)}22%,100%{background:transparent;color:var(--ink-2)}} 349 #powered-by-ai .card.is-active .wave span{animation:aiWave .9s ease-in-out infinite alternate} 350 #powered-by-ai .card.is-active .wave span:nth-child(2n){animation-duration:.7s} 351 #powered-by-ai .card.is-active .wave span:nth-child(3n){animation-duration:1.1s} 352 #powered-by-ai .card.is-active .ai-steps li{animation:aiStepIn 4.5s ease infinite} 353 #powered-by-ai .card.is-active .ai-steps li:nth-child(2){animation-delay:.45s} 354 #powered-by-ai .card.is-active .ai-steps li:nth-child(3){animation-delay:.9s} 355 #powered-by-ai .card.is-active .ss-btn-wrap{animation:aiPulse 2s ease-in-out infinite} 356 #powered-by-ai .card.is-active .ss-arrow{animation:aiNudge 2s ease-in-out infinite} 357 #powered-by-ai .card.is-active .ss-field .blur{animation:aiBlur 3.4s ease infinite} 358 #powered-by-ai .card.is-active .ss-field:nth-child(4) .blur{animation-delay:.4s} 359 #powered-by-ai .card.is-active .doc .title,#powered-by-ai .card.is-active .doc .h,#powered-by-ai .card.is-active .doc .ln,#powered-by-ai .card.is-active .doc .stepline,#powered-by-ai .card.is-active .doc .thumb{animation:aiRise 5s ease infinite} 360 #powered-by-ai .card.is-active .doc>*:nth-child(2){animation-delay:.2s} 361 #powered-by-ai .card.is-active .doc>*:nth-child(3){animation-delay:.4s} 362 #powered-by-ai .card.is-active .doc>*:nth-child(4){animation-delay:.6s} 363 #powered-by-ai .card.is-active .doc>*:nth-child(5){animation-delay:.8s} 364 #powered-by-ai .card.is-active .doc>*:nth-child(6){animation-delay:1s} 365 #powered-by-ai .card.is-active .doc>*:nth-child(7){animation-delay:1.2s} 366 #powered-by-ai .card.is-active .doc>*:nth-child(8){animation-delay:1.4s} 367 #powered-by-ai .card.is-active .badge{animation:aiBadge 2.2s ease-in-out infinite} 368 #powered-by-ai .card.is-active .lang-item{animation:aiLangHop 5.4s ease infinite} 369 #powered-by-ai .card.is-active .lang-item:nth-child(1){animation-delay:0s} 370 #powered-by-ai .card.is-active .lang-item:nth-child(2){animation-delay:.9s} 371 #powered-by-ai .card.is-active .lang-item:nth-child(3){animation-delay:1.8s} 372 #powered-by-ai .card.is-active .lang-item:nth-child(4){animation-delay:2.7s} 373 #powered-by-ai .card.is-active .lang-item:nth-child(5){animation-delay:3.6s} 374 #powered-by-ai .card.is-active .lang-item:nth-child(6){animation-delay:4.5s} 375 #powered-by-ai .card.is-active .lang-item.on{animation:none} 376 } 377 @media (max-width:860px){ 378 #powered-by-ai .ai-scroll{height:auto!important} 379 #powered-by-ai .ai-head{padding:46px 20px 6px} 380 #powered-by-ai .ai-stage{position:static;height:auto;display:block;padding:0 16px 10px} 381 #powered-by-ai .ai-cards{height:auto;display:flex;flex-direction:column;gap:18px;max-width:560px;margin:0 auto} 382 #powered-by-ai .card{position:static!important;transform:none!important;opacity:1!important;box-shadow:0 18px 50px -30px rgba(15,16,33,.3)!important} 383 #powered-by-ai .tabs{display:none} 384 #powered-by-ai .card-body{grid-template-columns:1fr;gap:20px;margin:0;border-radius:26px;padding:24px 22px} 385 #powered-by-ai .c-left{order:1}#powered-by-ai .mock-wrap{order:2} 386 #powered-by-ai .scroll-hint{display:none} 387 } 388 @media (prefers-reduced-motion: reduce){ 389 #powered-by-ai .ai-scroll{height:auto!important} 390 #powered-by-ai .ai-stage{position:static;height:auto;display:block}
391 #powered-by-ai .ai-cards{height:auto;display:flex;flex-direction:column;gap:22px;max-width:1040px;margin:0 auto} 392 #powered-by-ai .card{position:static!important;transform:none!important;opacity:1!important} 393 #powered-by-ai .scroll-hint{display:none} 394 } 395 /* extension demotion bits */ 396 .ext-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:600;color:var(--muted)} 397 .ext-link:hover{color:var(--ink)} 398 .ext-link .chrome-logo,.chrome-pill .chrome-logo{flex:0 0 auto} 399 .chrome-pill{display:inline-flex;align-items:center;gap:7px;margin-left:10px;font-size:12px;font-weight:700;color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:5px 11px;border-radius:999px;vertical-align:middle} 400 .ai-pill{display:inline-flex;align-items:center;gap:5px;margin-left:8px;font-size:11px;font-weight:800;letter-spacing:.03em;color:#fff;background:var(--grad);padding:5px 11px;border-radius:999px;vertical-align:middle} 401 #powered-by-ai .card-body{align-items:center} 402 #powered-by-ai .card-body h2{font-size:clamp(22px,2.5vw,32px);line-height:1.1;margin:12px 0;letter-spacing:-.02em;font-weight:800} 403 #powered-by-ai .card-body h2 .hl{color:var(--acc)} 404 #powered-by-ai .card-body .c-left>p{font-size:14.5px;color:var(--ink-2);margin:0 0 16px;max-width:450px;line-height:1.55} 405 #powered-by-ai .card-body .flist{gap:9px} 406 #powered-by-ai .card-body .flist li{font-size:13.5px} 407 #powered-by-ai .card-body .fart{min-height:0;padding:18px;border-radius:18px;width:100%} 408 #powered-by-ai .card-body .stat-row{margin-top:4px} 409 /* hero kicker + FAQ */ 410 .hero-kicker{font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--violet);margin-bottom:14px} 411 .faq-wrap{max-width:840px;margin:0 auto} 412 .faq-head{text-align:center;margin-bottom:34px} 413 .faq-item{border:1px solid var(--line);border-radius:16px;margin-bottom:12px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)} 414 .faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:700;font-size:16.5px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px} 415 .faq-item summary::-webkit-details-marker{display:none} 416 .faq-item summary::after{content:"+";font-size:24px;line-height:1;color:var(--violet);font-weight:700;flex:0 0 auto} 417 .faq-item[open] summary::after{content:"\2013"} 418 .faq-item .faq-a{padding:0 24px 22px;color:var(--ink-2);font-size:15.5px;line-height:1.62} 419 .faq-item .faq-a a{color:var(--violet);font-weight:600} 420 421 /* ===================== MOBILE OPTIMIZATION ===================== */ 422 /* hero: lazy iframe behind a lightweight poster */ 423 .hero-poster{display:none} 424 @media(max-width:980px){ 425 .hero-video iframe{display:none} 426 .hero-video.loaded iframe{display:block} 427 .hero-poster{display:flex;width:100%;aspect-ratio:1060/720;border:none;cursor:pointer;border-radius:22px;overflow:hidden;align-items:center;justify-content:center;background:linear-gradient(150deg,#eef0ff,#f7edff 55%,#ffeef7);box-shadow:0 24px 60px -30px rgba(99,102,241,.5);padding:18px} 428 .hero-video.loaded .hero-poster{display:none} 429 .hp-inner{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center} 430 .hp-play svg{width:62px;height:62px;filter:drop-shadow(0 12px 24px rgba(99,102,241,.45))} 431 .hp-label{font-weight:800;font-size:18px;color:#0f1021;letter-spacing:-.01em} 432 .hp-sub{font-size:13px;font-weight:600;color:#6b6c84} 433 } 434 /* headline auto-fits down on small phones */ 435 @media(max-width:560px){.hero h1{font-size:38px}.hero .sub{font-size:16px}.hero{padding-top:30px}} 436 @media(max-width:380px){.hero h1{font-size:32px}} 437 /* comparison tables -> stacked cards */ 438 @media(max-width:600px){ 439 .cmp-wrap{overflow:visible;border:none;box-shadow:none} 440 table.cmp{display:block;border:none;box-shadow:none;background:transparent;width:100%;min-width:0} 441 table.cmp thead{display:none} 442 table.cmp tbody,table.cmp tr,table.cmp td{display:block} 443 table.cmp tr{background:#fff;border:1px solid #ece9ff;border-radius:14px;margin-bottom:14px;box-shadow:0 12px 34px -24px rgba(15,16,33,.25);overflow:hidden} 444 table.cmp td{padding:12px 16px;border-bottom:1px solid #ece9ff;display:flex;justify-content:space-between;align-items:baseline;gap:16px;text-align:right;font-size:14px} 445 table.cmp td:first-child{font-weight:800;font-size:15px;text-align:left;color:var(--ink);background:#faf9ff;display:block;border-bottom:none} 446 table.cmp tr td:last-child{border-bottom:none} 447 table.cmp td.us,table.cmp td.mid{text-align:right;background:transparent} 448 table.cmp td.us{color:var(--violet);font-weight:800} 449 table.cmp td:not(:first-child)::before{content:attr(data-label);font-weight:700;color:#6b6c84;text-align:left;margin-right:auto;flex:0 0 auto} 450 } 451 /* condense integrations: keep the 4 named platforms on small phones */ 452 @media(max-width:560px){.integ-card:nth-child(n+5){display:none}.integ-card{width:calc(50% - 12px)}} 453 /* testimonials: stop the marquee, stack, show 3 */ 454 @media(max-width:820px){ 455 .tw-wall{-webkit-mask-image:none;mask-image:none;gap:16px} 456 .tw-row{animation:none!important;flex-direction:column;width:auto} 457 .tw-row.rev{display:none} 458 .tw{width:auto}
459 .tw-row .tw:nth-child(n+4){display:none} 460 } 461 /* calm/lighten decorative motion on mobile (speed) */ 462 @media(max-width:860px){ 463 .blob{display:none} 464 .integ-card .ic{animation:none!important} 465 .reveal{transition-duration:.3s} 466 } 467</style> 468 469</head> 470<body> 471 472<!-- NAV --> 473<nav> 474 <div class="wrap nav-in"> 475 <div class="logo"> 476 <svg class="mark" viewBox="0 0 40 40" fill="none"> 477 <defs><linearGradient id="lg" x1="0" y1="0" x2="40" y2="40"> 478 <stop stop-color="#7361ef"/><stop offset="1" stop-color="#9b7cf6"/> 479 </linearGradient></defs> 480 <rect width="40" height="40" rx="12" fill="url(#lg)"/> 481 <text x="20" y="29" text-anchor="middle" font-family="Inter,system-ui,sans-serif" font-size="24" font-weight="800" fill="#fff">w</text> 482 </svg> 483 <span class="wordmark"><span class="wm-ink">Write</span><span class="wm-violet">How</span></span> 484 </div> 485 <div class="nav-links"> 486 <a href="#usecases">Use cases</a> 487 <a href="#pricing">Pricing</a> 488 <a href="/blog">Blog</a> 489 </div> 490 <div class="nav-cta"> 491 <a href="https://app.writehow.com/login" class="login">Sign in</a> 492 <a href="https://app.writehow.com/login?mode=signup" class="btn btn-primary"> 493 <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg> 494 Get started for free 495 </a> 496 </div> 497 </div> 498</nav> 499 500<!-- HERO --> 501<header class="hero"> 502 <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div> 503 <div class="wrap hero-grid"> 504 <div class="reveal in"> 505 <p class="hero-kicker">The AI how-to guide maker</p> 506 <h1><span class="hl" style="--i:0">Record once.</span><span class="hl grad-text grad-flow" style="--i:1">Published everywhere.</span><span class="hl" style="--i:2">In minutes.</span></h1> 507 <p class="sub">Turn a quick screen recording into a polished help-center article. AI writes the steps, screenshots, and annotations, then publishes it to your help center in 50+ languages, so customers self-serve in their own language and you cut tickets.</p> 508 <div class="hero-cta"> 509 <a href="https://app.writehow.com/login?mode=signup" class="btn btn-primary"> 510 <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg> 511 Get started for free 512 </a> 513 <a href="#how" class="btn btn-ghost"> 514 <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/><path d="M10 9l5 3-5 3V9z" fill="currentColor"/></svg> 515 Watch 60-sec demo 516 </a> 517 </div> 518 <a href="https://chromewebstore.google.com/detail/writehow-ai-step-by-step/hgjkbohkmhlbfmmdhonicegpanhhdlcf" class="ext-link" data-ext target="_blank" rel="noopener"><svg class="chrome-logo" viewBox="0 0 48 48" width="16" height="16" aria-hidden="true"><path fill="#EA4335" d="M24 24L4.95 13A22 22 0 0 1 43.05 13Z"/><path fill="#FBBC05" d="M24 24L43.05 13A22 22 0 0 1 24 46Z"/><path fill="#34A853" d="M24 24L24 46A22 22 0 0 1 4.95 13Z"/><circle cx="24" cy="24" r="11" fill="#fff"/><circle cx="24" cy="24" r="8.5" fill="#4285F4"/></svg> or add to Chrome, free <span aria-hidden="true">â</span></a> 519 <div class="trust"> 520 <span><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Free forever plan</span> 521 <span><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> No credit card</span> 522 <span><svg viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> Zendesk · Notion · Confluence · GitBook</span> 523 </div> 524 </div> 525 526 <!-- HERO PRODUCT MOCKUP: live animated explainer (lazy-loaded on mobile) --> 527 <div class="reveal in hero-video" id="heroVideo" data-src="writehow-explainer.html?embed=1"> 528 <iframe title="See WriteHow in action" loading="lazy" scrolling="no"></iframe> 529 <button type="button" class="hero-poster" id="heroPoster" aria-label="Play the WriteHow demo">
530 <span class="hp-inner"> 531 <span class="hp-play"><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="11" fill="#fff"/><path d="M10 8.3l6.2 3.7-6.2 3.7z" fill="#7c5cf0"/></svg></span> 532 <span class="hp-label">Watch WriteHow in action</span> 533 <span class="hp-sub">60-second demo · tap to play</span> 534 </span> 535 </button> 536 </div> 537 <div style="display:none"> 538 <div class="float-badge" style="top:-18px;right:18px;animation-delay:-1s"> 539 <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#22c55e"/><path d="M8 12l3 3 5-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 540 Article ready 541 </div> 542 <div class="float-badge" style="bottom:30px;left:-24px;animation-delay:-3s"> 543 ⡠5 min, 4 platforms 544 </div> 545 <div class="product-card rise"> 546 <div class="pc-bar"> 547 <span class="dot" style="background:#ff5f57"></span><span class="dot" style="background:#febc2e"></span><span class="dot" style="background:#28c840"></span> 548 <span class="pc-url">app.writehow.com</span> 549 <span class="rec-badge"><span class="pulse"></span>REC</span> 550 </div> 551 <!-- inline product SVG --> 552 <svg viewBox="0 0 560 360" width="100%" style="display:block"> 553 <defs> 554 <linearGradient id="pg" x1="0" y1="0" x2="560" y2="360"> 555 <stop stop-color="#f6f4ff"/><stop offset="1" stop-color="#fdeef8"/> 556 </linearGradient> 557 <linearGradient id="bar" x1="0" y1="0" x2="1" y2="0"> 558 <stop stop-color="#6366f1"/><stop offset=".5" stop-color="#8b5cf6"/><stop offset="1" stop-color="#ec4899"/> 559 </linearGradient> 560 </defs> 561 <rect width="560" height="360" fill="url(#pg)"/> 562 <!-- left: recorder steps --> 563 <rect x="22" y="22" width="240" height="316" rx="14" fill="#fff" stroke="#ece9ff"/> 564 <text x="40" y="52" font-family="Inter,sans-serif" font-size="13" font-weight="700" fill="#8b5cf6">CAPTURING STEPS</text> 565 <!-- step rows appearing --> 566 <g font-family="Inter,sans-serif"> 567 <g class="rise" style="animation-delay:0s"> 568 <circle cx="46" cy="80" r="11" fill="url(#bar)"/><text x="46" y="84" font-size="11" font-weight="800" fill="#fff" text-anchor="middle">1</text> 569 <rect x="66" y="71" width="170" height="9" rx="4" fill="#e9e6ff"/><rect x="66" y="85" width="120" height="7" rx="3" fill="#f1eefc"/> 570 </g> 571 <g class="rise" style="animation-delay:.3s"> 572 <circle cx="46" cy="124" r="11" fill="url(#bar)"/><text x="46" y="128" font-size="11" font-weight="800" fill="#fff" text-anchor="middle">2</text> 573 <rect x="66" y="115" width="150" height="9" rx="4" fill="#e9e6ff"/><rect x="66" y="129" width="140" height="7" rx="3" fill="#f1eefc"/> 574 </g> 575 <g class="rise" style="animation-delay:.6s"> 576 <circle cx="46" cy="168" r="11" fill="url(#bar)"/><text x="46" y="172" font-size="11" font-weight="800" fill="#fff" text-anchor="middle">3</text> 577 <rect x="66" y="159" width="165" height="9" rx="4" fill="#e9e6ff"/><rect x="66" y="173" width="100" height="7" rx="3" fill="#f1eefc"/> 578 </g> 579 <g opacity=".55"> 580 <circle cx="46" cy="212" r="11" fill="#dcd8ff"/> 581 <rect x="66" y="203" width="140" height="9" rx="4" fill="#eeebff"/><rect x="66" y="217" width="120" height="7" rx="3" fill="#f4f1ff"/> 582 </g> 583 </g> 584 <!-- cursor --> 585 <g class="rise" style="animation-delay:.2s"> 586 <path d="M150 250l0 26 7-7 5 11 5-2-5-11 10 0z" fill="#0f1021"/> 587 </g> 588 <!-- right: generated article preview --> 589 <rect x="282" y="22" width="256" height="316" rx="14" fill="#fff" stroke="#ece9ff"/> 590 <rect x="282" y="22" width="256" height="46" rx="14" fill="url(#bar)"/> 591 <rect x="282" y="56" width="256" height="12" fill="#fff"/> 592 <text x="302" y="50" font-family="Inter,sans-serif" font-size="14" font-weight="800" fill="#fff">How to reset a password</text> 593 <!-- screenshot placeholders with step chips --> 594 <rect x="302" y="84" width="216" height="64" rx="9" fill="#f3f0ff"/> 595 <circle cx="316" cy="98" r="9" fill="url(#bar)"/><text x="316" y="102" font-size="10" font-weight="800" fill="#fff" text-anchor="middle">1</text> 596 <rect x="302" y="160" width="170" height="8" rx="4" fill="#e9e6ff"/> 597 <rect x="302" y="176" width="140" height="8" rx="4" fill="#f1eefc"/> 598 <rect x="302" y="200" width="216" height="64" rx="9" fill="#f3f0ff"/> 599 <circle cx="316" cy="214" r="9" fill="url(#bar)"/><text x="316" y="218" font-size="10" font-weight="800" fill="#fff" text-anchor="middle">2</text> 600 <rect x="302" y="276" width="180" height="8" rx="4" fill="#e9e6ff"/> 601 <rect x="302" y="292" width="120" height="8" rx="4" fill="#f1eefc"/> 602 </svg> 603 <!-- publish bar --> 604 <div style="display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--line);background:#fff">
605 <span style="font-size:13px;font-weight:700;color:var(--muted)">Published to</span> 606 <span style="margin-left:auto;display:flex;gap:8px"> 607 <span style="width:30px;height:30px;border-radius:8px;background:#03363d;display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="16" height="16" fill="#fff"><path d="M12.914 2.904V16.29L24 2.905H12.914zM0 2.906C0 5.966 2.483 8.45 5.543 8.45s5.542-2.484 5.543-5.544H0zm11.086 4.807L0 21.096h11.086V7.713zm7.37 7.84c-3.063 0-5.542 2.48-5.542 5.543H24c0-3.06-2.48-5.543-5.543-5.543z"/></svg></span> 608 <span style="width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="16" height="16" fill="#0f0f0f"><path d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/></svg></span> 609 <span style="width:30px;height:30px;border-radius:8px;background:#2684ff;display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="16" height="16" fill="#fff"><path d="M.87 18.257c-.248.382-.53.875-.763 1.245a.764.764 0 0 0 .255 1.04l4.965 3.054a.764.764 0 0 0 1.058-.26c.199-.332.454-.763.733-1.221 1.967-3.247 3.945-2.853 7.508-1.146l4.957 2.337a.764.764 0 0 0 1.028-.382l2.364-5.346a.764.764 0 0 0-.382-1c-.508-.239-1.516-.712-4.965-2.361C10.911 10.97 5.224 11.185.87 18.257zM23.131 5.743c.249-.405.531-.875.764-1.25a.764.764 0 0 0-.256-1.034L18.675.404a.764.764 0 0 0-1.058.26c-.195.335-.451.763-.734 1.225-1.966 3.246-3.945 2.85-7.508 1.146L4.437.694a.764.764 0 0 0-1.027.382L1.046 6.422a.764.764 0 0 0 .382
6091c.508.239 1.516.712 4.965 2.361 6.698 3.246 12.392 3.029 16.738-4.04z"/></svg></span> 610 <span style="width:30px;height:30px;border-radius:8px;background:#3970ff;display:flex;align-items:center;justify-content:center"><svg viewBox="0 0 24 24" width="17" height="17" fill="#fff"><path d="M12.513 1.097c-.645 0-1.233.34-2.407 1.017L3.675 5.82A7.233 7.233 0 0 0 0 12.063v.236a7.233 7.233 0 0 0 3.667 6.238L7.69 20.86c2.354 1.36 3.531 2.042 4.824 2.042 1.292.001 2.47-.678 4.825-2.038l4.251-2.453c1.177-.68 1.764-1.02 2.087-1.579.323-.56.324-1.24.323-2.6v-2.63a1.04 1.04 0 0 0-1.558-.903l-8.728 5.024c-.587.337-.88.507-1.201.507-.323 0-.616-.168-1.204-.506l-5.904-3.393c-.297-.171-.446-.256-.565-.271a.603.603 0 0 0-.634.368c-.045.111-.045.282-.043.625.002.252 0 .378.025.494.053.259.189.493.387.667.089.077.198.14.416.266l6.315 3.65c.589.34.884.51 1.207.51.324 0 .617-.17 1.206-.509l7.74-4.469c.202-.116.302-.172.377-.13.075.044.075.16.075.392v1.193c0 .34.001.51-.08.649-.08.14-.227.224-.522.394l-6.382 3.685c-1.178.68-1.767 1.02-2.413 1.02-.646 0-1.236-.34-2.412-1.022l-5.97-3.452-.043-.025a4.106 4.106 0 0 1-2.031-3.52V11.7c0-.801.427-1.541 1.12-1.944a1.979 1.979 0 0 1 1.982-.001l4.946 2.858c1.174.679 1.762 1.019 2.407 1.02.645 0 1.233-.34 2.41-1.017l7.482-4.306a1.091 1.091 0 0 0 0-1.891L14.92 2.11c-1.175-.675-1.762-1.013-2.406-1.013Z"/></svg></span> 611 </span> 612 </div> 613 </div> 614 </div> 615 </div> 616</header> 617 618<!-- LOGO STRIP --> 619<div class="strip"> 620 <div class="wrap"> 621 <p>Trusted by support & CX teams at fast-growing SaaS companies</p> 622 <div class="logos"> 623 <span class="lg">â Northwind</span><span class="lg">⺠Lumen</span><span class="lg">â² Apex CX</span> 624 <span class="lg">⬡ Flowbase</span><span class="lg">⦠Helix</span><span class="lg">â Orbit</span> 625 </div> 626 </div> 627</div> 628 629<!-- PROBLEM --> 630<section class="block"> 631 <div class="wrap"> 632 <div class="section-head reveal"> 633 <span class="eyebrow">The grind</span> 634 <h2>Writing docs is the work <span class="grad-text">nobody has time for.</span></h2> 635 <p>You know the process cold. Turning it into an article is the part that eats your week.</p> 636 </div> 637 <div class="prob-grid"> 638 <div class="prob-card reveal"> 639 <div class="prob-ic"> 640 <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M12 8v5l3 2" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="12" r="9" stroke="#8b5cf6" stroke-width="2"/></svg> 641 </div> 642 <h3>Writing eats your week</h3> 643 <p>Steps, screenshots, cropping, annotations, blurring. Every article is a slow manual grind.</p> 644 </div> 645 <div class="prob-card reveal"> 646 <div class="prob-ic"> 647 <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="8" height="6" rx="1.5" stroke="#ec4899" stroke-width="2"/><rect x="13" y="8" width="8" height="6" rx="1.5" stroke="#ec4899" stroke-width="2"/><rect x="6" y="14" width="8" height="6" rx="1.5" stroke="#ec4899" stroke-width="2"/></svg> 648 </div> 649 <h3>Same doc, four places</h3> 650 <p>What you write for Zendesk you redo for Notion, Confluence, and GitBook, by hand, every time.</p> 651 </div> 652 <div class="prob-card reveal"> 653 <div class="prob-ic"> 654 <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M12 3a9 9 0 109 9" stroke="#6366f1" stroke-width="2" stroke-linecap="round"/><path d="M12 7v5l4 2" stroke="#6366f1" stroke-width="2" stroke-linecap="round"/><path d="M17 3l4 1-1 4" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> 655 </div> 656 <h3>Outdated fast</h3> 657 <p>One small UI change, and the guide you spent an afternoon on is suddenly wrong again.</p> 658 </div> 659 </div> 660 </div> 661</section> 662 663<!-- HOW IT WORKS --> 664<section class="block" id="how" style="background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)"> 665 <div class="wrap"> 666 <div class="section-head reveal"> 667 <span class="eyebrow">How it works</span> 668 <h2>From recording to a published how-to guide in <span class="grad-text">three steps.</span></h2> 669 <p>Your AI co-writer does the heavy lifting. No writing. No screenshots. No copy-
669paste.</p> 670 </div> 671 <div class="steps"> 672 <div class="step reveal"> 673 <div class="num">1</div> 674 <h3>Record & narrate</h3> 675 <p>Hit record, walk through the process, and just talk as you go, like you're showing a teammate.</p> 676 <div class="step-art"> 677 <svg viewBox="0 0 300 140" width="100%"><rect width="300" height="140" fill="#f6f4ff"/> 678 <rect x="16" y="16" width="268" height="22" rx="6" fill="#fff" stroke="#ece9ff"/> 679 <circle cx="30" cy="27" r="5" fill="#e11d48"><animate attributeName="opacity" values="1;.3;1" dur="1.2s" repeatCount="indefinite"/></circle> 680 <text x="44" y="31" font-family="Inter" font-size="10" font-weight="700" fill="#e11d48">Recordingâ¦</text> 681 <rect x="16" y="50" width="160" height="10" rx="5" fill="#e3defc"/> 682 <rect x="16" y="68" width="120" height="10" rx="5" fill="#eeebfc"/> 683 <rect x="16" y="92" width="200" height="34" rx="8" fill="#fff" stroke="#ece9ff"/> 684 <path d="M120 110l0 18 5-5 4 8 4-2-4-8 7 0z" fill="#0f1021"><animate attributeName="opacity" values=".4;1;.4" dur="1.6s" repeatCount="indefinite"/></path> 685 </svg> 686 </div> 687 </div> 688 <div class="step reveal"> 689 <div class="num">2</div> 690 <h3>Review</h3> 691 <p>AI writes the steps, captures and annotates the screenshots, and blurs sensitive info. Your draft is ready in seconds. You review and approve.</p> 692 <div class="step-art"> 693 <svg viewBox="0 0 300 140" width="100%"><rect width="300" height="140" fill="#f6f4ff"/> 694 <rect x="16" y="16" width="268" height="108" rx="8" fill="#fff" stroke="#ece9ff"/> 695 <circle cx="34" cy="40" r="9" fill="#8b5cf6"/><text x="34" y="44" font-size="10" font-weight="800" fill="#fff" text-anchor="middle">1</text> 696 <rect x="50" y="34" width="150" height="8" rx="4" fill="#e3defc"/><rect x="50" y="47" width="110" height="7" rx="3" fill="#eeebfc"/> 697 <circle cx="34" cy="74" r="9" fill="#ec4899"/><text x="34" y="78" font-size="10" font-weight="800" fill="#fff" text-anchor="middle">2</text> 698 <rect x="50" y="68" width="170" height="8" rx="4" fill="#e3defc"/><rect x="50" y="81" width="90" height="7" rx="3" fill="#eeebfc"/> 699 <rect x="50" y="98" width="60" height="14" rx="7" fill="#ecfdf3"/><path d="M58 105l3 3 6-6" stroke="#22c55e" stroke-width="2" fill="none" stroke-linecap="round"/> 700 </svg> 701 </div> 702 </div> 703 <div class="step reveal"> 704 <div class="num">3</div> 705 <h3>Publish everywhere</h3> 706 <p>Send it to Zendesk, Notion, Confluence, and GitBook at once, natively formatted for each.</p> 707 <div class="step-art"> 708 <svg viewBox="0 0 300 140" width="100%"><rect width="300" height="140" fill="#f6f4ff"/> 709 <rect x="120" y="52" width="60" height="36" rx="8" fill="#8b5cf6"/><text x="150" y="74" font-size="10" font-weight="800" fill="#fff" text-anchor="middle">Article</text> 710 <g class="flow" stroke="#c4b5fd" stroke-width="2" fill="none"> 711 <path d="M120 70 L60 30"/><path d="M120 70 L60 110"/><path d="M180 70 L240 30"/><path d="M180 70 L240 110"/> 712 </g> 713 <g font-family="Inter" font-size="10" font-weight="800" fill="#fff"> 714 <rect x="34" y="18" width="26" height="26" rx="7" fill="#03363d"/><g transform="translate(38.6,22.6) scale(0.7)"><path d="M12.914 2.904V16.29L24 2.905H12.914zM0 2.906C0 5.966 2.483 8.45 5.543 8.45s5.542-2.484 5.543-5.544H0zm11.086 4.807L0 21.096h11.086V7.713zm7.37 7.84c-3.063 0-5.542 2.48-5.542 5.543H24c0-3.06-2.48-5.543-5.543-5.543z"/></g> 715 <rect x="34" y="98" width="26" height="26" rx="7" fill="#0f0f0f"/><g transform="translate(38.6,102.6) scale(0.7)"><path d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v
71513.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/></g> 716 <rect x="240" y="18" width="26" height="26" rx="7" fill="#2684ff"/><g transform="translate(244.6,22.6) scale(0.7)"><path d="M.87 18.257c-.248.382-.53.875-.763 1.245a.764.764 0 0 0 .255 1.04l4.965 3.054a.764.764 0 0 0 1.058-.26c.199-.332.454-.763.733-1.221 1.967-3.247 3.945-2.853 7.508-1.146l4.957 2.337a.764.764 0 0 0 1.028-.382l2.364-5.346a.764.764 0 0 0-.382-1c-.508-.239-1.516-.712-4.965-2.361C10.911 10.97 5.224 11.185.87 18.257zM23.131 5.743c.249-.405.531-.875.764-1.25a.764.764 0 0 0-.256-1.034L18.675.404a.764.764 0 0 0-1.058.26c-.195.335-.451.763-.734 1.225-1.966 3.246-3.945 2.85-7.508 1.146L4.437.694a.764.764 0 0 0-1.027.382L1.046 6.422a.764.764 0 0 0 .382
7161c.508.239 1.516.712 4.965 2.361 6.698 3.246 12.392 3.029 16.738-4.04z"/></g> 717 <rect x="240" y="98" width="26" height="26" rx="7" fill="#3970ff"/><g transform="translate(244.6,102.6) scale(0.7)"><path d="M12.513 1.097c-.645 0-1.233.34-2.407 1.017L3.675 5.82A7.233 7.233 0 0 0 0 12.063v.236a7.233 7.233 0 0 0 3.667 6.238L7.69 20.86c2.354 1.36 3.531 2.042 4.824 2.042 1.292.001 2.47-.678 4.825-2.038l4.251-2.453c1.177-.68 1.764-1.02 2.087-1.579.323-.56.324-1.24.323-2.6v-2.63a1.04 1.04 0 0 0-1.558-.903l-8.728 5.024c-.587.337-.88.507-1.201.507-.323 0-.616-.168-1.204-.506l-5.904-3.393c-.297-.171-.446-.256-.565-.271a.603.603 0 0 0-.634.368c-.045.111-.045.282-.043.625.002.252 0 .378.025.494.053.259.189.493.387.667.089.077.198.14.416.266l6.315 3.65c.589.34.884.51 1.207.51.324 0 .617-.17 1.206-.509l7.74-4.469c.202-.116.302-.172.377-.13.075.044.075.16.075.392v1.193c0 .34.001.51-.08.649-.08.14-.227.224-.522.394l-6.382 3.685c-1.178.68-1.767 1.02-2.413 1.02-.646 0-1.236-.34-2.412-1.022l-5.97-3.452-.043-.025a4.106 4.106 0 0 1-2.031-3.52V11.7c0-.801.427-1.541 1.12-1.944a1.979 1.979 0 0 1 1.982-.001l4.946 2.858c1.174.679 1.762 1.019 2.407 1.02.645 0 1.233-.34 2.41-1.017l7.482-4.306a1.091 1.091 0 0 0 0-1.891L14.92 2.11c-1.175-.675-1.762-1.013-2.406-1.013Z"/></g> 718 </g> 719 </svg> 720 </div> 721 </div> 722 </div> 723 <div style="text-align:center;margin-top:46px" class="reveal"> 724 <a href="https://app.writehow.com/login?mode=signup" class="btn btn-primary">Get started for free</a> 725 </div> 726 </div> 727</section> 728 729<!-- POWERED BY AI (scroll-stack) --> 730<section id="powered-by-ai"> 731 <div class="ai-head"> 732 <span class="ai-eyebrow">⦠Powered by AI</span> 733 <h2>The AI does the work. <span class="ai-grad">You just hit record.</span></h2> 734 </div> 735 <div class="ai-scroll" id="aiScroll"> 736 <div class="ai-stage at-start"> 737 <div class="ai-cards" id="aiCards"> 738 739 <article class="card violet is-active" data-state="active"> 740 <div class="tabs"><span class="tab active" data-c="violet" data-i="0">Record</span></div> 741 <div class="card-body"> 742 <div class="c-left"> 743 <span class="eyebrow">⦠Record & narrate</span> 744 <h2>Show the process. <span class="hl">Just talk it through.</span></h2> 745 <p>Walk through any workflow once and explain it out loud. Advanced speech-to-text and image-analysis AI capture every step, annotate the screenshots, and turn what you say into accurate, clean instructions in minutes, not an afternoon.</p> 746 <ul class="flist"> 747 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>AI captures every click and screen automatically</li> 748 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Talk as you go, and AI turns your narration into clean steps</li> 749 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Screenshots taken, cropped & annotated for you</li> 750 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Sensitive fields blurred automatically</li> 751 </ul> 752 </div> 753 <div class="mock-wrap"><div class="fart"> 754 <svg viewBox="0 0 480 340" width="100%" style="display:block"> 755 <defs><linearGradient id="rv-g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#6366f1"/><stop offset="1" stop-color="#ec4899"/></linearGradient></defs> 756 <rect x="20" y="24" width="328" height="292" rx="16" fill="#fff" stroke="#ece9ff"/> 757 <rect x="20" y="24" width="328" height="34" rx="16" fill="#f7f4ff"/><rect x="20" y="46" width="328" height="12" fill="#fff"/> 758 <circle cx="40" cy="41" r="4.5" fill="#ff5f57"/><circle cx="56" cy="41" r="4.5" fill="#febc2e"/><circle cx="72" cy="41" r="4.5" fill="#28c840"/> 759 <rect x="262" y="31" width="74" height="20" rx="10" fill="#fff0f4" stroke="#ffd6e3"/> 760 <circle cx="276" cy="41" r="4" fill="#e11d48"><animate attributeName="opacity" values="1;.25;
7601" dur="1.2s" repeatCount="indefinite"/></circle> 761 <text x="286" y="45" font-family="Inter,sans-serif" font-size="10" font-weight="800" fill="#e11d48">REC</text> 762 <rect x="44" y="84" width="180" height="13" rx="6" fill="#e7e2fb"/> 763 <rect x="44" y="107" width="130" height="10" rx="5" fill="#f1edfb"/> 764 <rect x="44" y="138" width="262" height="34" rx="9" fill="#faf9ff" stroke="#ece9ff"/> 765 <rect x="56" y="149" width="0" height="12" rx="6" fill="#cbbcf3"><animate attributeName="width" values="0;0;150;150;0" keyTimes="0;0.5;0.66;0.92;1" dur="6.5s" repeatCount="indefinite"/></rect> 766 <rect x="44" y="196" width="110" height="38" rx="11" fill="url(#rv-g)"/> 767 <text x="99" y="220" font-family="Inter,sans-serif" font-size="13" font-weight="800" fill="#fff" text-anchor="middle">Send</text> 768 <circle cx="99" cy="215" r="6" fill="none" stroke="#8b5cf6" stroke-width="3"><animate attributeName="r" values="4;4;30;4;4" keyTimes="0;0.22;0.4;0.41;1" dur="6.5s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;0.85;0;0;0" keyTimes="0;0.22;0.4;0.41;1" dur="6.5s" repeatCount="indefinite"/></circle> 769 <rect x="44" y="252" width="262" height="46" rx="12" fill="#f3effe" stroke="#e7e1ff"/> 770 <circle cx="68" cy="275" r="15" fill="url(#rv-g)"/> 771 <rect x="64" y="267" width="8" height="13" rx="4" fill="#fff"/><path d="M60 277 a8 8 0 0 0 16 0 M68 285 v3 M63 288 h10" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round"/> 772 <g fill="#b9a7ec"> 773 <rect x="94" y="271" width="4" height="8" rx="2"><animate attributeName="height" values="6;18;6" dur="0.8s" repeatCount="indefinite"/><animate attributeName="y" values="278;266;278" dur="0.8s" repeatCount="indefinite"/></rect> 774 <rect x="103" y="271" width="4" height="8" rx="2"><animate attributeName="height" values="6;15;6" dur="0.8s" begin="0.15s" repeatCount="indefinite"/><animate attributeName="y" values="278;269;278" dur="0.8s" begin="0.15s" repeatCount="indefinite"/></rect> 775 <rect x="112" y="271" width="4" height="8" rx="2"><animate attributeName="height" values="6;20;6" dur="0.8s" begin="0.3s" repeatCount="indefinite"/><animate attributeName="y" values="278;264;278" dur="0.8s" begin="0.3s" repeatCount="indefinite"/></rect> 776 <rect x="121" y="271" width="4" height="8" rx="2"><animate attributeName="height" values="6;13;6" dur="0.8s" begin="0.45s" repeatCount="indefinite"/><animate attributeName="y" values="278;271;278" dur="0.8s" begin="0.45s" repeatCount="indefinite"/></rect> 777 <rect x="130" y="271" width="4" height="8" rx="2"><animate attributeName="height" values="6;17;6" dur="0.8s" begin="0.6s" repeatCount="indefinite"/><animate attributeName="y" values="278;267;278" dur="0.8s" begin="0.6s" repeatCount="indefinite"/></rect> 778 </g> 779 <rect x="148" y="271" width="0" height="8" rx="4" fill="#cbbcf3"><animate attributeName="width" values="0;0;140;140;0" keyTimes="0;0.3;0.5;0.92;1" dur="6.5s" repeatCount="indefinite"/></rect> 780 <g><path d="M0 0 L0 22 L6 16.5 L10 26 L13.5 24.5 L9.5 15 L17 15 Z" fill="#0f1021" stroke="#fff" stroke-width="1.3"/> 781 <animateTransform attributeName="transform" type="translate" values="250,70; 92,206; 92,206; 230,150; 230,150; 250,70" keyTimes="0;0.22;0.44;0.62;0.9;
7811" dur="6.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1;0.4 0 0.2 1;0.4 0 0.2 1;0.4 0 0.2 1;0.4 0 0.2 1"/> 782 </g> 783 <rect x="364" y="24" width="96" height="292" rx="16" fill="#fff" stroke="#ece9ff"/> 784 <text x="412" y="50" font-family="Inter,sans-serif" font-size="9" font-weight="800" fill="#8b5cf6" text-anchor="middle">CAPTURED</text> 785 <g> 786 <circle cx="386" cy="88" r="13" fill="url(#rv-g)"/><text x="386" y="93" font-size="13" font-weight="800" fill="#fff" text-anchor="middle">1</text> 787 <rect x="404" y="80" width="46" height="8" rx="4" fill="#e7e2fb"/><rect x="404" y="92" width="34" height="7" rx="3.5" fill="#f1edfb"/> 788 <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.28;0.36;0.93;1" dur="6.5s" repeatCount="indefinite"/> 789 </g> 790 <g> 791 <circle cx="386" cy="142" r="13" fill="url(#rv-g)"/><text x="386" y="147" font-size="13" font-weight="800" fill="#fff" text-anchor="middle">2</text> 792 <rect x="404" y="134" width="46" height="8" rx="4" fill="#e7e2fb"/><rect x="404" y="146" width="28" height="7" rx="3.5" fill="#f1edfb"/> 793 <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.66;0.74;0.93;1" dur="6.5s" repeatCount="indefinite"/> 794 </g> 795 </svg> 796 </div></div> 797 </div> 798 </article> 799 800 <article class="card indigo" data-state="future"> 801 <div class="tabs"> 802 <span class="tab done" data-c="violet" data-i="0">Record</span> 803 <span class="tab active" data-c="indigo" data-i="1">Review</span> 804 </div> 805 <div class="card-body"> 806 <div class="c-left"> 807 <span class="eyebrow">Review & collaborate</span> 808 <h2>Review together. <span class="hl">Resolve in one place.</span></h2> 809 <p>Invite your team right onto the draft. Comment on any step, reply in thread, and resolve, so no feedback gets scattered across email and Slack. Everyone sees the latest version, always.</p> 810 <ul class="flist"> 811 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Invite teammates with one click</li> 812 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Comment and reply right on the article</li> 813 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Resolve threads to lock in changes</li> 814 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>One source of truth, no version chaos</li> 815 </ul> 816 </div> 817 <div class="mock-wrap"><div class="fart" style="background:linear-gradient(135deg,#eef0ff,#f0fdfa)"> 818 <svg viewBox="0 0 480 340" width="100%" style="display:block"> 819 <defs><linearGradient id="cv-g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#6366f1"/><stop offset=".5" stop-color="#8b5cf6"/><stop offset="1" stop-color="#ec4899"/></linearGradient></defs> 820 <rect x="20" y="40" width="250" height="266" rx="16" fill="#fff" stroke="#ece9ff"/> 821 <rect x="20" y="40" width="250" height="46" rx="16" fill="url(#cv-g)"/><rect x="20" y="76" width="250" height="10" fill="#fff"/> 822 <text x="38" y="68" font-family="Inter,sans-serif" font-size="12" font-weight="800" fill="#fff">How to reset a password</text> 823 <rect x="40" y="100" width="180" height="10" rx="5" fill="#e7e2fb"/> 824 <rect x="32" y="122" width="216" height="20" rx="6" fill="#fff0c2"><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.2;0.27;0.78;0.86;
8241" dur="8s" repeatCount="indefinite"/></rect> 825 <rect x="40" y="127" width="196" height="10" rx="5" fill="#d9d2f5"/> 826 <rect x="40" y="154" width="150" height="10" rx="5" fill="#e7e2fb"/> 827 <rect x="40" y="176" width="172" height="10" rx="5" fill="#f1edfb"/> 828 <g> 829 <rect x="40" y="262" width="104" height="26" rx="13" fill="#ecfdf3" stroke="#bbf7d0"/> 830 <path d="M54 275 l5 5 9-10" stroke="#22c55e" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/> 831 <text x="80" y="279" font-family="Inter,sans-serif" font-size="10" font-weight="800" fill="#16a34a">Resolved</text> 832 <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.76;0.82;0.93;1" dur="8s" repeatCount="indefinite"/> 833 </g> 834 <g> 835 <circle cx="252" cy="56" r="14" fill="#06b6d4" stroke="#fff" stroke-width="2"/><text x="252" y="61" font-size="15" font-weight="800" fill="#fff" text-anchor="middle">+</text> 836 <animate attributeName="opacity" values="0;0;1;1;1" keyTimes="0;0.08;0.14;0.95;1" dur="8s" repeatCount="indefinite"/> 837 </g> 838 <g> 839 <rect x="244" y="104" width="216" height="74" rx="13" fill="#fff" stroke="#ece9ff"/> 840 <circle cx="266" cy="126" r="11" fill="#8b5cf6"/><text x="266" y="130" font-size="10" font-weight="800" fill="#fff" text-anchor="middle">A</text> 841 <rect x="282" y="120" width="80" height="8" rx="4" fill="#e7e2fb"/> 842 <text x="246" y="158" font-family="Inter,sans-serif" font-size="12" font-weight="600" fill="#3a3b52">Add a screenshot here?</text> 843 <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.3;0.37;0.78;0.86;1" dur="8s" repeatCount="indefinite"/> 844 <animateTransform attributeName="transform" type="translate" values="0,12;0,12;0,0;0,0;0,0;0,0" keyTimes="0;0.3;0.39;0.78;0.86;1" dur="8s" repeatCount="indefinite"/> 845 </g> 846 <g> 847 <rect x="262" y="196" width="198" height="58" rx="13" fill="#f6f3ff" stroke="#ece9ff"/> 848 <circle cx="284" cy="216" r="10" fill="#ec4899"/><text x="284" y="220" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">Y</text> 849 <g> 850 <circle cx="306" cy="225" r="3.5" fill="#b9a7e8"><animate attributeName="opacity" values=".3;1;.3" dur="1s" repeatCount="indefinite"/></circle> 851 <circle cx="318" cy="225" r="3.5" fill="#b9a7e8"><animate attributeName="opacity" values=".3;1;.3" dur="1s" begin="0.2s" repeatCount="indefinite"/></circle> 852 <circle cx="330" cy="225" r="3.5" fill="#b9a7e8"><animate attributeName="opacity" values=".3;1;.3" dur="1s" begin="0.4s" repeatCount="indefinite"/></circle> 853 <animate attributeName="opacity" values="0;0;1;0;0;0" keyTimes="0;0.5;0.55;0.64;0.9;1" dur="8s" repeatCount="indefinite"/> 854 </g> 855 <g> 856 <rect x="304" y="210" width="130" height="7" rx="3.5" fill="#d9d2f5"/><rect x="304" y="222" width="96" height="7" rx="3.5" fill="#e7e2fb"/> 857 <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.64;0.7;0.82;0.9;1" dur="8s" repeatCount="indefinite"/> 858 </g> 859 <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.48;0.54;0.84;0.9;1" dur="8s" repeatCount="indefinite"/> 860 <animateTransform attributeName="transform" type="translate" values="0,12;0,12;0,0;0,0;0,0;0,0" keyTimes="0;0.48;0.56;0.84;0.9;1" dur="8s" repeatCount="indefinite"/> 861 </g> 862 </svg> 863 </div></div> 864 </div> 865 </article> 866 867 <article class="card pink" data-state="future"> 868 <div class="tabs"> 869 <span class="tab done" data-c="violet" data-i="0">Record</span> 870 <span class="tab done" data-c="indigo" data-i="1">Review</span> 871 <span class="tab active" data-c="pink" data-i="2">Translate</span> 872 </div> 873 <div class="card-body"> 874 <div class="c-left"> 875 <span class="eyebrow">⦠Speak every language</span> 876 <h2>One article. <span class="hl">Every language.</span></h2> 877 <p>Your customers aren't all in English. AI instantly translates every article into <b>50+ languages</b>, so everyone reads in their own language, while you maintain a single source. Edit once, and every translation updates too. <a href="/multilingual-help-center">
877Multilingual help center software that stays in sync â</a></p> 878 <div class="stat-row"> 879 <div class="stat"><b>50+</b><span>languages, one click</span></div> 880 <div class="stat"><b>Auto-synced</b><span>edit once, all languages refresh</span></div> 881 </div> 882 </div> 883 <div class="mock-wrap"><div class="fart" style="background:linear-gradient(135deg,#eef0ff,#fff0f7)"> 884 <svg viewBox="0 0 480 340" width="100%" style="display:block"> 885 <defs><linearGradient id="ml-g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#6366f1"/><stop offset=".5" stop-color="#8b5cf6"/><stop offset="1" stop-color="#ec4899"/></linearGradient></defs> 886 <g stroke="#e2dcfb" stroke-width="1.5" fill="none" opacity=".8"> 887 <circle cx="240" cy="172" r="132"/> 888 <ellipse cx="240" cy="172" rx="58" ry="132"/><ellipse cx="240" cy="172" rx="118" ry="132"/> 889 <line x1="108" y1="172" x2="372" y2="172"/><path d="M122 116 H358 M122 228 H358"/> 890 </g> 891 <g><rect x="286" y="40" width="150" height="30" rx="15" fill="#fff" stroke="#ece9ff"/><text x="361" y="60" font-family="Inter,sans-serif" font-size="13" font-weight="800" fill="#6d5cf0" text-anchor="middle">ð 50+ languages</text> 892 <animate attributeName="opacity" values=".85;1;.85" dur="2.4s" repeatCount="indefinite"/></g> 893 <rect x="96" y="86" width="288" height="184" rx="16" fill="#fff" stroke="#ece9ff"/> 894 <rect x="96" y="86" width="288" height="54" rx="16" fill="url(#ml-g)"/><rect x="96" y="130" width="288" height="10" fill="#fff"/> 895 <g font-family="Inter,sans-serif" font-size="15" font-weight="800" fill="#fff"> 896 <text x="114" y="116" opacity="0">How to reset a password<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0;0.012;0.113;0.125;1" dur="8s" repeatCount="indefinite"/></text> 897 <text x="114" y="116" opacity="0">Restablecer la contraseña<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.125;0.137;0.238;0.25;1" dur="8s" repeatCount="indefinite"/></text> 898 <text x="114" y="116" opacity="0">Réinitialiser le mot de passe<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.25;0.262;0.363;0.375;1" dur="8s" repeatCount="indefinite"/></text> 899 <text x="114" y="116" opacity="0">Passwort zurücksetzen<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.375;0.387;0.488;0.5;1" dur="8s" repeatCount="indefinite"/></text> 900 <text x="114" y="116" opacity="0">Redefinir a senha<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5;0.512;0.613;0.625;1" dur="8s" repeatCount="indefinite"/></text> 901 <text x="114" y="116" opacity="0">ãã¹ã¯ã¼ãã®ãªã»ãã<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.625;0.637;0.738;0.75;1" dur="8s" repeatCount="indefinite"/></text> 902 <text x="366" y="116" text-anchor="end" opacity="0">إعادة تعÙÙÙ ÙÙÙ Ø© اÙÙ Ø±ÙØ±<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.75;0.762;0.863;0.875;1" dur="8s" repeatCount="indefinite"/></text> 903 <text x="114" y="116" opacity="0">पासवरà¥à¤¡ रà¥à¤¸à¥à¤ à¤à¤°à¥à¤<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.875;0.887;0.988;1;1" dur="8s" repeatCount="indefinite"/></text> 904 </g> 905 <circle cx="118" cy="158" r="9" fill="url(#ml-g)"/><text x="118" y="162" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">1</text> 906 <rect x="136" y="150" width="150" height="8" rx="4" fill="#e7e2fb"/><rect x="136" y="164" width="110" height="7" rx="3.5" fill="#f1edfb"/> 907 <circle cx="118" cy="196" r="9" fill="url(#ml-g)"/><text x="118" y="200" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">2</text> 908 <rect x="136" y="188" width="170" height="8" rx="4" fill="#e7e2fb"/><rect x="136" y="202" width="90" height="7" rx="3.5" fill="#f1edfb"/> 909 <rect x="112" y="228" width="200" height="8" rx="4" fill="#eeebfa"/> 910 <rect x="150" y="288" width="180" height="32" rx="16" fill="#fff" stroke="#ece9ff"/> 911 <g font-family="Inter,sans-serif" font-size="13.5" font-weight="700" fill="#1c1d2e" text-anchor="middle"> 912 <text x="240" y="309" opacity="0">ðºð¸ EN · English<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0;0.012;0.113;0.125;
9121" dur="8s" repeatCount="indefinite"/></text> 913 <text x="240" y="309" opacity="0">ðªð¸ ES · Español<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.125;0.137;0.238;0.25;1" dur="8s" repeatCount="indefinite"/></text> 914 <text x="240" y="309" opacity="0">ð«ð· FR · Français<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.25;0.262;0.363;0.375;1" dur="8s" repeatCount="indefinite"/></text> 915 <text x="240" y="309" opacity="0">ð©ðª DE · Deutsch<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.375;0.387;0.488;0.5;1" dur="8s" repeatCount="indefinite"/></text> 916 <text x="240" y="309" opacity="0">ð§ð· PT · Português<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5;0.512;0.613;0.625;1" dur="8s" repeatCount="indefinite"/></text> 917 <text x="240" y="309" opacity="0">ð¯ðµ JA · æ¥æ¬èª<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.625;0.637;0.738;0.75;1" dur="8s" repeatCount="indefinite"/></text> 918 <text x="240" y="309" opacity="0">ð¸ð¦ AR · Ø§ÙØ¹Ø±Ø¨ÙØ©<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.75;0.762;0.863;0.875;1" dur="8s" repeatCount="indefinite"/></text> 919 <text x="240" y="309" opacity="0">ð®ð³ HI · हिनà¥à¤¦à¥<animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.875;0.887;0.988;1;1" dur="8s" repeatCount="indefinite"/></text> 920 </g> 921 </svg> 922 </div></div> 923 </div> 924 </article> 925 926 <article class="card cyan" data-state="future"> 927 <div class="tabs"> 928 <span class="tab done" data-c="violet" data-i="0">Record</span> 929 <span class="tab done" data-c="indigo" data-i="1">Review</span> 930 <span class="tab done" data-c="pink" data-i="2">Translate</span> 931 <span class="tab active" data-c="cyan" data-i="3">Publish</span> 932 </div> 933 <div class="card-body"> 934 <div class="c-left"> 935 <span class="eyebrow">One source, every destination</span> 936 <h2>Write it once. <span class="hl">It's live everywhere.</span></h2> 937 <p>Other tools hand you a link to embed or a file to export. WriteHow publishes your article <b>into</b> Zendesk, Notion, Confluence, and GitBook as real, native content, formatted for each. No copy-
937paste. No maintaining the same doc in four tabs.</p> 938 <ul class="flist"> 939 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Native publishing, not embeds or exports</li> 940 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>One recording, pushed to every platform at once</li> 941 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Formatted automatically for each destination</li> 942 <li><span class="chk"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span>Edit the source, and every copy updates</li> 943 </ul> 944 </div> 945 <div class="mock-wrap"><div class="fart" style="background:linear-gradient(135deg,#eef0ff,#ffeef8)"> 946 <svg viewBox="0 0 480 360" width="100%" style="display:block"> 947 <defs> 948 <linearGradient id="pub-g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#6366f1"/><stop offset="1" stop-color="#ec4899"/></linearGradient> 949 <radialGradient id="pub-glow" cx=".5" cy=".5" r=".5"><stop stop-color="#8b5cf6" stop-opacity=".22"/><stop offset="1" stop-color="#8b5cf6" stop-opacity="0"/></radialGradient> 950 </defs> 951 <circle cx="240" cy="120" r="130" fill="url(#pub-glow)"/> 952 <g font-family="Inter,sans-serif"> 953 <rect x="40" y="34" width="56" height="56" rx="15" fill="#03363d"/> 954 <g transform="translate(50,44) scale(1.5)" fill="#fff"><path d="M12.914 2.904V16.29L24 2.905H12.914zM0 2.906C0 5.966 2.483 8.45 5.543 8.45s5.542-2.484 5.543-5.544H0zm11.086 4.807L0 21.096h11.086V7.713zm7.37 7.84c-3.063 0-5.542 2.48-5.542 5.543H24c0-3.06-2.48-5.543-5.543-5.543z"/></g> 955 <g><circle cx="92" cy="86" r="9" fill="#22c55e" stroke="#fff" stroke-width="2"/><path d="M88 86 l3 3 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.5;0.56;0.92;1" dur="7s" repeatCount="indefinite"/></g> 956 <text x="68" y="106" font-size="10" fill="#6b6c84" text-anchor="middle">Zendesk</text> 957 <rect x="166" y="24" width="56" height="56" rx="15" fill="#0f0f0f"/> 958 <g transform="translate(176,34) scale(1.5)" fill="#fff"><path d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v
95813.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/></g> 959 <g><circle cx="218" cy="76" r="9" fill="#22c55e" stroke="#fff" stroke-width="2"/><path d="M214 76 l3 3 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.56;0.62;0.92;1" dur="7s" repeatCount="indefinite"/></g> 960 <text x="194" y="96" font-size="10" fill="#6b6c84" text-anchor="middle">Notion</text> 961 <rect x="258" y="24" width="56" height="56" rx="15" fill="#2684ff"/> 962 <g transform="translate(268,34) scale(1.5)" fill="#fff"><path d="M.87 18.257c-.248.382-.53.875-.763 1.245a.764.764 0 0 0 .255 1.04l4.965 3.054a.764.764 0 0 0 1.058-.26c.199-.332.454-.763.733-1.221 1.967-3.247 3.945-2.853 7.508-1.146l4.957 2.337a.764.764 0 0 0 1.028-.382l2.364-5.346a.764.764 0 0 0-.382-1c-.508-.239-1.516-.712-4.965-2.361C10.911 10.97 5.224 11.185.87 18.257zM23.131 5.743c.249-.405.531-.875.764-1.25a.764.764 0 0 0-.256-1.034L18.675.404a.764.764 0 0 0-1.058.26c-.195.335-.451.763-.734 1.225-1.966 3.246-3.945 2.85-7.508 1.146L4.437.694a.764.764 0 0 0-1.027.382L1.046 6.422a.764.764 0 0 0 .382
9621c.508.239 1.516.712 4.965 2.361 6.698 3.246 12.392 3.029 16.738-4.04z"/></g> 963 <g><circle cx="310" cy="76" r="9" fill="#22c55e" stroke="#fff" stroke-width="2"/><path d="M306 76 l3 3 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.62;0.68;0.92;1" dur="7s" repeatCount="indefinite"/></g> 964 <text x="286" y="96" font-size="10" fill="#6b6c84" text-anchor="middle">Confluence</text> 965 <rect x="384" y="34" width="56" height="56" rx="15" fill="#3970ff"/> 966 <g transform="translate(394,44) scale(1.5)" fill="#fff"><path d="M12.513 1.097c-.645 0-1.233.34-2.407 1.017L3.675 5.82A7.233 7.233 0 0 0 0 12.063v.236a7.233 7.233 0 0 0 3.667 6.238L7.69 20.86c2.354 1.36 3.531 2.042 4.824 2.042 1.292.001 2.47-.678 4.825-2.038l4.251-2.453c1.177-.68 1.764-1.02 2.087-1.579.323-.56.324-1.24.323-2.6v-2.63a1.04 1.04 0 0 0-1.558-.903l-8.728 5.024c-.587.337-.88.507-1.201.507-.323 0-.616-.168-1.204-.506l-5.904-3.393c-.297-.171-.446-.256-.565-.271a.603.603 0 0 0-.634.368c-.045.111-.045.282-.043.625.002.252 0 .378.025.494.053.259.189.493.387.667.089.077.198.14.416.266l6.315 3.65c.589.34.884.51 1.207.51.324 0 .617-.17 1.206-.509l7.74-4.469c.202-.116.302-.172.377-.13.075.044.075.16.075.392v1.193c0 .34.001.51-.08.649-.08.14-.227.224-.522.394l-6.382 3.685c-1.178.68-1.767 1.02-2.413 1.02-.646 0-1.236-.34-2.412-1.022l-5.97-3.452-.043-.025a4.106 4.106 0 0 1-2.031-3.52V11.7c0-.801.427-1.541 1.12-1.944a1.979 1.979 0 0 1 1.982-.001l4.946 2.858c1.174.679 1.762 1.019 2.407 1.02.645 0 1.233-.34 2.41-1.017l7.482-4.306a1.091 1.091 0 0 0 0-1.891L14.92 2.11c-1.175-.675-1.762-1.013-2.406-1.013Z"/></g> 967 <g><circle cx="436" cy="86" r="9" fill="#22c55e" stroke="#fff" stroke-width="2"/><path d="M432 86 l3 3 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.68;0.74;0.92;1" dur="7s" repeatCount="indefinite"/></g> 968 <text x="412" y="106" font-size="10" fill="#6b6c84" text-anchor="middle">GitBook</text> 969 </g> 970 <circle r="5" fill="#03363d"><animateMotion path="M240,150 L68,62" keyPoints="0;0;1;1" keyTimes="0;0.44;0.58;1" calcMode="linear" dur="7s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.44;0.46;0.56;0.6;1" dur="7s" repeatCount="indefinite"/></circle> 971 <circle r="5" fill="#8b5cf6"><animateMotion path="M240,150 L194,52" keyPoints="0;0;1;1" keyTimes="0;0.5;0.62;1" calcMode="linear" dur="7s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.5;0.52;0.6;0.64;1" dur="7s" repeatCount="indefinite"/></circle> 972 <circle r="5" fill="#2684ff"><animateMotion path="M240,150 L286,52" keyPoints="0;0;1;1" keyTimes="0;0.56;0.68;1" calcMode="linear" dur="7s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.56;0.58;0.66;0.7;1" dur="7s" repeatCount="indefinite"/></circle> 973 <circle r="5" fill="#3970ff"><animateMotion path="M240,150 L412,62" keyPoints="0;0;1;1" keyTimes="0;0.62;0.74;1" calcMode="linear" dur="7s" repeatCount="indefinite"/><animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.62;0.64;0.72;0.76;1" dur="7s" repeatCount="indefinite"/></circle> 974 <g> 975 <rect x="188" y="216" width="104" height="92" rx="14" fill="#fff" stroke="#e7e1ff" stroke-width="2"/> 976 <rect x="188" y="216" width="104" height="26" rx="14" fill="url(#pub-g)"/><rect x="188" y="232" width="104" height="10" fill="#fff"/> 977 <rect x="202" y="252" width="60" height="7" rx="3.5" fill="#e9e6ff"/> 978 <rect x="202" y="265" width="76" height="6" rx="3" fill="#f1eefc"/> 979 <rect x="202" y="277" width="50" height="6" rx="3" fill="#f1eefc"/> 980 </g> 981 <g> 982 <rect x="200" y="316" width="80" height="26" rx="13" fill="url(#pub-g)"/> 983 <text x="240" y="333" font-family="Inter,sans-serif" font-size="11" font-weight="800" fill="#fff" text-anchor="middle">Publish</text> 984 <animate attributeName="opacity" values="1;1;0;0;1" keyTimes="0;0.12;0.16;0.92;
9841" dur="7s" repeatCount="indefinite"/> 985 </g> 986 <g> 987 <g> 988 <path d="M0,-22 C7,-15 9,-3 9,7 L-9,7 C-9,-3 -7,-15 0,-22 Z" fill="url(#pub-g)"/> 989 <circle cx="0" cy="-7" r="4" fill="#fff" opacity=".9"/> 990 <path d="M-9,7 L-16,18 L-9,14 Z" fill="#8b5cf6"/> 991 <path d="M9,7 L16,18 L9,14 Z" fill="#8b5cf6"/> 992 <path d="M-5,14 Q0,32 5,14 Z" fill="#fbbf24"><animate attributeName="opacity" values="1;.5;1" dur=".3s" repeatCount="indefinite"/></path> 993 </g> 994 <animateTransform attributeName="transform" type="translate" values="240,250;240,250;240,150;240,120;240,120;240,250" keyTimes="0;0.14;0.4;0.46;0.92;1" dur="7s" repeatCount="indefinite" calcMode="spline" keySplines="0 0 1 1;0.3 0 0.3 1;0.4 0 0.2 1;0 0 1 1;0 0 1 1"/> 995 <animate attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.14;0.18;0.42;0.46;1" dur="7s" repeatCount="indefinite"/> 996 </g> 997 </svg> 998 </div></div> 999 </div> 1000 </article> 1001 1002 </div> 1003 <div class="scroll-hint"><div class="mouse"></div>scroll</div> 1004 </div> 1005 </div> 1006</section> 1007 1008<!-- INTEGRATIONS --> 1009<section class="block integ" id="integrations" style="border-top:1px solid var(--line)"> 1010 <div class="wrap"> 1011 <div class="section-head reveal"> 1012 <span class="eyebrow">Integrations</span> 1013 <h2>Publish how-to guides where your team <span class="grad-text">already works.</span></h2> 1014 <p>Connect once, publish forever, natively into the help centers and wikis you already rely on. Every article can publish in 50+ languages, automatically.</p> 1015 </div> 1016 <div class="integ-grid"> 1017 <div class="integ-card reveal"><div class="ic" style="background:#03363d"><svg viewBox="0 0 24 24" width="26" height="26" fill="#fff"><path d="M12.914 2.904V16.29L24 2.905H12.914zM0 2.906C0 5.966 2.483 8.45 5.543 8.45s5.542-2.484 5.543-5.544H0zm11.086 4.807L0 21.096h11.086V7.713zm7.37 7.84c-3.063 0-5.542 2.48-5.542 5.543H24c0-3.06-2.48-5.543-5.543-5.543z"/></svg></div><p>Zendesk</p></div> 1018 <div class="integ-card reveal"><div class="ic" style="background:#fff;border:1px solid var(--line)"><svg viewBox="0 0 24 24" width="26" height="26" fill="#0f0f0f"><path d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v
101813.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/></svg></div><p>Notion</p></div> 1019 <div class="integ-card reveal"><div class="ic" style="background:#2684ff"><svg viewBox="0 0 24 24" width="26" height="26" fill="#fff"><path d="M.87 18.257c-.248.382-.53.875-.763 1.245a.764.764 0 0 0 .255 1.04l4.965 3.054a.764.764 0 0 0 1.058-.26c.199-.332.454-.763.733-1.221 1.967-3.247 3.945-2.853 7.508-1.146l4.957 2.337a.764.764 0 0 0 1.028-.382l2.364-5.346a.764.764 0 0 0-.382-1c-.508-.239-1.516-.712-4.965-2.361C10.911 10.97 5.224 11.185.87 18.257zM23.131 5.743c.249-.405.531-.875.764-1.25a.764.764 0 0 0-.256-1.034L18.675.404a.764.764 0 0 0-1.058.26c-.195.335-.451.763-.734 1.225-1.966 3.246-3.945 2.85-7.508 1.146L4.437.694a.764.764 0 0 0-1.027.382L1.046 6.422a.764.764 0 0 0 .382
10191c.508.239 1.516.712 4.965 2.361 6.698 3.246 12.392 3.029 16.738-4.04z"/></svg></div><p>Confluence</p></div> 1020 <div class="integ-card reveal"><div class="ic" style="background:#3970ff"><svg viewBox="0 0 24 24" width="27" height="27" fill="#fff"><path d="M12.513 1.097c-.645 0-1.233.34-2.407 1.017L3.675 5.82A7.233 7.233 0 0 0 0 12.063v.236a7.233 7.233 0 0 0 3.667 6.238L7.69 20.86c2.354 1.36 3.531 2.042 4.824 2.042 1.292.001 2.47-.678 4.825-2.038l4.251-2.453c1.177-.68 1.764-1.02 2.087-1.579.323-.56.324-1.24.323-2.6v-2.63a1.04 1.04 0 0 0-1.558-.903l-8.728 5.024c-.587.337-.88.507-1.201.507-.323 0-.616-.168-1.204-.506l-5.904-3.393c-.297-.171-.446-.256-.565-.271a.603.603 0 0 0-.634.368c-.045.111-.045.282-.043.625.002.252 0 .378.025.494.053.259.189.493.387.667.089.077.198.14.416.266l6.315 3.65c.589.34.884.51 1.207.51.324 0 .617-.17 1.206-.509l7.74-4.469c.202-.116.302-.172.377-.13.075.044.075.16.075.392v1.193c0 .34.001.51-.08.649-.08.14-.227.224-.522.394l-6.382 3.685c-1.178.68-1.767 1.02-2.413 1.02-.646 0-1.236-.34-2.412-1.022l-5.97-3.452-.043-.025a4.106 4.106 0 0 1-2.031-3.52V11.7c0-.801.427-1.541 1.12-1.944a1.979 1.979 0 0 1 1.982-.001l4.946 2.858c1.174.679 1.762 1.019 2.407 1.02.645 0 1.233-.34 2.41-1.017l7.482-4.306a1.091 1.091 0 0 0 0-1.891L14.92 2.11c-1.175-.675-1.762-1.013-2.406-1.013Z"/></svg></div><p>GitBook</p></div> 1021 <div class="integ-card reveal"><div class="ic" style="background:linear-gradient(135deg,#6366f1,#06b6d4)"><svg viewBox="0 0 24 24" width="27" height="27" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18"/></svg></div><p>Web link</p></div> 1022 <div class="integ-card reveal"><div class="ic" style="background:#e5252a"><svg viewBox="0 0 24 24" width="30" height="30"><path d="M6 2.5h8L18.5 7v14H6z" fill="#fff"/><path d="M14 2.5V7h4.5z" fill="#f7b6b8"/><text x="12" y="17.5" font-family="Inter,sans-serif" font-size="5.8" font-weight="800" fill="#e5252a" text-anchor="middle">PDF</text></svg></div><p>PDF export</p></div> 1023 <div class="integ-card reveal"><div class="ic" style="background:#2b579a"><svg viewBox="0 0 24 24" width="30" height="30"><path d="M6 2.5h8L18.5 7v14H6z" fill="#fff"/><path d="M14 2.5V7h4.5z" fill="#bcd0ec"/><text x="12" y="17.5" font-family="Inter,sans-serif" font-size="8" font-weight="800" fill="#2b579a" text-anchor="middle">W</text></svg></div><p>Word · DOCX</p></div> 1024 </div> 1025 <p style="text-align:center;margin-top:24px;color:var(--muted);font-weight:600">+ more destinations coming soon</p> 1026 </div> 1027</section> 1028 1029<!-- USE CASES --> 1030<section class="block" id="usecases"> 1031 <div class="wrap"> 1032 <div class="section-head reveal"> 1033 <span class="eyebrow">Who it's for</span> 1034 <h2>Made for the teams who <span class="grad-text">document everything.</span></h2> 1035 </div> 1036 <div class="uc-grid"> 1037 <a href="/product-documentation" class="uc-card c4 reveal"> 1038 <svg class="uc-ic" width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 2.5l8.5 4.7v9.6L12 21.5 3.5 16.8V7.2z" fill="#fff" opacity=".9"/></svg> 1039 <h3>Product Teams</h3> 1040 <p>Document a feature once, then have support and writers finish and publish it together, in minutes, not weeks.</p> 1041 </a> 1042 <a href="/support-documentation" class="uc-card c1 reveal"> 1043 <svg class="uc-ic" width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 2a9 9 0 00-9 9v5a3 3 0 003 3h1v-7H5v-1a7 7 0 0114 0v1h-2v7h1a3 3 0 003-3v-5a9 9 0 00-9-9z" fill="#fff" opacity=".9"/></svg> 1044 <h3>Customer Support</h3> 1045 <p>Turn every "how do Iâ¦" into a help-center article in minutes. Deflect tickets with docs that are always live and accurate.</p> 1046 </a> 1047 <a href="/employee-onboarding" class="uc-card c2 reveal"> 1048 <svg class="uc-ic" width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M3 7l9-4 9 4-9 4-9-4z" fill="#fff" opacity=".9"/><path d="M7 11v5c0 1 2 2 5 2s5-1 5-2v-5" stroke="#fff" stroke-width="2" fill="none"/></svg> 1049 <h3>Customer Success & Onboarding</h3> 1050 <p>
1050Build the playbooks and walkthroughs customers need, and keep them current without the rework.</p> 1051 </a> 1052 <a href="/it-process-documentation" class="uc-card c3 reveal"> 1053 <svg class="uc-ic" width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 3l2.5 5 5.5.8-4 3.9 1 5.5L12 21l-5-2.9 1-5.5-4-3.9L9.5 8 12 3z" fill="#fff" opacity=".9"/></svg> 1054 <h3>Operations & IT</h3> 1055 <p>Document SOPs and internal processes once, and publish them to every wiki your company uses.</p> 1056 </a> 1057 </div> 1058 </div> 1059</section> 1060 1061<!-- COMPARISON --> 1062<section class="block" style="background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)"> 1063 <div class="wrap"> 1064 <div class="section-head reveal"> 1065 <span class="eyebrow">Why teams switch</span> 1066 <h2>The difference is <span class="grad-text">where it ends up.</span></h2> 1067 <p>Scribe and Tango stop at a link you embed. WriteHow writes the article, translates it into 50+ languages, and publishes it natively into your help center, with no copy-paste.</p> 1068 </div> 1069 <div class="cmp-wrap reveal"> 1070 <table class="cmp"> 1071 <thead><tr><th></th><th class="us">WriteHow</th><th>The old way</th><th>Capture-only tools</th></tr></thead> 1072 <tbody> 1073 <tr><td>Create the doc</td><td class="us">Record it</td><td class="mid">Write by hand</td><td class="mid">Record it</td></tr> 1074 <tr><td>Screenshots & annotation</td><td class="us">Automatic</td><td class="mid">Manual, one by one</td><td class="mid">Automatic</td></tr> 1075 <tr><td>Publish to Zendesk · Notion · Confluence · GitBook</td><td class="us">Native, all at once</td><td class="mid">Copy-paste each</td><td class="mid">Embed / export only</td></tr> 1076 <tr><td>Keep every copy in sync</td><td class="us">One edit</td><td class="mid">Re-edit everywhere</td><td class="mid">Re-edit everywhere</td></tr> 1077 <tr><td>Translate to 50+ languages</td><td class="us">AI, automatic</td><td class="mid">Manual / agency</td><td class="mid">None</td></tr> 1078 <tr><td>Time per article</td><td class="us">Minutes</td><td class="mid">An afternoon</td><td class="mid">An hour + placement</td></tr> 1079 </tbody> 1080 </table> 1081 </div> 1082 </div> 1083</section> 1084 1085<!-- TESTIMONIALS --> 1086<section class="block"> 1087 <div class="wrap"> 1088 <div class="section-head reveal"> 1089 <span class="eyebrow">Loved by doc teams</span> 1090 <h2>Less writing. <span class="grad-text">More published.</span></h2> 1091 </div> 1092 <p style="text-align:center;color:var(--ink-2);font-size:18px;margin-top:-6px">What support, CS & ops teams are saying.</p> 1093 </div> 1094 <div class="tw-wall reveal"> 1095 <div class="tw-row"> 1096 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/men/32.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">Jordan Maxwell <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@jordanmax</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">We cut our documentation time by <b>90%</b>. I record a process between tickets and it's live in our help center before I'm back in the queue. ð</div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>14</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>52</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>231</span><span class="tw-time">· 9:42 AM</span></div></div> 1097 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/women/44.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">Priya Sharma <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@priyawrites</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">We stopped maintaining the same article in Zendesk <b>and</b> Confluence separately. One recording â both places, always in sync. Game changer.</div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1097<path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>8</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>37</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>189</span><span class="tw-time">· 1:08 PM</span></div></div> 1098 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/men/67.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">Marcus Lee <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@marcusdocs</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">Onboarded 6 new agents this month. Every SOP recorded in minutes, not written over an afternoon. <span class="mention">@writehow</span> is wild.</div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>21</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>64</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>302</span><span class="tw-time">· 4:51 PM</span></div></div> 1099 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/women/68.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">Elena Rossi <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@elenarossi</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">The auto-blur on sensitive fields alone is worth it. No more manually redacting 40 screenshots one by one. â¨</div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>6</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>29</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>154</span><span class="tw-time">· 11:20 AM</span></div></div> 1100 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/men/32.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">Jordan Maxwell <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@jordanmax</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">We cut our documentation time by <b>90%</b>. I record a process between tickets and it's live in our help center before I'm back in the queue. ð</div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1100<path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>14</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>52</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>231</span><span class="tw-time">· 9:42 AM</span></div></div> 1101 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/women/44.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">Priya Sharma <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@priyawrites</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">We stopped maintaining the same article in Zendesk <b>and</b> Confluence separately. One recording â both places, always in sync. Game changer.</div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>8</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>37</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>189</span><span class="tw-time">· 1:08 PM</span></div></div> 1102 </div> 1103 <div class="tw-row rev"> 1104 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/men/12.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">Tom Becker <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@tombecker</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">Hit record, click through the bug repro, done. The article was in <b>GitBook</b> before standup even ended. ð</div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>11</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>41</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>176</span><span class="tw-time">· 10:03 AM</span></div></div> 1105 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/women/65.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">Aisha Khan <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@aishak</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">Our help center finally stays current. Edit once, every platform updates. I don't dread doc maintenance anymore. ð </div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1105<path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>9</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>33</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>198</span><span class="tw-time">· 3:27 PM</span></div></div> 1106 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/men/45.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">David Park <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@davidpark</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">Replaced our whole "screenshot â crop â annotate â paste" ritual with one recording. My wrists thank you. <span class="mention">@writehow</span></div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>18</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>57</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>267</span><span class="tw-time">· 8:15 AM</span></div></div> 1107 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/women/90.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">Sofia Mendes <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@sofiamendes</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">Comments + resolve right on the draft = no more feedback lost in Slack threads. Review takes <b>minutes</b> now.</div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>7</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>26</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>143</span><span class="tw-time">· 2:49 PM</span></div></div> 1108 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/men/12.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">Tom Becker <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@tombecker</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">Hit record, click through the bug repro, done. The article was in <b>GitBook</b> before standup even ended. ð</div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1108<path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>11</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>41</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>176</span><span class="tw-time">· 10:03 AM</span></div></div> 1109 <div class="tw"><div class="tw-top"><img class="tw-av" src="https://randomuser.me/api/portraits/women/65.jpg" alt="WriteHow customer" width="44" height="44" loading="lazy" decoding="async"/><div class="tw-id"><span class="tw-name">Aisha Khan <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#1d9bf0"/><path d="M8 12.5l2.5 2.5 5-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tw-handle">@aishak</span></div><svg class="tw-x" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></div><div class="tw-body">Our help center finally stays current. Edit once, every platform updates. I don't dread doc maintenance anymore. ð </div><div class="tw-foot"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 01-12.1 7.6L3 21l1.9-5.9A8.4 8.4 0 1121 11.5z"/></svg>9</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3"/></svg>33</span><span class="lk"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-8-4.6-8-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0120 11c0 5.4-8 10-8 10z"/></svg>198</span><span class="tw-time">· 3:27 PM</span></div></div> 1110 </div> 1111 </div> 1112</section> 1113 1114<!-- FAQ --> 1115<section class="block" id="faq"> 1116 <div class="wrap faq-wrap"> 1117 <div class="faq-head"> 1118 <span class="eyebrow">FAQ</span> 1119 <h2>How-to guides, <span class="grad-text">answered.</span></h2> 1120 </div> 1121 <details class="faq-item" open> 1122 <summary>What is WriteHow?</summary> 1123 <div class="faq-a">WriteHow is an AI how-to guide maker. You record a workflow once, and WriteHow's AI turns it into a polished step-by-step guide (with automatic screenshots, annotations, and clean written instructions), then publishes it to your help center or knowledge base in 50+ languages.</div> 1124 </details> 1125 <details class="faq-item"> 1126 <summary>How do I create a step-by-step how-to guide with WriteHow?</summary> 1127 <div class="faq-a">Start recording, walk through the process, and talk as you go. WriteHow captures every click, takes and annotates the screenshots, and uses advanced speech-to-text AI to turn your narration into accurate, structured steps. You review and publish, usually in minutes.</div> 1128 </details> 1129 <details class="faq-item"> 1130 <summary>How does WriteHow use AI to make guides more accurate?</summary> 1131 <div class="faq-a">WriteHow combines advanced speech-to-text AI with AI image analysis, so it understands both what you say and what's on screen. That means cleaner instructions, smarter screenshot cropping and annotations, and automatic blurring of sensitive data, so you get more accurate guides with less editing.</div> 1132 </details> 1133 <details class="faq-item"> 1134 <summary>Can I publish guides to Zendesk, Notion, Confluence, and GitBook?</summary> 1135 <div class="faq-a">Yes. WriteHow publishes your article natively into Zendesk, Notion, Confluence, and GitBook (formatted for each), not as an embed or export. Edit the source once and every published copy updates.</div> 1136 </details> 1137 <details class="faq-item"> 1138 <summary>Does WriteHow translate how-to guides into other languages?</summary> 1139 <div class="faq-a">Yes. WriteHow translates any article into 50+ languages with AI, on demand or auto-published across your help center, so global customers read every guide in their own language while you maintain a single source.</div> 1140 </details> 1141 <details class="faq-item"> 1142 <summary>Is WriteHow a good Tango alternative?</summary> 1143 <div class="faq-a">WriteHow is a strong Tango alternative for teams who want AI-written support articles, native publishing into help centers, and AI translation into 50+ languages, not just in-app walkthroughs. See <a href="/vs-tango">WriteHow vs Tango</a> for a side-by-side comparison.</div> 1144 </details> 1145 <details class="faq-item"> 1146 <summary>Is WriteHow a good Scribe alternative?</summary> 1147 <div class="faq-a">Yes. If you're comparing <a href="/alternatives">Scribe alternatives</a>, WriteHow adds AI narration-to-article, multi-language translation, and native multi-platform publishing on top of automatic screenshot capture. See the full <a href="/vs-scribe">WriteHow vs Scribe</a> comparison.</div> 1148 </details> 1149 <details class="faq-item"> 1150 <summary>What can I use WriteHow for?</summary> 1151 <div class="faq-a">Customer support articles, customer onboarding and training, standard operating procedures (SOPs), and internal IT & operations documentation: anywhere you need step-by-step how-to guides that stay up to date.</div> 1152 </details> 1153 <details class="faq-item"> 1154 <summary>Is WriteHow free?</summary> 1155 <div class="faq-a">WriteHow has a free plan so you can create and publish your first how-to guides at no cost, no credit card required. <a href="https://app.writehow.com/login?mode=signup">Get started free</a>.</div> 1156 </details> 1157 </div> 1158</section> 1159 1160<!-- FINAL CTA --> 1161<section class="block" id="pricing"> 1162 <div class="wrap"> 1163 <div class="cta-final reveal"> 1164 <div class="cta-blob" style="width:300px;height:300px;background:#fff;top:-120px;left:-80px"></div> 1165 <div class="cta-blob" style="width:260px;height:260px;background:#c4b5fd;bottom:-120px;right:-60px"></div> 1166 <div style="position:relative;z-index:2"> 1167 <h2>Your next how-to guide is<br>five minutes away.</h2> 1168 <p>Start free and publish your first AI-written article today.</p> 1169 <a href="https://app.writehow.com/login?mode=signup" class="btn btn-primary"> 1170 <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg> 1171 Get started for free 1172 </a> 1173 <div class="trust2">Free forever plan · No credit card required</div> 1174 </div> 1175 </div> 1176 </div> 1177</section> 1178 1179<!-- FOOTER --> 1180<footer> 1181 <div class="wrap"> 1182 <div class="foot-grid"> 1183 <div> 1184 <div class="foot-logo"> 1185 <svg width="30" height="30" viewBox="0 0 48 48" fill="none"><defs><linearGradient id="flg" x1="3" y1="3" x2="45" y2="45" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b4fe6"/><stop offset="0.52" stop-color="#8b32cf"/><stop offset="1" stop-color="#d6209a"/></linearGradient></defs><rect width="48" height="48" rx="13" fill="url(#flg)"/><path d="M11 16.5L16.5 33L22 23L27.5 33L34.6 19" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
1185<path d="M39 10L40.6 22.2L28.4 16Z" fill="#fff"/></svg> 1186 <span>Write<span style="color:#b9a7f8">How</span></span> 1187 </div> 1188 <p style="color:#9a9bb8;font-size:14px;max-width:240px">Record once. Published everywhere. In minutes.</p> 1189 </div> 1190 <div><h4>Product</h4><ul><li><a href="/chrome-extension">Chrome extension</a></li><li><a href="#">Features</a></li><li><a href="#how">How it works</a></li><li><a href="#integrations">Integrations</a></li><li><a href="#pricing">Pricing</a></li></ul></div> 1191 <div><h4>Use cases</h4><ul><li><a href="/product-documentation">Product Teams</a></li><li><a href="/support-documentation">Customer Support</a></li><li><a href="/employee-onboarding">Onboarding & Training</a></li><li><a href="/it-process-documentation">IT & Operations</a></li><li><a href="#usecases">All use cases</a></li></ul></div> 1192 <div><h4>Compare</h4><ul><li><a href="/vs-tango">WriteHow vs Tango</a></li><li><a href="/vs-scribe">WriteHow vs Scribe</a></li><li><a href="/alternatives">Best alternatives</a></li><li><a href="#faq">FAQ</a></li></ul></div> 1193 <div><h4>Resources</h4><ul><li><a href="#faq">Help & FAQ</a></li><li><a href="/support">Support</a></li><li><a href="#integrations">Integrations</a></li></ul></div> 1194 </div> 1195 <div class="foot-bottom"> 1196 <span>© 2026 WriteHow. All rights reserved.</span> 1197 <span><a href="/privacy">Privacy</a> · <a href="/terms">Terms</a> · <a href="/support">Support</a></span> 1198 </div> 1199 </div> 1200</footer> 1201
1202<script> 1203 const io=new IntersectionObserver((es)=>{es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12}); 1204 document.querySelectorAll('.reveal').forEach((el,i)=>{el.style.transitionDelay=(i%3)*70+'ms';io.observe(el)}); 1205 1206 /* Hero explainer: load the iframe immediately on desktop, but on mobile 1207 keep a lightweight poster and only load the iframe when tapped (faster LCP). */ 1208 (function(){ 1209 var hv=document.getElementById('heroVideo'); if(!hv) return; 1210 var ifr=hv.querySelector('iframe'); 1211 var poster=document.getElementById('heroPoster'); 1212 var src=hv.getAttribute('data-src'); 1213 function load(){ if(!ifr.getAttribute('src')){ ifr.setAttribute('src',src); } hv.classList.add('loaded'); } 1214 var isMobile=window.matchMedia('(max-width:980px)').matches; 1215 if(isMobile){ if(poster) poster.addEventListener('click',load); } 1216 else { load(); } 1217 })(); 1218</script>
1218 1219 1220<!-- Powered by AI: scroll-stack controller -->
1221<script> 1222(function(){ 1223 const sec = document.getElementById('powered-by-ai'); 1224 if(!sec) return; 1225 const scroll = document.getElementById('aiScroll'); 1226 const stage = scroll.querySelector('.ai-stage'); 1227 const cards = [...sec.querySelectorAll('.card')]; 1228 const N = cards.length; 1229 const TINTS = ['#f6f3ff','#eef0ff','#fdf1f8','#eefcff']; 1230 const desktop = window.matchMedia('(min-width:861px)'); 1231 const reduce = window.matchMedia('(prefers-reduced-motion: reduce)'); 1232 let current = -1; 1233 1234 function setActive(idx){ 1235 cards.forEach((c,i)=>{ 1236 c.dataset.state = i<idx ? 'past' : (i>idx ? 'future' : 'active'); 1237 c.style.setProperty('--depth', Math.max(0, idx-i)); 1238 c.style.zIndex = i; 1239 c.classList.toggle('is-active', i===idx); 1240 }); 1241 stage.classList.toggle('at-start', idx===0); 1242 sec.style.setProperty('--ai-stage-bg', TINTS[idx] || TINTS[0]); 1243 } 1244 1245 function onScroll(){ 1246 if(!desktop.matches || reduce.matches) return; 1247 const rect = scroll.getBoundingClientRect(); 1248 const total = scroll.offsetHeight - window.innerHeight; 1249 const passed = Math.min(Math.max(-rect.top,0), total); 1250 const progress = total>0 ? passed/total : 0; 1251 const idx = Math.min(N-1, Math.round(progress*(N-1))); 1252 if(idx!==current){ current = idx; setActive(idx); } 1253 } 1254 1255 function initFlow(){ 1256 cards.forEach(c=>{ c.classList.add('is-active'); c.dataset.state='active'; }); 1257 if(!reduce.matches){ 1258 const io2 = new IntersectionObserver(es=>es.forEach(e=>{ 1259 if(e.isIntersecting){ const i=cards.indexOf(e.target); sec.style.setProperty('--ai-stage-bg', TINTS[i]||TINTS[0]); } 1260 }),{threshold:.5}); 1261 cards.forEach(c=>io2.observe(c)); 1262 } 1263 } 1264 1265 if(desktop.matches && !reduce.matches){ 1266 setActive(0); 1267 window.addEventListener('scroll', onScroll, {passive:true}); 1268 onScroll(); 1269 } else { initFlow(); } 1270 1271 sec.querySelectorAll('.tab').forEach(t=>t.addEventListener('click', ()=>{ 1272 const i = +t.dataset.i; 1273 if(desktop.matches && !reduce.matches){ 1274 const total = scroll.offsetHeight - window.innerHeight; 1275 window.scrollTo({ top: scroll.offsetTop + (i/(N-1))*total + 4, behavior:'smooth' }); 1276 } else { cards[i].scrollIntoView({behavior:'smooth', block:'center'}); } 1277 })); 1278 1279 desktop.addEventListener('change', ()=>location.reload()); 1280})(); 1281</script>
1281 1282<!-- Structured data (SEO rich results) -->
1283<script type="application/ld+json"> 1284{ 1285 "@context": "https://schema.org", 1286 "@graph": [ 1287 { 1288 "@type": "Organization", 1289 "@id": "https://www.writehow.com/#org", 1290 "name": "WriteHow", 1291 "url": "https://www.writehow.com/", 1292 "logo": "https://www.writehow.com/apple-touch-icon.png", 1293 "sameAs": ["https://www.linkedin.com/company/writehow/"] 1294 }, 1295 { 1296 "@type": "WebSite", 1297 "@id": "https://www.writehow.com/#website", 1298 "url": "https://www.writehow.com/", 1299 "name": "WriteHow", 1300 "publisher": { "@id": "https://www.writehow.com/#org" } 1301 }, 1302 { 1303 "@type": "SoftwareApplication", 1304 "name": "WriteHow", 1305 "applicationCategory": "BusinessApplication", 1306 "operatingSystem": "Web, Chrome", 1307 "description": "AI how-to guide maker that turns a screen recording into step-by-step guides with automatic screenshots, annotations, and AI translation into 50+ languages, published natively to Zendesk, Notion, Confluence and GitBook.", 1308 "url": "https://www.writehow.com/", 1309 "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" } 1310 }, 1311 { 1312 "@type": "FAQPage", 1313 "mainEntity": [ 1314 { "@type": "Question", "name": "What is WriteHow?", "acceptedAnswer": { "@type": "Answer", "text": "WriteHow is an AI how-to guide maker. You record a workflow once, and WriteHow's AI turns it into a polished step-by-step guide with automatic screenshots, annotations, and clean written instructions, then publishes it to your help center or knowledge base in 50+ languages." } }, 1315 { "@type": "Question", "name": "How do I create a step-by-step how-to guide with WriteHow?", "acceptedAnswer": { "@type": "Answer", "text": "Start recording, walk through the process, and talk as you go. WriteHow captures every click, takes and annotates the screenshots, and uses advanced speech-to-text AI to turn your narration into accurate, structured steps. You review and publish in minutes." } }, 1316 { "@type": "Question", "name": "How does WriteHow use AI to make guides more accurate?", "acceptedAnswer": { "@type": "Answer", "text": "WriteHow combines advanced speech-to-text AI with AI image analysis, so it understands both what you say and what's on screen, producing cleaner instructions, smarter screenshot cropping and annotations, and automatic blurring of sensitive data." } }, 1317 { "@type": "Question", "name": "Can I publish guides to Zendesk, Notion, Confluence, and GitBook?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. WriteHow publishes your article natively into Zendesk, Notion, Confluence, and GitBook, formatted for each, not as an embed or export. Edit the source once and every published copy updates." } }, 1318 { "@type": "Question", "name": "Does WriteHow translate how-to guides into other languages?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. WriteHow translates any article into 50+ languages with AI, on demand or auto-published across your help center, so global customers read every guide in their own language." } }, 1319 { "@type": "Question", "name": "Is WriteHow a good Tango alternative?", "acceptedAnswer": { "@type": "Answer", "text": "WriteHow is a strong Tango alternative for teams who want AI-written support articles, native publishing into help centers, and AI translation into 50+ languages, not just in-app walkthroughs." } }, 1320 { "@type": "Question", "name": "Is WriteHow a good Scribe alternative?", "acceptedAnswer": { "@type": "Answer", "text": "Yes. WriteHow adds AI narration-to-article, multi-language translation, and native multi-platform publishing on top of automatic screenshot capture." } }, 1321 { "@type": "Question", "name": "What can I use WriteHow for?", "acceptedAnswer": { "@type": "Answer", "text": "Customer support articles, customer onboarding and training, standard operating procedures (SOPs), and internal IT and operations documentation." } }, 1322 { "@type": "Question", "name": "Is WriteHow free?", "acceptedAnswer": { "@type": "Answer", "text": "WriteHow has a free plan so you can create and publish your first how-to guides at no cost, with no credit card required." } } 1323 ] 1324 } 1325 ] 1326} 1327</script>
vendor: 1 bytes, line 1327
1327
1328<script src="/nav.js" defer></script>
1328<script src="/consent.js" defer></script>
1328 1329</body> 1330</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.