Skip to content

Build a responsive 3D assembly for the homepage hero #455

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
loftwah merged 1 commit into from
Nov 12, 2026
+181 −394
Merged

Build a responsive 3D assembly for the homepage hero #455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion DESIGN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ The homepage uses a theme-aware ink-and-orange assembly studio: the opening and

Theme correction, 11 November 2026: the opening and closing panels previously stayed dark/light regardless of the toggle. They now follow the active theme, and the header controls sit on matching surfaces. The light opening uses dark ink on warm paper with a darker orange accent; the dark opening uses light text on ink with the brighter accent. The closing panel follows the same pairing.

The reference is a craft benchmark, not a substitute for Composer's identity. Reviewed 11 November 2026 at 1440px and 390px in both themes, with 1024/768/600/320px overflow checks. The gallery uses large app captures without horizontal cropping, the hero keeps its editorial bleed without clipping its labels, the film cover uses a separate control bar, and the closing headline holds two lines on phones. Above 900px, the headline scales within its own grid column and the moving app sheets have a separate column with room to bleed at the right edge. At 660px and below, the art follows the copy in the page flow. Keyboard tabs (arrows, Home and End), the launcher, theme persistence, skip-link focus, reduced motion, the Woodhouse builder-context strip and the JavaScript-free gallery were exercised. Issue #7 owns the public experience and #11 owns the release evidence; production identity and live-flow results are recorded there after the clean-main release.
The reference is a craft benchmark, not a substitute for Composer's identity. Reviewed 11 November 2026 at 1440px and 390px in both themes, with 1024/768/600/320px overflow checks. The gallery uses large app captures without horizontal cropping, the hero keeps its editorial bleed without clipping its labels, the film cover uses a separate control bar, and the closing headline holds two lines on phones. The hero uses a bounded, aspect-ratio scene in its own grid column. At 820px and below, it follows the copy in the same grid. The approved orange plate, Paperwork capture and fictional Launch Kit card form an exploded assembly with a brief connection pulse and gentle pointer tilt. CSS perspective and transforms move the art inside its own frame. Reduced-motion visitors see the resting composition. Keyboard tabs (arrows, Home and End), the launcher, theme persistence, skip-link focus, reduced motion, the Woodhouse builder-context strip and the JavaScript-free gallery were exercised. Issue #7 owns the public experience and #11 owns the release evidence; production identity and live-flow results are recorded there after the clean-main release.

## Approved identity and campaign direction — 22 October 2026

Expand Down
125 changes: 68 additions & 57 deletions src/components/ProductHome.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,6 @@ const siteSchema = {
<div class="hero-rule" aria-hidden="true"></div>
<div class="hero-inner">
<div class="hero-copy">
<p class="home-eyebrow hero-eyebrow">
<span></span> An open studio for building software
</p>
<h1 id="home-heading">
Make software.
<br />
Expand All @@ -87,68 +84,63 @@ const siteSchema = {
</a>
</p>
</div>
<div class="studio-scene" aria-hidden="true">
<div class="studio-backplane">
<img
src="/brand/composer-mark-reverse-20261022b.svg"
width="84"
height="84"
alt=""
/>
<span class="backplane-label">
THE PIECES
<br />
ARE YOURS.
</span>
<div class="backplane-rule"></div>
</div>
<svg class="studio-connections" viewBox="0 0 800 740" fill="none">
<path class="connection-faint" d="M130 140H680V620H80V380H350" />
<path class="connection-active" d="M85 275H275V535H610V650" />
<circle cx="85" cy="275" r="5" />
<circle cx="610" cy="650" r="5" />
<path
class="connection-tick"
d="M65 132H95M80 117V147M665 630H695M680 615V645"
/>
</svg>
<div class="studio-sheet studio-output">
<div class="sheet-label">
<span>Launch Kit</span>
<span>Exported profile card</span>
<div class="studio-scene" data-studio-scene aria-hidden="true">
<div class="studio-assembly">
<div class="studio-plate">
<img
src="/brand/composer-mark-reverse-20261022b.svg"
width="84"
height="84"
alt=""
/>
<div class="studio-slot"></div>
</div>
<img
src="/launch-kit/cards/river-typography.png"
width="1200"
height="630"
alt=""
decoding="async"
fetchpriority="high"
/>
</div>
<div class="studio-sheet studio-app">
<div class="sheet-label">
<span>Paperwork</span>
<svg
class="studio-routing"
viewBox="0 0 600 540"
preserveAspectRatio="none"
fill="none"
>
<path class="studio-guides" d="M38 126V42H122M480 498H562V416" />
<path
class="studio-route"
d="M483 240H546V396H410"
pathLength="100"
/>
<path
class="studio-signal"
d="M483 240H546V396H410"
pathLength="100"
/>
<circle cx="546" cy="396" r="4" />
</svg>
<div class="studio-sheet studio-output">
<div class="studio-label">Launch Kit <span>Profile card</span></div>
<img
src="/launch-kit/cards/river-typography.png"
width="1200"
height="630"
alt=""
decoding="async"
/>
</div>
<div class="studio-sheet studio-app">
<div class="studio-label">Paperwork <span>PDF editor</span></div>
<img
src={paperwork.preview}
width="1440"
height="1100"
alt=""
decoding="async"
/>
</div>
<img
src={paperwork.preview}
width="1440"
height="1100"
alt=""
decoding="async"
/>
</div>
<div class="studio-coordinate">
<span>BUILD / CONNECT / OWN</span>
<span class="coordinate-line"></span>
<span>APP COMPOSER</span>
</div>
</div>
<div class="hero-bottom">
<a href="#make-something">
Explore what you can make <ArrowDown size={18} aria-hidden="true" />
</a>
<span>Actual app screens and a fictional Launch Kit export.</span>
<span>The Paperwork editor and a fictional Launch Kit export.</span>
</div>
</div>
</section>
Expand Down Expand Up @@ -616,6 +608,25 @@ const siteSchema = {
</Base>

<script>
const scene = document.querySelector<HTMLElement>("[data-studio-scene]");
const motion = matchMedia(
"(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)",
);

scene?.addEventListener("pointermove", (event) => {
if (!motion.matches || event.pointerType !== "mouse") return;

const { left, top, width, height } = scene.getBoundingClientRect();
const x = (event.clientX - left) / width - 0.5;
const y = (event.clientY - top) / height - 0.5;
scene.style.setProperty("--studio-pitch", `${-y * 9}deg`);
scene.style.setProperty("--studio-yaw", `${x * 12}deg`);
});
scene?.addEventListener("pointerleave", () => {
scene.style.removeProperty("--studio-pitch");
scene.style.removeProperty("--studio-yaw");
});

// Without JavaScript these remain ordinary links and all screens are readable.
for (const gallery of document.querySelectorAll<HTMLElement>(
"[data-home-gallery]",
Expand Down
Loading