Your Majesty teardown

Read on 2026-10-22 UTC (the evening of 2026-10-21 local), headless from fsit2. URLs read: https://yourmajesty.co/work, https://yourmajesty.co/, and the case pages reached by clicking tiles (https://yourmajesty.co/work/tomato, https://yourmajesty.co/work/too-busy-foundation). Serves inspiration row 11, and by extension rows 6 and 7 (the bar and the drawer), 9 (invisible scrollbars) and 18 (continuous page transitions).

Checked by a verifier on 2026-10-22: VERIFY.md lists what was checked, what was corrected in place below and what stays unconfirmed.

1. What the owner liked

• The capsule bar (row 11). "I like this really minimal menu at the bottom, which is just the logo. When you scroll it, it becomes just the logo down. And when you hover it, it reveals the word menu and the word contact, which is super. We could just have something like that, except it also revealed the chat box … I'm trying to figure out if we should have two experiences or if it should always be kind of both available … I specifically like the way this menu becomes very minimal unless used. Then it can be like the other menu I shared earlier."
• The menu and contact panels. No words of his own on the panels yet in INSPIRATION.md; the coordinator added them to this brief. The nearest line is the end of row 11: "Then it can be like the other menu I shared earlier" (Büro's sheet, row 6). The panel is also the closest real-world match to his drawer (row 7): "it slides out like a drawer from the bottom of the page".
• The tile hover and the page transition into a case. No words of his own on Your Majesty's transition yet; the coordinator added it. His stated interest in transitions is row 18 (Kōzōwood): "Everything moves and shifts as if you are never really leaving a page and going to another." Your Majesty's tile-to-case zoom is a compact example of exactly that.

2. The stack

Scrollbar treatment. The probe's 16 scrollbar rules on /work are eight pairs of the same hide-it pattern, -ms-overflow-style:none; scrollbar-width:none plus ::-webkit-scrollbar{display:none}, applied only to inner scrollers: the panel's scroll wrapper, the filter-tab strip, the sliders and some page wrappers (expertise, article, company, impact). The document scrollbar is left native (scrollbar-width: auto on html). So the site hides every scrollbar it owns and leaves the page's own alone. For ETS27 (row 9, "invisible scroll bars and less scrolling") the same two lines on every scroller we own is the whole recipe; hiding the document's bar is one more rule on html.

Timings and easings. The site runs on a small fixed vocabulary. Most bar and panel durations are multiples of a sixteenth of a second (63, 125, 188, 313 ms in CSS; 375 and 438 ms in GSAP), with the monogram's 156 ms (5/32 s) and the 44 ms exit delay off that grid, the CSS ease is cubic-bezier(.76,0,.24,1) (ease-in-out quart) with cubic-bezier(.65,0,.35,1) (ease-in-out cubic) for page-level fades, and GSAP carries the springs and the long moves (elastic.out(0.9,0.9), back.out(1.7), power3/4, expo.inOut, expo.out). The full table is in section 4.

3. Component playbooks

3.1 The capsule bar

What it is, in pixels. Desktop (1440 × 900, root 16 px), measured by the css step:

Fixed at bottom: 33px (2.0625rem), centred with left: 50%; transform: translate(-50%, var(--offsetY)), border-radius: 9999px, background: #000, box-shadow: 2px 2px 6px 2px rgba(0,0,0,.1), overflow: hidden, z-index: 6. Labels are DM Mono 17 px (1.0625rem) uppercase, letter-spacing 0.8 px, white, turning #579aff on hover (150 ms linear). The separator is #d8d8d8 with 20 px margins. Phone (390 × 844, root 14.92 px): 233 × 45.7 px awake, 103 px at rest, 130 px with a panel open, bottom: 28px (shots/bar-p01-arrival.png, bar-p02-rest.png, bar-p07-contact-open.png).

DOM. Three layers stacked at the centre of one pill, only one visible at a time (trimmed; full excerpt in sources/bar-panels-tile.html):

<nav data-state="default" class="HUhwLa_navigationBar">
  <div class="HUhwLa_closeWrapper HUhwLa_menuSection HUhwLa_hidden">
    <button class="HUhwLa_closeButton" aria-label="Toggle menu"><span class="HUhwLa_navLink">Close</span><svg …/></button>
  </div>
  <div class="HUhwLa_navWrapper HUhwLa_menuSection">            <!-- gets HUhwLa_collapsed or HUhwLa_hidden -->
    <div class="HUhwLa_navWrapperInner">
      <button aria-label="Open Menu" class="HUhwLa_navLink">Menu</button>
      <div class="HUhwLa_separator"></div>
      <button aria-label="Open Contact" class="HUhwLa_navLink">Contact</button>
    </div>
  </div>
  <div class="Z6WgPW_animatedLogo" style="opacity:0;transform:translate(-50%, -50%) scale(2)"><svg viewBox="0 0 31 36">…</svg></div>
</nav>
<button class="m57DwW_arrowWrapper m57DwW_hidden" aria-label="Scroll to top">…</button>
<section class="uS33ha_animatedPanel">…menu…</section>
<section class="uS33ha_animatedPanel">…contact…</section>

Every layer is position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) inside the pill. Because the layers are absolute, the pill has no intrinsic width: JavaScript sets it.

Behaviour: what triggers the rest state. Read from 3s3v888l7p6xb.js (excerpt in sources/bar-panels-transition.js.txt) and confirmed state by state in steps/bar-desktop-states.json (results in sources/capture-evidence.json):

data-state = panelOpen ? "close"
           : (pageTransitionRunning || (scrollingDown && !engaged)) ? "collapsed"
           : "default"
scrollingDown = on every window scroll: scrollY > lastScrollY && scrollY > (innerWidth < 769 ? 60 : 100)
engaged       = mouseenter / mouseleave on the nav, focus inside it, blur unless focus moved within it

