054
AI ready

AI Studio SaaS Template

£20 or the whole Vault, £99

A saturated editorial SaaS template with an aperture-led type hero, a scroll-directed visual sequence, and a clickable art-direction mixer.

ScrollTrigger Lenis advanced
13 more details
pointer-trackingtouch-dragdevice-orientationradial-revealkinetic-typographysticky-scroll-storyscrubclick-stateart-direction-mixerscroll-revealstaggerkeyboard-navigation 4 colour palettes

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

Open the template in a new tab
Explore styles
Open AI Studio SaaS Template template in new tab

Updated

About this template

A complete one-page SaaS template for AI image studios, motion tools, and creative direction platforms. Mote replaces familiar dark dashboard chrome with a committed signal-orange field, condensed poster typography, and flat graphic compositions that make the product feel like a creative instrument rather than another prompt box.

Read the full template overview

The lead interaction is a directed aperture that cuts through the hero type and exposes an inverse composition beneath it. Pointer movement drives it on desktop, touch drag drives it on phones, and device orientation provides an optional rotation-aware sensor layer where permission is available. Further down, a sticky three-act sequence transforms through pulse, light, and edit states as the visitor scrolls, while the Keyframe Lab lets visitors click between three art-direction systems and watch the same idea settle into a new visual language.

The template includes a responsive navigation, outcome gallery, workflow, single-plan pricing composition, closing statement, and footer. Buyers can replace the fictional Mote brand, repaint four semantic colour tokens, edit each section independently, and deploy the static files without a build step.

AI Studio SaaS Template - website template preview

What's included

11 items
  • Complete deployable AI creative studio site with navigation, hero, visual proof gallery, process story, art-direction mixer, workflow, pricing, closing statement, and footer
  • Directed aperture hero with inverse colour reveal, elastic lens tracking, title drift, touch drag, and optional screen-rotation-aware device orientation
  • Type-as-image composition using League Gothic at poster scale instead of a split SaaS hero or fake product dashboard
  • Three-act sticky scroll story with layered transforms, scene changes, and a scrubbed progress rule
  • Clickable art-direction mixer with Kinetic, Tender, and Strange modes, each changing copy, geometry, scale, and colour placement
  • Four shipped palettes with measured AA body-copy contrast, complete RGB triples, and a demo-only colour dock that stays out of buyer downloads
  • Independent section initializers sharing one cleanup path, so sections can be removed without breaking the page
  • Responsive single-column mobile compositions, keyboard-operable controls, visible focus states, and Escape-close mobile navigation
  • Complete no-JavaScript document flow and a designed reduced-motion layout that presents all three process scenes
  • Optional Lenis smooth scrolling synchronized to the GSAP ticker and disabled automatically for reduced motion
  • Four measured palettes, each with its own condensed display face (gothic, editorial serif, slab, humanist), swapped from one data-palette attribute

Perfect for

5 use cases
  • AI image and video platforms that need a distinct creative identity
  • Motion design tools selling to agencies and in-house brand teams
  • Generative art studios presenting a visual process rather than a technical dashboard
  • Creative SaaS launches that need expressive interaction without stock photography
  • Design direction and campaign-planning products with a bold editorial voice

How it works

5 sections

Independent structure

Each interactive area has its own guarded initializer, all sharing one setup and teardown path. The script exits cleanly when a section is absent, stores every event handler for teardown, and keeps navigation, hero, scroll story, and mixer logic separate so buyers can remove or reorder sections safely.

The moving aperture

The hero holds two matching type compositions in opposite colour states. Pointer and touch coordinates update the clipped inverse layer and feed an elastic ease on the lens ring and the secondary title's drift. On supported phones, screen-rotation-compensated device orientation can drive the same coordinates after any required permission gesture; touch drag remains the fallback.

The three-act story

A tall document section contains a CSS-sticky stage, so native flow provides the travel budget while ScrollTrigger scrubs between three full compositions. Each transition changes position, scale, rotation, and visibility together. Without motion enhancement, the scenes return to ordinary stacked document flow.

The direction mixer

