030
Optional AI setup

Email API SaaS Template

£10

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.

ScrollTrigger Lenis intermediate
6 more details
scroll-revealstaggercount-uphover-effectclick-toggletimeline-control
Email API SaaS Template - website template preview

This template reads better at your own screen size than in the frame below:

Open the template in a new tab
Open Email API SaaS Template demo in new tab

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.

Read the full template overview

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

16 items
  • 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 script's own motion 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

5 use cases
  • 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

5 sections

Structure

One script initialises everything with a single setup and teardown path, and one motion branch 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 self-scheduling stream of arrivals. 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 drops in hard from well above the letter, 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.

Plugins ScrollTrigger
Difficulty Intermediate
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Questions about this template

Is the letter stream connected to a real email service?

No. It is one plain JavaScript array of message-ids, addresses, subjects, types, timestamps and delivery reports, replayed on a timer. It looks like a live feed because that is the pitch the section is making, but you are editing an array, not reading an API.

Why does it look like airmail stationery rather than a developer tool?

Deliberately, and it is the reason to pick it. Developer-infrastructure sites converge on the same dark-terminal look. This one sets the product as postal stationery with par-avion chevrons, perforated letter edges and a rubber DELIVERED postmark, which is differentiation you cannot get from another dark hero.

Can I use it for a product that isn't email?

Yes, for anything priced per unit with events flowing through it: queues, webhooks, logging, hosting, SMS, notifications. The sorting tray is really a live event feed, and the fee-schedule pricing and three-step integration form transfer unchanged. The postal metaphor is the part you would need to want.

How do I tune how fast the letters arrive?

Two data attributes on the tray set the arrival interval and the pile cap, so you do not touch the timeline code. There is also a pause and play control on the stream, which doubles as the reduced-motion default.

Is anything hidden if the animation does not run?

No. It ships as a plain readable list without JavaScript, with nothing behind an ungated start state. Under reduced motion filters, opening a letter and franking it all still work, they just happen instantly.

Paid template

Purchase to unlock the code.

Buying Email API SaaS Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£10 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

  1. Copy the folder to your web server. There is no build step; it deploys as static files.
  2. Open index.html and replace the copy: brand name, headline, stats, tariffs, FAQ answers, footer address.
  3. Open assets/script.js and edit the LETTERS array at the top. Each entry is one email in the stream: message-id, from, to, subject, type, timestamp, size, status and a one-line delivery report.
  4. Repoint the two mailto:hello@franked.example links in the pricing section at your own sign-up flow.

The pages load GSAP, ScrollTrigger and Lenis from CDNs in the closing <body> tags. Lenis is optional; delete its tag and the site falls back to native scrolling.

Files

Code snippet omitted: it ships with the download.

Sections

Every section is independent. The script guards all of its selectors, so you can delete any of these blocks from index.html and everything else keeps working.

Section id Notes
Masthead none Sticky, gazette double rule. Anchor links hide under 760px; the CTA stays.
Hero and sorting tray #top The signature. See below.
Just sent #sent Three static letters pinned to the board. Duplicate an <li> to add more; the tilt comes from nth-child rules in the CSS.
Where your email lands #deliverability The ledger. Each row's bar width is the inline --w custom property; the counting figure reads data-count, data-prefix, data-suffix.
How it works #how Three numbered steps styled as form fields, each with a typed panel: DNS rows, a curl call, a delivery receipt.
Postage #tariffs Two fee-schedule cards. The .stamp element on the free card is decorative and safe to delete.
FAQ #faq Native <details>, no JavaScript involved.
Footer none The chevron strip and franking mark are pure CSS; the mark is aria-hidden.

The sorting tray

The markup ships four letters as a plain list, which is exactly what readers without JavaScript (and search engines) get. When the script runs and motion is allowed, the list becomes a live pile:

  • A new letter flies in every few seconds, falls with slight rotation, and settles with an elastic overshoot while the pile dips 2px under the weight.
  • Filter chips sweep the pile out and deal a fresh hand of the chosen type. A chip's data-filter value must match the type field of the letters it should catch. To add a type, add a chip and give some LETTERS entries that type key.
  • Hover or keyboard focus lifts a letter slightly off the pile.
  • Click or Enter on the subject opens the letter's delivery report; the open letter is raised above the pile and is never recycled while open.
  • Frank it thunks the circular red DELIVERED postmark onto the paper and flips the button to its pressed state.
  • Pause stops the stream; it is also the accessible control required for auto-updating content.

Options

Set these on the tray element in index.html:

Attribute Default Description
data-tray-interval 3.4 Seconds between arrivals
data-tray-max 6 Letters kept in the pile; older ones are recycled into a node pool

The flight distance adapts to the stack height, so changing the tray's CSS height needs no script edits.

Reveal animation

Add data-reveal to any element to give it the standard rise-and-fade on scroll. The start state lives in style.css, double-gated behind html.has-js and prefers-reduced-motion: no-preference, so never add the hidden state yourself.

Palette

The whole scheme is five colours in :root at the top of assets/style.css, each with a matching --*-rgb triple. Every translucent value in the stylesheet derives from those triples, so a reskin is editing five hexes and five triples, nothing else:

Code snippet omitted: it ships with the download.

The measured contrast table is in the stylesheet header comment. Two constraints to keep when repainting:

  • --stamp measures 4.31:1 on the ground, below the 4.5:1 body-text floor. Keep it to franks, display-size accents and graphic fills, never small type on --paper.
  • Body copy is --ink-dim at 6.63:1 on the ground; darkening the ground or lightening the dim ink eats that headroom.

Accessibility

  • Respects prefers-reduced-motion through both the CSS media query and the gsap.matchMedia branch: no stream, no flights, instant franks, and the complete page visible. Filtering, opening and franking all still work.
  • Every hover interaction has a keyboard mirror: focus lifts a letter exactly as hover does, and all controls are real <button> elements with aria-pressed / aria-expanded state.
  • The stream has a pause control, and the postmark graphics are aria-hidden; state changes are announced by the buttons themselves.
  • With JavaScript disabled the page is a complete, readable document: the tray renders as a plain list with every delivery report visible.
  • A skip link jumps past the masthead to the content.

Browser Support

Modern browsers (ES6+). Not compatible with IE11.

Dependencies

  • GSAP 3.12+
  • ScrollTrigger plugin
  • Lenis (optional, for smooth scrolling; the site works without it)

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.