• Scroll distance and direction, not time. At 80 px it stayed default, at 130 px it went collapsed (desktop threshold 100 px); on the phone 50 px stayed default, 75 px collapsed (threshold 60 px). Any upward scroll wakes it (a 200 px wheel up: default, shots/bar-d05-after-scroll-up.png). Five seconds idle in either state changed nothing: there is no timer.
• The pointer has to touch the pill. With the bar at rest, the pointer 30 px above it or 80 px right of centre (inside the awake width, outside the 99 px oval) left it collapsed (shots/bar-d03-pointer-near-not-on.png); on the oval it opened (bar-d04-awake-hover.png); leaving collapsed it again. The "opens when the pointer comes near" impression is the oval itself; there is no proximity radius.
• Keyboard. Focusing the Menu button wakes it and shows a white focus ring round MENU (shots/bar-d06-keyboard-focus.png).
• Phone. A click on the oval in phone emulation wakes it through mouseenter (shots/bar-p03-after-tap.png). capture.cjs sends mouse clicks, not touch taps, so every phone "tap" in this folder is mouse input in a 390 px touch-emulated page; a real tap's compatibility mouse events should behave the same, but that was not tested.
• Page transitions force collapsed for their duration (section 4).

Behaviour: the morph. Two systems run together:

• Width, by GSAP whenever the panel flag, the rest flag, the viewport width or the is-home-page flag changes (effect dependencies [panelOpen, width, collapsed, isHome]): gsap.to(nav, { width: activeLayer.offsetWidth, ease: "elastic.out(0.9,.9)", duration: .438, delay: .063 }). The rAF samples show the spring: waking 99 → 248 → 251 → 250 px, sleeping 250 → 111 → 93 → 99 px, opening a panel 99 → 183 → 177 → 180 px.
• Layers, by CSS transitions on class and inline-style changes. Going to rest, the words wrapper fades (opacity 313 ms linear, 44 ms delay) and shrinks to scale(.6) (313 ms cubic-bezier(.76,0,.24,1), 44 ms delay), the separator folds to scaleY(0); the monogram fades in (156 ms linear, 63 ms delay) while dropping from scale(2) to scale(1) (313 ms, same curve). Waking is not a mirror: the default state's transition list holds only opacity (and visibility), so the words snap back from scale(.6) to full size and fade in (313 ms linear after 63 ms), revealed by the widening pill, while the monogram fades out (156 ms after 63 ms) and grows back to scale(2) (313 ms); the separator unfolds last (125 ms, 188 ms delay; 313 ms delay on the phone). The bursts caught one in-between frame each way: shots/burst-bar-collapse-sheet.png frame 00 (full-width pill, words fading, monogram arriving) and shots/burst-bar-wake-sheet.png frame 00 (pill half open, monogram still showing).

Behaviour: the footer. An IntersectionObserver on footer with a thousand thresholds writes --nav-offset (the negative visible height of the footer) on body; the pill's --offsetY reads it, so the bar rides up on top of the footer instead of covering it (measured −210 px on desktop, −398 px on the phone at the end of the page: shots/bar-d07-footer.png, bar-p06-footer.png). When more than 20 % of the footer shows, a thin up arrow (16 × 24 px SVG, bottom: 100px, same offset) fades in above the bar and smooth-scrolls to the top. Opening a panel tweens the offset to 0 (375 ms expo.inOut, no delay); closing it, or a route change, tweens it back to the stored footer offset (0 when scrollY is 0) after 63 ms. While scrolling, including back to the top, the observer sets the variable directly with gsap.set, so the bar follows the footer without a tween.

Assets. The monogram is one inline SVG path (viewBox 0 0 31 36, fill: currentColor), the cross is a 12 × 11 SVG, the arrow a 16 × 24 SVG. No images, no filters, no backdrop blur on /work (probe: 0 backdrop-filter elements, 0 SVG filters).

Accessibility and reduced motion. Real buttons with labels ("Open Menu", "Open Contact", "Toggle menu", "Scroll to top"); focus wakes the bar and shows a ring. The collapsed words are opacity: 0; pointer-events: none but stay in the tab order, which is what lets focus wake them. There is no aria-expanded or aria-controls, the panels are not dialogs (no focus trap, no Escape), and no prefers-reduced-motion handling was found in the CSS or JS read (the only reduced-motion rule is for a video shimmer on the home page).

Gotchas. - The blur quirk. Clicking a button inside the bar focuses it; when that button's layer hides 313 to 357 ms later (visibility: hidden), focus falls to body and onBlur clears engaged. If the last scroll was downward past the threshold (scrollingDown still true), the bar then collapses with the pointer still resting on it, and it reopens only after the pointer leaves and comes back. At the top of the page it stays awake: the phone check after Close read default with BODY focused, and the burst-menu-close frames stay awake. Seen in the samples at 1400 px down (after Close: default at 449 ms, collapsed at 1137 ms), in a forced click on Contact that then missed (one sample at 75 ms read collapsed with no panel; shots/bar-d09-sampler-contact-click-missed.png was taken after a further 120 px wheel scroll, which would close a panel anyway, so the shot does not show the miss by itself), and on the phone, where a forced click on Contact opened nothing (bar-p05-contact-tap-missed.png; the next Close click timed out because no panel was open) and a second click at the same spot left it at rest (shots/bar-p08-second-tap.png). Headless Chromium only; see section 7. - Width from measurement. The width is read from offsetWidth in an effect, so it is only as right as the fonts loaded at that moment; they re-measure on resize and on each state change. - Scroll closes panels. Any scroll event closes an open panel (shots/contact-d03-scroll-closes-panel.png), which is right for a page but would fight a panel with its own scrolling content on touch.

How to rebuild it for ETS27. Library-agnostic recipe; the bar of bar-stage-drawers.md (rest, awake, in use) maps one to one onto collapsed, default, close:

