# AI Research Template

> A helical three.js pixel reactor, interactive materials programmes and a candidate workbench for research labs, AI startups and technical product websites.

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

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | scroll-reveal, webgl-shader, interactive-svg |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

A complete research website with oversized typography, compact instrument labels and a paper hero with violet background motion, followed by acid yellow and dark ink chapters. Matterline, a fictional materials discovery studio, explores polymers, catalytic surfaces and energy storage.

An intertwined pixel reactor turns behind the hero text. Pointer movement gently changes its orientation, and a pause button stops the ambient rotation. Three research programmes pair candidate records with experimental next steps, each with its own pixel chain, surface or cell diagram and replayable transit. Visitors can adjust a target-fit threshold to shortlist 48 illustrative materials. A research method, specimen record, model-to-pilot chapter and partnership FAQs complete the story.

Change the brand, colours, candidate scores and copy to suit your organisation. Procedural graphics and static fallbacks are supplied locally; no photography or external image service is required.

## Features

- Helical three.js pixel reactor integrated into the hero background
- Slow ambient rotation, subtle pointer response and a pause control
- Interactive candidate shortlist with three target-fit presets
- Three research programmes with distinct pixel specimens and replayable experiment paths
- Model, Make and Scale research chapter
- 48 illustrative materials with shortlist and set-aside totals
- Paper hero with violet background pixels, acid and dark chapters
- Three-step research method and editable specimen record
- Native expandable FAQs and email enquiry link
- Keyboard and touch controls with reduced-motion support
- Readable static layout without JavaScript

## Use Cases

- AI startup and research lab launch pages
- SaaS product marketing sites
- Developer tool and API websites
- Analytics platform introductions

## Questions about this template

### Which products suit this scientific visual style?

The large type, instrument labels and editable diagrams suit research laboratories, AI startups, scientific software and technical product teams. Matterline is a fictional materials studio; replace its research programmes and specimen copy while preserving the page composition.

### Can I change what the candidate workbench demonstrates?

Yes. The 48 sample points have editable fit scores, group labels and preset values. Adapt these to a different research library or product comparison. The demonstration runs locally with illustrative data; it includes no predictive model, scientific results or connected API.

### Do I need to source photography or render the graphics?

No photography is required. The background reactor is procedural three.js geometry, with a local SVG helical fallback. The programme diagrams are editable SVG. Recolour the graphics through the shared palette, change the reactor settings or remove the opening visual while retaining the text and product narrative.

### Can I replace the polymers, catalysts and energy storage examples?

Yes. Each programme is an HTML panel with three candidate records, illustrative fit scores, experimental next steps, a pixel diagram and a summary. Edit the paired selector and panel values together. Trace experiment animates a local illustration without submitting data to any external service.

### How does the contact action work?

The closing enquiry is a standard email link with a placeholder destination, not a submitted or stored lead. Replace hello@example.com with your address or point the link at your booking page or contact system before publishing. No visitor information is collected by this template.

### Can I remove the specimen record or simplify the page?

Yes. The method, specimen record, workbench and questions are separate sections. Remove the sections you do not need and update their navigation links. The animation initialisers tolerate missing sections, and the remaining page keeps its own typography, palette and reading order.

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

### A reactor behind the hero

Intertwined pixel helices rotate around a narrow core behind the opening text. The unframed object responds gently to pointer movement and can be paused; a local helical illustration replaces WebGL when motion or graphics support is unavailable.

### A research shortlist visitors can explore

Adjust the minimum target-fit score to divide 48 illustrative candidates into shortlisted and set-aside groups. Three presets make it easy to compare broad exploration with a narrower experimental focus.

### Three distinct research programmes

Polymers, catalysts and energy storage each have their own pixel diagram, candidate records and proposed experiments. A separate chapter follows the progression from molecular model to physical specimen and application-scale pilot.

### Useful static fallbacks

The complete page remains readable when animation libraries are unavailable. Native controls support keyboard and touch, while reduced-motion preferences preserve the interaction with immediate state changes.

## Documentation

How this template works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

Open `index.html` in a browser, edit the copy and upload the folder to any static host. There is no build step. Replace `hello@example.com` before publishing. GSAP, three.js and the two fonts load from public CDNs. Keep the import map and module bootstrap in the page: they load three.js r180 as an ES module and leave the existing page usable if the module cannot load.

### Using It With Your Own Design

Begin with the semantic colours in `assets/style.css`, then replace the Matterline wordmark, headline and product story in `index.html`. The typography and SVGs share these tokens. The opening is a procedural three.js helical reactor, with an authored SVG helix as its static fallback. Recolour both using the shared tokens. Keep the synchronous WebGL probe before the stylesheet; it hides the decorative fallback while the renderer loads and restores it if loading fails.

Keep `data-hero`, `data-hero-fade`, `data-reveal` and `data-workbench` on the elements whose behaviours you want to retain. The reveal gate in the head must remain before the stylesheet. Each section can be removed; update navigation links to match your retained content.

