fix(website): mobile benchmark bars and tilt effect

Author: NicholasKissel

packages/website/src/components/Benchmarks.tsx

@@ -56,7 +56,7 @@ function ColdStartChart() {
           </h4>
           <p className="text-[11px] text-zinc-600 italic mt-1">Lower is better</p>
         </div>
-        <div className="flex gap-1 sm:ml-auto">
+        <div className="flex flex-wrap gap-1 sm:ml-auto">
           {groups.map((t, i) => (
             <button
               key={t.label}
@@ -76,7 +76,7 @@ function ColdStartChart() {
         {/* Secure Exec bar */}
         <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4">
           <span className="text-xs text-zinc-500 sm:w-48 shrink-0 font-mono">Secure Exec</span>
-          <div className="flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
+          <div className="w-full sm:flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
             <motion.div
               key={active}
               initial={{ width: 0 }}
@@ -99,7 +99,7 @@ function ColdStartChart() {
         {/* Sandbox bar */}
         <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4">
           <span className="text-xs text-zinc-500 sm:w-48 shrink-0 font-mono">Fastest sandbox</span>
-          <div className="flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
+          <div className="w-full sm:flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
             <motion.div
               key={active}
               initial={{ width: 0 }}
@@ -145,7 +145,7 @@ function MetricBar({
         {/* Secure Exec bar */}
         <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4">
           <span className="text-xs text-zinc-500 sm:w-48 shrink-0 font-mono">Secure Exec</span>
-          <div className="flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
+          <div className="w-full sm:flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
             <motion.div
               initial={{ width: 0 }}
               whileInView={{ width: `${barMin}%` }}
@@ -170,7 +170,7 @@ function MetricBar({
         {/* Sandbox bar */}
         <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4">
           <span className="text-xs text-zinc-500 sm:w-48 shrink-0 font-mono">{sandbox.label}</span>
-          <div className="flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
+          <div className="w-full sm:flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
             <motion.div
               initial={{ width: 0 }}
               whileInView={{ width: `${sandbox.bar}%` }}
@@ -222,7 +222,7 @@ function CostChart() {
           </h4>
           <p className="text-[11px] text-zinc-600 italic mt-1">Lower is better</p>
         </div>
-        <div className="flex gap-1 sm:ml-auto">
+        <div className="flex flex-wrap gap-1 sm:ml-auto">
           {tiers.map((tier, i) => (
             <button
               key={tier.label}
@@ -242,7 +242,7 @@ function CostChart() {
         {/* Secure Exec bar */}
         <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4">
           <span className="text-xs text-zinc-500 sm:w-48 shrink-0 font-mono">Secure Exec</span>
-          <div className="flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
+          <div className="w-full sm:flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
             <motion.div
               key={active}
               initial={{ width: 0 }}
@@ -265,7 +265,7 @@ function CostChart() {
         {/* Sandbox bar */}
         <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4">
           <span className="text-xs text-zinc-500 sm:w-48 shrink-0 font-mono">Cheapest sandbox</span>
-          <div className="flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
+          <div className="w-full sm:flex-1 relative h-7 bg-white/5 rounded-sm overflow-hidden">
             <motion.div
               key={active}
               initial={{ width: 0 }}
@@ -285,7 +285,7 @@ function CostChart() {
 
 export function Benchmarks() {
   return (
-    <section id="benchmarks" className="border-t border-white/10 py-48">
+    <section id="benchmarks" className="border-t border-white/10 py-48 overflow-x-hidden">
       <div className="mx-auto max-w-7xl px-6">
         <div className="mb-12">
           <motion.h2
@@ -324,7 +324,7 @@ export function Benchmarks() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5 }}
-          className="relative z-10 rounded-xl bg-[#0c0c0e] p-8 chrome-gradient-border"
+          className="relative z-10 rounded-xl bg-[#0c0c0e] p-4 sm:p-8 overflow-hidden chrome-gradient-border"
           style={{ "--chrome-angle": "75deg" } as React.CSSProperties}
         >
           {/* Cold start charts */}

packages/website/src/layouts/Layout.astro

@@ -79,36 +79,55 @@ const structuredData = {
   <body class="min-h-screen bg-background text-foreground antialiased">
     <slot />
     <script>
-      // Chrome border scroll effects:
-      // 1. Rotate gradient clockwise on scroll-down (fast at edges, slow at center)
-      // 2. Brighter/shinier near page center, darker near top/bottom
+      // Chrome border scroll + tilt effects:
+      // Scroll: rotate gradient clockwise, brighter near page center
+      // Tilt (mobile): device orientation adds rotation and brightness shift
       {
         const K = 0.6;
         const TWO_PI = Math.PI * 2;
         const BRIGHT_MIN = 0.35;
         const BRIGHT_MAX = 1.2;
+
+        let scrollDeg = 0;
+        let scrollBright = BRIGHT_MIN;
+        let scrollDivider = 100;
+        let tiltDeg = 0;
+        let tiltBright = 0;
         let ticking = false;
-        const update = () => {
+
+        const apply = () => {
+          const root = document.documentElement.style;
+          root.setProperty("--chrome-scroll-offset", `${scrollDeg + tiltDeg}deg`);
+          root.setProperty("--chrome-brightness", `${scrollBright + tiltBright}`);
+          root.setProperty("--chrome-divider-offset", `${scrollDivider}%`);
+          ticking = false;
+        };
+
+        const onScroll = () => {
           const scrollY = window.scrollY;
           const pageHeight = document.documentElement.scrollHeight - window.innerHeight;
           const t = pageHeight > 0 ? scrollY / pageHeight : 0;
           const eased = t + K * Math.sin(TWO_PI * t) / TWO_PI;
-          const degrees = eased * 360;
-          const brightness = BRIGHT_MIN + (BRIGHT_MAX - BRIGHT_MIN) * Math.sin(Math.PI * t);
-          const root = document.documentElement.style;
-          const dividerOffset = (1 - t) * 100;
-          root.setProperty("--chrome-scroll-offset", `${degrees}deg`);
-          root.setProperty("--chrome-brightness", `${brightness}`);
-          root.setProperty("--chrome-divider-offset", `${dividerOffset}%`);
-          ticking = false;
+          scrollDeg = eased * 360;
+          scrollBright = BRIGHT_MIN + (BRIGHT_MAX - BRIGHT_MIN) * Math.sin(Math.PI * t);
+          scrollDivider = (1 - t) * 100;
+          if (!ticking) { requestAnimationFrame(apply); ticking = true; }
         };
-        window.addEventListener("scroll", () => {
-          if (!ticking) {
-            requestAnimationFrame(update);
-            ticking = true;
-          }
+
+        window.addEventListener("scroll", onScroll, { passive: true });
+        onScroll();
+
+        // Device tilt: gamma (left/right) drives rotation, beta (front/back) drives brightness
+        let hasTilt = false;
+        window.addEventListener("deviceorientation", (e) => {
+          if (e.gamma == null || e.beta == null) return;
+          hasTilt = true;
+          const gamma = Math.max(-45, Math.min(45, e.gamma));
+          const beta = Math.max(-45, Math.min(45, e.beta));
+          tiltDeg = (gamma / 45) * 60;
+          tiltBright = (1 - Math.abs(beta) / 45) * 0.3;
+          if (!ticking) { requestAnimationFrame(apply); ticking = true; }
         }, { passive: true });
-        update();
       }
     </script>
   </body>