This page lists all 58 animated website templates in the vault. Every one is a complete, deployable site rather than a component demo: real art direction, real content already written, and one signature interaction built with GSAP that the whole page is designed around. Four of them are completely free, with live demos you can open below.
If you are still working out what an animated template actually gives you, and how it differs from a CMS theme or a framework starter kit, the GSAP templates guide covers that first. This page is the full list.
Here are the facts if you want the short version. There are 58 templates. Four are free. Every template is plain HTML, CSS, and JavaScript with no build step, no bundler, and no framework. Every one loads GSAP from a CDN, handles prefers-reduced-motion with a complete static fallback, and stays usable with JavaScript switched off. Paid templates are £10 each, and all of them are included in the Vault.
Templates are grouped below by what kind of site you are building. Each group has its own page with a comparison table, a customisation walkthrough and its own FAQ, linked from the section heading, so you can go deeper on whichever group fits.
Table of contents
- What is an animated website template?
- The four free templates
- Portfolio and personal sites
- Agency and studio sites
- Business and service sites
- Events, venues, and hospitality
- Commerce and product sites
- Landing pages, SaaS, and campaigns
- Editorial and long-form
- App and dashboard interfaces
- How to choose one
- How deployment works
- Pricing and licensing
What is an animated website template?
An animated website template is a ready-to-deploy web page whose layout, styling, and motion all ship together and are already wired up. A static theme arrives flat and leaves the animation to you. An animated template arrives with its scroll effects, hover states, and transitions built and tuned. You swap in your own text, images, and links, then publish.
The templates here go one step further than that. Each one is built around a single signature interaction that carries the page: a nail studio that paints a photographed hand coat by coat, a food truck that drives along its route to the day you pick, a brewery whose can you spin with your finger. That interaction is chosen for the business, not bolted on, which is what separates these from a theme with a fade-in on every section.
They are also composed from effects that already exist as standalone products. The hover image trail, the count-up stats, the horizontal scroll section: these are shipped, documented effects in the effects library. Seeing several of them share one gsap.context and one gsap.matchMedia on a real page teaches you more than any isolated demo does.
The four free templates
Four templates are free, MIT licensed, and downloadable without an account. They are also mirrored in the free GitHub repo. If you want to judge the code before spending anything, start here: these are built to the same standard as the paid ones, not cut down.
Coming Soon Template
A single-screen holding page dressed as an independent picture house. A projector beam rakes across a dark auditorium, a house light wanders the room, and the countdown is an Academy leader whose sweep hand turns continuously while the day count cuts once a day. It fits on one screen and never scrolls on desktop, so it works as a launch page for a venue, a store opening, or a waitlist. Notably it uses no GSAP plugins at all, just the core library over canvas and blend modes. View the Coming Soon Template.
Charity Campaign Template
A one-page fundraising appeal written as a river-restoration trust, built around a draggable before/after comparator: a gauge-board divider wipes between the degraded river and the restored one. Every figure on the page counts up like a reading rather than a marketing stat, donation tiers are priced in metres of bank and tonnes of gravel, and the donation form words out exactly what each amount buys. Uses ScrollTrigger and Draggable. View the Charity Campaign Template.
Link in Bio Template
A creator profile page whose link cards toss onto the screen like stickers landing on a desk. They drag anywhere with real momentum and tween back into a neat stack when you press “Tidy up”, while a tap always just opens the link, which is the hard part of making a draggable card also be a button. Avatar, bio, link stack, and one feature slot for whatever is newest. Uses Draggable and InertiaPlugin, no ScrollTrigger. View the Link in Bio Template.
QR Table Menu Template
A phone-first digital menu made to open from a QR code on the table. A sticky category bar crossfades between sections and dietary chips filter every dish at once. It is deliberately a functional artifact rather than a marketing site: compact header with hours and Wi-Fi, four menu sections, allergen note in the footer. Changing the menu means editing list markup, not a design. View the QR Table Menu Template.
Portfolio and personal sites
Templates for showing your own work. These eight cover studio portfolios, developer sites, photography, CVs, and link pages. Browse them as a grid on the portfolio website templates page.
Creative Portfolio Template
The archetype: a one-page studio portfolio composed from six GSAP Vault effects on a Klein blue hero slab with editorial serif typography and poster-style project artwork. A masked SplitText hero reveal, a seamless client logo marquee, a grid-aware stagger on the work cards, pinned horizontal case studies with a scrub progress bar, count-up stats, and magnetic buttons. Reduced motion gets a complete static page with the horizontal panels stacked vertically. The best template to open first if you want to see how the effects library composes. View the Creative Portfolio Template.
Architecture Studio Template
A site for an architecture practice, art-directed as a drawing office: cool concrete grey, ink, one drafting orange, and an expanded grotesk set in caps. The signature is a scroll-scrubbed blueprint hero that draws a building elevation in orange linework and then crossfades into the finished photograph. Below it sit a project index with live preview swaps, count-up stats, and a parallax featured project. Suits engineering studios and conservation specialists as readily as architects. View the Architecture Studio Template.
Resume Template
A personal CV site that morphs between two layouts. A Flip-driven toggle reflows the entire page from a spacious web resume into an A4 document, backed by a real print stylesheet, so the site is also the PDF. The art direction is a document lying on a desk: deep indigo ground, warm cream sheet, graphite type, one highlighter yellow used only to mark the lines that matter. One link that works for both a hiring manager and a printer. View the Resume Template.
Developer Portfolio Template
A one-page portfolio for a solo engineer, built around a workbench panel where each snippet types itself out character by character while the preview beside it builds, then runs the exact code you just read. It is deliberately art-directed away from the dark terminal cliché: a warm graphite ground, raised panels, one ember accent, and a high-contrast serif carrying the headlines instead of the monospace every other developer site reaches for. View the Developer Portfolio Template.
Photography Portfolio Template
A photographer’s site art-directed as a gallery wall rather than a portfolio grid: a mid-tone cool slate ground, no accent colour anywhere, so the only chroma on the page comes from the photographs. The signature is a loupe, a circular magnifier that tracks the cursor across a desaturated contact sheet and is the only place colour appears. Structured the way photographers actually present work: full-bleed hero, contact-sheet index, two long-form series at scale, practice statement, print editions. View the Photography Portfolio Template.
Podcast Show Template
A site for a podcast or interview show whose hero is a working control rather than a headline over a photograph. The page opens on the latest episode’s waveform at full width, drawn from a real peak array and scrubbable with mouse, finger, or keyboard, with chapter markers along it. Deep wine ground, one hot pink accent. Works for radio shows, mixtape series, and any audio archive where chapters matter more than a play count. View the Podcast Show Template.
Link Hub Template
An editorial link-in-bio page for a model or lifestyle creator, styled like the contents page of a magazine rather than a stack of rounded buttons. A Didone contents index whose cover images follow the cursor and cross-fade as you move down the list, on a glossy warm-black ground with a single champagne accent. Four complete palettes ship as a persona switcher. The paid counterpart to the free Link in Bio Template above, for when the page has to look like a book. View the Link Hub Template.
Interior Design Studio Template
A site for a small interior design and renovation studio on a warm greige ground, with a draggable before/after slider that wipes the redesigned room over the bare original. The single burnt-sienna accent is held back for links, one primary button, and small markers, so the rooms themselves carry the colour. Equally suited to build firms, home staging, and property styling: any practice whose case for itself is the difference between two photographs. View the Interior Design Studio Template.
Agency and studio sites
Four templates for practices that sell creative work to other businesses. Each ships as a finished site for a fictional studio with real engagement types, plain price bands, and honest timelines already written, so what you open reads as a working business rather than a grid of placeholder headings.
Web Design Agency Template
A one-page site for a studio that designs and builds websites for other people, built around a browser mockup that scroll-scrubs through three stages of a real project: wireframe, then structure, then the finished thing. Services lead with plain price bands and timelines rather than “get in touch”, and the whole page is keyed to one brand colour you swap in a single place. Uses ScrollTrigger, SplitText, DrawSVG, and Flip together. View the Web Design Agency Template.
Branding Studio Template
An editorial site for a brand and identity studio: a contents index of typographic plates you throw sideways with a finger, display headings cut in a variable serif that arrive light and set themselves once as they come into view, and a featured project laid out as a proper article with a drop cap, marginalia, and numbered notes. Four measured palettes ship. The right pick for a studio whose output is typographic rather than photographic. View the Branding Studio Template.
Advertising Agency Template
A one-page site for a full-service ad agency, opening on a hero whose background is a pinned, scroll-scrubbed image sequence of location photography. Below it, a capabilities marquee skews in proportion to how fast the visitor is scrolling right now, tracked live with the Observer plugin. Six campaign case studies with results stats, a CSS-only discipline filter, and a written process rail sit either side. The heaviest motion build in the library, on a deep aubergine-black ground. View the Advertising Agency Template.
Recruitment Agency Template
A site for a specialist hiring studio, pairing candid editorial art direction with a kinetic talent-network hero and live Flip-powered role matching: pick what you are looking for and the role board reorders itself in place rather than reloading. A scroll-drawn three-step method, candidate stories, and a full employer brief dialog complete it. The chartreuse ground, deep navy type, and hand-stamped data marks keep it human without turning recruitment into a joke. View the Recruitment Agency Template.
Split Screen Template
A site for an industrial design studio, built on two committed full-height fields — ochre and near-black — with the headline straddling the seam between them and knocked out in both directions. Scroll drives the two halves in opposite directions, and the seam itself is draggable: pull it and the fields re-weight, the headline’s tracking tightens, and released near an edge it carries out to a near-full-bleed extreme. Selected work is dealt one plate at a time from the seam line in a pinned stage, and the seam bends toward the cursor on a fine pointer. Uses ScrollTrigger and Draggable. View the Split Screen Template.
Layered Depth Template
A site for a spatial and exhibition design practice, composed as stacked translucent planes at a slight perspective that tint and cast onto each other. The signature is a pinned depth pass: scroll pushes each plane through Z toward you until it fills the frame and breaks every edge, then dissolves past the camera as the next resolves behind it, with the oversized counter, the raking light and each plane’s tint all reacting to the same scroll. The whole stack tilts toward the cursor, and clicking any plane flattens it out of the stack to full-bleed and beds it back with a settle. Uses ScrollTrigger and Flip. View the Layered Depth Template.
Business and service sites
Nine templates for practices and service businesses that sell expertise, sessions, or projects. Every one of them refuses its category’s visual default on purpose. Browse them on the business website templates page.
Wellness Studio Template
A site for a yoga, pilates, or movement studio that commits to a saturated clay ground with cream type and deep pine contrast blocks, instead of the timid beige and sage the category always lands on. A full-week class timetable does the practical work, and the signature is an interactive 4-7-8 breath guide: an SVG that expands, holds, and contracts on a real timeline you can start and stop. View the Wellness Studio Template.
Real Estate Template
The first genuinely multi-page template in the library: a home page, a filterable register of listings, a full property detail page, and a practice page, all sharing one nav, one stylesheet, and one script. The signature is a GSAP Flip shared-element transition that carries a listing photograph across a real page navigation into the property hero, so the click feels like a zoom rather than a reload. Also the right structure for developers with unit pages, or any practice with a project index. View the Real Estate Template.
Barber Shop Template
A barber shop site with no poles, no crossed razors, no gold script, and no dark wood. It runs on an aubergine ground with oat type, one burnt orange accent, and a heavy slab display face, so it reads as a modern graphic identity rather than a vintage pastiche. The signature is a three-step booking flow with a running summary: pick a barber, a service, and a time, and watch the total assemble. Reusable for any appointment business where the customer picks a person. View the Barber Shop Template.
Nail Studio Template
A one-chair nail studio site that refuses blush pink, gold gradients, and script lettering outright. Butter ground, near-black type, a single lacquer red, and every other colour on the page comes from the shade library itself. The signature is a live shade try-on that paints a photographed hand coat by coat using SVG filters. Genuinely re-pointable: any business whose product is a colour or a finish, including paint, tile, textiles, hair colour, and framing. View the Nail Studio Template.
Strength Gym Template
A site for a barbell club or strength gym, laid out as a training block rather than a class timetable. The signature is a one-rep-max calculator that prescribes every week of a twelve-week programme from a single number and draws the plates you actually have to load on the bar. Built for gyms that sell the programming rather than a class list, and for independent coaches selling a written programme. View the Strength Gym Template.
Tattoo Studio Template
A studio one-pager art-directed like the studio’s own wall: a dried-blood brick ground, flash sheets as bone-paper panels pinned to it, and a blackletter display face doing the sign-writing. Pick a design off the flash sheet and its linework inks itself stroke by stroke with DrawSVG, black lines first, red packed in last. Photography ships as bundled WebP baked to one high-contrast black and white grade. Works for anyone selling a priced set of designs. View the Tattoo Studio Template.
Online Course Template
A one-pager for selling a single course from one credible instructor, built around a draggable pace planner: set your hours per week and the curriculum re-packs itself into real weeks with a live finish date, which answers the only question a buyer actually has. The subject is cyanotype printing and the art direction is the subject itself, a saturated cobalt with white botanical silhouettes. No photographs anywhere, so nothing needs sourcing or licensing. View the Online Course Template.
Financial Planner Template
A site for a human financial planning practice, presented with a deep-ocean ground, warm ledger surfaces, a fresh chartreuse signal colour, and plain-English copy rather than market tickers or dashboard theatre. The signature is a draggable life-plan timeline that redraws an illustrative projection and updates the planning conversation live as you move retirement earlier or later. Authored diagrams throughout instead of stock photography. View the Financial Planner Template.
Holiday Let Template
A site for one owner-run holiday cottage or cabin, laid out as an almanac rather than a brochure. The signature is a draggable date-range availability calendar that refuses to span nights already taken and prices every night on its own season, so a guest sees the real total before they enquire. Built for owners taking direct bookings and escaping platform commission: cabins, shepherd’s huts, guest annexes, lodges. View the Holiday Let Template.
Events, venues, and hospitality
Ten templates for places and dates: festivals, venues, restaurants, and bookable experiences. The free QR table menu above and the holiday let below belong to this group too. Browse the lot on the events and hospitality templates page.
Music Festival Template
A three-day festival site built on a monochrome editorial system with one restrained oxblood accent, rather than the futuristic interface the category defaults to. An oversized hero title sits above a CSS-drawn turntable whose vinyl can be paused or switched between 33 and 45 RPM. Below it: accessible lineup filters, nightly timetables, a selectable venue gallery, a sponsor logo system, tickets, and practical information. Also a good fit for tour dates and conferences with a bolder personality. View the Music Festival Template.
Restaurant Template
A restaurant site art-directed as a candlelit room: near-black green, candle gold, cream serif type, and moody duotone photography. The hero opens on a full-bleed photograph with a wide-tracked wordmark settling low in the frame, and the signature is the tasting menu itself, where drawing the cursor across the courses conjures a trail of tinted dish photographs that follow the pointer. Suits supper clubs, chef residencies, and private dining rooms. View the Restaurant Template.
Cocktail Bar Template
A 1920s speakeasy on a deep teal-black ground with brass deco linework and cream type in a geometric deco face. Jade appears only where a drink is poured. The signature is a build-your-cocktail glass that pours coloured liquid layers as you pick a base spirit and mixers. It refuses both the velvet-and-neon default and the dark-with-one-glow look, and reads as a designed venue on first open. Re-points to juice bars, natural-wine rooms, and distilleries. View the Cocktail Bar Template.
Food Truck Template
A street-food truck site painted like the van itself: hot chilli red with cream signwriting, mustard for badges, and a griddle-smoke brown wherever dense text needs a quieter surface. Pick a day of the week and the van drives along an illustrated route to that day’s pitch with MotionPathPlugin, wheels turning, exhaust puffing on arrival, each pin revealing a photo of its location. Seventeen bundled photographs share one warm grade baked into the pixels. Any business with a where-are-we-today question can use it. View the Food Truck Template.
Wedding Template
A wedding one-pager with exactly one job: getting guests to RSVP. No script lettering and no wall of stock photography. The page is a stationery suite, a champagne envelope lining as the ground with near-white card stock for the invitation plate, and the reply card writes itself in typewriter text then posts itself in an envelope on submit. Three more complete palettes ship in the stylesheet as a one-attribute swap. Works for any invitation-and-reply event. View the Wedding Template.
Theatre Venue Template
A repertory theatre site with an oxblood playbill identity, built from the material language of printed theatre: deep-stage red-black, ticket ivory, and a literate display serif. The signature is a production selector whose stage curtains close, change the show at full cover, then open into a settling house-light glow. The structure is theatrical rather than event-like: an asymmetric poster-and-stage hero, a season ledger, visit rows, and supporter membership. View the Theatre Venue Template.
Art Gallery Template
A contemporary gallery’s current-exhibition site on a cool white ground with a single vermilion, the way a real white-cube space lets the work carry the colour. The signature is a walk-the-wall exhibition: the section pins and vertical scroll pans a hang of CSS-drawn artworks sideways, with a medium filter that re-hangs the wall using Flip. Suits museums, kunsthalles, and artist-run spaces presenting a single show. View the Art Gallery Template.
Travel and Tour Template
A site for a small-group walking-holiday operator, built for the one thing a tour company must sell first: the shape of the journey. An interactive itinerary map draws its route line in as you move through the days. Saturated lagoon teal with cream type and a single coral accent, carrying warm, people-first photography bundled as optimised WebP with the brand’s grade baked in. Fits treks, sailing, expeditions, retreats, and food or wine tours. View the Travel and Tour Template.
Observatory Template
A site for a public observatory or planetarium, built around scroll-drawn constellations: hand-plotted star maps that DrawSVG connects line by line as each section arrives, over a three-layer parallax starfield. Deep blue-violet night, star-white type, one moonlight gold, and not a single photograph anywhere, because the sky is the imagery. The page sells a real evening: a stargazing programme, telescope hire, dark-sky etiquette, and membership tiers. View the Observatory Template.
Sports Club Template
A matchday site for a semi-professional club, painted edge to edge in one saturated kit colour with the club name set at poster scale across a full-bleed photograph. The signature turns a plain results list into an instrument: throw the draggable season scrubber and the scoreline, points, league position, form guide, and position curve all answer to the same finger. Membership is priced like a league table. Re-points to rugby, cricket, hockey, running clubs, and esports teams. View the Sports Club Template.
Poster Grid Template
A one-page site for a poster biennale, set on a twelve-column grid that is printed on the page rather than hidden behind it. On load the column rules draw themselves in as measured spec-drawing rules, dimension labels tick up to their printed values, and the headline sets itself column by column instead of fading in. The plate wall reflows between four fixed compositions when you click a sheet, with the rules redrawing to match, and a marginalia rail down the outer margin tracks your position in millimetres. Three colours, two faces, and every photograph baked to a hard ink-red duotone. Uses ScrollTrigger and Flip. View the Poster Grid Template.
Commerce and product sites
Seven templates built around selling something. Browse them on the commerce and product templates page.
Product Launch Template
A launch site for drinks, snacks, cosmetics, or anything that ships in a box, with a sunny CPG art direction: saturated golden ground, thick ink linework, cream CSS-drawn product cans, and sticker-sheet cards. The headline pops in word by word with an elastic bounce over rising fizz, a rotating badge spins in the hero, and the signature is a pinned flavour switcher where the can stays put while the entire section retints to each flavour’s colour as its panel scrolls past. View the Product Launch Template.
Fashion Drop Template
A stark one-page drop site for a limited clothing release, built entirely around urgency. A live countdown runs in both the hero and a sticky bar, a draggable lookbook card deck throws with momentum, the product grid is scarcity-driven, and a first-access waitlist closes it. Cold near-black ground, off-white stencil display type, one signal red, and every photo pulled into the same campaign by a high-contrast desaturated treatment. Uses Draggable and InertiaPlugin. View the Fashion Drop Template.
Coffee Roaster Template
The first multi-product commerce template in the library, and it refuses the kraft-brown-and-tan packaging look entirely: a deep espresso ground with oat type, a single acid-green accent, and a mono face carrying nothing but roast data. The signature is a working demo basket with a fly-to-basket arc, grind selection, and a live subtotal. Built for any independent shop with a short curated range rather than a catalogue: tea merchants, bakeries, delis, farm shops. View the Coffee Roaster Template.
Bookshop Template
A neighbourhood bookshop one-pager art-directed like the shop itself: a warm kraft-paper wall, cream pages, near-black ink, and one rubber-stamp red that only ever behaves like a rubber stamp. The signature is a spine wall, a shelf of art-directed CSS book spines where pulling one tips the book out in 3D and opens it on the table below, cover and staff blurb on facing pages. Four colour-graded photographs show the shop in use. Suits record shops, game stores, and small presses. View the Bookshop Template.
Craft Brewery Template
A brewery and taproom site built like the building it brews in: a cool gunmetal shell with stencilled mono labels and a raw-concrete band, against which the cans are the only saturated objects on the page. The hero is the signature: an oversized can front and centre, draggable to spin with momentum, and picking a beer retokens the whole page to that label’s colours. Every image is designed SVG, down to the taproom floor plan, so there is no photography to license. View the Craft Brewery Template.
Record Label Template
An independent record label site on a committed magenta ground, with an oversized CSS-drawn vinyl disc bleeding off the hero edge and the stacked wordmark crossing its rim. The signature is the pressing rack: click a sleeve and its record slides out, then drag the disc to actually spin it, with real inertia, a light-fixed sheen, motion blur at speed, and a tiny elastic wobble as it stops. Every sleeve is a designed CSS treatment rather than placeholder art, the roster is a type-led index with alternating alignment, and the whole page reskins from one token block. View the Record Label Template.
Fine Jewellery Template
A made-to-order jewellery house that ships as two pages, with a full twelve-piece shop page alongside the main site, filtered by category with a GSAP Flip reflow that degrades to the complete product list without JavaScript. Every piece on both pages carries an add line, and the selection slides out as a jeweller’s docket held in localStorage and shared across the two pages. It is honest about being front-end only: the checkout is a marked stub that takes no payment, and the README documents where to wire your own provider. It refuses the palette every jewellery site defaults to, so there is no serif, no cream and no brass anywhere, just a cold silver ground, smoke ink and a single malachite accent, which leaves the metal in the photographs as the only warm thing on the page. The hero runs one macro ring at over half the window width, cropped by the top and right edges and blended into the ground so it sits on the field rather than in a box. The signature is the rake light: sweep the pointer across a piece lying in near darkness and one input moves four things at once, lifting its exposure, throwing a specular streak ahead of the light, swinging the cast shadow the other way, and warming the lit region as it passes. Whip it and the shadow overshoots while the streak smears, then it eases back into a slow idle drift. Uses Flip. View the Fine Jewellery Template.
Landing pages, SaaS, and campaigns
Six of them: one four-page site, two vertical-agnostic one-pagers, two built specifically for developer-infrastructure products, and one for creative AI tools. The free coming soon and charity campaign pages above belong here too. Browse the lot on the landing page templates page.
Multi-Page SaaS Template
The only template here that is a whole site rather than a single page, and the one to reach for when a one-pager has run out of room. Home, product, pricing and changelog are four real HTML files linked by real hrefs, but clicking one never reloads the browser: the next page is fetched, only the main column is swapped, and the header, the open mega menu, the scroll position engine and the light or dark theme you picked all carry straight across. That persistence is the whole point, and it is the thing a full page load cannot give you. The chrome is built to match: a mega menu whose single panel measures the incoming columns and tweens its own box to them while the outgoing ones slide out in the direction of travel, a theme toggle that grows a disc of the incoming ground colour out of the button itself, and a phone drawer carrying the same sections as accordions. The home page opens on a hard tone seam, a full-bleed band crossing the headline so the same letterforms read dark above it and light below, and flipping the theme inverts the entire composition. Every link still works with JavaScript off. View the Multi-Page SaaS Template.
Landing Page Template
A one-page site built to be dropped into any business, which is the hard part: a template that suits everything usually ends up with no point of view. This one takes its identity from structure instead of subject. Bands alternate hard between two tones, and the fixed nav and reading rail invert themselves against whatever is behind them using mix-blend-mode rather than script, so there is no scroll listener watching for section boundaries. Reach for it when the section set matters more than the vertical. View the Landing Page Template.
SaaS Landing Page Template
A hard-edged Swiss landing page for a B2B software product that avoids the two things every SaaS template gets wrong: a static screenshot standing in for the product, and an art direction assembled from purple gradients and rounded glass. Switching feature tabs redraws the mini-UI inside the app window, so visitors drive the console instead of looking at a picture of it. Pale cool blue-white ground, one cobalt, hairline rules, dense spec-style small type. View the SaaS Landing Page Template.
AI Studio SaaS Template
A landing site for an AI image and motion studio that throws out the dark dashboard chrome every AI product ships with: a committed signal-orange field, condensed poster typography, and flat graphic compositions that read as a creative instrument rather than another prompt box. The hero holds the same type composition twice in opposite colour states, and a moving aperture cuts through the top one to expose the inverse beneath, driven by the pointer on desktop, by drag on phones, and optionally by device rotation where the sensor permission is granted. Below it a sticky three-act sequence scrubs through pulse, light, and edit states, and the Keyframe Lab commits one of three art-direction systems on click so the same idea resettles into a new visual language. View the AI Studio SaaS Template.
Email API SaaS Template
A 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, and each one opens to its delivery report and can be franked DELIVERED with a rubber-stamp thunk. The copy is in dry postal-register English throughout: a deliverability ledger by provider, a three-step form from DNS records to a delivery receipt, and a two-tariff fee schedule. Fits any developer-infrastructure product priced per unit. View the Email API SaaS Template.
Incident Alerting SaaS Template
A landing site for an uptime monitoring and incident alerting product, built around a live alert wire: monitor events arrive on a timed stream, shunt the list down, tick the hero counters, and expand into incident detail cards on hover or focus. The art direction is a night-shift operations room, with deep violet-navy, phosphor amber for anything live, and one orange-red reserved for critical severity. For a monitoring product the console is the pitch, so here the console is the marketing page. View the Incident Alerting SaaS Template.
Editorial and long-form
Four templates whose identity comes from a reading format rather than a business type. Each ships as a finished piece of writing, so what you open is a real article and not a skeleton of placeholder headings. These are the ones to take when the argument matters more than the screenshots.
Indie Magazine Template
A single-issue site for an independent print magazine, set like a broadsheet front page: cold white newsprint, near-black ink, one masthead red, a Didone masthead, and a news serif set justified and hyphenated in real CSS columns with vertical rules between them. The cover headline typesets itself letter by letter, and pull quotes grow on scroll while the newspaper columns re-wrap around them live. For zines, literary journals, and journalism collectives. View the Indie Magazine Template.
Editorial One Page Template
A vertical-agnostic one-pager that takes its identity from print discipline: a strict column grid, hairline rules, marginalia in the outer column, a drop cap, a ruled ledger of figures, and two large pull quotes. The signature is a cover that exists twice, a chalk plate on top and an ink negative beneath, revealed through a soft aperture that follows the cursor and stretches along the axis it is moving on. Carries a studio, a consultancy, a personal site, or a manifesto without restyling. View the Editorial One Page Template.
Long-Form Story Template
A one-page long read laid out for actual reading: a single 68-character measure on a pale celery ground, a sticky chapter spine with a scrubbed plum progress thread, inline-SVG figures that break the column, and four principle cards that stack into a deck as the section pins. It ships carrying a first-person account of rebuilding a workshop over four years. The right shape for founder stories, case studies, white papers, and research summaries with diagrams in the flow of the text. View the Long-Form Story Template.
Investigative Story Template
A one-page investigation for a news publication, built for the kind of story that has to carry evidence. A full-bleed lead clip sits under the headline, then three scroll-locked stages where a pinned media column crossfades photograph to photograph as three steps of reporting scroll past it. Redacted documents wipe their bars off as you read, and a right-of-reply statement block closes the case. Also the correct structure for policy write-ups and campaign reports that argue from data. View the Investigative Story Template.
App and dashboard interfaces
Three templates that are the product interface itself rather than a marketing page about one. Deploy them as the front end, drive a product demo with them, or use them as a portfolio piece that proves you can build real UI. Browse them on the app and dashboard templates page.
Team Chat App Template
A complete dark-mode team chat interface whose conversation plays itself: a choreographed GSAP replay of launch morning with typing indicators, landing messages, popping reactions, a mention sweep, and a thread that opens on cue. The full app shell is there, with a workspace rail, channel and DM sidebar with presence dots, message pane with hover toolbars, a composer, and a mobile drawer. Uses no GSAP plugins. Excellent as a living hero screenshot embedded in an iframe. View the Team Chat App Template.
Documentation Site Template
A documentation site you deploy as your documentation site, not a landing page about one. Six cross-linked pages on a clean near-white reading surface, with a proper dark theme and a cool slate alternate as one-attribute palette swaps. Fixed top bar, sidebar tree, article column, and a scrollspy “On this page” rail on every page, built around a Cmd+K command palette that fuzzy-searches an index read live from the navigation and the current page’s headings. Every docs pattern you need is already in it: tabbed install blocks, file trees, options tables, callouts. View the Documentation Site Template.
Draggable Dashboard Template
A calm project-dashboard landing page with draggable, keyboard-reorderable widgets, a build-your-workspace section, expandable release rooms, and split-flap metrics. The restrained stone and navy palette makes the bento structure feel like operational software rather than a collection of decorative cards. Uses ScrollTrigger, Flip, and Draggable together, and the keyboard reordering is a genuine alternative path rather than a token one. View the Draggable Dashboard Template.
How to choose one
Pick by the interaction, not by the industry. Almost every template here re-points to a different business with a copy pass, and the config’s own use-case notes say so: the nail studio suits anything sold as a colour or a finish, the food truck suits anything with a where-are-we-today question, the barber shop suits any appointment business where the customer picks a person. What you cannot swap out afterwards is the signature interaction the page is designed around, so choose that first.
Three practical rules:
- If your case rests on a difference, take a comparator. The interior design studio and the charity campaign both wipe one state over another.
- If your case rests on a sequence, take a map or a timeline. The travel and tour, food truck, and financial planner templates all make a route the interface.
- If your product is an interface, ship the interface. The team chat, documentation, and SaaS landing templates all put the real thing on the page instead of a screenshot of it.
If you are still deciding, start with a free one. The four above are built to the same standard as the paid ones, so opening the folder tells you exactly what the code is like everywhere else.
How deployment works
Every template is static files. There is no compilation, no npm install, no framework to learn. The workflow is:
- Open the template folder and edit the HTML to add your own copy, images, and links.
- Adjust the CSS custom properties if you want to shift the colours or type.
- Upload the files to your host.
Because there is no build step, the templates deploy to Netlify, Vercel, GitHub Pages, or any plain web server without changes. GSAP loads from a CDN, so the only requirement on the host side is the ability to serve static files. That is every host.
This also means no framework lock-in. You are not committing to React, Vue, Astro, or anything else. If you later want to move a template into a larger framework project, the markup and the GSAP code come with you unchanged.
Photography, where a template uses it, ships bundled as optimised WebP with the brand’s colour grade baked into the pixels. Nothing hotlinks to a stock library, so nothing breaks or expires later.
Pricing and licensing
Here are the facts, stated plainly for anyone comparing options:
- Each template is £10. An individual effect is £5; a template composes several of those effects into a complete, deployable site, which is why it costs more.
- Four templates are free, MIT licensed, with no account required.
- The standard license covers unlimited personal and commercial projects. The only restrictions are no redistribution and no competing products.
- Every template is included in the Vault. The Vault covers every current effect, template and UI element, and every future release in those three lines, for a single payment.
Bought separately, the paid templates alone cost several times the price of a pass, so the Templates Pass or the full Vault pays for itself well before you finish your first project. Either is a one-time payment, not a subscription, and future releases are added to your library at no extra cost.
Try one first, without losing money on it
We would rather you bought one template and liked it than bought the whole Vault on trust. No amount of screenshots answers the only question that matters: is this code actually good to work with once it is open in your editor? That question is worth £10 to answer, and it should not cost you anything to have answered it.
So buy a single template, open the files, ship something real with it. If you decide you want the rest, up to £10 of what you already spent comes off the Vault price at checkout. Starting small never costs you more than starting big.
The mechanics are deliberately boring: it is a discount on the upgrade, not a refund, so nothing is paid back to you. It applies automatically with no code to enter, and the only requirement is that you are logged in when you buy the Vault. Guest checkouts count too, because we create an account against your email at the time of purchase.
Where to start
- Browse all 58 website templates side by side, filtered by use case, tone, or tier.
- Download the four free templates and read the code before spending anything.
- Explore the effects library to see the building blocks these are composed from.
- Read the pricing page for how the Vault and the upgrade credit work.