Semantic buttons commit one of three art-direction presets. A short GSAP timeline removes the current typography and shapes, changes the copy and state attribute, then settles the new composition with elastic geometry and a controlled text reveal. Reduced-motion users keep the same state controls with instant changes.

Fallbacks and motion

A synchronous head gate pre-hides reveal targets before first paint, while the main script removes that gate if the GSAP CDN is unavailable. CSS and JavaScript both honor prefers-reduced-motion, and Lenis is wired to the GSAP ticker only when smooth scrolling is allowed.

Plugins ScrollTrigger
Difficulty Advanced
Smooth scroll Lenis integration
Colour palettes 4 ready-made palettes, each measured for AA contrast. Switch with one attribute, or copy the values you want into :root. Try them in the preview above.
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Does it need a product dashboard screenshot?

No, and it deliberately refuses one. The hero is type as image, League Gothic at poster scale with an aperture reveal, rather than the split hero and fake dashboard every AI SaaS site ships. For a product whose output is visual, that is the more honest pitch.

What is the art-direction mixer?

A clickable control with Kinetic, Tender and Strange modes, each changing copy, geometry, scale and colour placement rather than just a swatch. It demonstrates direction as a product feature, which is the argument a generative or motion tool needs to make.

There are four palettes and a colour dock. Do those ship to my visitors?

The four palettes do, each with measured AA body-copy contrast and complete RGB triples. The colour dock is demo-only and stays out of buyer downloads, so you are not shipping a palette picker to your customers by accident.

Does the aperture hero work on touch?

Yes: touch drag moves it, and there is optional screen-rotation-aware device orientation on top. Under reduced motion you get a designed layout presenting all three process scenes rather than a stripped page, and with JavaScript off the document flows complete.

Can I use it for something other than AI?

Yes. Motion design tools, generative art studios, creative SaaS launches and campaign-planning products all fit, because what it really provides is an expressive editorial identity for a software product. Anything wanting to look enterprise-neutral should pick a different one.

Paid template

Purchase to unlock the code.

Buying AI Studio SaaS Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£20 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

  1. Keep the supplied folder structure intact.
  2. Open index.html directly, or serve the folder locally:

Code snippet omitted: it ships with the download.

  1. Replace the Mote name and copy in index.html.
  2. Choose a shipped palette or edit the five solid colour tokens at the top of assets/style.css.
  3. Deploy the folder to any static host. No build step is required.

Using It With Your Own Design

The JavaScript uses documented data-* hooks for behaviour. Class names control appearance and can be restyled freely.

  • Keep [data-lens-field], [data-lens-ring], and [data-inverse-title] for the aperture interaction.
  • Keep [data-scroll-story] and the three [data-story-scene] elements for the scroll-directed sequence.
  • Keep [data-remix], [data-mix], [data-mix-title], [data-mix-note], and [data-mix-shape] for the click-state mixer.
  • Reveal hooks are optional. Remove data-reveal, data-reveal-group, or data-hero-fade when an element should render without an entrance.

The abstract compositions are ordinary HTML and CSS. They are not screenshots or required application UI, so buyers can replace them with generated work, campaign stills, or their own product output without changing the animation architecture.

Signature Set

Moving aperture

Pointer position moves a hard circular cutout through two full-hero inverse compositions. The same input also drives the elastic ring and a slower counter-drift on the hidden title. On touch screens, a finger drag is the primary control and device orientation is an optional enhancement. iOS only requests sensor permission after the visitor presses Tilt lens; denial leaves touch drag working. Reduced motion keeps a strong central still state.

Three-act scroll story

A CSS-sticky stage moves through Pulse, Light, and Cut compositions while ScrollTrigger scrubs position, scale, rotation, and visibility. The section budgets more than one viewport of travel per scene transition, so a strong wheel gesture does not skip the whole sequence.

Art-direction mixer

The Kinetic, Tender, and Strange buttons replace the current direction through a composed transition. Copy, geometry, colour placement, scale, and rotation all change, then settle with an elastic ease. The controls remain fully usable with reduced motion, where the state change is instant.

Palette

All colour decisions live in the :root block of assets/style.css:

Code snippet omitted: it ships with the download.

