-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
315 lines (299 loc) · 17 KB
/
Copy pathindex.html
File metadata and controls
315 lines (299 loc) · 17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0a0a0c">
<title>Moonshot — make every screenshot look like a product shot</title>
<meta name="description" content="A privacy-first screenshot studio in your browser. Device frames, hand-lit gradients, perfect canvas sizes for X, OG images and Product Hunt. Free to use — nothing ever uploaded.">
<meta property="og:title" content="Moonshot — make every screenshot look like a product shot">
<meta property="og:description" content="Beautiful screenshots in seconds. 100% in your browser, nothing uploaded. Free forever tier.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ameeramer.github.io/">
<link rel="canonical" href="https://ameeramer.github.io/">
<meta property="og:image" content="https://ameeramer.github.io/og.png">
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Moonshot",
"url": "https://ameeramer.github.io/",
"applicationCategory": "DesignApplication",
"operatingSystem": "Any (web browser)",
"description": "Free screenshot beautifier that runs 100% in your browser: device frames, gradient backdrops, captions, retina PNG export. Nothing is uploaded — no backend, no signup.",
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
"featureList": "Device frames (macOS, browser, phone); 24 gradient backdrops; custom image backgrounds; redact sensitive data; canvas size presets for X, OG images, Product Hunt, Instagram, App Store; one-click social export pack; captions; 1x/2x/3x PNG & JPG export; works offline"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{ "@type": "Question", "name": "Is Moonshot really private?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes, structurally. Moonshot is a static page with no backend. Your image is read into the browser's memory, composited on a local canvas, and saved from there. Nothing is transmitted or stored remotely — you can verify it in the network tab." } },
{ "@type": "Question", "name": "Can I hide sensitive data before sharing a screenshot?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Use Redact: drag over anything private — revenue, customer names, emails, API keys — and Moonshot blurs or pixelates it directly into the image, all locally, since nothing is ever uploaded." } },
{ "@type": "Question", "name": "What does the free version include?",
"acceptedAnswer": { "@type": "Answer", "text": "The full editor — every frame, canvas size, captions, backgrounds, redaction and 2x export. Free exports carry a small 'Made with Moonshot' mark. Pro ($29 once) removes it and adds premium backdrops and 3x export." } },
{ "@type": "Question", "name": "Is Pro a one-time purchase?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes. Pay once and Pro is yours forever, including future updates. No subscription." } },
{ "@type": "Question", "name": "Which browsers does Moonshot work in?",
"acceptedAnswer": { "@type": "Answer", "text": "Any modern browser — Chrome, Edge, Safari 16+, Firefox. Clipboard copy works best in Chrome and Safari; file export works everywhere." } },
{ "@type": "Question", "name": "Can I use the exports commercially?",
"acceptedAnswer": { "@type": "Answer", "text": "Yes — anything you make with Moonshot is yours, free tier included." } }
]
}
</script>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='%23f5b841'/><circle cx='66' cy='42' r='34' fill='%230a0a0c'/></svg>">
<link rel="apple-touch-icon" href="/logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Schibsted+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/landing.css">
</head>
<body>
<div class="stars" aria-hidden="true"></div>
<header class="nav">
<a class="brand" href="./">
<svg class="brand-moon" viewBox="0 0 100 100" aria-hidden="true">
<circle cx="50" cy="50" r="42" fill="#f5b841"/>
<circle cx="66" cy="42" r="34" fill="#0a0a0c"/>
</svg>
<span class="brand-name">Moonshot</span>
</a>
<nav class="nav-links">
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
<a class="btn small primary" href="app/">Open the studio</a>
</nav>
</header>
<main>
<!-- ── Hero ─────────────────────────────────────── -->
<section class="hero">
<p class="kicker">SCREENSHOT STUDIO · 100% IN YOUR BROWSER</p>
<h1>Make every screenshot<br>look like a <em>product shot.</em></h1>
<p class="lede">Drop in a raw screenshot. Moonshot wraps it in device frames,
hand-lit gradients and studio shadows — then exports pixel-perfect PNGs
sized for X, OG images, Product Hunt and the App Store.</p>
<div class="hero-cta">
<a class="btn big primary" href="app/">Open the studio — it’s free</a>
<span class="cta-note">No signup. No upload. Nothing leaves your browser.</span>
</div>
<div class="hero-demo">
<div class="demo-chrome">
<span class="demo-dot"></span><span class="demo-dot"></span><span class="demo-dot"></span>
<span class="demo-title">moonshot studio — live render</span>
</div>
<canvas id="hero-canvas" width="1400" height="820"></canvas>
<div class="demo-caption" id="demo-caption">Lunar Gold · macOS frame</div>
</div>
</section>
<!-- ── Logos-ish strip ──────────────────────────── -->
<section class="strip">
<span>FOR</span> launch tweets <span>·</span> changelogs <span>·</span> Product Hunt gigs
<span>·</span> App Store shots <span>·</span> docs <span>·</span> portfolio pieces
</section>
<!-- ── Features ─────────────────────────────────── -->
<section class="features" id="features">
<h2 class="section-title">Everything between<br><em>“meh, a screenshot”</em> and <em>“take my money.”</em></h2>
<div class="feature-grid">
<article class="feature">
<div class="feature-num">01</div>
<h3>Device frames, drawn in vectors</h3>
<p>macOS windows, browser chrome with your URL, and phone bezels — rendered
programmatically, so they’re crisp at any export size.</p>
</article>
<article class="feature">
<div class="feature-num">02</div>
<h3>Hand-lit gradient backdrops</h3>
<p>24 curated gradients with soft mesh lighting and film grain. Not a random
color picker — palettes that make screenshots pop.</p>
</article>
<article class="feature">
<div class="feature-num">03</div>
<h3>Sizes that match where you post</h3>
<p>One-click canvases for X posts, OG images, Product Hunt galleries,
Instagram, App Store 6.7″ — or any custom size up to 4096px.</p>
</article>
<article class="feature">
<div class="feature-num">04</div>
<h3>Private by architecture</h3>
<p>There is no server. Screenshots are processed entirely in your
browser tab — and you can <strong>redact</strong> revenue figures or
customer data (blur or pixelate) before you ever share.</p>
</article>
<article class="feature">
<div class="feature-num">05</div>
<h3>Captions with real typography</h3>
<p>Add a serif headline and subtext above or below your shot. Auto-contrast
picks readable ink for any backdrop.</p>
</article>
<article class="feature">
<div class="feature-num">06</div>
<h3>Retina exports & one-click packs</h3>
<p>Export PNG or JPG at 1×, 2× or 3×, copy to clipboard — or hit
<strong>Pack</strong> to render X, OG, LinkedIn, Instagram and Story
sizes in one go. What you preview is exactly what ships.</p>
</article>
</div>
</section>
<!-- ── Steps ────────────────────────────────────── -->
<section class="steps">
<div class="step"><span class="step-num">1</span><h4>Paste</h4><p>⌘V a screenshot, or drag any image in.</p></div>
<div class="step-arrow">→</div>
<div class="step"><span class="step-num">2</span><h4>Style</h4><p>Pick a frame and a backdrop. Or hit <em>Surprise me</em>.</p></div>
<div class="step-arrow">→</div>
<div class="step"><span class="step-num">3</span><h4>Ship</h4><p>Export a retina PNG sized for wherever it’s going.</p></div>
</section>
<!-- ── Looks gallery ────────────────────────────── -->
<section class="looks">
<h2 class="section-title">Same screenshot.<br><em>Twenty-four looks.</em></h2>
<div class="looks-grid">
<figure><img src="assets/looks/lunar-gold.jpg" alt="Screenshot on the Lunar Gold gradient in a macOS frame" loading="lazy" width="800" height="500"><figcaption>Lunar Gold · macOS</figcaption></figure>
<figure><img src="assets/looks/deep-space.jpg" alt="Screenshot on the Deep Space gradient in a browser frame" loading="lazy" width="800" height="500"><figcaption>Deep Space · browser</figcaption></figure>
<figure><img src="assets/looks/aurora.jpg" alt="Screenshot on the Aurora gradient, frameless" loading="lazy" width="800" height="500"><figcaption>Aurora · frameless</figcaption></figure>
<figure><img src="assets/looks/porcelain.jpg" alt="Screenshot on the Porcelain gradient in a light macOS frame" loading="lazy" width="800" height="500"><figcaption>Porcelain · light</figcaption></figure>
<figure><img src="assets/looks/ember.jpg" alt="Screenshot on the Ember gradient in a browser frame" loading="lazy" width="800" height="500"><figcaption>Ember · browser</figcaption></figure>
<figure><img src="assets/looks/ultraviolet.jpg" alt="Screenshot on the Ultraviolet gradient, tilted macOS frame" loading="lazy" width="800" height="500"><figcaption>Ultraviolet · Pro</figcaption></figure>
</div>
<p class="looks-note">Every image above was exported from Moonshot itself.</p>
</section>
<!-- ── Comparison ───────────────────────────────── -->
<section class="compare">
<h2 class="section-title">Why not just use<br>a <em>subscription tool?</em></h2>
<div class="compare-table" role="table">
<div class="compare-row compare-head" role="row">
<span role="columnheader"></span>
<span role="columnheader" class="compare-us">Moonshot</span>
<span role="columnheader">Typical subscription tools</span>
</div>
<div class="compare-row" role="row">
<span role="cell">Price</span>
<span role="cell" class="compare-us">$29, once</span>
<span role="cell">$50–60 every year</span>
</div>
<div class="compare-row" role="row">
<span role="cell">Account required</span>
<span role="cell" class="compare-us">Never</span>
<span role="cell">Usually, for anything useful</span>
</div>
<div class="compare-row" role="row">
<span role="cell">Where your screenshot goes</span>
<span role="cell" class="compare-us">Nowhere — there is no server</span>
<span role="cell">Often processed in the cloud</span>
</div>
<div class="compare-row" role="row">
<span role="cell">Works offline</span>
<span role="cell" class="compare-us">Yes, after first load</span>
<span role="cell">No</span>
</div>
<div class="compare-row" role="row">
<span role="cell">If the company disappears</span>
<span role="cell" class="compare-us">Static files — keeps working</span>
<span role="cell">Tool gone, subscription too</span>
</div>
</div>
</section>
<!-- ── Pricing ──────────────────────────────────── -->
<section class="pricing" id="pricing">
<h2 class="section-title">One price. <em>Zero subscriptions.</em></h2>
<div class="price-cards">
<div class="price-card">
<h3>Free</h3>
<div class="price">$0</div>
<ul>
<li>All frames & canvas sizes</li>
<li>12 gradient backdrops</li>
<li>1× and 2× PNG export</li>
<li>Small “Made with Moonshot” mark</li>
</ul>
<a class="btn wide" href="app/">Start free</a>
</div>
<div class="price-card featured">
<div class="ribbon">LIFETIME</div>
<h3>Pro</h3>
<div class="price">$29 <span>once</span></div>
<ul>
<li>Everything in Free</li>
<li><strong>No watermark</strong></li>
<li>12 premium backdrops</li>
<li>3× resolution exports</li>
<li>Every future update included</li>
</ul>
<a class="btn wide primary" id="buy-link" href="app/#pro">Get Pro — $29</a>
<p class="guarantee">Pay with ETH on Base — fees under a cent, confirms in seconds — or Ethereum · 14-day refund</p>
</div>
</div>
</section>
<!-- ── FAQ ──────────────────────────────────────── -->
<section class="faq" id="faq">
<h2 class="section-title">Questions, <em>answered.</em></h2>
<details>
<summary>Is it really private?</summary>
<p>Yes — structurally. Moonshot is a static page with no backend. Images are
read into your browser’s memory, composited on a local canvas, and saved from
there. Nothing is transmitted, logged, or stored remotely. You can verify
this in your browser’s network tab: after the page loads, no requests carry
your image anywhere.</p>
</details>
<details>
<summary>Can I hide sensitive data before sharing?</summary>
<p>Yes. Hit <strong>Redact sensitive info</strong>, drag over anything
private — MRR, customer names, emails, API keys — and Moonshot blurs or
pixelates it directly into the image. Because everything runs locally, the
un-redacted version is never uploaded anywhere in the first place.</p>
</details>
<details>
<summary>What does the free version include?</summary>
<p>The full editor — every frame, every canvas size, captions, grain, 2×
export. Free exports carry a small, tasteful “Made with Moonshot” mark in
the corner. Pro removes it, adds 12 premium backdrops and 3× export.</p>
</details>
<details>
<summary>Is Pro really a one-time purchase?</summary>
<p>Yes. Pay once — with ETH directly in the app on <strong>Base</strong>
(an Ethereum L2: fees under a cent, confirms in seconds, and Coinbase
withdraws to it directly) or Ethereum mainnet, verified on-chain and
unlocked instantly — and Pro is yours forever, future updates included.</p>
</details>
<details>
<summary>Which browsers work?</summary>
<p>Any modern browser — Chrome, Edge, Safari 16+, Firefox. Clipboard-copy
works best in Chrome and Safari; classic file export works everywhere.</p>
</details>
<details>
<summary>Can I use exports commercially?</summary>
<p>Yes — anything you make with Moonshot is yours, free tier included.</p>
</details>
</section>
<!-- ── Final CTA ────────────────────────────────── -->
<section class="final-cta">
<h2>Your next launch deserves<br>better than a raw screenshot.</h2>
<a class="btn big primary" href="app/">Open Moonshot Studio</a>
<span class="cta-note">Free · no signup · works offline once loaded</span>
</section>
</main>
<footer class="footer">
<div class="footer-left">
<svg class="brand-moon" viewBox="0 0 100 100" aria-hidden="true">
<circle cx="50" cy="50" r="42" fill="#f5b841"/>
<circle cx="66" cy="42" r="34" fill="#0a0a0c"/>
</svg>
<span>Moonshot · Beautiful screenshots, locally.</span>
</div>
<div class="footer-right">
<a href="app/">Studio</a>
<a href="#pricing">Pricing</a>
<a href="sizes.html">Image sizes</a>
<a href="changelog.html">Changelog</a>
<a href="#faq">FAQ</a>
<a href="reckon/" title="Reckon — the calculating notepad, by the same maker">Reckon ↗</a>
<a href="redstring/" title="Redstring — the 3D investigation board, by the same maker">Redstring ↗</a>
</div>
</footer>
<script type="module" src="js/landing.js"></script>
</body>
</html>