Website: landing page with a pixel morph hero

README.md

@@ -2,6 +2,8 @@
 
 A type and logo lab for macOS, Windows and the web. Morph one typeface into another, reshape lettering with a stack of modifiers, draw by hand, put photos inside any shape, trace images into vector marks, compile the result into a real installable font, and render it as liquid chrome, glow glass, puffy 3D, halftone, dither, rubber stamp or neon, all in real time on the GPU.
 
+**Website:** [morphotype.srivtx.xyz](https://morphotype.srivtx.xyz)
+
 ![Templates rendered by Morphotype](docs/images/gallery.png)
 
 ## Install
@@ -155,6 +157,7 @@ ui/src/render        WebGL2 renderer, SDF passes and effect shaders
 ui/src/components    Editor UI
 ui/public/fonts      Bundled OFL fonts
 scripts              WASM build and end-to-end test
+website              Landing page (static; Vercel deploys it from main to morphotype.srivtx.xyz)
 ```
 
 ## Fonts and licences

website/.gitignore

@@ -0,0 +1,2 @@
+.vercel
+.env*

website/fonts/OFL.txt

@@ -0,0 +1,108 @@
+Bundled fonts — all licensed under the SIL Open Font License 1.1 (full text below).
+
+* Copyright 2017 The Archivo Black Project Authors (https://github.com/Omnibus-Type/ArchivoBlack)
+* Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+* Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk)
+* Copyright 2017 The Playfair Display Project Authors (https://github.com/clauseggers/Playfair-Display), with Reserved Font Name "Playfair Display".
+* Copyright 2015 The Rubik Project Authors (mail@hubertfischer.com)
+* Copyright 2018 The Pacifico Project Authors (https://github.com/googlefonts/Pacifico)
+* Copyright 2001 The Silkscreen Project Authors (https://github.com/googlefonts/silkscreen)
+* Copyright 2022 The Unbounded Project Authors (https://github.com/googlefonts/unbounded)
+* Copyright 2023 The Bungee Project Authors (https://github.com/djrrb/Bungee)
+* Copyright 2020 The Dela Gothic Project Authors (https://github.com/syakuzen/DelaGothic)
+* Copyright 2023 The Young Serif Project Authors (https://github.com/noirblancrouge/YoungSerif)
+* Copyright 2022 The Bricolage Grotesque Project Authors (https://github.com/ateliertriay/bricolage)
+* Copyright 2014 The Caveat Project Authors (https://github.com/googlefonts/caveat) (Caveat and Caveat Brush)
+* Copyright 2020 The Anton Project Authors (https://github.com/googlefonts/AntonFont)
+* Copyright 2017 The EB Garamond Project Authors (https://github.com/octaviopardo/EBGaramond12)
+
+Files are the Latin subsets distributed by Fontsource (https://fontsource.org).
+Young Serif, Bricolage Grotesque, Caveat and Caveat Brush are Latin subsets of the Google Fonts
+releases, converted to WOFF; Bricolage Grotesque keeps its weight and width
+axes with the optical size fixed at 96 pt.
+
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

website/index.html

@@ -0,0 +1,226 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>Morphotype · a type and logo lab</title>
+  <meta name="description" content="Morph one typeface into another, animate lettering, and render it as chrome, neon, glass or pixels, live on the GPU. For macOS, Windows and the web." />
+  <meta name="theme-color" content="#f3eee4" media="(prefers-color-scheme: light)" />
+  <meta name="theme-color" content="#121116" media="(prefers-color-scheme: dark)" />
+  <meta property="og:title" content="Morphotype · a type and logo lab" />
+  <meta property="og:description" content="Morph fonts, animate lettering, and render live GPU materials. For macOS, Windows and the web." />
+  <meta property="og:url" content="https://morphotype.srivtx.xyz/" />
+  <meta property="og:image" content="https://morphotype.srivtx.xyz/media/og.png" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <link rel="icon" href="/icon.png" />
+  <link rel="preload" href="/fonts/BricolageGrotesque-Variable.woff" as="font" type="font/woff" crossorigin />
+  <link rel="preload" href="/fonts/Silkscreen-Regular.woff" as="font" type="font/woff" crossorigin />
+  <link rel="stylesheet" href="/styles.css?v=3" />
+  <script type="module" src="/main.js?v=3"></script>
+</head>
+<body>
+  <header class="nav">
+    <a class="brand" href="#top" aria-label="Morphotype home">
+      <img src="/icon.png" alt="" width="34" height="34" />
+      <span>Morphotype</span>
+      <span class="version" data-version>v0.9.1</span>
+    </a>
+    <nav class="nav-links" aria-label="Sections">
+      <a href="#features">Features</a>
+      <a href="#made">Made with it</a>
+      <a href="#new">What’s new</a>
+      <a href="https://github.com/srivtx/morphotype" class="nav-gh">GitHub</a>
+    </nav>
+    <a class="btn btn-soft nav-cta" href="#download"><span class="os-label" data-os-label>Download</span></a>
+  </header>
+
+  <main id="top">
+    <!-- Hero: a live morph between our bundled fonts, drawn as pixels -->
+    <section class="hero">
+      <p class="eyebrow px">Type &amp; logo lab · macOS · Windows · Web</p>
+      <h1 class="headline">
+        Type that <mark class="hl">morphs</mark>,<br />moves and melts.
+      </h1>
+      <p class="lede">
+        Blend one typeface into another, set lettering in motion, and render it as liquid chrome, neon, glass or pixels, live on the GPU. Then export a real font.
+      </p>
+      <div class="cta-row">
+        <a class="btn btn-ink" href="#download" data-primary-download>
+          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5M2 12.5V15h12v-2.5" /></svg>
+          <span data-os-label>Download</span>
+        </a>
+        <a class="btn btn-soft" href="https://github.com/srivtx/morphotype">
+          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 .2a8 8 0 0 0-2.5 15.6c.4 0 .5-.2.5-.4v-1.5c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.4.7 0-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8a7.5 7.5 0 0 1 4 0c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.8-3.6 4 .3.3.6.8.6 1.5v2.2c0 .2.1.5.6.4A8 8 0 0 0 8 .2Z" /></svg>
+          Source on GitHub
+        </a>
+      </div>
+
+      <div class="stage" data-mode="pixel">
+        <canvas class="morph" aria-label="The word Morphotype morphing between typefaces, drawn as pixels"></canvas>
+        <div class="readout px" aria-hidden="true">
+          <span data-font-a>Bricolage</span>
+          <span class="arrow">→</span>
+          <span data-font-b>Playfair</span>
+          <span class="blend">blend <b data-blend>0%</b></span>
+        </div>
+        <div class="stage-controls">
+          <div class="pasito" role="tablist" aria-label="Material" data-modes></div>
+          <label class="try">
+            <span class="sr">Try your own word</span>
+            <input type="text" maxlength="12" placeholder="Type a word" spellcheck="false" autocomplete="off" data-word />
+          </label>
+        </div>
+      </div>
+    </section>
+
+    <!-- A fan of collectible cards, one per new animated poster, with real settings -->
+    <section class="deck" id="made">
+      <div class="section-head">
+        <p class="eyebrow px">The poster deck</p>
+        <h2 class="poster-head"><span class="w-puff">Puffy</span>, <span class="w-chrome">chrome</span>, <span class="w-glitch" data-text="pixel">pixel</span>. <br />Six posters from the app.</h2>
+        <p class="sub">Each card is a real template with its real settings. Point at one to tilt it, then click to turn it over.</p>
+      </div>
+      <div class="hand" data-hand></div>
+    </section>
+
+    <!-- Features with pixel icons -->
+    <section class="features" id="features">
+      <div class="section-head">
+        <p class="eyebrow px">What it does</p>
+        <h2>A whole type studio, <br />in one small app.</h2>
+      </div>
+      <ul class="feature-grid">
+        <li><i class="picon" data-icon="morph"></i><h3>Morph fonts</h3><p>Blend any two typefaces curve to curve. Letters stay on the baseline and x-height.</p></li>
+        <li><i class="picon" data-icon="motion"></i><h3>Motion timeline</h3><p>Entrances, loops, paths of stops and letter-by-letter text, edited on a timeline.</p></li>
+        <li><i class="picon" data-icon="spark"></i><h3>Live materials</h3><p>Chrome, glass, neon, holo, plush, riso and pixel, drawn by GPU shaders in real time.</p></li>
+        <li><i class="picon" data-icon="pen"></i><h3>Pen and shapes</h3><p>A pen that snaps where you mean it, plus a kit of shapes and stackable modifiers.</p></li>
+        <li><i class="picon" data-icon="font"></i><h3>Real fonts out</h3><p>Compile your lettering into an installable TTF, WOFF or a web font kit.</p></li>
+        <li><i class="picon" data-icon="kern"></i><h3>Kerning editor</h3><p>Drag letter pairs into place, with classes and exceptions written to GPOS.</p></li>
+        <li><i class="picon" data-icon="photo"></i><h3>Trace and pixel</h3><p>Trace pictures into vector marks, or turn them into pixel art with dithering.</p></li>
+        <li><i class="picon" data-icon="export"></i><h3>Export anything</h3><p>PNG, JPG, SVG, MP4 and WebM, exported at full quality and the same every time.</p></li>
+      </ul>
+    </section>
+
+    <!-- The reel: one scene at a time, over its real timeline -->
+    <section class="reel" id="motion">
+      <div class="section-head">
+        <p class="eyebrow px">Motion, frame for frame</p>
+        <h2>The timeline you edit <br />is the one that plays.</h2>
+        <p class="sub">Lines that draw themselves on, pixel badges that build back, vinyl that breathes. Under each scene are its real tracks: drag across them to scrub.</p>
+      </div>
+      <div class="reel-frame" data-reel>
+        <div class="reel-media"></div>
+        <button class="reel-nav prev" aria-label="Previous"><svg viewBox="0 0 16 16"><path d="M10 3 5 8l5 5" /></svg></button>
+        <button class="reel-nav next" aria-label="Next"><svg viewBox="0 0 16 16"><path d="m6 3 5 5-5 5" /></svg></button>
+        <div class="reel-bar">
+          <div class="pasito pasito-glass" role="tablist" aria-label="Scene"></div>
+          <button class="reel-play" aria-label="Pause"><svg viewBox="0 0 16 16"><path class="i-pause" d="M5 3v10M11 3v10" /><path class="i-play" d="M5 3l8 5-8 5z" /></svg></button>
+        </div>
+      </div>
+      <div class="reel-tl">
+        <div class="reel-meta"><p class="reel-caption"><b data-reel-title></b> <span data-reel-note></span></p><span class="tl-time px" data-tl-time>0.00 s · f0</span></div>
+        <div class="tl-dock" data-tl-dock>
+          <div class="tl-ruler" data-tl-ruler></div>
+          <div class="tl-rows" data-tl-rows></div>
+          <div class="tl-head" data-tl-head><i></i></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- The editor itself -->
+    <section class="editor" id="editor">
+      <div class="section-head">
+        <p class="eyebrow px">Two modes</p>
+        <h2>Design for logos and posts. <br />Type for whole fonts.</h2>
+      </div>
+      <div class="seg" role="tablist" aria-label="Mode">
+        <span class="seg-pill" aria-hidden="true"></span>
+        <button role="tab" aria-selected="true" data-shot="design">Design</button>
+        <button role="tab" aria-selected="false" data-shot="type">Type</button>
+      </div>
+      <div class="window">
+        <div class="window-bar" aria-hidden="true"><i></i><i></i><i></i></div>
+        <img src="/media/editor.webp" alt="The Morphotype editor with a frosted glass folder over 3D 404 lettering" width="1440" height="900" loading="lazy" data-shot-img />
+      </div>
+    </section>
+
+    <!-- Endless strip of stills -->
+    <section class="strip" aria-label="Templates made in Morphotype">
+      <div class="marquee" data-marquee="left"></div>
+      <div class="marquee" data-marquee="right"></div>
+    </section>
+
+    <!-- Changelog -->
+    <section class="new" id="new">
+      <div class="section-head">
+        <p class="eyebrow px">What’s new</p>
+        <h2>Version <span data-version-num>0.9.1</span></h2>
+      </div>
+      <ul class="changes">
+        <li><b>A motion editor.</b> A timeline dock with a row for every moving layer: drag to retime, click to edit.</li>
+        <li><b>A path of stops.</b> Then › Move to… goes on through any number of stops, each with its own wait and feel.</li>
+        <li><b>Letter by letter.</b> Text moves one letter or word at a time, without breaking it apart.</li>
+        <li><b>A kerning editor.</b> Drag pairs into place, with classes, suggestions and exceptions.</li>
+        <li><b>Smoother morphs.</b> Blended fonts are drawn curve to curve, with a third of the points.</li>
+        <li><b>Faster everywhere.</b> Home loads half the code, and moving shapes no longer stall the GPU.</li>
+      </ul>
+      <a class="link" href="https://github.com/srivtx/morphotype/releases">All release notes →</a>
+    </section>
+
+    <!-- Downloads -->
+    <section class="download" id="download">
+      <div class="section-head">
+        <p class="eyebrow px">Free and open source</p>
+        <h2>Get Morphotype.</h2>
+      </div>
+      <div class="platforms">
+        <a class="platform" data-platform="mac" href="https://github.com/srivtx/morphotype/releases/latest">
+          <i class="picon" data-icon="mac"></i>
+          <b>macOS</b>
+          <span>Universal .dmg for Apple silicon and Intel</span>
+          <em class="px" data-asset-name>.dmg</em>
+        </a>
+        <a class="platform" data-platform="win" href="https://github.com/srivtx/morphotype/releases/latest">
+          <i class="picon" data-icon="win"></i>
+          <b>Windows</b>
+          <span>Installer for Windows 10 and 11 (x64)</span>
+          <em class="px" data-asset-name>.exe</em>
+        </a>
+        <a class="platform" data-platform="web" href="https://github.com/srivtx/morphotype/releases/latest">
+          <i class="picon" data-icon="web"></i>
+          <b>Web</b>
+          <span>The same app as a static site, to host anywhere</span>
+          <em class="px" data-asset-name>.zip</em>
+        </a>
+      </div>
+      <p class="fine">
+        The apps aren’t signed yet. On a Mac, open it once from <b>System Settings → Privacy &amp; Security</b>. On Windows, choose <b>More info → Run anyway</b>.
+      </p>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <canvas class="wordmark" aria-hidden="true"></canvas>
+    <div class="foot-row">
+      <span>MIT licensed code · bundled fonts under the SIL Open Font License</span>
+      <span class="foot-links">
+        <a href="https://github.com/srivtx/morphotype">GitHub</a>
+        <a href="https://github.com/srivtx/morphotype/releases">Releases</a>
+        <a href="https://github.com/srivtx/morphotype/issues">Issues</a>
+      </span>
+    </div>
+  </footer>
+
+  <!-- Card inspector: the picked card, large, and its back -->
+  <div class="inspector" data-inspector hidden>
+    <div class="inspector-backdrop" data-close></div>
+    <div class="inspector-stage" data-stage></div>
+    <div class="inspector-bar">
+      <button class="ibtn" data-prev aria-label="Previous card"><svg viewBox="0 0 16 16"><path d="M10 3 5 8l5 5" /></svg></button>
+      <button class="ibtn wide" data-flip><span class="px">Turn over</span></button>
+      <button class="ibtn" data-next aria-label="Next card"><svg viewBox="0 0 16 16"><path d="m6 3 5 5-5 5" /></svg></button>
+      <button class="ibtn" data-close aria-label="Close"><svg viewBox="0 0 16 16"><path d="m4 4 8 8M12 4l-8 8" /></svg></button>
+    </div>
+  </div>
+</body>
+</html>