Fold-out Workshop

Files and setup

Open index.html through a local HTTP server for the complete preview. No buyer build step is needed. assets/style.css and assets/script.js are the editable sources; assets/script.min.js is the compact version generated by the Vault pipeline. The shipping photograph is in assets/img/. This uses GSAP core 3.15.0, with no plugins or smooth-scroll library.

For an existing page, copy the complete <section class="copper-workshop" data-release-notes> and its contents, then load assets/style.css, GSAP and assets/script.js. The preview <main>, body canvas style and head/title are outside the extraction boundary. Do not copy thumbnail.html, which is only a catalogue capture composition. Bring the font links for Chivo and IBM Plex Mono, or replace them with your own fonts. Buyer files do not depend on Vault site assets.

A minimal host loads the same dependencies after the extracted section:

Code snippet omitted: it ships with the download.

Make it yours

Edit headings, paragraphs, date/time, venue, programme, lists and enquiry destinations directly in the semantic HTML. The first cover keeps essential event information visible even when every leaf is folded. The two mailto: links are example destinations: use your own email, booking page or working enquiry form. Update the fictional/sample disclosure to describe your real event accurately.

Each [data-release-item] article contains one [data-release-cover], its native [data-release-toggle] button, and one [data-release-guide] leaf. Add, remove or reorder whole articles; the script derives its items and measures their actual heights. A single article still has a useful fold. Keep the data hooks, and give the new leaf an authored ID. Runtime IDs are made unique for each mounted instance. Edit the closed promise text inside [data-release-promise] and the open action in data-release-close. Keep each promise specific to the content it reveals. Heading tags may change to match your page outline; the classes control their appearance.

The colours, font roles, content width, outer gutter and paper padding sit together on .copper-workshop at the top of the CSS. --release-ground, --release-paper, --release-ink, --release-muted and --release-accent set the brand. Update --release-ink-rgb alongside the ink colour for paper rules/shadows. --release-display, --release-body and --release-meta set typography. --release-width, --release-gutter, --release-space and --release-paper-gutter set scale and spacing. --release-item-gap controls separation between complete items (24px by default). --release-peek controls the main closed paper edge height (16px by default). Container rules recompose the content below 800px and 450px; no full-width, fixed-height or pinned host is required.

Replace the ordinary <img> in the first leaf: update src, both srcset paths, sizes, intrinsic width/height and meaningful alt text. Replace the caption too. Set --release-photo-ratio and --release-photo-position on the root to change crop and focal point; their defaults are 3/2 and 50% 50%. The image frame participates as part of the real paper, so a new subject or source aspect ratio needs no animation rewrite. Keep every source local and optimise it for the rendered size.

Motion and accessibility

data-release-duration="1.15" on the root controls a full fold's duration in seconds, clamped to 0.1–3. Buttons work with Enter/Space. The dots at each crease can be dragged down to open or up to fold; releasing settles at the nearest end. Only the grip prevents touch panning, so the page remains scrollable elsewhere. Quick repeated actions reverse from the current physical angle and settle the most recent choice. Several leaves can stay open together.

Each button's aria-expanded controls its own concealed guide. Closed/moving leaves are inert and hidden from assistive navigation; covers and enquiry remain available. Opening exposes the substantive guide when the paper has settled flat. No JavaScript, missing GSAP and reduced motion show all leaves in ordinary readable document flow, with fold controls removed. Changing the motion preference while mounted restores the flat document. Paper measurements update after font/image loads and content/container changes.

Two sections initialise independently. For client-side navigation, call root.releaseNotes.revert() before removing an instance. This removes only its own tweens, listeners and observers and restores readable authored content. Call ReleaseNotes.mount(root) to mount it again. Repeated mounts replace the old instance. The API also provides getState() and setProgress(value, itemIndex) for host-controlled preview states; without an index, setProgress applies to all leaves. These are optional integration tools, not required visitor controls.

Photograph

The local workshop image is generated concept photography, not a photograph of an actual Copper Press venue or event. It shows hands inking a botanical lino block, paper prints and a traditional press. The visible caption discloses its provenance. Replace it with your own workshop photograph when adapting the section for a real event.