---
name: Slipstream
version: "1.0"
theme: dark-portfolio
kit: stacklift/slipstream
full-kit: "https://www.stacklift.design/kit/slipstream"
tier: premium
price: 29
tags: ["portfolio", "photography", "drag-inertia", "split-screen", "editorial"]
colors:
  ink:        "#13151a"
  paper:      "#f2efe8"
  signal:     "#FBC711"
  rail:       "#1a1d24"
  ink-soft:   "#3a3d45"
  paper-dim:  "#d8d3c6"
fonts:
  display: "Bricolage Grotesque"
  mono:    "Martian Mono"
signature_gesture: drag-inertia
images:
  count: 8
  ratio: "4:5"
  path: images/shot-0N.jpg
---

# Slipstream

A Stacklift kit — full kit at
[www.stacklift.design/kit/slipstream](https://www.stacklift.design/kit/slipstream).

A split-screen photography portfolio built around one dominant gesture: you grab
the gallery and throw it. The left deck coasts under inertia and decays through
friction; the right anchor never moves. One gesture, one rest zone — physics
imitated, never exceeded.

## Layout

Two-column stage, full viewport height. The left **deck** holds a vertical stack
of 4:5 frames. The right **anchor** is a fixed editorial block: kicker, display
headline, lede, two CTAs, and a footer line. The anchor is the rest zone and does
not move while the deck is thrown.

A full-screen overlay menu drops from the top in four columns (Series / Studio /
Words / Contact), separated by hairline rules, headed in signal yellow.

## Photo sheet (click a frame)

Clicking a frame slides a panel in from the right (~62vw) over a dimmed deck.
The split grammar repeats inside it: photo left, story right — frame number,
title, a short first-person note, and technical specs. Prev/next arrows (and
←/→ keys) page through the series without leaving the sheet. Click/drag are
disambiguated by a 5px threshold, so throwing the deck never triggers the sheet.

## Contact view (full-screen, re-split)

A full-height view slides up from the bottom: form left (name, email, project,
send), studio details right (email, hours, socials, commission scope). Same
tokens, same split, same fonts. Reachable from the hero "Commission" button and
from the menu.

## Design System view (full-screen)

The kit's own design system (color tokens, type pairing, the gesture principle)
and the Stacklift attribution live in a full-screen view that slides up from the
menu — **Contact → Design System**. It is kept out of the portfolio flow so the
demo reads as a real photographer's site, with the kit meta one click away.

## The gesture

- **Drag + throw.** Pointer-down captures the deck; pointer-move drags it 1:1;
  pointer-up releases it with the velocity of the throw.
- **Inertia + friction.** After release the deck coasts and decays
  (`vel *= 0.94` per frame), clamped at both ends. Throw velocity is capped so
  the motion never outruns believable physics.
- **Wheel parity.** The scroll wheel maps onto the same eased physics, so
  non-dragging users get the identical feel.
- **No stacked motion.** No parallax, no magnetic snap layered on top. A single
  dominant gesture by design.

## Type & color

Display is **Bricolage Grotesque** (800 / italic 400 for the accent word); all
UI text is **Martian Mono** 300–500, uppercase with wide tracking for labels.
Ink `#13151a` ground, paper `#f2efe8` anchor, a single signal accent `#FBC711`
used only for the progress rail and overlay headers.

## Tokens

| Token        | Value      | Role                         |
|--------------|------------|------------------------------|
| `--ink`      | `#13151a`  | Deck / overlay ground        |
| `--paper`    | `#f2efe8`  | Anchor ground                |
| `--signal`   | `#FBC711`  | Progress rail, overlay heads |
| `--rail`     | `#1a1d24`  | Deck surface                 |
| `--ink-soft` | `#3a3d45`  | Muted text                   |
| `--paper-dim`| `#d8d3c6`  | Frame meta text              |

## Images

Eight 4:5 frames in `images/` (`shot-01.jpg` … `shot-08.jpg`), an editorial
generalist series: portrait, landscape, street, architecture, still life,
motion, interior, sea. Unified treatment — natural light, fine film grain, muted
warm grade. Each `<img>` carries an `onerror` fallback to a striped placeholder
so the kit degrades gracefully if an asset is missing.

## Customizing

Swap the eight files in `images/` (keep 4:5, keep the names). Edit the anchor
copy in the `.anchor` block. Retune feel via two constants in the script: the
friction factor (`0.94`) and the throw velocity cap (`±90`). All CSS and JS are
inline; the only external dependency is Google Fonts.

### Menu wiring

The **Series** column is a live table of contents: each item glides the deck to
its frame and opens that photo's sheet (`data-i` maps to the frame index). Edit
the eight story entries in the `stories` array in the script.

Links marked `is-soon` (Studio, Words, Instagram, Newsletter) are intentionally
greyed and inert — they are placeholders for the buyer to wire to their own
pages. Remove the `is-soon` class and add an `href` (or click handler) once the
destination exists. **Commission** and the eight **Series** items are the only
pre-wired links.