Keep each hex token and its RGB triple synchronized. Every translucent rule derives from these triples, so a palette change does not leave old colours behind.

Four measured palettes ship, each paired with its own display face so the four read as four identities rather than one design in four colours:

Palette <html> setting Primary body pair Ratio Display face
Signal no attribute soft ink on orange 4.76:1 League Gothic, a condensed gothic
Cobalt data-palette="cobalt" soft cream on blue 4.63:1 Instrument Serif, a narrow high-contrast serif
Lagoon data-palette="lagoon" soft ink on teal 6.18:1 Stint Ultra Condensed, a condensed slab
Acid data-palette="acid" soft ink on acid 9.36:1 Yanone Kaffeesatz 700, a humanist condensed

The face and the colours are independent tokens (--font-display and --font-display-weight sit in each block next to the colours), so keep the palette and swap the face, or the other way round. All four faces are in the Google Fonts <link> in index.html; a browser only downloads the one the page uses, but once you have settled, trim the link to the family you kept. Every face here is condensed or narrow on purpose: the hero, the figures and the price are set at viewport-width sizes that assume a narrow face, and a wide one overflows them. Cobalt lowers the floor of --step-display inside its block for the same reason; do that rather than editing :root if your own face needs it. The body face (Afacad Flux) and the mono face (Major Mono Display) are the same in every palette.

Set one on the document element:

Code snippet omitted: it ships with the download.

The colour dock visible on the GSAP Vault demo is preview scaffolding from assets/palette-demo.js. It is injected only into the hosted demo and excluded from the buyer download. The four :root[data-palette] token blocks are the feature that ships.

Options

Option Where Values Default Description
Smooth scrolling <html data-smooth> or ?smooth= on, off on Disables Lenis when set to off
Palette <html data-palette> cobalt, lagoon, acid, or omitted Signal Selects one of four shipped colour and display-face sets
Aperture position :root percentages 58% 43% Static position for no-JS and reduced motion
Device orientation [data-gyro-toggle] button present or removed present Optional sensor permission and recentre control; touch drag remains primary
Aperture size .hero-inverse and .lens-ring CSS length responsive clamp Controls the cutout and its visible ring
Story length .has-js .story-section viewport units 340svh Sets the scroll travel available to the three scene states
Initial mixer state [data-remix] kinetic, tender, strange kinetic Must match the initially pressed button and visible copy

Editing Sections

  • Hero: Change both copies of the title so the base and inverse layers remain aligned.
  • Proof gallery: Replace the three .art-figure compositions with images or brand work. Keep the captions outside the visual.
  • Architecture: The script expects three story scenes. If the count changes, adjust the timeline in initScrollStory().
  • Keyframe Lab: Add a preset to the mixes object, its matching button, and a [data-active-mix] CSS block.
  • Pricing: This template uses one prominent plan instead of a three-card matrix. Replace the amount and feature list directly in the HTML.

Accessibility and Degradation

  • The synchronous head script adds .has-js before first paint, preventing reveal flash.
  • If GSAP or ScrollTrigger is blocked, the main script removes .has-js and the complete page renders in normal document flow.
  • prefers-reduced-motion restores every reveal target, stacks all three story scenes, disables smooth scrolling and orientation input, and keeps the mixer controls functional with instant changes.
  • Touch drag works without sensor access. Orientation readings are screen-rotation compensated, smoothed, dead-zoned, clamped, and re-centred after a hidden tab returns.
  • iOS sensor permission is requested only from the visible Tilt lens button. Nothing is requested on page load, and denial is silent.
  • Embedded versions need allow="gyroscope; accelerometer" on their iframe for orientation input.
  • The mobile menu uses a real button, updates aria-expanded, closes on Escape, and restores body scrolling.
  • Mixer controls are native buttons with aria-pressed state.
  • Focus styles are visible on both orange and peach surfaces.

Dependencies

Loaded from CDN in index.html:

  • GSAP 3.15.0
  • ScrollTrigger 3.15.0
  • Lenis 1.3.17
  • League Gothic, Afacad Flux, and Major Mono Display from Google Fonts

File Structure

Code snippet omitted: it ships with the download.

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