1. One fixed pill at the bottom centre: overflow: hidden; border-radius: 9999px; transform: translate(-50%, var(--bar-offset)).
2. Stack the layers absolutely in it: the mark (rest), the awake row (Menu, the ask field, Contact), the in-use row (Close, or the thread controls). Each keeps its natural width.
3. Compute one state and write it to data-state; drive the layer crossfades from CSS with the same pair of moves (outgoing: fade 313 ms linear and scale to .6; incoming mark: fade and scale from 2 to 1).
4. Spring the pill's width to the active layer's measured width: GSAP elastic.out(0.9, 0.9) over 0.44 s (as they do), or Motion's animate(bar, { width }, { type: "spring" }), or a FLIP with a CSS linear() spring curve. For ETS27 the awake row holds the ask field, so let the field grow on focus and re-measure.
5. Rest on scroll-down past a threshold (100 px desktop, 60 px phone), wake on scroll-up, on pointerenter, on focusin; no timers. Keep the ask field's focus as "engaged", so typing never collapses the bar.
6. Fix their blur quirk: track engagement with pointerenter/pointerleave plus :focus-within, and when a layer hides, move focus to the corresponding control in the next layer instead of letting it fall to body.
7. Footer (or drawer) evade with an IntersectionObserver writing the CSS variable.
8. Reduced motion: switch the spring to an instant width change and keep only opacity crossfades. Add aria-expanded and aria-controls on Menu and Contact and close on Escape.

Libraries that make it easy: GSAP core (width tween and easing), Motion (springs, animate), or none (CSS transitions plus one measured width). Confidence: high (source plus captured states).

3.2 The menu and contact panels

What they are, in pixels. A black card with 20 px corners, 415 × 680 px on desktop (width: 25.9375rem; height: calc(100svh - 120px); max-height: 42.5rem), fixed at bottom: 104px and centred, so it floats 22 px above the bar; z-index: 5, under the bar (6). Phone: 366 × 634 px (max-width: calc(100vw - 24px)), bottom: 97px (shots/bar-p04-menu-open.png, bar-p07-contact-open.png). Content is a flex column centred vertically (row gap 25 px, padding 40 px) in an inner scroller with the scrollbar hidden.

• Menu (shots/menu-d01-open.png): Work, Impact, Expertise, Perspectives, Testimonials, Company, Infinum in Messina 700, 32 px, line height 1.5, white, the current page in #579aff; then Careers, Get In Touch, Newsletter in Messina 400, 24 px; then EN / NL with the current language at 50 % opacity. Hover turns any link #579aff (shots/menu-d02-link-hover.png). Get In Touch swaps to the contact panel (shots/contact-d02-from-get-in-touch.png).
• Contact (shots/contact-d01-open.png): the heading "Contact Us" (Messina 32 px), New Business (/contact) and Book A Call (a Google Calendar booking page) as primary links, then Email Amsterdam, Email New York, Email London as mailto: links.
• The links are Storyblok entries typed menuPrimaryLink, menuSecondaryLink or menuOpenContact.

DOM. section.uS33ha_animatedPanel > div.uS33ha_menuBackground + div.uS33ha_scrollableContentWrapper > div.uS33ha_contentWrapper > (h2) ul.b56tGa_list ul.b56tGa_subList (div[data-panel-item] language switch). The background is a separate empty layer (transform-origin: 50% 100%), so the card can be scaled without distorting the text.

Behaviour. One GSAP timeline per panel (excerpt in sources/bar-panels-transition.js.txt):

• Open: timeline({ delay: .156 }), set display: block; pointer-events: auto; background scaleY 0 → 1 (0.65 s power3.inOut) and scaleX .02 → 1 (0.65 s back.out(1.7), back.out(1.2) under 769 px) together; items (svg, a, button, h2 outside [data-panel-item], plus [data-panel-item]) y: 108% → 0, opacity 0 → 1, 0.7 s power4.out, stagger 0.07 s, starting at 0.37 s; then timeScale(2.4) (2.08 on the phone). In real time on desktop, computed from those values: starts about 65 ms after the click, the card is full size by about 335 ms, the eleven menu items rise one every 29 ms from about 220 ms and the last settles at about 0.8 s.
• Close: kill the open timeline, pointer-events: none; background to scaleY 0, scaleX .02 (0.6 s power4.inOut), items to y 108%, opacity 0 (0.2 s power4.in, stagger 0.01 s), timeScale(1.92): about 313 ms in all.
• So the card grows up out of the bar as a sliver that widens with a slight overshoot (samples: scale [0.965, 0.106] → [1.073, 0.951] → [1, 1]), the words rise into it, and the bar beneath springs to CLOSE. The bursts caught the middle of both: shots/burst-contact-open-sheet.png frame 00 (a short black slab growing out of the bar while its labels crossfade to CLOSE) and shots/burst-menu-close-sheet.png frame 00 (the card shrinking, the top items already gone, the lower ones fading).
• Closes on: Close, any scroll, any link in it, the start of a page transition. Not on Escape (shots/menu-d03-after-escape.png, state still close). No click-outside handler in the component.

Phone. Same card and timeline with the softer back.out(1.2) and timeScale(2.08); the card is nearly full width and sits above the thumb (shots/burst-phone-menu-open-sheet.png; frame 00 caught only the first instant, a wide black sliver a few pixels tall at the card's bottom edge while the bar's labels crossfade to CLOSE, and frame 01 is already the end state).

Accessibility and reduced motion. Plain lists of links and buttons, no dialog role, no focus move into the panel on open, no Escape; the panel's scrollbar is hidden. No reduced-motion branch.

How to rebuild it for ETS27. This is the drawer of row 7, grown out of the bar:

1. The drawer is a fixed card anchored just above the bar, its background a separate layer with transform-origin: 50% 100%.
2. Open: background scaleY from 0 with an in-out curve and scaleX from a sliver with a back-out overshoot, about 0.27 s; then the content rows rise from 108 % with opacity, 0.29 s each, 29 ms apart. Close at about 0.3 s, reversed and faster.
3. The bar morphs to its in-use layer at the same time (3.1).
4. Easy with a GSAP timeline (as they do), a Motion sequence (animate([...]) with stagger), or CSS alone: @starting-style plus transition on the background's scale with a linear() back-out curve, and transition-delay: calc(var(--i) * 29ms) on the rows.
5. Add what they left out: role="dialog", aria-modal for a modal drawer, focus moved in on open and back to the bar on close, Escape to close, a reduced-motion branch. For speaker and session drawers that scroll, do not close on scroll; close on drag-down instead.

