# Creative Studio Portfolio

> A dark creative studio portfolio website template with a sculptural photo reel, oversized typography and visual project studies. Suits creative agencies, photographers, design studios, architecture practices and filmmakers.

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

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | webgl-shader, fisheye, draggable, momentum, infinite-loop, scroll-trigger, parallax |
| Uses Lenis | Yes |

## Overview

A complete creative studio portfolio with a curved photographic reel at its centre. OFFORM is the worked example: a London studio showing objects, architecture and image-making on a charcoal ground with oversized sans-serif type.

The photographic language continues into large project studies and a compact archive with image previews and expandable project notes. The page scrolls normally over the reel, with direct controls for exploring its six projects.

Replace the wordmark, project copy, photographs and email address to make it your own. The design also suits photographers, agencies, architecture practices and filmmakers.

## Features

- Full-screen photographic reel with a pinned scroll journey and direct project selection
- Finite desktop scroll sequence, keyboard controls and horizontal touch swipe
- Oversized studio masthead and scroll-responsive photographic studies
- Pinned photographic accordion that separates and reunites a single image
- Project archive with keyboard previews and native expandable case notes
- Complete source-image gallery without JavaScript or WebGL
- Designed reduced-motion layouts and visible keyboard focus
- Bundled optimised photography and editable semantic colour tokens
- Static HTML, CSS and JavaScript with optional Lenis smooth scrolling

## Use Cases

- Creative agencies presenting visual campaigns
- Photographers showing a curated body of work
- Independent design studios with image-led case studies
- Architecture practices and filmmakers building a visual portfolio

## Questions about this template

### What kinds of websites does this design suit?

The OFFORM example is a creative studio, but the curved project reel and photographic studies also suit a creative agency, photographer portfolio, design studio, architecture practice or filmmaker portfolio. Replace the six commissions with your own work and adjust the studio introduction; the overall layout does not depend on one specialist industry.

### Can each project show more than a picture?

Yes. Every project opens an entry in the archive with its photograph, category, year and a short account of the commission. You can extend those entries with more content or change the project links to your own separate case-study pages. The supplied template includes six complete example entries.

### What photographs work best in the curved reel?

Wide images with a clear subject and strong edges work especially well: the supplied examples include timber lighting, curved architecture and an aerial shoreline. Keep important faces or lettering away from the outer edges, where the surface bends most. The large project studies provide a flatter view of the same work.

### Will visitors get stuck scrolling inside the portfolio reel?

On desktop, the full-screen reel stays in place for a finite sequence through six projects, then releases naturally into the studio page. Numbered project buttons jump within that sequence. On a phone there is no pinned scroll journey: swipe sideways or use the arrow buttons to browse, and scroll vertically to continue.

### Are the OFFORM images included in the download?

The six optimised project photographs are bundled as local WebP files, so the reel and case studies display immediately. The README includes their source credits and explains how to replace them. OFFORM and its commission descriptions are fictional examples for you to replace with your own studio and work.

### How do prospective clients contact me?

The large invitation and email address both open the visitor’s email application. Replace hello@ofform.example in the HTML with your real address before publishing; the example address cannot receive enquiries. There is no contact form or submission service to configure in this version.

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

### The photographic reel

The large photographic reel stays in view while desktop scrolling moves through all six projects. Numbered selectors and arrow controls jump to a project, and the page continues after the final frame. Phones use the full-width reel with direct controls and sideways swipes.

### The project studies

Large photographs carry the portfolio into the rest of the page. Subtle changes of crop and scale echo the reel, while project information stays readable throughout.

### Another dimension

A single architectural photograph separates into five tilted strips and returns to a complete image as you scroll. A perspective slider lets visitors explore the same composition directly; phones keep that control without a pinned section.

### The visual archive

Every project has an expandable entry with an image and commission notes. Pointer and keyboard previews offer a quick look before opening the full entry, and reel links lead directly to these details.

### Preferences and fallbacks

