85 animated website templates built with GSAP (2026)

This page lists all 85 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 a GSAP motion system 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 85 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. Some templates are multi-page sites with their own animated page transitions. Paid templates start at £20 each, selected multi-page templates come only with the Templates Pass or the Vault, and every one of them is 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?
• Why choose a GSAP template over Webflow, Framer or WordPress?
• 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
• Customise a template for a real brief
• 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.

Why choose a GSAP template over Webflow, Framer or WordPress?

A platform template gets you a site inside someone else’s editor. A GSAP Vault template gets you a finished, art-directed site as code you own. Here is what that buys you:

• A design built for the business. Every template is designed around one signature interaction that suits its subject, like the record label’s spinning records or the interior design studio’s before-and-after wipe. The motion is part of the design from the first sketch, not a fade added to every section afterwards.
• Pick and choose the parts. The templates are composed from effects that also ship as standalone products, in readable code that shares one gsap.context. Use the whole site, or lift just the hero, the gallery or the page transition into a site you already run.
• The files are yours. Plain HTML, CSS and JavaScript, with no editor to log into and no platform plan to keep the site published. Upload it to any host, today or in five years.
• It goes where your stack goes. The same markup and GSAP code move into React, Next.js, Astro or Vue, and every download includes a START-HERE-AI.md prompt so a coding assistant can wire it into an existing project for you.
• Built to be used, not just watched. Every template respects prefers-reduced-motion with a complete static version and stays usable with JavaScript switched off.
• Try it before you buy it. Every template runs live on its page, and the free ones download without an account, so you can judge the real code first.

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. How the folder is put together, and what you change first, is in the GSAP templates guide.

Coming Soon Template

Live demo Open in new tab ↗

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

Live demo Open in new tab ↗

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

Live demo Open in new tab ↗

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

Live demo Open in new tab ↗

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 ten 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 Firm 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 Firm 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.

Photo Gallery Template

A photographer site in a Nordic register: cool near-white paper, one tight grotesk set sentence case, hairline rules and tables that state their facts with a small label above a plain value. A quiet hero with a single harbour photograph at the edge and the frame read in a fact table, six frames in a sideways run driven by scroll (click one to see it bigger with the camera settings, or order a small-frame print), every print hanging together on a dark wall you scroll, drag and zoom through, a print basket beside the editions table, and a commission table that works out the price as you pick the shoot, the days, the season and the extras. Written for a landscape shooter in St Ives, it suits weddings, hotels, travel, interiors or a surf school. View the Photo Gallery Template.

Podcast 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 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 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 Template.

Agency and studio sites

Templates for practices that sell creative work to other businesses. Each ships as a finished site for a fictional studio, with project stories and service copy ready to replace with your own.

Kinetic Studio Template

A playful design studio built around a giant folded-paper word. Drag the letters open, move through three original campaign identities, then pull a geometric mark apart and bring it back together. Lavender, plum and tangerine carry the graphic identity throughout. The SIDEQUEST example suits agencies, creative portfolios, art directors, digital studios and event websites. View the Kinetic Studio Template.

Creative Studio Portfolio

A dark studio portfolio with a sculptural photo reel, large project studies and an expandable visual archive. Drag or use the reel controls to explore the work; vertical scrolling continues through the page. Its photographic curves carry into the project crops, with keyboard previews and readable static fallbacks completing the experience. The OFFORM example suits agencies, photographers, design studios, architecture practices and filmmakers. View the Creative Studio Portfolio.

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.

Design Studio Template

A paper-toned portfolio for design agencies, creative studios and independent consultancies. FORME pairs large typography with editable brand artwork: turn between journal editions, open an editorial spread and expand three project stories. Capabilities, a working process and an email brief composer complete the studio website. View the Design Studio Template.

Branding Agency 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 Agency Template.

Creative 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 Creative 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

Live demo Open in new tab ↗

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

Live demo Open in new tab ↗