Libraries that make it easy: GSAP (timeline, stagger), Motion (sequence, stagger), or CSS @starting-style. Confidence: high.

3.3 The work tile: hover and preview video

What it is, in pixels. The work grid is two columns of large tiles for the first four cases (670 × 379 px media, row gap 140 px, column gap 20 px), then three columns of compact tiles (Vn_v4q_threeColumns: 28 tiles, 440 × 249 px media, row gap 80 px, column gap 20 px at 1440 px; the breakpoints were not read). Media boxes are aspect-ratio: 668/378, 5 px corners; captions are the client in DM Mono uppercase and a one-sentence description in Messina that wraps to two lines on several tiles (the 16 px and 22 px sizes and the three-line maximum were not measured). A sticky white filter row (All, Brand Expression, Experience Realization, Accelerating Innovation) with a moving 2 px underline stays at the top while scrolling.

DOM. article._7O2wwa_articleWrapper > a (next/link wrapper) > div._7O2wwa_mediaWrapper > div (pointer handlers) > div._7O2wwa_mediaContainer > [img._7O2wwa_imagePlaceholder + img._7O2wwa_imageOverlay] | [img._7O2wwa_videoPlaceholder + video._7O2wwa_videoOverlay], then div._7O2wwa_captionWrapper.

Behaviour. - Tilt from the pointer position (GSAP, 3l4qdozz7-kr6.js): on mousemove the media box tweens to rotationY = (x / width − 0.5) × 24°, rotationX = (y / height − 0.5) × 16°, transformPerspective: 2000, 1.2 s expo.out; on leave back to 0 over 2 s expo.out; frozen once clicked; switched off on touch screens by @media (any-hover: none) { transform: none !important }. Measured near the corners: about ±11° around Y and ±7° around X (shots/tile-d02-tilt-top-left.png, tile-d03-tilt-bottom-right.png, tile-d01-pointer-on-tile.png). The two axes have opposite senses: the side under the pointer horizontally recedes while the side under it vertically comes forward, so with the pointer near the top-left corner the left edge sinks, the top edge lifts and the top-right corner is nearest the viewer (shots/verify/verify-tilt-top-left.png, inline perspective(2000px) rotateY(-10.8179deg) rotateX(-6.69172deg)); near the bottom-right corner the bottom-left corner is nearest. The card does not simply lean toward the pointer. - Blur-up images: a 40 px wide Storyblok render (quality 20, blur 5) sits under the full image, which fades in over 0.5 s once loaded. - Preview video: in view, not on hover. Sixteen of the thirty-two tiles carry a Vimeo progressive MP4 (muted loop playsinline preload="none"). An IntersectionObserver (threshold 0) calls play() when the tile enters the viewport and pause() when it leaves. Captured: the in-view TOO BUSY tile playing (readyState 4, currentTime 1.33 s, shots/tile-d04-video-tile-in-view.png) while the off-screen video tiles stayed paused at readyState 0, so nothing downloads until a tile is seen. - Filter: the grid module registers GSAP Flip, which is the usual tool for reflowing cards when a tab filters them; the filter animation itself was not captured (section 7).

How to rebuild it for ETS27. For speaker cards on the stage: the same tilt (±12° and ±8°, perspective 2000 px, expo.out 1.2 s, slow 2 s return; choose each axis's sign on purpose, since theirs are mixed) reads as weight without effects; play any card video only while it is on screen with preload="none"; use the blur-up pair for every photo. Easy with GSAP quickTo or Motion useSpring for the tilt, or plain pointermove writing two CSS variables into a transform with a transition. Confidence: high.

4. Flow and transitions

Work tile to case page (the shared-element zoom). Source in 3fqn2w4mtgg9r.js and 277e5h908hh8i.js; timeline from steps/case-transition-sampler.json (rAF samples in sources/capture-evidence.json), frames in shots/burst-case-zoom-sheet.png, burst-case-settle-sheet.png, burst-video-case-sheet.png, burst-phone-case-sheet.png.

1. Click. The tile's link wrapper calls preventDefault() and hands the anchor to clickLink. The bar is forced to rest (transitionRunning), and the top loader starts a 2 px black bar (burst-case-zoom-01.png).
2. Clone. The tile's video (or its full-size image, the second img) is cloned into a fixed overlay (.NpnXJW_copyBgc, full screen, z-index: 5, under the bar), placed flat over the tile's on-screen bounding box with its 5 px corner radius; a video clone is muted, set to the same currentTime and played, so the footage does not jump. The code tries to copy the tilt by parsing the media element's own inline transform, but the tilt lives on the parent mediaContainer, so the parse comes back empty and the clone starts untilted (verifier check: clone inline translate3d(0px, 0px, 0px), computed identity, rect [49, 158, 667 × 389], equal to the tilted container's bounding box; the parser would also mangle the units, perspective(2000pxpx), if it did read the container). On click the tilted tile is covered by a flat rectangle a few pixels larger than it.
3. Zoom. GSAP tweens the clone to top 0, left 0, width 100vw, height 100%, borderRadius 0, rotateX 0, rotateY 0 (the rotations are no-ops, the clone has none), 1.2 s expo.inOut. Samples: the clone appears at the tile rect [36, 163, 669 × 384] about 0.37 s after the click, is at [25, 114, 899 × 538] by 0.83 s and fills the viewport by about 1.3 s (burst-case-zoom-01.png, -02.png: the tomato full bleed with the monogram bar).
4. Navigate. On complete, router.push(href); the path changed at about 2.2 s (RSC fetch included). The clone stays over everything, so the page swap underneath is invisible.
5. Settle. The new page's effect sees a /work/ path and tweens the overlay to the case hero's height and top (1.2 s expo.inOut), so the full-bleed picture slides down into the hero box ([0, 404, 1440 × 810] on desktop), while the case title and headline rise from y: 50 and opacity: 0 starting 0.15 s in. For a video hero the timeline pauses until the destination video can play, then syncs its time. The overlay is removed on complete. Samples: hero position reached by about 4.1 to 4.5 s; the bar woke at 2.4 s and sprang open at about 3.6 s. The video burst caught the title mid-fade over the arriving hero (burst-video-case-sheet.png frame 02).
6. Other routes. clickLink sets transitionIsRunning and builds a clone only when the link holds media, so plain links (menu, footer) just push the route with the top loader and leave the bar alone. When a media link leads to a page that is neither a /work/ case nor an /article/ page (articles settle into their own hero the same way as cases), the overlay fades out over 0.8 s linear instead of settling.

