Project Enquiry

Quick start

Keep index.html and assets/ together and open through a normal web server. No build step is required. To place the section in your page:

1. Copy the <section data-project-enquiry>…</section> boundary from index.html.
2. Load assets/style.css, the Google Fonts link shown in the head, GSAP core, then assets/script.js. Copy the local photo alongside the styles/script.
3. Replace the example studio copy and all email destinations before publishing. Remove the preview-only body style when embedding.

Code snippet omitted: it ships with the download.

The heading is an h2 for an existing page. You can change its tag while keeping class="crs__heading". The section does not install smooth scrolling or alter host navigation.

Make it yours

Copy and content live in index.html: studio signature, invitation, fit paragraph, field labels, radio values, timing options and photo caption. Radio values and form field name attributes become the prepared email’s labels/answers. Add, remove or reorder the radio labels and select options directly; keep at least one project choice and one timing option, and exactly one checked radio. The paper brief derives its values from the current markup; there is no second content array.

Change the email in all three places: section data-email, form action="mailto:…", and the direct contact link. projects@commonroom.example is an example address and cannot receive mail. The enhanced email subject/body are URL-encoded automatically. Use a plain email address in data-email, without query parameters.

Edit root controls in .crs-enquiry in assets/style.css: --crs-ground, --crs-paper, --crs-ink, --crs-on-ground, --crs-desk, --crs-line, colour RGB triples, --crs-font, --crs-display, --crs-width, --crs-gutter, --crs-space, --crs-corner and photo controls. Every instance can override them independently. For a woodworking workshop, change the heading to “A piece made for your everyday”, rename the project choices to furniture commissions and use workshop photography. Check contrast again after recolouring.

Replace the photograph

The only image is assets/img/studio-workbench.webp. Recommended source: at least 1200px wide, landscape around 3:2, with the important subject near the centre. Its ordinary <img> has editable src, alt, width and height. Replace the file or point src to your photo, update the intrinsic dimensions and alt text, and adjust root --crs-photo-ratio and --crs-photo-focus. The desktop sidebar uses a 0.8 portrait crop with a 65% 60% focal point. Phones use --crs-photo-mobile-ratio (1.35 by default), and the intermediate two-column context row uses 1.4. Keep the model or another important subject visible in each crop. No timeline, generated artwork, SVG path or repository build tool needs changing.

Behaviour and lifecycle

data-duration="0.35" on the root sets the folding pace: the default complete choreography takes approximately 3.2 seconds; doubling the value doubles the time. Zero disables motion. The section starts fully readable; it does not require a pre-hide boot script. With GSAP unavailable, live brief and email preparation still work immediately.

The script initialises every [data-project-enquiry] at DOM ready and exports:

Code snippet omitted: it ships with the download.

After adding or removing fields at runtime, call destroy() then mount(root) so the new markup is collected. Ordinary buyer markup edits made before loading need no extra step. Call destroy() before removing a root. It removes listeners, its size observer and GSAP media/context work, restores the native form/plain paper presentation and keeps the visitor’s field values. Mount again after reinserting it. Give manually authored copies unique form input IDs and matching label for attributes; mounting also namespaces IDs defensively. Native radios are scoped by their separate form elements. No other page animation is killed.

Accessibility and integration

Fields remain visible and use native labels, radios, select, email input, textarea and required-field validation. Pointer interactions work by keyboard and touch; focus is visible. The live brief is an ordinary semantic article. Preparation folds its three faces and closes an envelope; reopening reverses the same timeline. Editing during folding requests the open state, and repeated actions settle to the latest intention. Notes above 220 characters use a clearly labelled 180-character print excerpt on the folding paper, with the complete untruncated notes in an always-open review below the handoff controls. The email always includes every field in full. Live announcements happen only when the visitor deliberately reviews their enquiry; typing does not continually announce the brief. Reduced-motion preference changes while mounted settle the latest requested state immediately.

This is a front-end email-draft handoff, not a submission backend. “Fold & prepare my brief” prepares an envelope; the separate email link opens the visitor’s configured mail app. Nothing is sent by this page. Email-app availability, body length limits and sending belong to the visitor’s browser/mail client. Without JavaScript, the native mailto: form still offers the visible fields and opens a plain-text draft where the browser supports it; a direct studio email link is also available.

To connect your backend, replace the form’s action/method and replace the submit listener in assets/script.js with your validated delivery handling. Show a success state only after your endpoint confirms delivery. Protect and validate submitted data server-side. The current enhanced listener always prevents native submission so it can prepare the envelope and review.

One native form encloses both the fields and paper preview. The preparation button belongs to the preview column, directly after the paper on phones, so its folding response stays beside the action. A compact phone paper uses the same readable content and complete notes review. The scene preserves its paper footprint while folding and reopening. The envelope settles at the bottom of that footprint, directly above the handoff, so an iframe that fits the complete section does not move the response away from the clicked action. Scene height is measured from the actual paper and responds to copy/font/container changes. Preparation controls give way to the separate reopen/email handoff when settled. The three-column desktop workspace becomes a studio context row above fields/letter below 1100px container width, then stacks at 780px. The prepared desk retains the project and sender summary while keeping the envelope adjacent to its handoff. The section responds to its own container, fits narrow host columns and grows to its content height. It requires no pinning, internal scrolling, viewport height or special host scroll behaviour. Two independently mounted instances, remounting, no-JS, blocked-GSAP, keyboard and mobile/touch interactions were verified in the source build.

Dependencies and credits

• GSAP core 3.15.0; GSAP 3.12+ compatibility floor. No plugins or Lenis are used. See GSAP licensing.
• Newsreader and Space Grotesk via Google Fonts. Newsreader uses the SIL Open Font License; Space Grotesk uses the SIL Open Font License. Buyer fonts load directly, without relying on Vault font paths.
• Model-making image generated with OpenAI image generation for this fictional studio concept, October 2026. It is not a real studio, client project or documented result. Replace it with your own correctly licensed photo for a real practice. The image is an ordinary bundled WebP, independent of the animation.