A site for a spatial and exhibition design practice, with a photographic corridor that carries you between walls of images and overhead light. A quick scroll opens the view and stretches the passing panels, then the room settles back while the central headline stays sharp. A separate photo cluster tilts toward the cursor, and project images open to full bleed and return to their place in the work strip. Touch keeps a calmer corridor; reduced motion presents a still photo strip. Suits architecture, interiors, photography portfolios and arts venues. Uses ScrollTrigger and Flip. View the Layered Depth Template.

Interactive Map Template

A studio portfolio drawn as one engraved sea chart of an invented archipelago, on a fog-blue ground with a deep navy plate for each case study. Scrolling flies a camera from a world view down to each project island along a curved survey line; a mouse drag pans the chart and a tap on any island flies there. A compass rose turns with the heading, a scale bar re-measures, the coordinates and edge ticks run live, and the map redraws itself as you descend, adding contours, soundings and names. Each island opens into its case study in place as the camera arrives, and the same mechanism carries an about page, services as a legend of chart symbols, a journal set as marginalia and a contact form that lights a signal fire. The coastlines come from a bundled generator, so any studio, architect, agency or destination with four to six places to show can redraw the map. View the Interactive Map Template.

Business and service sites

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.

Yoga 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 Yoga 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.

Appointment Booking Template

A one-page site for any business where the customer picks a person, a service and a time, shown as a barber shop. The signature is a three-step booking flow with a running summary ticket: pick a person, a service and a slot, and watch the total assemble, with availability changing when you change who you book with. Heavy slab type on a deep ground with one accent, and five measured palettes that swap from one attribute, so a salon, a clinic or a tutor is a copy pass away. View the Appointment Booking Template.

Beauty Salon 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 Beauty Salon Template.

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 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 Advisor 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 Advisor 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

Templates for places and dates: festivals, venues, restaurants, trails, 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.

Event 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 Event 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.

Outdoor Adventure Template

A photographic travel site whose lightly glazed hero expands to the edges during a brief scroll pause, followed by an expanding landscape window and a journey profile visitors can explore themselves. Move from valley to high ridge to still water, with the changing photograph beside the route control. Four bundled images, native departure details and email enquiry links complete the Higher Ground example. The landscape-led design also suits hotel retreats, outdoor brands, photographers and events. View the Outdoor Adventure 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.

Astronomy 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 Astronomy 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

Live demo Open in new tab ↗

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.

Parallax Scroll Template

Live demo Open in new tab ↗

A one-page site for a coast-to-summit national trail, and the same page reskins to an outdoor brand, a national park, a conservation trust or a landscape photographer. Scrolling walks four full-bleed chapters through a single pinned frame: each photograph settles over the last as it drifts away, the chapter name rises through its mask, the altitude and mile count up, a route line draws on to the next stop, and at the summit the frame whites out to the page ground. Two other interactions sit on different inputs: a live type specimen you type your own words into at display scale, with the variable font’s width and weight axes on tabs, and a lens that samples the pixel under it off a photograph of a headland into a named swatch with its hex. Uses ScrollTrigger. View the Parallax Scroll Template.

Fullscreen Slider Template

A one-page hotel site built on a full-screen room slider: six full-bleed photographs walked through one frame with a curtain wipe, the room name rising through its mask, the nightly rate counting to its figure and a small plan of the house lighting the room you are looking at. Below it a day at the house is a rail you drag through the hours, with the photograph crossfading from the river at dawn to the fire at ten, and a stay builder works out the price of a room, a season and a number of nights. Written for a mill in the Yorkshire Dales, it re-points to a boutique hotel, a guesthouse, a hostel, a resort, a restaurant with rooms or a wedding venue. Uses ScrollTrigger and Observer. View the Fullscreen Slider Template.

Boutique Hotel Template

A photo-led hotel website with a full-height cover, a dark-green numbered contents rail and room photographs that move across a large house scene as you explore. Large dining images, a walking-distance guide with local photography, and a three-step enquiry journey with an editable review continue the visit. The worked example is Marlowe House, a fourteen-room hotel above Bath; change the photographs and copy for a B&B, guesthouse, country retreat, inn or wedding venue. Uses ScrollTrigger. View the Boutique Hotel Template.

Commerce and product sites

Templates built around selling something. Browse them on the commerce and product templates page.

