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.
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.
What's Included
- 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
Perfect For
- 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
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.
:root.
Try them in the preview above.