Email API SaaS Template Template
A complete one-page landing site for a transactional email API, set like airmail stationery: outbound letters fly into the hero's sorting tray on a timed stream, filterable by email type, each one openable to its delivery report and frankable DELIVERED with a rubber-stamp thunk.
About This Template
A production-ready one-page landing site for a transactional email API or any developer-infrastructure SaaS. The fictional brand is Franked, a sending API in the one-call-and-it-arrives category: developers POST a message, the service handles authentication, throttling and the mailbox providers, and deliverability is the product. The page sells it in dry, precise, postal-register English: a hero with trust stats set like form fields, three letters pinned as this morning's traffic, a deliverability ledger of inbox placement by provider, a three-step form from DNS records to a delivery receipt, a two-tariff fee schedule priced per thousand emails and a native-details FAQ.
The art direction is airmail stationery worn lightly: powder airmail-blue paper, deep navy ink, the classic red-and-blue par-avion pairing, chevron airmail borders on the tray and footer, with Arvo slab headings, IBM Plex Sans body and Source Code Pro for everything typed: message-ids, addresses, DNS records and the API call itself. There is no photography anywhere. The signature is the sorting tray: outbound emails, each a designed paper letter with message-id, from and to addresses, subject, type chip and timestamp, fly into the hero's tray on a timed stream and land with the rotation and settle of real paper. Filter chips retarget what flies in, hovering or focusing lifts a letter, pressing its subject opens the delivery report, and Frank it thunks a circular red DELIVERED postmark onto the paper.
Everything degrades on purpose. The markup ships the tray as a plain readable list of four emails, so with JavaScript off or reduced motion on every word is still there; the script only upgrades it. To make it yours, rename the brand, edit the email stream (one JavaScript array), rewrite the tariffs and repoint two mailto links. The palette is five tokens with RGB triples, so a reskin is a five-value edit. Deploy it as static files; there is no build step.
What's Included
- Complete deployable one-page site: sticky masthead with gazette double rule, split hero, pinned letters, deliverability ledger, three-step form, fee-schedule pricing, FAQ, footer
- Signature sorting tray: outbound emails fly in on a timed stream and land with paper physics, slight rotation, an overshoot settle and a 2px dip as the pile takes the weight
- Every email is a designed paper letter: perforated top edge, mono message-id, type chip, from and to addresses, subject, timestamp and status, no images anywhere
- Filter chips (All, Receipts, Magic links, Digests, Alerts) sweep the pile out and deal a fresh hand of the chosen type
- A Frank it button thunks a circular red DELIVERED postmark onto the letter: scale-down fall, slight rotation, and the paper shakes under the hit
- Letters open on click or Enter to show the delivery report: provider, hand-off time in milliseconds, SPF and DKIM results, opens; hover and keyboard focus lift the paper the same way
- Pause and play control for the stream, with the arrival interval and pile cap tunable from two data attributes on the tray
- The email stream is one plain JavaScript array: message-id, from, to, subject, type, timestamp, size, status and a one-line delivery report per letter
- Deliverability ledger with ink-stroke bars that scale in from the left margin while inbox-placement percentages count up in Source Code Pro
- Three-step form with typed panels: DNS records set like form rows, a styled curl call, and a delivery receipt
- Par-avion chevron borders in airmail red and blue on the tray edge and footer, drawn entirely in CSS
- Ships as a plain readable list without JavaScript: nothing on the page is hidden behind an ungated start state
- Reduced motion gets the complete static page via both the CSS media query and the matchMedia branch; filters, opening and franking still work, instantly
- Five-colour token block with RGB triples and a measured contrast table in the stylesheet header, so a reskin is a five-value edit
- Sections are independent: every selector is guarded, so the pinned letters, ledger or pricing can be deleted and the rest keeps working
- Lenis smooth scrolling wired in and fully optional, sharing one clock with ScrollTrigger
Perfect For
- Transactional email, SMS and notification API products
- Developer-infrastructure SaaS priced per unit: queues, webhooks, logging, hosting
- Data products whose pitch is a live feed of events flowing through a system
- Any B2B SaaS that wants an editorial, print-flavoured identity instead of the dark-terminal developer-tool look
- Learning composed GSAP timelines: flight, settle, frank and sweep sequences driven by one delayed-call stream
How It Works
Structure
One script initialises everything inside a single gsap.context, with gsap.matchMedia keyed on reduced motion so exactly one branch runs on every device. Every querySelector is guarded, so any section, the pinned letters, the ledger, the whole pricing block, can be deleted and the rest keeps working. Reveal start states are double-gated behind a has-js class and the motion media query, so a blocked CDN or a reduced-motion preference both leave a complete static page.
The sorting tray
The markup ships four letters as a plain list; the motion branch upgrades it to a live pile and starts a recursive gsap.delayedCall stream. Each arrival is a two-beat timeline: an accelerating fall with slight rotation, then an elastic settle onto the letter's own resting jitter, while the pile dips 2px under the weight. The DOM is capped, six letters by default, and retired nodes go into a pool and are reused rather than re-created. Interval and cap are data attributes on the tray element.
The delivered frank
Frank it adds a class, flips the button to aria-pressed, and drops the circular postmark in two parts: the frank itself scales down from 2.6 with a power4.in fall, then the letter takes the hit, a brief scale dip and an elastic shake back to its resting rotation. The postmark element is decorative and aria-hidden; the state change is announced by the button. Under reduced motion the frank simply appears.
Filters and the ledger
Filter chips sweep the current pile off to the left on a stagger, then deal three letters of the chosen type back in. All interaction handlers are delegated on the stack, four listeners in total, so streamed letters need no wiring. In the ledger, the ink bars pre-hide at scaleX(0) in gated CSS and the tween finishes the same property, while the placement percentages count up from proxy objects and print through toFixed.
Without JavaScript
The page is designed to be complete before the script arrives: the tray is a readable list of four emails, every delivery report is visible, the ledger bars are full width and every figure is printed in the markup. JavaScript folds the reports away only after adding its own class, so nothing is ever hidden that the script cannot unhide. Reduced motion keeps the whole page static but fully interactive.