VISUAL SOURCE / HEADLINE IDLE / LOCAL RENDER STATE

--synth-join: 0.000;
--synth-slash-width: 0.00px;
scale: 1.000 1;
translate: 0.00px 0px;
scroll: 0.000; proximity: 0.000;
/* cursor: paused */

/* HEADLINE / JOIN */

001const target = reduced ? (scroll === 1 || proximity === 1 ? 1 : 0) : Math.max(scroll, proximity)

002const offscreen = rect.bottom < 0 || rect.top > viewportHeight || rect.width === 0

003const elapsed = lastTime ? Math.min(64, time - lastTime) : 16

004lastTime = time

005

const next = reduced || offscreen ? target : progress.current + (target - progress.current) * (1 - Math.exp(-elapsed / 60))

006progress.current = Math.abs(next - target) < 0.0005 ? target : next

007node.style.setProperty("--synth-join", String(progress.current))

008node.setAttribute("data-join-progress", progress.current.toFixed(5))

009node.setAttribute("data-scroll-progress", scroll.toFixed(5))

010node.setAttribute("data-proximity-progress", proximity.toFixed(5))

011node.setAttribute("data-connection-state", progress.current === 1 ? "disconnected" : "dis/connected")

012

013opacity: "calc(1 - var(--synth-join, 0))",

014scale: "calc(1 - var(--synth-join, 0)) 1",

015transformOrigin: "left center",

016translate: "calc(-1 * var(--synth-join, 0) * var(--synth-slash-width, 0px)) 0px",

/* POINTER / DELEGATE */

017const over = (event: PointerEvent) => {

018 const el = interactiveFrom(event.target)

019 if (el === last) return

020 last = el

021 logVisualEvent("hover", describeElement(el))

022 if (!hotTarget()) publishVisualState({ target: "pointer", event: "hover" })

023}

024const down = (event: PointerEvent) => {

025 logVisualEvent("press", describeElement(el))

026 publishVisualState({ target: "pointer", event: "press" })

027}

028const focus = (event: FocusEvent) => {

029 logVisualEvent("focus", describeElement(el))

030}

031document.addEventListener("pointerover", over, { passive: true })

032document.addEventListener("pointerdown", down, { passive: true })

033document.addEventListener("focusin", focus)

/* EXPLORE SYSTEMS / CONTROL */

034export const CURSOR_FRAMES: Keyframe[] = [

035 { offset: 0, opacity: 1, easing: "steps(1, end)" },

036 { offset: 0.5, opacity: 0, easing: "steps(1, end)" },

037 { offset: 1, opacity: 1 },

038]

039export const CURSOR_TIMING: KeyframeAnimationOptions = {

040 duration: 900,

041 iterations: Infinity,

042 easing: "linear",

043 fill: "none",

044}

045animation = node.animate(CURSOR_FRAMES, CURSOR_TIMING)

046

047const dx = Math.max(rect.left - point.x, 0, point.x - rect.right)

048 const dy = Math.max(rect.top - point.y, 0, point.y - rect.bottom)

049 const distance = Math.hypot(dx, dy)

050 // Near is deliberately incomplete; actual hover/focus finishes the join.

051 publishProduct(id, hovering.current && distance === 0 ? 1 : 0.96 * clamp(1 - distance / 320))

052}

/* ABOUT US / CONTROL */

053export const CURSOR_FRAMES: Keyframe[] = [

054 { offset: 0, opacity: 1, easing: "steps(1, end)" },

055 { offset: 0.5, opacity: 0, easing: "steps(1, end)" },

056 { offset: 1, opacity: 1 },

057]

058export const CURSOR_TIMING: KeyframeAnimationOptions = {

059 duration: 900,

060 iterations: Infinity,

061 easing: "linear",

062 fill: "none",

063}

064

065const animation = node.animate([

066

    { offset: 0, textShadow: `1px 0 0 rgba(191,33,40,.55), -1px 0 0 rgba(236,234,228,.32)${base}`, easing: "steps(1, end)" },

067

    { offset: 0.38, textShadow: `-1px 0 0 rgba(191,33,40,.36), 1px 0 0 rgba(236,234,228,.22)${base}`, easing: "steps(1, end)" },

068 { offset: 0.72, textShadow: original, easing: "steps(1, end)" },

069 { offset: 1, textShadow: original },

070], { duration: 120, easing: "linear", fill: "none", iterations: 1 })

/* SURFACE / RENDER */

071.synthtech-analogue-atmosphere > .synthtech-analogue-signal {

072 animation: synthtech-analogue-signal-shift 9s steps(1, end) infinite;

073}

074.synthtech-analogue-atmosphere[data-running="false"] > .synthtech-analogue-signal {

075 animation-play-state: paused;

076 visibility: hidden;

077}

078@keyframes synthtech-analogue-signal-shift {

079 0%, 94%, 100% { opacity: 0; transform: translateX(0); }

080 95% { opacity: 0.34; transform: translateX(-3px); }

081 96% { opacity: 0.34; transform: translateX(1px); }

082 97% { opacity: 0; transform: translateX(0); }

083}

084@media (prefers-reduced-motion: reduce) {

085 .synthtech-analogue-atmosphere > .synthtech-analogue-signal {

086 animation: none;

087 display: none;

088 }

089}

SYNTHESIS TECHNOLOGIES / SYSTEMS DEVELOPMENT / EST. 2026

SYNTHESIS / SYSTEMS DEV / EST. 2026

LOCATION // NOT SHARED

Optional. Rounded location stays on this page.

LOCATION // NOT SHARED

Optional. Rounded location stays on this page.

SYNTHESIS MODULE / PUBLIC INTERFACE

CONNECTING THE

DIS

CONNECTED.

DIS

CONNECTED.

DIS

CONNECTED.

Software systems for industries where the tools stopped talking to each other.

BECOME CONNECTED

ABOUT US

BUILD 00.01 / INTERFACE PUBLIC / NODE PRIMARY

CONNECTING THE

BIM SYNTHESIS

BIM SYNTHESIS

FOUNDRY SYSTEMS

FOUNDRY SYSTEMS

GAMES / LABS

GAMES / LABS