From 8769138383f2155a6c571dd604a1b30038863113 Mon Sep 17 00:00:00 2001 From: SamGu-NRX Date: Tue, 6 Oct 2026 07:46:14 -0500 Subject: [PATCH 1/8] feat: carry kgu.one's departure dots into the first paint Arriving from kgu.one with #kgu=,,, an inline script in the root layout's draws kgu.one's scan dots over the first frame from the same click, then takes them away nearest the click first once the first screen has rendered. While it arrives, the hero is shown in place instead of fading up under the dots. Without the hash nothing changes. Co-Authored-By: Claude Opus 5.5 (1M context) --- src/app/globals.css | 7 +++++++ src/app/kgu-arrival.ts | 8 ++++++++ src/app/layout.tsx | 4 ++++ src/app/page.tsx | 5 +++++ 4 files changed, 24 insertions(+) create mode 100644 src/app/kgu-arrival.ts diff --git a/src/app/globals.css b/src/app/globals.css index 2d3531a8..3795253a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -372,3 +372,10 @@ border-color: rgba(226, 232, 240, 0.08); } } + +/* Arriving from kgu.one (src/app/kgu-arrival.ts), the hero is in place from the first frame, under kgu.one's + dots, instead of fading up after hydration. Important beats the inline styles and animations motion sets. */ +html[data-kgu-arrival] [data-kgu-intro] { + opacity: 1 !important; + transform: none !important; +} diff --git a/src/app/kgu-arrival.ts b/src/app/kgu-arrival.ts new file mode 100644 index 00000000..1757ef76 --- /dev/null +++ b/src/app/kgu-arrival.ts @@ -0,0 +1,8 @@ +// Arriving from kgu.one with #kgu=x,y,rrggbb in the address, the dots of its departure carry on over this page +// from where the visitor clicked, then clear once the first screen has rendered. While it arrives, has +// data-kgu-arrival, which globals.css uses to show the hero in place rather than fading it in under the dots. +// Without that hash it does nothing. The root layout inlines it in , so it runs before the first paint. +// Minified from kgu.one's scripts/continuation/arrive.ts (sha256 83fde12d5659); copy it again from there rather +// than editing it here. +export const KGU_ARRIVAL = + '(()=>{var K="data-kgu-arrival";var $="([01](?:\\\\.\\\\d{1,3})?)",U=new RegExp(`^#kgu=${$},${$},([0-9a-f]{6})$`);function q(t){let e=U.exec(t);if(!e)return null;let n=Number(e[1]),c=Number(e[2]);return n<=1&&c<=1?{x:n,y:c,ink:parseInt(e[3],16)}:null}var B=t=>.2126*(t>>16)+.7152*(t>>8&255)+.0722*(t&255)>127.5?.5:.42;function v(t){if(!(t>0))return 0;if(t>=1)return 1;let e=(s,a,E)=>3*a*s*(1-s)**2+3*E*s*s*(1-s)+s**3,n=0,c=1;for(let s=0;s<30;s++){let a=(n+c)/2;e(a,.23,.32){let e=Math.sin(t*12.9898+78.233)*43758.5453;return e-Math.floor(e)};function g(t,e,n){let c=(t-(n>0?Math.min(e,n)/n*130:0))/70;if(c<=0)return 0;let s=80+Math.max(0,t-130)*.24,a=v(Math.min(1,Math.max(0,(s-e)/60)));return 1.2+(3.4-1.2)*v(c)+(6-3.4)*a}function j(t,e,n,c){let a=(t-(n>0?Math.min(e,n)/n*192:0))/128;return a<=0?c:a>=1?0:c*(1-v(a))}function N(t){let e=q(t.location.hash);if(!e)return;let{document:n,history:c,location:s,performance:a}=t;c.replaceState(c.state,"",s.pathname+s.search);let E=a.now(),y=o=>t.matchMedia(o).matches;if(E>4e3||y("(forced-colors: active)"))return;let A=y("(prefers-reduced-motion: reduce)"),b=n.documentElement,u=n.createElement("canvas"),f=u.getContext("2d");if(!f)return;b.setAttribute(K,""),u.setAttribute("aria-hidden","true");let S=-150,I="largest-contentful-paint";t.PerformanceObserver?.supportedEntryTypes?.includes(I)&&(S=E,new t.PerformanceObserver(()=>S=a.now()).observe({type:I,buffered:!0}));let W=`rgb(${e.ink>>16} ${e.ink>>8&255} ${e.ink&255} / ${B(e.ink)})`,m=0,l=0,L=0,T=0,d=0,M=-1,R=0,h=new Float32Array(0),D=()=>{let{clientWidth:o,clientHeight:r}=b;if(o===m&&r===l)return;m=o,l=r,M<0&&(M=e.x*m,R=e.y*l);let i=Math.min(2,t.devicePixelRatio||1);u.width=Math.ceil(m*i),u.height=Math.ceil(l*i),u.style.cssText=`position:fixed;left:0;top:0;width:${m}px;height:${l}px;z-index:2147483647;pointer-events:none`,f.scale(i,i),f.fillStyle=W,L=Math.ceil(m/16),T=Math.ceil(l/16),h=new Float32Array(L*T);for(let p=0;p[0,l].map(_=>Math.hypot(p-M,_-R))))+16},F=o=>{f.clearRect(0,0,m,l),f.beginPath();for(let r=0;r0&&f.rect((r%L+.5)*16-i/2,(Math.floor(r/L)+.5)*16-i/2,i,i)}f.fill()},C=!1,H=0,x=-1,P=new Float32Array(0),G=o=>{if(C&&x<0&&H>1&&(x=o,P=h.map(r=>g(o,r,d))),H++,x<0)D(),A||F(r=>g(o,r,d));else{let r=o-x;if(r>=(A?200:320))return u.remove();A?u.style.opacity=String(1-r/200):F((i,p)=>j(r,i,d,P[p]))}t.requestAnimationFrame(G)},k=()=>{C=!0};D(),F(o=>g(E,o,d)),b.append(u),t.requestAnimationFrame(G),t.setTimeout(k,1500);let O=()=>{let o=S+150-a.now();o>0?t.setTimeout(O,o):k()},w=()=>{let o=[...n.images].filter(r=>{let i=r.getBoundingClientRect();return i.width>0&&i.top0});Promise.all([n.fonts?.ready,...o.map(r=>r.decode().catch(()=>{}))]).then(O,O)};n.readyState==="loading"?n.addEventListener("DOMContentLoaded",w,{once:!0}):w()}N(window);})();'; // kgu-arrive diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9fbb7734..1d3e43d7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import { Analytics } from "@vercel/analytics/react"; import { Providers } from "./providers"; import type { Metadata } from "next"; import { cn } from "@/lib/shadcn"; +import { KGU_ARRIVAL } from "./kgu-arrival"; const title = "Connvo – Real Conversations, Better Connections"; const description = @@ -36,6 +37,9 @@ export default function RootLayout({ }) { return ( + +