In a real browser the sequence is 1.2 s zoom, the fetch, 1.2 s settle; the headless timings above include fsit2's slow frames. On the phone the zoom is the same (tap, full bleed, settle; burst-phone-case-sheet.png), without the tilt.

Within the page. Bar rest and wake (3.1, burst-bar-collapse-sheet.png, burst-bar-wake-sheet.png); panel open, close and switch (3.2, burst-menu-open-sheet.png, burst-menu-close-sheet.png, burst-contact-open-sheet.png, burst-menu-to-contact-sheet.png, burst-phone-menu-open-sheet.png); the "Work" heading fades in over 0.8 s cubic-bezier(.65,0,.35,1) on load and the filter row 0.1 s after it.

Timing table (source values; GSAP panel values also given in real time after timeScale):

5. Shots

All headless Chromium on fsit2; desktop 1440 × 900 at 1×, phone 390 × 844 at 2×. Bursts are numbered frames <name>-00.png onward, with the frame times in sources/capture-evidence.json; frames on fsit2 came 140 to 1855 ms apart (the longest gaps right after a click) and the first frame landed 0.15 to 1.6 s after the burst began, so most bursts hold one in-between frame at most. Four files were renamed after review because they did not show what their step intended; the steps files keep the original names.

The earlier screenshots in ../../yourmajesty/ (desktop-top.png, desktop-scrolled.png, mobile-top.png) show the same awake and rest states and were not recaptured for that purpose.

6. Sources