### Sections and Configuration

- **Opening:** replace the headline and intro. `data-pixel-field` marks the renderer mount; `data-auto="0"` stops ambient movement initially (the visitor can resume it). The violet coils rotate slowly behind the hero copy. Pointer movement gently tilts the reactor without intercepting links or vertical touch scrolling. `assets/pixel-field.js` owns the shared shaders and renderer. The thumbnail uses these same files with ambient motion disabled.
- **Research programmes:** `data-routing-lab` owns the scenario selector and Trace experiment button. Each `data-scenario` value matches a `data-scenario-panel` value, and `aria-controls` names that panel’s ID. Edit the three input/output rows and `data-summary` text together. Keep three `data-packet` elements before the opaque `.engine-plate` in SVG paint order. Neutral incoming pixels disappear behind the processor, hold briefly, then emerge in the colour of the corresponding `.route-confidence` result (yellow for Test, violet for Refine). Without JavaScript, all scenario panels remain readable. With reduced motion or blocked GSAP, selection and summaries update immediately. No model or API is called.
- **Research journey:** editable Model, Make and Scale stages explain the path from simulation to pilot. This is illustrative studio storytelling.
- **Our thinking:** two paragraphs and one statement. No content is generated or fetched.
- **Workbench:** edit the 48 `data-score` values on the circles to change the sample. `data-preset` buttons supply threshold shortcuts. The native range accepts 25–95; the example works in both shortlist and set-aside extremes. When changing the default, keep its authored circles, labels and result in sync for the no-JS state.
- **Method:** editable three-step explanation and specimen record. These are illustrative research copy, not experimental results.
- **Questions:** native `details` elements; add or remove questions directly in HTML.
- **Contact:** replace the placeholder email destination, or link to your own contact or booking service. No form is submitted and nothing is stored.

### Palette

The paper ground is `--ground`; violet diagrams use `--surface`; the yellow chapter uses `--accent`. `--ink` provides dark type and the closing background; `--ink-dim` is the muted headline word on paper. Matching RGB triples support rules and shadows. Measured solid text contrast is documented in the root CSS comment. Recheck contrast after changing colours; violet and yellow backgrounds use dark text.

### Accessibility

The slider works with arrow keys, Home and End. Presets are ordinary buttons, with their selected state exposed. Native FAQs work with keyboard and touch. The live result announces shortlisted and set-aside counts. The SVG plots are decorative equivalents of this textual result.

Reduced motion keeps all content visible, replaces WebGL with the local SVG helix and makes threshold changes immediate. Pause motion uses a native button and stops ambient time; pointer-driven orientation remains available. With JavaScript disabled, the authored 65% specimen remains visible and controls are disabled. If the animation CDN is blocked, the content is restored and the native workbench still works. If three.js or WebGL is unavailable, the static helical illustration remains visible. A visible skip link and focus outlines support keyboard navigation.

### Dependencies

GSAP 3.15.0 and ScrollTrigger are loaded from jsDelivr; compatibility floor GSAP 3.12+. Instrument Sans (400, 500, 600) and IBM Plex Mono (400) load from Google Fonts with `display=swap`. three.js r180 loads as an ES module through the import map. GSAP owns page reveals, media changes and teardown; the three.js frame loop owns continuous motion, pointer smoothing and shader displacement. No Lenis, image service or backend is required. If your host already imports three.js, use that same module instance in the bootstrap rather than installing a second copy.

### Teardown

Call `window.gsapContext.revert()` before removing the page in a client-routed application. It removes owned animation, scroll triggers and listeners, restores the static specimens and disables their controls. The renderer disconnects its observers, stops its frame loop, disposes the geometry and material, releases the WebGL context and removes the canvas. It does not destroy unrelated page animation. The before-unload listener invokes the same cleanup for ordinary navigation.

### Files

`index.html`, `assets/style.css`, `assets/script.js`, `assets/pixel-field.js` and `assets/script.min.js` make up the deployable site. `thumbnail.html` and `config.json` are catalogue build files and are excluded from the buyer download. Use the readable script when customising; the minified copy is provided for production use.

### Browser Support and Performance

The enhanced pixel field requires WebGL 2 and ES-module/import-map support in a modern browser. The original helical SVG illustration supports browsers without WebGL, blocked three.js requests and reduced-motion users. A lost graphics context restores the fallback; recovery restores the canvas.

One draw call renders 6,144 points on fine pointers or 3,456 on coarse pointers. Pixel ratio is capped at 2 or 1.5 respectively. The first performance lever is the pixel-ratio cap in `pixel-field.js`, followed by its `columns` and `rows` values. The reactor uses no textures, lighting passes or post-processing. Intersection and document-visibility checks stop offscreen/hidden rendering; pausing stops the render loop once pointer movement settles. Damping uses elapsed seconds, so high-refresh screens do not change its speed.

## 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 for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy AI Research Template](https://gsapvault.com/templates/ai-research-template)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](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