# AI Studio SaaS Template

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

Canonical: https://gsapvault.com/templates/ai-studio-saas-template
Live demo: https://gsapvault.com/demos/ai-studio-saas-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | pointer-tracking, touch-drag, device-orientation, radial-reveal, kinetic-typography, sticky-scroll-story, scrub, click-state, art-direction-mixer, scroll-reveal, stagger, keyboard-navigation |
| Uses Lenis | Yes |

## Overview

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.

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.

## Features

- 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 inside one gsap.context 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

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

## Vibe-Code Ready Setup

This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

### Independent structure

Each interactive area has its own guarded initializer inside one gsap.context. 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 elastic gsap.quickTo setters for the lens ring and secondary title 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.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

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

   ```bash
   npx serve .
   ```

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

### 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 token 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 |

### Dependencies

Loaded from CDN in `index.html`:

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

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy AI Studio SaaS Template](https://gsapvault.com/templates/ai-studio-saas-template)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt