← Back to Hangline
How to use
One line of prints hung in a single 3D camera — on a real washing line, with a wire and wooden pegs, swinging as the line moves. Scroll, drag or use the arrow keys to walk along it, hover to lift a print, click to open it. Everything you need to set it up is on this page.
01
Drag Hangline onto a page and set Width to 100% and Height to 100vh. It arrives with eleven demo prints, so you see it working right away. On the canvas it shows a still frame with a short hint; the motion plays in Preview and on your site.
02
Choose one of two ways. When both are set, the CMS wins; with neither, the demo prints show.
A — Prints list. In the properties panel open Prints and press +. Each print takes an Image and optional Title, Place, Year, Camera, Settings, Series, Caption and Link. Up to 40 prints.
B — CMS. 1. Add a Collection List anywhere on the page (off the visible area is fine) and set its source to your collection. 2. Inside the item put an Image layer, then text layers in this order: Title, Place, Year, Camera, Settings, Series, Caption. Skip the ones you don't need. 3. Link the item to its CMS page if you want the View print button. 4. Select Hangline and pick the Collection List under Prints (CMS). This project is set up exactly this way: see the Prints collection, the list beside the Home page and the /prints/:slug detail page.
03
Set the look under Camera in the properties panel: Pos X, Pos Y, Dolly, FOV, Yaw, Roll, Size, Right, Rise, Depth, Push X, Push Y and Float — plus Sway (how far prints swing when the line starts or stops), Breeze (a slow drift at rest; hovering a print adds a gust) and Sag (how much the wire droops). Press Preview to see it move.
In Preview, Settings in the corner opens the same sliders as a live panel. It is a preview only — nothing is saved, and Reset returns to your Camera settings.
The panel is also a feature for your visitors. To hide it, set Settings panel → Show to No. You can also change its side, button label and heading, have it start open, and raise it with Lift and Lift (phone) so it clears a fixed navbar or cookie bar.
04
Text: Title, Description, Cue (leave it empty to hide it), Close label and View label. Counter shows or hides the 01 — 11 pill.
Fonts: Built-in loads Anton, Geist and Geist Mono. Choose Custom to pick your own Title, Text and Label fonts.
Colors: Background, Ink, Grey, Line, Button text, Depth veil (what far prints fade into), Print back (shown while an image loads), Paper edge and Paper side. For a dark look set Background #0E0E0C, Ink #F3F1EC, Grey #8A877F, Line #2A2925, Depth veil #0E0E0C and Button text #0E0E0C.
Open & scroll: where an open print sits (Open X), how big it opens (Open size) and how fast the wheel moves the line (Scroll speed). Washing line: Show, Pegs, Wire colour and Peg colour — turn it off for a plain floating hang.
05
Hangline measures itself, so one instance covers every breakpoint. When it is wider than tall, the line runs up and to the right and an open print sits beside its details. When it is taller than wide — phones and tablets held upright — the line runs down the screen, an open print fills the width and its details sit below it. Fine-tune that layout under Phone: Print size, Pos Y, Shift down, Open width and Open Y.
On touch screens swipe to walk the line and tap to open a print. The Settings panel becomes full width on small screens. Title on phone hides the big title on upright screens if you need the room.
06
While Hangline fills the screen, the mouse wheel walks the line instead of scrolling the page. Use it as a full page, or as the last section of one.
Prints are shown at 1.3 : 1 and filled edge to edge, so landscape images work best.
On the canvas and in exports nothing animates: Hangline draws one still frame. The hint on the canvas only appears while demo prints show, and never on your site; turn it off with Canvas hint.
Keyboard: focus the line, then ← → or ↑ ↓ to move and Esc to close. People who prefer reduced motion get the same layout without the intro and drift. The animation stops when Hangline is off screen or the tab is in the background.