3D Product Showcase Template

A single-product site built around live footage and one real-time 3D object. A three.js glass bottle hangs over full-bleed video and optically bends both the moving water and the wordmark behind it; the cursor drags a lens through the footage and tilts the bottle, and pressing mists the atomiser. Scrolling turns the bottle through three chapters as the clip dissolves from surf to leaf shadow to smoke and the glass takes each note’s tint. The worked example is Oriel, a fragrance house in Ericeira, with an atelier, formula table and size picker below. Suits skincare, spirits, candles and any hero-product launch. View the 3D Product Showcase Template.

Horizontal Scroll Template

A one-page furniture workshop built as one horizontal showroom: a headline at display scale runs into a photograph, then six plates sit on a pinned rail and scrolling down walks you along it, with a bar underneath naming the piece you are beside and counting its price. The plates are six different shapes rather than one repeated, a type-only plate recolours itself to whichever timber you pick and follows the price, and the long table draws its own dimensions over the photograph as the pointer arrives. Written for a workshop in Hebden Bridge, it re-points to a lighting studio, a ceramicist, an interiors shop, a designer’s portfolio or a gallery. Uses ScrollTrigger. View the Horizontal Scroll Template.

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.

Clothing Brand 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 Clothing Brand Template.

Coffee Shop 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 Shop 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.

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 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.

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 Jewellery Template.

Florist Template

An image-led one-pager built as a stack of specimen sheets: one hairline runs across each section, the botanical name sits above it, the plain name below, and the photograph stands on the line. The wordmark hangs from the hero’s rule at display scale while a single stem stands on the line and breaks the right edge of the page. The signature is the bench, where pressing a stem flies it into a fan that pivots on one point the way a real bunch is held, draggable and re-orderable from the keyboard, with the stem count and the price total following. Four plates then run edge to edge while the paper takes its colour from whichever one is on screen, and one oversized photograph of the work itself runs off the right edge further down. Written for a cut-flower studio in London Fields, it re-points to a wedding florist, a plant shop, a tea merchant or a candle maker. View the Florist Template.

Landing pages, SaaS, and campaigns

These range from a four-page SaaS site and developer-infrastructure products to creative AI tools and an endless campaign reel. The free coming soon and charity campaign pages above belong here too. Browse the lot on the landing page templates page.

Infinite Scroll Landing Page Template

Four scenes form an endless landing page for SECOND TAKE, a fictional creative production studio. Full-screen photography moves with gentle parallax, a campaign study lets visitors try a closer crop, and a persistent project CTA opens a contact panel without losing their place. A visible loop switch restores a finite page; reduced-motion visitors get the complete native document. It adapts to creative agencies, photographer portfolios, fashion campaigns, product launches and events. View the Infinite Scroll Landing Page Template.

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.

Fintech Template

A five-page site for a money product that saves its receipt for the moments that earn it. The home page leads with the product: today’s takings on a rolling odometer that visitors ring up, an account card whose week chart follows each sale, and a business card that leans towards the pointer. At the sign-off a handheld card terminal prints an account receipt as you scroll, crosses out the fees, tears it off and stands it on the counter. Payments lets you tap a card, phone or watch on the terminal, Pricing pairs two plans with a calculator that picks the cheaper one, Stories filters by kind of business, and the sign-up form prints your business name onto a receipt. It suits payment apps, business banking, invoicing and any SaaS that sells on clear pricing. View the Fintech Template.

AI Research Template

A scientific visual style for research labs, AI startups and technical products: bold headlines and an unframed helical pixel reactor across paper, yellow and dark chapters. The fictional Matterline studio explores polymers, catalysts and energy storage through three selectable programmes with distinct pixel diagrams. Visitors can shortlist 48 illustrative material candidates by adjusting a target-fit score. A specimen record, model-to-pilot research journey and partnership FAQs complete the page. View the AI Research 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.

Mobile App Landing Template

