# Split Screen Template
> A one-page site for an independent industrial design studio, built as two committed full-height fields — an ochre one and a near-black one — divided by a seam the visitor can actually drag. Scroll sends the two fields in opposite directions, the headline straddling the divide is knocked out correctly on both grounds, project plates are dealt out from the seam in a pinned sequence, and a second seam further down bends toward the cursor.
Canonical: https://gsapvault.com/templates/split-screen-template
Live demo: https://gsapvault.com/demos/split-screen-template/index.html
| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger, Draggable |
| Techniques | draggable, parallax, pinning, scrub, scroll-reveal, stagger, clip-path, mouse-follow, pointer-effects, quickTo, token-theming, progressive-enhancement, keyboard-navigation |
| Uses Lenis | Yes |
## Overview
A production-ready one-page site for an independent industrial design studio, shipped as a finished site for a fictional six-person practice, KERF, working out of a converted cutlery works in Sheffield. Real project entries, real capabilities, a real address block: what you open reads as a working studio rather than a grid of placeholder headings.
The whole page is two fields and the line between them. An ochre field and a warm near-black field each hold a full viewport height, and there is no third surface anywhere on the site — no neutral page, no cards floating on a background. Scrolling the hero sends the two fields travelling in opposite directions, and the seam between them is a real control: drag it and one field takes the width off the other, with the display headline that straddles it staying legible on both grounds because it is painted twice and clipped to either side of the divide.
Two more interactions carry the rest of the page. A pinned sequence deals the project plates out of a vertical seam line, edge-on at first, then fanned to alternating sides as the pin scrubs. Further down, a second seam bends toward the cursor on a fine pointer, with the heading's tracking and the ochre hatch reacting to the same input; a touch device gets a machined, notched, straight line instead.
Make it yours by repainting five values in the token block at the top of the stylesheet and swapping the five photographs in assets/img. Every section is found by a data attribute and separately guarded, so you can delete the pinned work stage, the capabilities index or the workshop split and the rest keeps running.
## Features
- Two committed full-height fields, ochre and near-black, with no third surface anywhere on the page
- A draggable seam that re-weights the two halves, carries on to a near full-bleed extreme when you throw it, and settles back to level with an eased overshoot rather than a snap
- A display headline straddling the seam, painted twice and clipped to either side of it, so it reads correctly on ochre and on near-black and the knockout follows the handle
- Counter-scrolling fields: the ochre side rises and the near-black side falls as the hero leaves, with the photographs given more travel than the copy beside them
- Three project plates dealt out of a vertical seam line in a pinned, scrubbed sequence, budgeted at more than a viewport of travel per plate so one hard flick cannot clear the lot
- A second seam that bends toward the cursor across five nodes, widening the heading's tracking and lifting the ochre hatch off the same pointer input
- A ruled capabilities index whose numbers hang outside the text column, set against the sparse studio statement above it
- An oversized ghost numeral and a contact address deliberately run past the edges of the page
- Bundled, optimised WebP photography, every frame baked to monochrome so ochre stays the only colour on the site, with per-image brightness matched to the ground it lands on
- Every measured contrast ratio written into the stylesheet header, including which colour is banned as text on which field and why
- Accessible throughout: a complete static document with no JavaScript, a designed reduced-motion page with the plates back in a plain index, a keyboard-operable seam slider, and a blocked CDN that degrades to the plain document
## Use Cases
- Industrial, product and furniture design studios presenting their own practice
- Engineering, prototyping and small-batch manufacturing businesses
- Architecture and interiors practices that want a hard, two-colour identity rather than a neutral page
- Any studio whose work is best shown as a small number of substantial projects rather than a large grid
- Design and fabrication consultancies that want a site with one memorable interaction rather than a carousel
- A starting point for any two-tone brand, since the whole palette is five values in one token block
## Questions about this template
### Can visitors really drag the divide?
Yes. The seam re-weights the two halves, carries on to a near full-bleed extreme if you throw it, and settles back to level with an eased overshoot rather than snapping. It is keyboard-operable as a slider too, so it is not a pointer-only flourish.
### How does the headline stay readable across two grounds?
It is painted twice and clipped to either side of the seam, so it reads correctly on ochre and on near-black, and the knockout follows the handle as you drag. The stylesheet header records which colour is banned as text on which field and why.
### Do my photographs need to be monochrome?
Effectively yes. Every bundled frame is baked to monochrome so ochre stays the only colour on the site, with per-image brightness matched to the ground it lands on. Dropping in colour photography breaks the two-colour idea that is the whole template.
### Is it only for industrial design?
No. Engineering, prototyping, small-batch manufacturing, architecture and interiors all suit the hard two-tone identity. What it needs is a small number of substantial projects rather than a large grid: three project plates are dealt from the seam, and that count is the shape of it.
### Can one fast scroll flick past the whole project sequence?
No. The plates are budgeted at more than a viewport of travel each in the pinned scrubbed sequence, so a single hard flick cannot clear the lot. Under reduced motion the plates fall back to a plain index.
## 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 initialises every section inside a single gsap.context, with one gsap.matchMedia whose condition sets cover coarse pointers and narrow viewports as well as desktop, so exactly one branch runs on every device. Each block is found by a data attribute and returns early if it is absent, so deleting any section leaves the others working. Teardown is ctx.revert(), exposed on window, because kill() would leave matchMedia's own cleanup unrun.
### The draggable seam
One CSS custom property, --seam-x, is the single source of truth for the split. The ochre field's width, the masthead's paint stop, both clipped copies of the headline and the reflow width of each field note all read it, so moving the handle re-cuts the whole composition instead of sliding a divider across it. Draggable drives a detached proxy element rather than the seam itself, which keeps the divider from having two sources of truth. Two more channels come off the same drag: the headline's tracking tightens as the ochre field loses ground, and the hatch on the ochre field strengthens as it gains. Released past thirty or seventy per cent, the seam carries the rest of the way to a near full-bleed extreme on a long expo run-out; released nearer the middle, it settles back to level with a small overshoot.
### The straddling headline
The headline is drawn three times: once for assistive technology in a visually hidden span, then twice on screen. One painted copy is near-black and clipped to everything left of the seam, the other is bone and clipped to everything right of it, both against the same --seam-x. That is why the type stays legible whichever ground it lands on, and why the knockout follows the handle without any per-frame work. Below 820px the same two copies clip horizontally instead, against the join between the stacked fields.
### Plates dealt from the seam
The work section pins and scrubs. Each project plate starts flattened edge-on against the vertical rail, opens out, and is thrown to its side with a little rotation, the way a card leaves a dealer's hand. The pin is budgeted at more than a full viewport of travel per plate, so a single hard scroll flick cannot clear the sequence and land past it with the deck already built. Without JavaScript, and under reduced motion, the same plates render as a plain three-up index in ordinary document flow.
### The bending seam
The second split is divided by a five-node clip-path polygon whose nodes are CSS variables. On a fine pointer, each node is pulled sideways by a bell curve centred on the cursor's height, so the bend is strongest beside the pointer and eases away above and below it; quickTo setters smooth the whole thing and a single ticker callback writes the variables. The same pointer position widens the heading's letter-spacing and lifts the ochre hatch. On a coarse pointer none of it runs and the seam holds a straight, notched, machined edge, which is a designed state rather than a switched-off one.
### Without JavaScript
The gating class goes on in the head before first paint, so reveal start states apply to the first frame and nothing is painted visible and then hidden; the script removes that class when GSAP is missing, so a blocked CDN degrades to the plain document. With scripting off the seam sits at the halfway mark, the headline still reads correctly on both fields because the clipping is pure CSS, the work plates render as a three-up index and the second seam is straight and notched. Under reduced motion the seam stays operable from the keyboard, it just moves in one step instead of easing.
## 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. Upload the whole folder to any static host (Netlify, Vercel, Cloudflare
Pages, S3, a plain Apache directory). `index.html` is the site.
2. Replace the fictional studio: search `index.html` for **KERF**, the address
on Cornish Street, the phone number and `studio@kerf.works`.
3. Replace the photographs by dropping your own files over the five in
`assets/img/` (see [Photography](#photography)).
4. Repaint the palette: five values at the top of `assets/style.css` (see
[Palette](#palette)).
Open it locally over `file://` if you like, but serve it over HTTP
(`npx serve`, `python3 -m http.server`) before judging the scroll: pinning and
smooth scroll both behave differently from a file URL.
#### What loads
```html
```
Everything is optional except `gsap.min.js` and `ScrollTrigger.min.js`. Drop
`Draggable.min.js` and the seam becomes a keyboard-only slider. Drop Lenis and
the page uses native scrolling; nothing else changes.
`assets/script.min.js` is the minified build of `assets/script.js`. Point the
last tag at whichever you prefer; edit the unminified one.
---
### Accessibility
- **Without JavaScript** the page is a complete, readable document. The seam
sits at the halfway mark, the headline still reads correctly on both fields
because the clipping is pure CSS, the work plates render as a plain three-up
index, and the second seam is a straight, notched line. If the GSAP CDN is
blocked, `script.js` removes the `has-js` class so nothing stays hidden behind
an animation that will never run.
- **Reduced motion** gets a designed static page rather than the animated one
switched off: the fields hold level, the plates return to the three-up index
in ordinary flow, the second seam is straight, and every reveal is simply
visible. The seam slider stays operable from the keyboard — it moves in one
step instead of easing.
- **The seam is keyboard-operable.** The handle is a focusable `role="slider"`
with an `aria-label`, a live `aria-valuenow` and a spoken `aria-valuetext`.
Left and right arrows move it in 4% steps, `Home` and `End` go to the two
extremes, `PageUp`/`PageDown` step just inside them.
- **Touch.** The bending seam is a fine-pointer interaction; a coarse pointer
gets the notched straight edge instead. Below 820px the split turns vertical —
ochre above, near-black below, the headline straddling the join and clipped
horizontally — and the drag handle steps aside. The two committed fields, which
are the identity of the page, survive intact.
- Skip link, visible focus rings (recoloured per ground so they are never bone
on ochre), one `