# Lookbook Template > A lookbook website template written as a womenswear label's collection: two full-bleed plates meeting at a hard seam under a display line, nine numbered plates in a contact sheet that fly out to full screen and back into their own cell, a word that comes through a photograph on scroll, and four prints you throw off a pile. Re-points to a fashion label, a photographer's portfolio, an interiors studio, a ceramicist or a jewellery maker. Canonical: https://gsapvault.com/templates/lookbook-template Live demo: https://gsapvault.com/demos/lookbook-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £10 | | Difficulty | advanced | | Plugins | ScrollTrigger, Flip | | Techniques | flip-layout, shared-element, lightbox, pinning, scrub, clip-path, mask-reveal, drag-interaction, pointer-effects, click-state, keyboard-navigation, scroll-reveal, token-theming | | Uses Lenis | Yes | ## Overview Lowrie is a complete one-page site for a womenswear label in Margate, and the whole page is printed on coloured stock: one mid-value greige ground carries every section, and the clothes are the only colour anywhere on it. The hero is two photographs meeting at a hard seam with the collection line set across it. Under that, five cloths sit in a ruled table with their mills and weights, then nine numbered plates fill a contact sheet. Opening a plate does not build a new picture. The photograph is lifted out of its cell and flown to full screen with its cloth, sizes, colourway and price beside it; arrow keys walk the collection, and closing it seats the same photograph back into the same cell. Further down, one word comes through a photograph as you scroll it, and four contact prints sit face up on a dark field waiting to be thrown onto a pile. The fiction is a label that cuts forty-eight of each piece and numbers its collections rather than naming them after seasons. The page reads the same with the clothes swapped for rooms, pots, rings or a photographer's series: every plate is a photograph, a number, a name and a price, and the sheet works with any number of them. Everything is static HTML, CSS and one script: no build step, no framework, two typefaces from Google Fonts. Four stocks ship as complete token blocks, Greige, Rose, Sage and a near-black Ink that inverts the stack band to bone, and a fifth is a handful of values in the same block. Drop your own photographs into assets/img and rewrite the copy. Each section is independent, so any of them can be deleted without touching the JavaScript, and without JavaScript the nine plates are simply nine photographs with their prices under them. ## Features - The sheet: nine numbered plates in a contact grid, any one of which flies out of its own cell to full screen with its cloth, sizes, colourway and price, then seats itself back into the same cell on close - Plate only: one press takes the chrome away and scales the photograph up to cover the screen, so the picture can be looked at with nothing on it - Arrow keys, prev and next walk the collection inside the viewer without closing it, cross-fading the photograph and re-staggering the record - A word that comes through a photograph: two copies of one word either side of the picture, the front one clipped away and opened by a pinned scrub as the frame settles out of a slow zoom - The stack: four contact prints face up on a dark field, thrown aside by dragging or by a button, landing rotated on a pile that counts down, with a restack that deals them again - Hero as two full-bleed plates on a hard seam, the right one cropped so the figure runs off the edge, with the collection line masked in over it - Sixteen baked WebP photographs, graded as one set, with a manifest to regenerate them from your own - Four complete stocks: Greige, Rose, Sage and a near-black Ink that inverts the stack band to bone, each measured at its own contrast figures, set with one attribute on the root element - No accent colour anywhere in the interface by design: the only non-neutral value on the page is the colourway swatch, which takes the colour of the garment - A contents panel on phones, numbered the way the plates are, with the four header links kept in place when JavaScript is not available - Designed reduced-motion and phone pages: the word is already through the photograph, the prints fan rather than stack, and the viewer opens without the flight - Readable with JavaScript disabled or the CDN blocked, every plate, price, cloth and stockist included - Lenis smooth scroll wired on the shared GSAP clock, opt-out per page or per URL ## Use Cases - Fashion labels and clothing brands presenting one collection at a time - Photographers publishing a series where the pictures are the whole site - Interiors and homeware studios showing a range of pieces with their materials - Ceramicists, jewellers and makers with a short numbered run - Galleries and dealers presenting works with their dimensions and prices - Any site whose content is a set of photographs that deserve the full screen ## Questions about this template ### It's a clothing label in the demo. What else does this design suit? Anything whose content is photographs worth the full screen: a fashion label, a photographer's series, an interiors or homeware studio, a ceramicist, a jeweller, a gallery. Each plate is a photograph with a number, a name, a material, a size and a price, and the record beside it is five lines you can rename. Nothing in the layout says clothing except the words and the pictures. ### How many plates can the contact sheet hold? Nine is the demo, and the script counts whatever is there rather than assuming a number, so six or twenty work without touching the JavaScript. Each plate is one list item with a button carrying its record on data attributes. Below about six the grid stops reading as a contact sheet; above about twenty the page gets long enough that a visitor stops opening them. ### Can I use my own photographs, and what happens to the sixteen included? Yes. The sixteen are graded WebP derivatives of Pexels photographs, bundled for the demo, and you can ship them or replace them. Drop your own files into assets/img with the same names, or edit assets/img-manifest.json with your sources and run the bake script for matched, optimised WebP with one grade across the set. The plates want a 3:4 portrait crop, because the viewer uses the same ratio so the photograph scales evenly as it flies. ### Are the prices, sizes and colourways real fields I can edit? They are attributes on each plate button in index.html: name, cloth, price, sizes, colourway and a hex. The hex paints the small swatch in the viewer, which is the only non-neutral colour on the whole page, so it takes the colour of the garment rather than of the brand. Rename the labels in the viewer's list if your pieces have different fields, or delete a line from it. ### Does it sell anything, or take an enquiry? No. There is no basket and no checkout, and the enquiry form at the foot collects a name, an email and a note and then says plainly that nothing was sent. This is a static front end with no server behind it, so point the form at Formspree, Netlify Forms or your own inbox, and if you want to sell, link each plate to a product page on Shopify or Stripe. ### How does it behave on a phone? The hero shows one photograph rather than two, the contact sheet drops to two columns, the word and its picture are a still composition with no pin, and the pile beside the prints is hidden so the prints have the width. The header links collapse into a contents panel numbered the way the plates are; without JavaScript they stay in the header, so nothing sits behind a button that cannot open. Dragging a print still throws it, and a vertical swipe scrolls the page. ### Can I change the colour, and do I have to build it myself? Four stocks are built in: Greige, Rose, Sage, and a near-black Ink that inverts the stack band to bone so the page keeps its rhythm. Put data-palette="rose" on the html tag, or copy that block's values into the main token block and delete the rest. A fifth is a handful of values in the same shape. The one thing to watch is that a mid-value ground gives far less contrast headroom than white paper, so the measured figures for every pair are written above the tokens. ## 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 ### Structure One script, one setup and teardown path, one init per section, each returning early when its markup is absent, so any section can be deleted. A synchronous head script adds a class before first paint so the reveal states apply without a flash, and the main script removes it again when the CDN is blocked. The nav sits in the flow rather than fixed, because a translucent bar over full-bleed photography collides with whatever lands under it. In-page links are scrolled by the script rather than by the browser, since a native hash jump into a pinned section lands wherever the pinned element currently is. ### The sheet The viewer holds one photograph, not nine. Opening a plate copies that plate's source into it, uses Flip.fit to park it exactly over the cell that was clicked, records that state, releases it back to its full-screen layout and plays the recorded state forward, so the photograph appears to grow out of the sheet. Closing records the full-screen position, fits the image back onto the cell and plays that, which is why it lands in the plate it came from rather than near it. The cells keep their size throughout, so nothing below the sheet moves while a plate is open. ### Plate only The extreme state scales the photograph rather than resizing it: the script measures the image's untransformed box, divides the viewport by it and tweens scale to whichever of the two axes is larger, so the picture covers the screen with no layout pass at all. Dividing by the scale already applied is what stops a second press compounding it. Clicking the photograph does the same thing, which is how a full-screen picture is expected to behave, and Escape steps back out of it before it closes the viewer. ### The word through the photograph Two copies of the word sit either side of the picture in the same grid cell, so they occupy exactly the same place. The front copy is clipped to nothing with clip-path at rest, and a pinned scrub opens the inset from the bottom while both copies scale and drift together and the frame settles out of a slow zoom. Because both copies move on the same tween they stay registered; animating only the front one would show it sliding off its own shadow. ### The stack The prints are absolutely stacked and laid out by one function that reads the live array, so throwing one is a matter of shifting the array and laying out again. The drag is written by hand rather than with a plugin so it can refuse a gesture: nothing is committed on the press, and the drag only begins once the movement is more horizontal than vertical, which leaves a finger that lands on a print and swipes up free to scroll the page. Past a threshold of movement or speed the print is thrown with a weighted decay and lands rotated on the pile. ### Without JavaScript or motion Without the script the page is a plain document: the nine plates are nine photographs with their names and prices, the viewer never appears, the word sits behind its picture and the prints are a stack of images. Under prefers-reduced-motion the CSS restores every gated element, the word is already through the photograph with no pin, the viewer opens and closes with no flight, and the prints are thrown by the buttons with no animation. ## Integration Preview How this template integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick start No build step, no framework. Static HTML, CSS and one script. 1. Unzip. 2. Open `index.html` in a browser, or serve the folder with any static server (`npx serve`, `python3 -m http.server`). 3. Deploy the folder as-is to Netlify, Vercel, Cloudflare Pages, GitHub Pages or your own host. GSAP, ScrollTrigger, Flip and Lenis load from the CDN tags at the foot of `index.html`. ## 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 Lookbook Template](https://gsapvault.com/templates/lookbook-template) - [The Vault (£99 one-time, best value): every current and future effect, template and UI element](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