The reduced-motion version presents the reel as a straightforward photographic list. The same content remains available without JavaScript or graphics support, and the rest of the page keeps its normal document flow.

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

1. Keep `index.html` and `assets/` together and serve the folder with any static web host or local HTTP server. No build step is required.
2. Replace `OFFORM`, the studio introduction and `hello@ofform.example` in `index.html`. The example email address cannot receive messages.
3. Replace the local photographs in `assets/img/`, preserving filenames, or update their paths in the HTML. Each project appears in the reel, its archive entry and, for the first three, a larger study.
4. Deploy the folder. The contact links open an email client; there is no form or backend service.

Keep the synchronous head enhancement script, CDN tags and import map when moving the page into another project. The import map loads three.js as an ES module, then the page loads `assets/script.js`. If you already use three.js, supply the same `window.THREE` module before running the script instead of loading it twice.

### Page Structure

| Section | Editing |
|---|---|
| Opening and reel | Replace the masthead, six `data-warp-project` entries and their project links. |
| Studio | Change the introduction, capabilities and inset photograph. |
| Project studies | Replace the large photographs and matching captions; update the archive destinations. |
| Archive | Each native `<details>` is a complete case note. Add text or pictures inside `.project-detail`. |
| Contact | Update both email links and the visible email address. |

Every animation checks for its section before initialising. Delete any section you do not need, then remove or retarget links to that section. Project links use explicit IDs rather than positional indexes. Add a reel item and its archive entry together; the reel counter updates from its content automatically.

### Reel Options

| Attribute on `data-warp-reel` | Default here | Purpose |
|---|---|---|
| `data-wheel` | `0` | Keeps wheel scrolling with the page. Leave at zero for a normal portfolio site. |
| `data-strength` | `1` | Motion deformation, from 0 to 1.35. Zero removes the extra gesture bend. |
| `data-barrel` | `0.4` | Resting curvature, from 0 to 0.5. |
| `data-pixel-ratio` | `1.5` | Rendering resolution cap. Lower this first on slower devices. |

On desktop, the full-screen reel pins for 2.6 viewport heights of scrolling, progressing through six projects. Numbered buttons and arrows navigate to the matching scroll position. On touch screens, swipe horizontally; vertical swipes scroll the page. Previous/next buttons and arrow keys reach every project. Home and End select the first and last project. The active project link opens its archive notes and moves focus to the entry.

`data-warp-ready` appears once the images and renderer are ready. To control a reel after that event:

_Code snippet omitted: it ships with the download._

### Scroll and Archive Motion

The wordmark unfolds from its baseline, letter by letter, on arrival, then compresses, tilts and fades out as you scroll past the header. Reduced motion shows the settled letters immediately. The studio print shifts within its crop. Large project images start at 68% size on desktop (82% on mobile) and grow into place as they enter view, while their curved crops flatten and the photography gently zooms out. These are independent ScrollTriggers; remove the relevant `data-wordmark`, `data-studio-photo` or `data-photo-window` hook to leave that element static.

Archive previews follow the pointer and also appear on keyboard focus. Native summary controls open the full project notes with Enter or Space. Touch visitors use those same controls directly. The preview is supplementary; every preview image is also present in the entry itself.

### Palette

Edit the semantic tokens at the top of `assets/style.css`: charcoal ground and surface, warm ink, secondary ink, peach accent and rule colour. Update each matching `--*-rgb` triple as well. The header records measured contrast pairs; measure new colours at their actual uses, including text over photographs.

Archivo is the display and body family. Replace the Google Fonts link and the two font tokens to change it. The large wordmark has its own responsive sizing; check both its width and the smaller project captions after changing the face or studio name. This design ships with one palette and no theme picker.

### Photographs

Six optimised local WebP derivatives are included, about 752 KB in total. They are cropped, slightly desaturated and exposure-adjusted for this page. The manifest preserves the source information and treatment.

To replace them, either overwrite the matching files in `assets/img/` and update the `alt` text, or edit `assets/img-manifest.json`. In the GSAP Vault repository, regenerate with:

