Design Studio Template

Quick Start

1. Unzip the download and keep index.html beside the assets folder.
2. Open index.html in a browser, or upload the folder to your static host.
3. Replace the FORME name, fictional projects and hello@forme.example address before publishing.

No build process is required. Google Fonts and the two animation scripts need an internet connection; native content and project details remain usable if the animation CDN is unavailable.

Using It With Your Own Design

The main sections are #home, #work, #studio, #approach and #contact. Any section can be removed; remove the navigation links pointing to it too. The journal and coffee artwork are editable HTML/CSS; the furniture project uses a bundled photograph. You can replace an .artwork block with your own image while retaining its project caption and native <details> story.

Keep the synchronous .has-js head boot before the stylesheet when using the entry animations. The script removes the reveal gate if GSAP is unavailable. The reveal targets use data-hero-fade and data-reveal; use these sparingly for new content.

Options

Hook	Purpose	Change
data-cover	Interactive journal cover	Edit its title and default artwork in HTML
data-edition-button	Edition choices	one and two; captions live in applyEdition
data-mark-range	Turn the cover mark	Native range bounds in HTML
data-case	Expandable project story	Duplicate or remove a whole project
data-enquiry	Email draft composer	Change field options and direct email destination
data-reveal	Small section heading entrance	Add to suitable headings or remove

Cover artwork

Odd Hours has two cover editions. Edit the copy in applyEdition alongside the default cover markup, and set each edition's material in .cover[data-edition]. The range affects only the decorative mark. Remove the complete cover controls to present a static poster; the artwork still reads as a finished composition.

Handling the journal

Drag the hero cover horizontally to change its edition; the numbered buttons provide the same choice by keyboard and touch. Vertical phone gestures remain page scrolling. Scroll position opens the first project's printed spread and reverses it on the way back. The data-journal-range input takes over the pose until the scene is left, with native Home, End and arrow-key support. Reduced motion keeps these controls immediate. Remove the complete data-journal-control label for static artwork.

Project stories

Each project contains an artwork block, title and discipline caption, and a native details element. Its summary remains keyboard operable without JavaScript. With motion enabled, opening and closing animate their height, including an immediate reversal before the transition finishes. The detail contains a creative story, definition list and second artwork. The fictional client graphics are included for adaptation; they are not claims of commissioned work.

Furniture photography and detail view

assets/img/ordinary-chair.webp is the bundled 1000 × 1120 graded image. Replace it with your own photograph and update its alt text and dimensions in index.html. The image uses an object position of 50% 100%; check the complete chair at phone width after changing it. For repository regeneration, edit assets/img-manifest.json and run bun scripts/build-template-assets.ts design-studio-template.

The data-photo-inspect button switches between the whole image and a closer view. Mouse movement explores the detail; touch and keyboard users toggle the same enlarged centre view with the button. The five decorative shutters reveal on scroll and are removed from the experience when motion is reduced or JavaScript is unavailable. No WebGL dependency is required.

Scroll scenes and contact actions

The hero cover's data-cover-scroll wrapper tilts and lifts as it exits, independently of the cover's edition drag. The two data-studio-statement lines move into alignment; the studio symbol rotates into place. Each uses a reversible scroll-linked timeline with no pinning. Remove the relevant hook or element to remove a scene. Reduced motion leaves the final static composition and manual journal control.

The contact capsules use data-contact-cta for their spreading accent, arrow turn and press feedback. The large contact link targets #enquiry; the form button still prepares a local email draft and does not send or save a submission. Keyboard focus receives the same colour and arrow response as hover.

Supporting responses

The coffee applications separate as they enter the viewport. Navigation underlines, action arrows and linked capability rows respond to hover and keyboard focus. Capability links lead to the contact brief. All motion belongs to the template context and respects the motion preference.

Enquiry composer

The form collects a name, email, project type and message, then opens an email draft addressed to the .email-link destination. Nothing is transmitted or stored by this page. Replace hello@forme.example, the greeting and the sample copy. Visitors without JavaScript can use the native email form action or the direct email link.

For server submissions, replace the draft handler with your own endpoint or connect Formspree, Netlify Forms or a CRM. Update the visible button, status and disclosure to accurately describe the new behaviour.

Palette

assets/style.css starts with semantic tokens for paper, ink, muted text, orange cover stock, pale olive and the secondary ground. Each has a matching RGB triple for translucent rules. Keep dark ink over the orange and olive materials; the orange is not intended for small text on paper.

Instrument Sans carries the studio interface, while Georgia belongs to the fictional journal identity. Replace both typography roles to change the studio and client separately. The font stylesheet uses Google Fonts with display=swap, not a Vault-hosted font path.

Accessibility

• Native links, form controls, range and project disclosure controls support keyboard and touch.
• Visible focus, a skip link and labelled artwork are included.
• Reduced-motion visitors receive immediate cover changes and a static, readable page.
• With JavaScript disabled, all content and project disclosures remain available; optional cover controls are hidden; the form retains its native email action and direct email remains available.
• Blocked animation scripts remove the reveal gate and leave the cover controls functional without motion.
• The page has no scroll pins or automatic looping animation.

Dependencies

• GSAP 3.15.0 and ScrollTrigger, loaded from CDN. Compatibility floor: GSAP 3.12+.
• Instrument Sans from Google Fonts; system and Georgia fallbacks remain available.
• No Lenis, three.js, framework or buyer build step.

Teardown

Call window.gsapContext.revert() when removing this template inside a client-side application. It reverts its media contexts and ScrollTriggers, removes owned listeners and reveal gates, and preserves unrelated page animations. Do not replace it with a global ScrollTrigger kill.

Assets and credits

The fictional Odd Hours and Common Ground graphics, and the Ordinary Objects catalogue typography, are local HTML/CSS compositions created for this template. The chair photo is by iJoxi Studios: https://www.pexels.com/photo/a-brown-wooden-chair-12965306/ (Pexels licence: https://www.pexels.com/license/). It illustrates a fictional portfolio project; no photographer endorsement or commissioned client work is implied. The bundled WebP is cropped and graded for this template. Instrument Sans is served by Google Fonts; follow its font licence if self-hosting it. FORME and all client content are worked examples: replace names, dates and contact details for your business.