A one-page site for a mobile app, built around a real 3D phone rather than a mockup image. The phone stands in the hero, follows the pointer a few degrees, then glides down onto a pinned feature story where it stays put and turns a full circle to a new screen for each of four features while the copy, the stage colour and a step rail change beside it. Sorbet pink, deep ink and oat carry a colour-blocked identity, with store buttons, a press strip, a three-step how-it-works, a count-up stat band, pricing with a monthly and yearly toggle, an FAQ accordion and a QR download block. The screens are plain images swapped by one path each, so it is easy to make your own, and without WebGL or with reduced motion the same screens appear as a stacked, flat sequence. It suits consumer apps, SaaS companions, fintech, fitness and language-learning launches. View the Mobile App Landing Template.

Word Game App Landing Template

A one-page site for a daily word game, written in the voice of a newspaper games page and built around a real 3D phone. A row of letter tiles beside the serif headline turns over one by one as you scroll and spells the day’s word while the phone glides away, then the phone settles onto a pinned story and turns a full circle to a new screen for each of four features: the puzzle board, streaks, hints and a friends league. Cobalt blue and sunflower yellow, the same pair the game uses for its tiles, carry the colour on ivory paper, with hard-edged shadows in place of soft ones. It adds a how-to-play rulebook that turns its own tiles over, a count-up stat band, pricing with a free tier, an ad-free tier and a family tier behind a monthly and yearly toggle, an FAQ accordion and a scannable QR download block. The five screens are AI-generated images swapped by one path each, and the download ships the style sheet, the masters and an HTML screen kit to make more. It suits word and puzzle games, trivia and quiz apps, language-learning and habit apps. View the Word Game App Landing 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.

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 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.

Scrollytelling 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 Scrollytelling 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

Start with what the visitor needs to do: inspect a project, compare a change, choose a release or find an appointment. Then match both the content structure and the interaction to that task. The industry label is a useful starting point, but open the demo with your own copy and images in mind before choosing. A visual portfolio and a text-heavy service page need different amounts of reading space.

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.

Customise a template for a real brief

Take an independent label launching a new release. The Record Label Template gives that brief a relevant starting point: releases, an artist roster, a catalogue and a label story. Its spinning records help visitors explore the artwork. The real release information and the next action still need to be clear when nothing is moving.

Work through the content before tuning the animation:

1. Choose the primary action. Decide whether this page should send someone to buy the release, listen elsewhere or contact the label. Replace the demo destinations with the real ones, and make that action easy to find beside the release information.
2. Replace a complete example. Add one real release title, artist, catalogue number, pressing details and artwork treatment first. Check the longest title you expect to publish before replacing the rest of the catalogue. Replace the fictional roster, story and footer details too.
3. Connect the services you need. The template’s newsletter form demonstrates the interface; it does not create a subscriber by itself. Connect your own provider and test a real submission. Treat shop, audio and contact destinations as part of the same content check.
4. Check the result at reading size. Review the page on a phone, use the controls with a keyboard and enable reduced motion. Recheck text contrast after changing the palette, and make sure the primary action survives a long title or a different image shape.

The same process applies to a portfolio, a venue or a service business: one real example reveals more than replacing every placeholder with another short placeholder. If choosing the type scale or emphasis is the hard part, the free Visual hierarchy for developers course lets you practise those decisions before applying them to your template.

How deployment works

Every template is static files. There is no compilation, no npm install, no framework to learn. The workflow is:

1. Open the template folder and edit the HTML to add your own copy, images, and links.
2. Adjust the CSS custom properties if you want to shift the colours or type.
3. 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:

• Templates start at £20 each. An individual effect is £10; a template composes several of those effects into a complete, deployable site, which is why it costs more. Selected multi-page templates are not sold singly: they come with the Templates Pass or the Vault.
• 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, for free

We would rather you judged the code yourself 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? You can answer it without paying anything.

So start with the four free templates, or with the free effects. They are MIT licensed, download without an account, and are built to the same standard as the paid ones, so opening the files and shipping something real with them tells you what the rest are like.

If one paid template is all your project needs, buy just that one: it is yours for unlimited projects, with no subscription and nothing to renew.

Where to start

• Browse all 85 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 to compare a single template, the Templates Pass and the Vault.

Browse the templates →