, line 2 is the email input itself styled as text (no border, padding or outline, Graphik 17.575 px, line-height 1.2, letter-spacing -0.04em) with the sentence as placeholder in black at 50% opacity. Typing one character removes data-hidden from the Send button (with an underline) and the absolutely positioned consent line (fades 0.2 s). Strings are hard-coded in the component. Submit (source only, never triggered): console.log of the values and, after 2 s, the lines swap to 'I already have you mail' / 'Gotchaaa' for 4 s; no network request and the action prop is never called. Not present in the menu sheet.", "libraries": [ "Vue 2 component", "GSAP (Send underline motion)" ], "states": [ "before: two lines", "focus: no visible change", "typed: Send + consent visible", "error: red #dc3429 placeholder", "loading: inert, fields at 0.3 and Send at 0.4 opacity, underline loop (source)", "sent: 'I already have you mail' / 'Gotchaaa' for 4 s (source)", "phone: Send stacks under the address" ], "timings": "Consent opacity 0.2 s cubic-bezier(.215,.61,.355,1); Send appears without transition; Send hover underline out 0.6 s power3.in then clone in 0.8 s power3.out after 0.5 s (source, not seen in burst).", "shots": [ "shots/nl-01-before.png", "shots/nl-02-focus.png", "shots/nl-03-typed.png", "shots/nl-states-crops.png", "shots/nl-send-hover-strip.png", "shots/phone-nl-01-before.png", "shots/phone-nl-02-typed.png" ], "rebuild": "Plain form:
plus styled with font: inherit, border 0, padding 0, transparent background, ::placeholder currentColor at .5 opacity; reveal Send and consent with input:placeholder-shown ~ sibling rules (no JS); add aria-label and a focus-visible cue Büro lacks; post to Zpryme's list for real.", "confidence": "high" }, { "name": "Reactive custom cursor", "owner_words": "I like the custom cursors when you hover over certain things. Reactive custom cursors", "selectors": [ "div._pointer[data-cursor]", "._pointer > [data-cursor=pointershift] svg", "._pointer > [data-cursor=eyes] svg .pupils", "._manifesto .accolades > a", "nav._navbar" ], "mechanism": "One fixed 48 x 48 px element (z 9999, pointer-events none, shown only on hover:hover and pointer:fine) moved every animation frame with translate3d from a rAF-throttled mousemove, no lag. It holds all states as inline SVGs; a stack set by the v-pointer directive (mouseenter push, mouseleave pop, click forwarded) names the visible one through data-cursor. Opted-in elements set cursor:none. States: pointer, pointershift (tilts with motion: rotateX 4dy, rotateY 4dx, rotateZ 5dx, dx and dy the movement since the previous frame clamped to ±5 px, settles after 100 ms), grab, eyes (pupils shift against the motion, blinks 1-4 s after the last move), tornado (motion-path spin on click), viewcase (trailing label). body:active swaps to the pressed drawing. The hand is a white glove with a 2.5 px black stroke plus a 20% stroke.", "libraries": [ "GSAP 3.12.2 (quickTo, MotionPathPlugin)" ], "states": [ "none (system cursor)", "pointer", "pointershift over the bar and the ranking cards", "grab over sliders", "eyes over the hero video", "tornado", "viewcase", "pressed (body:active)" ], "timings": "Position: every frame, no easing. Tilt 0.25 s power2.out, settle 0.5 s power4.out after 100 ms still. Pupils quickTo 0.25 s power2; blink scaleY .1 for 0.1 s each way, 1-4 s after the last mouse move (one wait in ten is 0-12.5 s). Tornado 0.4 s power2.out. Viewcase label 0.2 s power2.out; hand/inner scale transitions 0.3 s, inner delayed 0.15 s.", "shots": [ "shots/cursor-01-hand-over-card.png", "shots/cursor-04-pressed-on-bar.png", "shots/cursor-hand-eyes-pressed-crops.png", "shots/bar-01-rest-eyes-over-hero.png", "shots/menu-02-hover-work.png" ], "rebuild": "Draw the states in the site's hand as inline SVGs in one fixed pointer-events:none element with planned hot spots; mark targets with data-cursor and give exactly those cursor:none; delegate pointerover/pointerout to a stack; move with translate3d per frame; small reactions from velocity (tilt, pupils, blink) with GSAP quickTo or Motion; gate on (hover:hover) and (pointer:fine) and prefers-reduced-motion.", "confidence": "high" } ], "transitions": [ { "name": "Load: loader greeting docks into the bar", "from": "black loader ('Hello', then 'We are Büro')", "to": "page with the bar at the bottom", "layers": [ "greeting text ('Hello' 0.6 s in, 0.4 s out, then 'We are Büro'; about 2.3 s before the handoff starts: 1.8 s of greeting motion, a 0.3 s pause and the handoff's 0.2 s delay; longer while assets load)", "navbar (lifted to the greeting's height, then glides down 0.65 s expo.out)", "greeting slides onto the bar's message slot (about 0.7 s expo.inOut)", "black curtain drops (y 101%, 0.95 s expo.inOut)", "page content fades and rises on inner pages (1.2 s expo.out)" ], "duration_ms": 1400, "shots": [ "shots/intro-home-slowmo-sheet.png", "shots/intro-recognition-realtime-sheet.png" ] }, { "name": "Bar message swap", "from": "'We are Büro'", "to": "'Open menu' or a section message", "layers": [ "icon (down out, down in)", "word spans (up out, up in, staggered)" ], "duration_ms": 930, "shots": [ "shots/bar-bot-roll-slowmo-sheet.png", "shots/bar-bot-roll-slowmo-strip.png" ] }, { "name": "Menu sheet open", "from": "bar at rest", "to": "sheet open over a receded page", "layers": [ "message and chip fade", "skin height grows from the bar", "menu content slides up", "page recedes (scale, opacity, corners)", "dividers draw", "labels rise" ], "duration_ms": 650, "shots": [ "shots/menu-open-slowmo-sheet.png", "shots/menu-open-realtime-sheet.png", "shots/phone-menu-open-realtime-sheet.png" ] }, { "name": "Menu sheet close", "from": "sheet open", "to": "bar at rest", "layers": [ "content down and out", "skin shrinks into the bar", "page returns", "message and chip roll back" ], "duration_ms": 520, "shots": [ "shots/menu-close-realtime-sheet.png", "shots/menu-close-run2-sheet.png" ] }, { "name": "Page to page from the menu", "from": "/ (homepage)", "to": "/recognition or /studios", "layers": [ "sheet closes into the bar", "old page pinned behind a black body", "new page slides up from the bottom", "chip rolls to the new name", "headings reveal line by line", "bar takes the new page's message" ], "duration_ms": 1000, "shots": [ "shots/nav-to-recognition-slowmo-sheet.png", "shots/nav-to-recognition-slowmo-frames-01-04.png", "shots/nav-to-studios-realtime-sheet.png" ] } ], "not_confirmed": [ "Old page during a page change: source defines a desktop 'fancy' leave (scale 0, rotate -20, 1.25 s power3.in) but 6% speed frames show the old page unchanged under the incoming page", "Send underline hover replay: in source, not visible in a 10-frame burst", "Newsletter submit: never submitted by rule; source shows console.log and a fake 'Gotchaaa' swap with no network request", "Exact Nuxt 2.x release (Vue 2.7.16 suggests 2.17)", "Bar morphing into video controls on Play: source only, not captured", "Reduced-motion behaviour: no rule found, not tested with emulation", "Page scrollbar appearance in a real browser: captures hide scrollbars by flag" ] }