• Pages (HTML read once each with a desktop User-Agent): https://yourmajesty.co/work, https://yourmajesty.co/
• CSS chunks under https://yourmajesty.co/_next/static/immutable/chunks/: 3g24b-8ifpqzj.css, 3dq1zaevs20nk.css, 22f7hzxmuwp5b.css, 3swt12n07ue2n.css, 1sn_dg1u-0ouz.css
• JS chunks in the same folder: 2kzs590tmh7cs.js, 33lex72pdubj6.js, turbopack-1cvbnb3nlabgn.js, 00z4pmesk2f4f.js, 1u5duijecp4kl.js, 3a5kldecc8_2f.js, 3s3v888l7p6xb.js (bar, panels, top loader), 3fqn2w4mtgg9r.js (GSAP, page transition), 277e5h908hh8i.js (link wrapper, filter), 3l4qdozz7-kr6.js (tiles, Flip), 0c0hxoamwjsbw.js, 1zpyotba8ii9p.js, 2n7c4ig570s4k.js, 258637avdowkj.js (three.js, home), 0p4_x7pkzxkiu.js
• Quoted excerpts: sources/bar-panels-tiles.css, sources/bar-panels-transition.js.txt, sources/bar-panels-tile.html; measurements, samples and probes: sources/capture-evidence.json
• Steps files run (all in steps/): bar-desktop-states.json, bar-desktop-bursts.json, bar-desktop-sampler.json, menu-panel-desktop.json, contact-panel-desktop.json, tile-hover-desktop.json, case-transition-desktop.json, case-transition-sampler.json, video-case-transition-desktop.json, bar-phone.json, bar-phone-contact-and-retap.json, case-transition-phone.json, home-desktop.json
• Studio files read: design/inspiration/INSPIRATION.md (rows 6, 7, 9, 11, 18), design/inspiration/bar-stage-drawers.md, design/inspiration/components-to-copy.md, design/inspiration/teardowns/_examples/*.json, design/inspiration/yourmajesty/*.png

7. Not confirmed

• Exact on-screen timing in a real browser. Burst frames on fsit2 came 140 to 1855 ms apart and the rAF samples were coarse (GSAP's lag smoothing stretches tweens when frames are slow; one sample run shows the monogram's fade starting about 400 ms after data-state flipped, although React writes both in the same commit), so the timings in section 4 are source values, and the effective panel numbers are computed from them. A 60 fps screen recording in a headed browser on real hardware would establish them.
• The blur quirk outside headless Chromium. The bar re-collapsing under a resting pointer after a panel closes, and the repeat tap that does nothing, were seen in headless Chromium and its phone emulation. Safari on macOS does not focus buttons on click and real phones handle emulated hover differently; a quick check in Safari and on an iPhone and an Android phone would settle it.
• The filter reflow. GSAP Flip is registered by the work-grid module, but no filter tab was clicked; a burst after clicking "Brand Expression" would show whether tiles reflow with Flip.
• Reduced motion. No prefers-reduced-motion handling was found in the CSS and JS read, but the site was not run with the preference set; capture.cjs has no media-emulation step (a one-line page.emulateMedia({ reducedMotion: 'reduce' }) step would add it).
• Click outside a panel. The component has no click-outside handler; not tested.
• The home page. Read only for the stack (three.js r156 monogram, a custom cursor container with cursor: none on three elements, 35 backdrop-filter elements, 28 videos); its components were not torn down because the owner pointed at /work.
• The Storyblok space's API details. Content is fetched on the server, so only the asset space id (238272) and the content-model field names are visible from outside.

Verification

Your Majesty teardown: verification

Verifier pass on 2026-10-22 UTC (the evening of 2026-10-21 local). The aim was to refute the teardown's claims, not to restate them. Result: 37 claims held, 17 statements were wrong or overstated and are corrected in place in README.md and component.json, and 8 points stay unconfirmed.

1. How it was checked

• Read README.md and component.json and listed every stack, mechanism, timing and measurement claim.
• Checked each against the folder: sources/capture-evidence.json (the agent's condensed meta.json evals, css steps, probes and burst times), the quoted source in sources/bar-panels-transition.js.txt, sources/bar-panels-tiles.css and sources/bar-panels-tile.html, and the steps files. Timeline arithmetic was redone from the quoted values; tilt angles were decomposed from the measured matrix3d values.
• Looked at 24 screenshots with the Read tool: bar-d01-arrival, bar-d02-rest, bar-d03-pointer-near-not-on, bar-d06-keyboard-focus, bar-d07-footer, bar-d09-sampler-contact-click-missed, bar-p08-second-tap, menu-d01-open, contact-d01-open, contact-d03-scroll-closes-panel, tile-d03-tilt-bottom-right, tile-d04-video-tile-in-view, case-d02-arrived, case-p03-accidental-tile-tap-zoom, home-d01-arrival, burst-case-zoom-01, burst-phone-menu-open-00, the sheets burst-bar-wake, burst-bar-collapse, burst-contact-open, burst-menu-close, burst-video-case, burst-phone-menu-open, and the fresh verify/verify-tilt-top-left.
• Ran one fresh capture on fsit2 through design/tools/capture-remote.sh: steps/verify-stack-tilt-clone.json, results in shots/verify/ (meta.json, verify-tilt-top-left.png). 23 steps, 0 step errors, 0 page errors, 19.7 s. Requests: one load of /work, one HEAD of /work for the response headers, the page's own JS chunks read back in-page with fetch(..., { cache: 'force-cache' }) and grepped for version and library strings, one tile click through to /work/tomato, one load of /. No media was fetched by the verifier and nothing was saved but the one screenshot and the meta.json.

2. What held

Stack

1. Next.js 16.4.1: window.next.version is "16.4.1" at runtime on /work and /; "16.4.1" is in 33lex72pdubj6.js; headers x-powered-by: Next.js, x-matched-path: /[lang]/work, vary: rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetch; the Turbopack runtime chunk is in the probe's script list.
2. React 19.3.0-canary-278794d7-20261002 in 2kzs590tmh7cs.js, 33lex72pdubj6.js and 1zpyotba8ii9p.js.
3. GSAP 3.15.0 with the GreenSock and ScrollTrigger strings (and creatCopyAndAnimateAndScaleIt) in 3fqn2w4mtgg9r.js; bundled, not on window (probe globals empty).
4. Flip (killFlipsOf, version 3.15.0) in the work-grid chunk 3l4qdozz7-kr6.js.
5. No Lenis, Framer Motion or motion-dom string in any of the 12 /work chunks.
6. Storyblok: menuPrimaryLink, menuSecondaryLink, menuOpenContact in 3s3v888l7p6xb.js; no StoryblokBridge, storyblok-v2-latest or storyblok-js-client string in any /work chunk; a.storyblok.com/f/238272/ image paths with /m/40x0/filters:quality(20):blur(5) placeholders in the quoted HTML and source.
7. Vercel: server: Vercel, x-vercel-id (iad1), x-vercel-cache: MISS, cdn-cache-control: public, s-maxage=60, stale-while-revalidate=300.
8. nextjs-toploader: NextTopLoader and nprogress's "0.2.0" in 3s3v888l7p6xb.js; the injected style sets #nprogress .bar to background:#000000; height:2px; z-index:1600; the bar is visible top left in burst-case-zoom-01.png.
9. three.js r156 on the home page only: window.__THREE__ is "156" on /; one 120 × 120 canvas _7V9nCG_canvas (webgl2 in the agent's probe); 258637avdowkj.js appears only in the / script list.
10. Fonts: @font-face sources /fonts/IvyPresto/IvyPresto_Display_Thin.woff2, Messina 300, 400, 700 with italics, DM Mono 300, 400, 500 with italics, plus next/font's IvyprestoFont 100 from ../media/IvyPresto_Display_Thin-s.p…otf (relative to its CSS chunk); meta[name=next-size-adjust] present.
11. Analytics: gtag/js?id=G-EFEE0RW5BS, gtm.js?id=GTM-P2KJHNZW and /_vercel/speed-insights/script.js in the probe's script list.
12. Languages: hreflang en /work, nl /nl/werk, x-default /work; ym-language-suggest-dismissed in 3s3v888l7p6xb.js.
13. Scrollbars: the 16 rules are exactly 8 hide pairs, on .wpyuCG_expertisePage, .N0NZbq_articlePage, .VN-YRG_sliderWrapper, .uS33ha_scrollableContentWrapper (panel), ._7XWEZa_page, ._1We56W_companyPage, .gsiEBG_tabScrollViewport (filter strip) and .yldjWq_impactPage; html computes scrollbar-width: auto. No reduced-motion rule in the /work CSS and no prefers-reduced-motion string in the /work chunks.
14. Scroll and root size: html{scroll-behavior:smooth;overscroll-behavior:none;overflow-x:hidden}, data-scroll-behavior="smooth" on html; the two calc() font sizes give 16 px at 1440 and 14.9152 px at 390.

Capsule bar

15. The data-state expression and the engagement handlers (onMouseEnter, onMouseLeave, onFocus, onBlur with relatedTarget) match the quoted source.
16. Rest on scroll-down only: threshold 100 px (60 px under 769 px), direction-only, no timer. Evals: 80 px default, 130 px collapsed; phone 50 px default, 75 px collapsed; 5 s idle changed nothing in either state; a 200 px wheel up woke it (scrollBy is page.mouse.wheel).
17. No proximity radius: pointer 30 px above, and 80 px right of centre (outside the 99 px oval), left it collapsed; on the oval it woke.
18. Keyboard focus on Menu wakes it from rest; bar-d06-keyboard-focus.png shows the white ring round MENU.
19. Geometry from the css steps: 250 × 49, 99 × 49 and 180 × 49 px on desktop; 233 × 45.67, 103 and 130 px wide on the phone; bottom 33 px and 27.97 px; radius 9999 px; box-shadow: 2px 2px 6px 2px rgba(0,0,0,.1); z-index: 6.
20. Width spring elastic.out(0.9,.9), 0.438 s, 0.063 s delay, to the active layer's offsetWidth; samples 99 → 248 → 251 → 250 and 250 → 111 → 93 → 99 px.
21. CSS to rest: words opacity .313s linear 44ms and scale(.6) over .313s cubic-bezier(.76,0,.24,1) 44ms; separator folds; monogram opacity .156s linear 63ms, transform .313s; labels DM Mono 1.0625rem, letter-spacing .05rem, hover #579aff over .15 s; separator #d8d8d8, 1 × 24 px, 20 px margins, .125s after .188s (.313s under 769 px). The computed transition values in the css steps agree.
22. Footer: an IntersectionObserver with 1,001 thresholds sets --nav-offset to the footer's negative visible height; −210 px desktop and −398.016 px phone at the end; the arrow shows above 20 %, bottom: 100px, z-index: 4 (bar-d07-footer.png shows the oval and the arrow above the footer).

Panels

23. Card geometry: 25.9375rem by calc(100svh - 120px) capped at 42.5rem, bottom: 6.5rem, z-index: 5, background layer with transform-origin: 50% 100% and a 1.25rem radius; css steps 415 × 680 px desktop, 366 × 633.9 px phone, 22 px above the bar.
24. Timelines as quoted: open delay .156, background .65 s power3.inOut (scaleY) with back.out(1.7) (1.2 on the phone) on scaleX, rows .7 s power4.out stagger .07 from .37, timeScale 2.4 (2.08); close .6 s power4.inOut and .2 s power4.in stagger .01 at 1.92. The README's real-time figures (about 65 ms delay, card full at about 335 ms, rows 29 ms apart from about 220 ms, last row about 0.8 s; close about 313 ms) follow from them.
25. The open samples fit simultaneous scale tweens ([0.965, 0.106] then [1.073, 0.951] then [1, 1]) and rows starting at y 51.8 px, which is 108 % of their 48 px height.
26. Closes on any scroll (eval after 150 px: collapsed, and contact-d03-scroll-closes-panel.png shows no panel) and on a transition start (source); Escape leaves it open (eval still close); no aria-expanded, aria-controls or dialog role in the markup.
27. Contents: menu-d01-open.png shows Work in blue, the six other primary links, Careers, Get In Touch, Newsletter and a dimmed EN with NL; contact-d01-open.png shows Contact Us, New Business, Book A Call and three Email links. The blue CLOSE in both shots is the hover colour: the pointer still rests on the bar. burst-contact-open frame 00 shows a wide, short slab with the bar's labels overlapping, and burst-menu-close frame 00 a shrinking card with only its lower rows left, as described.

Work tile

28. Tilt formula as quoted ((x/w - .5) * 24, (y/h - .5) * 16, transformPerspective: 2000, 1.2 s expo.out, 2 s back, frozen once clicked, transform: none !important under (any-hover: none)). Decomposed from the measured matrices: −10.8° Y and −6.7° X at (80, 200), +11.4° and +7.5° at (690, 530), perspective 2000 px (m34 = −0.0005), identity again after leaving. The fresh run's inline style reads perspective(2000px) rotateY(-10.8179deg) rotateX(-6.69172deg).
29. Grid at 1440 px: the first list holds 4 tiles in two 670 px columns (row gap 140 px, column gap 20 px), the second (Vn_v4q_threeColumns) 28 tiles in three 440 px columns (row gap 80 px, column gap 20 px); media 670 × 379 and 440 × 249 px.
30. 32 tiles, 16 of them with a Vimeo progressive_redirect MP4 (muted loop playsinline preload="none").
31. Video plays only in view: IntersectionObserver with threshold 0 calls play() and pause() for muted videos (source); the in-view TOO BUSY video at readyState 4 and currentTime 1.33 s while the off-screen ones stayed at readyState 0; tile-d04-video-tile-in-view.png shows the video frame with the bar at rest.
32. Blur-up: a 40 px wide Storyblok render under the full image, both overlays fading in over .5s ease-in-out.

Tile-to-case transition

33. The link wrapper's preventDefault, clickLink, the fixed .NpnXJW_copyBgc overlay (z-index: 5, full screen), the 1.2 s expo.inOut zoom and router.push on complete match the quoted source. The fresh run reached /work/tomato with no overlay left and the bar default.
34. The settle tweens the overlay's height and y to the hero, headings rise from y: 50 at 0.15 s, a video hero waits for canplay or loadeddata and syncs time, and the overlay is removed on complete (source).
35. Sample timeline: clone at the tile at 0.37 s, [25, 114, 899 × 538] at 0.83 s, full viewport by 1.3 s, path change at 2.2 s, bar default at 2.4 s and wide at 3.6 s, hero [0, 404, 1440 × 810] by 4.1 to 4.5 s.
36. Shots: burst-case-zoom-01 full bleed with the loader and the oval; burst-video-case frame 02 the title mid-fade over the dark hero; case-d02-arrived Tomato settled with the bar awake; home-d01-arrival the copper monogram, the card, the IvyPresto headline and the bar awake.

Folder

37. The four renamed shots map one to one onto the steps files' original names (bar-d09-sampler-after-scroll-close, bar-p05-contact-open, bar-p09-tap-elsewhere-then-mark, tile-d01-rest), and every shot named in component.json exists. The bar-phone run's one step error (step 29, the Close click timing out) fits the README's reading: no panel had opened.

3. Corrections, verifier, 2026-10-22

Each item was wrong or overstated; the text was corrected in place where named.

1. The zoom clone does not keep the tile's tilt. Said: placed over the tile "with its corner radius and its current tilt". True: clickLink parses the media element's own inline transform, but GSAP writes the tilt on the parent mediaContainer, so the parse is empty and the clone starts flat on the tilted tile's bounding box. Fresh check: overlay img inline transform empty, clone inline translate3d(0px, 0px, 0px), computed identity, rect [49, 158, 667 × 389], equal to the tilted container's box. The parser would also produce perspective(2000pxpx) if it read the container. Corrected in README section 4 steps 2 and 3, and transitions[0].layers.
2. The tile does not simply tilt toward the pointer. The axes have opposite senses: the side under the pointer horizontally recedes while the side under it vertically comes forward. Pointer near the top-left: the top-right corner is nearest (matrix row 4 and verify-tilt-top-left.png); near the bottom-right: the bottom-left corner is nearest (tile-d03). Corrected in README 3.3 (and the rebuild note) and the tile's mechanism, states and rebuild.
3. The blur quirk needs a downward scroll. Said: after a bar click the bar collapses under the resting pointer. True only while scrollingDown is still true; at the top of the page focus still falls to body but the bar stays awake (phone eval after Close: default, BODY focused; burst-menu-close frames awake). Corrected in README 3.1 and the bar's first gotcha.
4. The footer offset tween. Said: opening a panel "or reaching the top" tweens the offset to 0, with a 63 ms delay. True: the tween runs on panel open (to 0, no delay) and on panel close or a route change (back to the stored offset, or 0 at scrollY 0, after 63 ms); while scrolling the observer sets the value with gsap.set. Corrected in README 3.1, the timing table and the bar's timings and mechanism.
5. Waking is not the reverse of resting. The default state's computed transition is only opacity .313s linear .063s, visibility, so the words snap from scale(.6) to full size and fade in. Corrected in README 3.1 and the bar's mechanism.
6. What re-runs the width tween. Said: every change of state, viewport width or route. True: the effect depends on the panel flag, the rest flag, the viewport width and an is-home-page flag, not on every route. Corrected in README 3.1.
7. "Any other route" does not force the bar to rest. clickLink sets transitionIsRunning and builds a clone only when the link holds media; plain links just push the route. The 0.8 s fade applies when a media link leads to a page that is not a /work/ case or an /article/ page (articles settle like cases). Corrected in README section 4 step 6 and transitions[1].
8. View-transition code is present in the runtime. Said: no view-transition code found. True: startViewTransition is in the Next and React runtime chunk 33lex72pdubj6.js; the site's own transitions still do not use it (0 view-transition CSS rules, GSAP clone). Corrected in the README stack table and stack.evidence.
9. Burst frame spacing. Said: 150 to 1000 ms. True: 140 to 1855 ms between frames, and the first frame landed 0.15 to 1.6 s after each burst began. Corrected in README sections 5 and 7 and not_confirmed.
10. The duration grid. Said: CSS durations sit on a sixteenth-of-a-second grid including 44 and 156 ms. True: 63, 125, 188, 313 ms (and GSAP's 375, 438 ms) are sixteenths; 156 ms is 5/32 s and the 44 ms delay is off the grid. Corrected in README section 2.
11. The phone menu burst did catch the grow. Said: end state only, frames too far apart. True: frame 00 shows a wide black sliver a few pixels tall at the card's bottom edge with the bar's labels crossfading to CLOSE. Corrected in README 3.2 and the shot table.
12. bar-d09 does not show the missed click by itself. It was taken after the forced Contact click and a further 120 px wheel scroll, which closes any panel. The miss rests on one sample at 75 ms (collapsed, no panel), the CSS (pointer-events: none on the resting words) and the phone run (no panel, then the Close click timed out). Corrected in README 3.1 and the shot table.
13. Phone "taps" were mouse clicks. capture.cjs has no tap step; page.mouse.click and page.click sent mouse events in a touch-emulated page, so real touch behaviour is untested. Corrected in README 3.1.
14. Grid and caption wording. "Three columns at 1440 px and wider" assumed a breakpoint that was never read, and "one line of Messina" is contradicted by the shots, where several descriptions wrap to two lines. Corrected in README 3.3; sizes moved to not confirmed.
15. The panel close is not a reversed timeline. Said: "close runs reversed at 1.92". True: a separate timeline with its own eases and durations at timeScale 1.92. Corrected in the panels' mechanism.
16. The bar wakes before the overlay is removed. Said (layer list): "overlay removed; the bar wakes". True: transitionIsRunning is cleared when the new route mounts, at the start of the settle (sample: default at 2.4 s with the overlay still full screen), and the overlay goes when the settle completes. Corrected in transitions[0].layers.
17. case-p03 is the settle phase. The bar is awake, so the route had already changed; the image is still the overlay. Corrected in the shot table.

4. Not confirmed

1. The caption type sizes (DM Mono 16 px, Messina 22 px), the three-line caption maximum and the three-column grid breakpoint: seen only at 1440 px, not measured.
2. The current language at 50 % opacity: EN is visibly dimmer in menu-d01-open.png, the value was not read.
3. The home page's reduced-motion rule for a video shimmer: /work has none; / was not checked.
4. The language suggestion's use of navigator.languages: the storage key was found, the trigger was not read.
5. Links closing the panel: clickNavigationLink (which closes it) is passed to both panels, but the link handler itself is not in the quoted source.
6. The real-time order of the bar's width spring and the monogram crossfade: one sample run shows the monogram starting about 400 ms after data-state flipped, another shows it ahead of the spring, although React writes both in one commit. Only the source values hold.
7. The raw capture output: the agent condensed the meta.json files into sources/capture-evidence.json and removed the originals with its tmp folder. The condensed evals agree with the steps files, the quoted source and the screenshots, but could not be compared with the raw files.
8. Everything the README already lists in its section 7 (real-browser timing, the blur quirk outside headless Chromium, the filter reflow, reduced motion, click outside, the home page, Storyblok API details) stays open; this pass did not test them.

5. Folder tidiness

• No tmp/ folder left (the verifier's scratch folder was removed at the end).
• No fonts, images or videos copied: the folder holds PNG screenshots and contact sheets, JSON, Markdown and text excerpts (HTML, CSS, JS) under 50 KB each; the largest excerpt is sources/capture-evidence.json at 36 KB.
• No file over 2 MB; the largest is shots/bar-d06-keyboard-focus.png at 1.1 MB. The folder is about 72 MB, almost all of it the 197 PNG screenshots and contact sheets.