_Code snippet omitted: it ships with the download._

That regeneration command uses the repository's asset-building tool; buyers deploying the static folder do not need it. Wide photographs with a clear subject and strong outlines work well in the reel. Keep critical lettering and faces away from the outer edges. The flatter studies and archive entries let visitors inspect the work without distortion.

#### Credits

- Yellow pleated pendant lamps: https://images.pexels.com/photos/20152628/pexels-photo-20152628.jpeg?auto=compress&cs=tinysrgb&w=2400 — Pexels licence.
- Rusted orange sculptural curves against flat blue sky: https://images.unsplash.com/photo-1486718448742-163732cd1544?q=80&w=1920&auto=format&fit=crop — Unsplash licence.
- Aerial surf breaking on a dark shore: https://images.pexels.com/photos/5851472/pexels-photo-5851472.jpeg?auto=compress&cs=tinysrgb&w=2400 — Pexels licence.
- Yellow tracksuit on a sunlit basketball court: https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?q=80&w=1600&auto=format&fit=crop — Unsplash licence.
- Still life: board, vase and candle on stone: https://images.pexels.com/photos/7607461/pexels-photo-7607461.jpeg?auto=compress&cs=tinysrgb&w=2400 — Pexels licence.
- Angular glass museum against a bright sky: https://images.unsplash.com/photo-1487958449943-2429e8be8625?q=80&w=1600&auto=format&fit=crop — Unsplash licence.

### Accessibility and Fallbacks

- Without JavaScript, reduced-motion preferences, or WebGL 2 support, the reel becomes a normal photographic list with every project and link available. The rest of the page remains in document flow.
- Reduced motion has both CSS and JavaScript support. The page does not require a scroll animation to expose content.
- Native links, buttons and disclosure summaries carry visible focus styles. The carousel announces project changes and keeps only the active project link in its tab order while enhanced.
- The WebGL source images are decoded before enhancement. A blocked dependency or failed image load restores the source list.
- No pointer-only action is required to read a project. Vertical touch gestures remain page scrolling even when they start on the reel.

### Smooth Scrolling

Lenis is optional. Set `data-smooth="off"` on `<html>` or use `?smooth=off` to use native scrolling. Reduced motion also disables smooth scrolling on initial load. Lenis and ScrollTrigger share GSAP’s clock. If removing Lenis, remove its CDN tag and the complete `initLenis` block; leave ScrollTrigger available for the other animations.

### Dependencies and Performance

| Dependency | Role |
|---|---|
| GSAP 3.12+ (this build pins 3.15.0) | Responsive conditions, tweening, frame scheduling and teardown. |
| ScrollTrigger | The wordmark, studio photograph and project-study scroll treatments. |
| three.js r180 ES module | Rendering and shader deformation of the photo reel. |
| Lenis 1.3.17 | Optional smooth page scrolling. |
| Archivo | Optional Google Fonts typography. |

The animated reel needs WebGL 2, import maps and ES modules. Browsers without these enhancements retain the project content. There is one renderer, with resolution capped and rendering suspended when the reel is out of view or the document is hidden. Desktop uses two finite pins: the reel (2.6 viewport heights) and the photographic accordion (1.15 viewport heights). Phones and reduced-motion layouts stay unpinned. The thumbnail uses the same page styles and reel shaders with a frozen representative state; `thumbnail.html` is a preview asset and is excluded from the buyer download.

### Photographic Accordion

The Another Dimension section separates one image into five strips and brings them together again. Desktop scrolling controls the pinned sequence; the slider can seek its opening half directly. On phones the slider and button animate the strips without pinning. Replace the photograph in both the section image and `.perspective-slice` background in the stylesheet. Without motion or JavaScript, the section shows the complete photograph.

## 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 Creative Studio Portfolio](https://gsapvault.com/templates/creative-studio-portfolio-template)
- [The Vault (£99 one-time, best value): everything in the catalogue, including future releases](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