Under the hood

A full-viewport WebGL mesh-gradient from @paper-design/shaders-react, recolored to the paper/ink palette with one accent. It drifts slowly so the glass card has something to refract. Fixed and pointer-events:none so it never blocks the wheel.

'use client';

import { MeshGradient } from '@paper-design/shaders-react';

/**
 * Full-viewport animated paper-shader backdrop for the landing.
 *
 * The paper shader on the brand's warm paper→ink axis (paper → tile → taupe →
 * deep warm grey). Slow drift gives the glass something to refract. Fixed +
 * pointer-events:none so it never intercepts the wheel/button.
 */
export function PaperShaderBackground() {
  return (
    <div
      aria-hidden="true"
      style={{
        position: 'fixed',
        inset: 0,
        zIndex: 0,
        pointerEvents: 'none',
      }}
    >
      <MeshGradient
        style={{ width: '100%', height: '100%' }}
        colors={['#f5f1e6', '#e3ddcd', '#c4baa4', '#5b5346']}
        speed={0.26}
      />
    </div>
  );
}

Holds the selected-destination state and wires the pieces together: a looping wheel, the frosted glass card it sits on, and the Win98 buttons (Go + I’m Feeling Lucky) that route or spin.

'use client';

import { useRouter } from 'next/navigation';
import * as React from 'react';

import { LoopWheel, type LoopWheelHandle } from '@/components/landing/LoopWheel';
import { LiquidGlassCard } from '@/components/ui/liquid-weather-glass';
import { Win98Button } from '@/components/ui/win-98-button';
import { LANDING_ITEMS, displayLabel, type LandingItem } from '@/lib/landing-items';

// Only built destinations appear in the wheel; planned ones show up once their
// status flips to 'live'.
const LIVE_ITEMS: LandingItem[] = LANDING_ITEMS.filter((i) => i.status === 'live');
const DEFAULT_INDEX = Math.max(0, LIVE_ITEMS.findIndex((i) => i.href === '/home'));

/**
 * The landing's interactive core: an infinite single-column wheel of the live
 * destinations on a frosted glass card, a primary Win98 "Go" button, and a
 * secondary "I'm Feeling Lucky" that spins to a random door and then opens it.
 */
export function LandingPicker() {
  const router = useRouter();
  const [selected, setSelected] = React.useState(DEFAULT_INDEX);
  const wheelRef = React.useRef<LoopWheelHandle>(null);

  const items = React.useMemo(
    () => LIVE_ITEMS.map((i) => ({ label: displayLabel(i), available: true })),
    [],
  );

  const navigate = React.useCallback(
    (index: number) => {
      const target = LIVE_ITEMS[index];
      if (!target) return;
      if (target.external) {
        window.open(target.href, '_blank', 'noreferrer');
      } else {
        router.push(target.href);
      }
    },
    [router],
  );

  const lucky = React.useCallback(async () => {
    const landed = await wheelRef.current?.spinRandom();
    if (landed != null) navigate(landed);
  }, [navigate]);

  return (
    <div className="flex flex-col items-center gap-4">
      <LiquidGlassCard
        draggable={false}
        blurIntensity="lg"
        glowIntensity="none"
        shadowIntensity="xs"
        borderRadius="16px"
        className="bg-white/10 px-5 py-2"
      >
        <LoopWheel
          ref={wheelRef}
          items={items}
          value={selected}
          onChange={setSelected}
          itemHeight={38}
          visibleItems={7}
          ariaLabel="Choose a destination"
          className="w-72"
        />
      </LiquidGlassCard>

      <div className="flex flex-col items-center gap-2.5">
        <Win98Button
          onClick={() => navigate(selected)}
          aria-label={`Go to ${items[selected]?.label}`}
          className="h-10 min-w-32 px-7 text-sm"
        >
          Go&nbsp;→
        </Win98Button>

        <Win98Button onClick={lucky}>I&apos;m Feeling Lucky</Win98Button>
      </div>
    </div>
  );
}

The infinite single-column wheel. Position is one continuous motion value; each item is absolutely placed at its offset wrapped into (-N·h/2, N·h/2] so the list loops endlessly. Raw pointer events drive the drag, and items rotate/scale/fade in 3D toward the center. Inspired by the 21st.dev date-wheel picker, rebuilt for looping.

Based on the original source.

'use client';

import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
import * as React from 'react';

import { cn } from '@/lib/utils';

export interface LoopWheelHandle {
  /** Spin forward a random distance; resolves with the landed index when the
      animation settles. */
  spinRandom: () => Promise<number>;
}

export interface WheelItem {
  label: string;
  /** Available destinations render normally; unavailable ones are greyed out
      and skipped by "I'm Feeling Lucky" (but still manually selectable). */
  available: boolean;
}

interface LoopWheelProps {
  items: WheelItem[];
  /** Selected index 0..N-1 (updated via onChange on settle). */
  value: number;
  onChange: (index: number) => void;
  itemHeight?: number;
  /** Odd number of rows in view. */
  visibleItems?: number;
  className?: string;
  ariaLabel: string;
}

const SPRING = { type: 'spring' as const, stiffness: 260, damping: 32 };

/**
 * An infinite (looping) single-column wheel. Items wrap, so scrolling past the
 * last entry continues onto the first. Built for the landing rather than reusing
 * the finite date-wheel primitive, because looping needs absolute, wrap-aware
 * positioning instead of flow layout.
 *
 * Position is a continuous pixel offset `y` where a centered item k sits at
 * y = -k·itemHeight. The selected index is that value taken mod N. Dragging is
 * handled with raw pointer events so framer's drag transform doesn't fight the
 * per-item wrapping.
 */
export const LoopWheel = React.forwardRef<LoopWheelHandle, LoopWheelProps>(
  function LoopWheel(
    { items, value, onChange, itemHeight = 38, visibleItems = 7, className, ariaLabel },
    ref,
  ) {
    const n = items.length;
    const total = n * itemHeight;
    const height = visibleItems * itemHeight;
    const centerTop = height / 2 - itemHeight / 2;
    const reach = (visibleItems / 2) * itemHeight;

    const y = useMotionValue(-value * itemHeight);
    const drag = React.useRef<{
      active: boolean;
      startY: number;
      startVal: number;
      lastY: number;
      lastT: number;
      velocity: number;
    } | null>(null);

    const settle = React.useCallback(
      (index: number) => {
        const controls = animate(y, -index * itemHeight, SPRING);
        onChange(((index % n) + n) % n);
        return controls;
      },
      [itemHeight, n, onChange, y],
    );

    // Realign when `value` is set from outside and isn't the centered item.
    React.useEffect(() => {
      const cur = Math.round(-y.get() / itemHeight);
      const curMod = ((cur % n) + n) % n;
      if (curMod === value) return;
      let delta = value - curMod;
      if (delta > n / 2) delta -= n;
      if (delta < -n / 2) delta += n;
      animate(y, -(cur + delta) * itemHeight, SPRING);
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [value]);

    React.useImperativeHandle(ref, () => ({
      spinRandom: () => {
        // Only land on available destinations; spin forward 1–2 loops for drama.
        const available = items.map((it, i) => (it.available ? i : -1)).filter((i) => i >= 0);
        const cur = Math.round(-y.get() / itemHeight);
        const curMod = ((cur % n) + n) % n;
        if (available.length === 0) return Promise.resolve(curMod);
        let target = available[Math.floor(Math.random() * available.length)];
        if (available.length > 1 && target === curMod) {
          target = available[(available.indexOf(target) + 1) % available.length];
        }
        let delta = ((target - curMod) % n + n) % n;
        if (delta === 0) delta = n;
        const loops = 1 + Math.floor(Math.random() * 2);
        const mod = target;
        const controls = settle(cur + delta + loops * n);
        // Resolve with the landed index once the spring settles (so the caller
        // can navigate after the animation, not before).
        return new Promise<number>((resolve) => {
          let done = false;
          const finish = () => {
            if (done) return;
            done = true;
            resolve(mod);
          };
          controls.finished?.then(finish).catch(finish);
          setTimeout(finish, 1200); // fallback if finished never resolves
        });
      },
    }));

    const onPointerDown = (e: React.PointerEvent) => {
      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
      const now = performance.now();
      drag.current = {
        active: true,
        startY: e.clientY,
        startVal: y.get(),
        lastY: e.clientY,
        lastT: now,
        velocity: 0,
      };
    };

    const onPointerMove = (e: React.PointerEvent) => {
      const d = drag.current;
      if (!d?.active) return;
      y.set(d.startVal + (e.clientY - d.startY));
      const now = performance.now();
      const dt = now - d.lastT;
      if (dt > 0) d.velocity = ((e.clientY - d.lastY) / dt) * 16; // px per frame-ish
      d.lastY = e.clientY;
      d.lastT = now;
    };

    const onPointerUp = (e: React.PointerEvent) => {
      const d = drag.current;
      if (!d?.active) return;
      d.active = false;
      (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);

      const cur = Math.round(-y.get() / itemHeight);
      const moved = Math.abs(e.clientY - d.startY);

      if (moved < 6) {
        // A tap (not a drag): move toward the row that was tapped. Rows above
        // the centre are negative, below are positive; the centred row is 0.
        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
        const rows = Math.round((e.clientY - rect.top - height / 2) / itemHeight);
        settle(cur + rows);
      } else {
        const projected = y.get() + d.velocity * 6;
        settle(Math.round(-projected / itemHeight));
      }
    };

    const onWheel = (e: React.WheelEvent) => {
      const cur = Math.round(-y.get() / itemHeight);
      settle(cur + (e.deltaY > 0 ? 1 : -1));
    };

    const onKeyDown = (e: React.KeyboardEvent) => {
      const cur = Math.round(-y.get() / itemHeight);
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        settle(cur + 1);
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        settle(cur - 1);
      }
    };

    return (
      <div
        className={cn(
          'relative touch-none overflow-hidden outline-none cursor-grab active:cursor-grabbing',
          className,
        )}
        style={{ height, perspective: 900 }}
        tabIndex={0}
        role="spinbutton"
        aria-label={ariaLabel}
        aria-valuetext={items[value]?.label}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={onPointerUp}
        onWheel={onWheel}
        onKeyDown={onKeyDown}
      >
        {/* Edge-faded selection band */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 z-10"
          style={{
            top: centerTop,
            height: itemHeight,
            background:
              'linear-gradient(rgba(20,17,11,0.05), rgba(20,17,11,0.09), rgba(20,17,11,0.05))',
            borderTop: '1px solid rgba(20,17,11,0.2)',
            borderBottom: '1px solid rgba(20,17,11,0.2)',
            WebkitMaskImage:
              'linear-gradient(to right, transparent, #000 18%, #000 82%, transparent)',
            maskImage:
              'linear-gradient(to right, transparent, #000 18%, #000 82%, transparent)',
          }}
        />

        {items.map((item, i) => (
          <LoopItem
            key={`${item.label}-${i}`}
            label={item.label}
            available={item.available}
            index={i}
            y={y}
            itemHeight={itemHeight}
            total={total}
            reach={reach}
            centerTop={centerTop}
            selected={(((i - value) % n) + n) % n === 0}
          />
        ))}
      </div>
    );
  },
);

function LoopItem({
  label,
  available,
  index,
  y,
  itemHeight,
  total,
  reach,
  centerTop,
  selected,
}: {
  label: string;
  available: boolean;
  index: number;
  y: ReturnType<typeof useMotionValue<number>>;
  itemHeight: number;
  total: number;
  reach: number;
  centerTop: number;
  selected: boolean;
}) {
  // Offset from the center line, wrapped into (-total/2, total/2] for looping.
  const offset = useTransform(y, (yv) => {
    let o = index * itemHeight + yv;
    o = ((o % total) + total) % total;
    if (o > total / 2) o -= total;
    return o;
  });

  const rotateX = useTransform(offset, [-reach, 0, reach], [52, 0, -52]);
  const scale = useTransform(offset, [-reach, 0, reach], [0.82, 1, 0.82]);
  const opacity = useTransform(
    offset,
    [-reach, -reach / 2, 0, reach / 2, reach],
    [0.4, 0.72, 1, 0.72, 0.4],
  );

  return (
    <motion.div
      className="pointer-events-none absolute inset-x-0 flex select-none items-center justify-center"
      style={{
        top: centerTop,
        height: itemHeight,
        y: offset,
        rotateX,
        scale,
        opacity,
        transformStyle: 'preserve-3d',
        transformOrigin: `center center -${itemHeight * 2}px`,
      }}
    >
      <span
        className={cn(
          'whitespace-nowrap text-[14px] tracking-tight',
          available ? 'text-foreground' : 'text-foreground/35 italic',
          available && selected ? 'font-bold' : 'font-medium',
        )}
      >
        {label}
      </span>
    </motion.div>
  );
}

A frosted-glass card: a backdrop-blur layer distorted by an SVG turbulence/displacement filter, plus inner-shadow and glow layers for the refraction look. Dragging is disabled here so it stays put behind the wheel.

Based on the original source.

'use client';
import React, { useState } from 'react';
import { motion } from 'motion/react';
import {cn} from "@/lib/utils"

interface LiquidGlassCardProps {
  children: React.ReactNode;
  className?: string;
  draggable?: boolean;
  expandable?: boolean;
  width?: string;
  height?: string;
  expandedWidth?: string;
  expandedHeight?: string;
  blurIntensity?: 'sm' | 'md' | 'lg' | 'xl';
  shadowIntensity?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  borderRadius?: string;
  glowIntensity?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
}

export const LiquidGlassCard = ({
  children,
  className = '',
  draggable = true,
  expandable = false,
  width,
  height,
  expandedWidth,
  expandedHeight,
  blurIntensity = 'xl',
  borderRadius = '32px',
  glowIntensity = 'sm',
  shadowIntensity = 'md',
  ...props
}: LiquidGlassCardProps) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggleExpansion = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!expandable) return;
    // Don't toggle if clicking on interactive elements
    const target = e.target as Element;
    if (target.closest?.('a, button, input, select, textarea')) return;
    setIsExpanded(!isExpanded);
  };

  const blurClasses = {
    sm: 'backdrop-blur-sm',
    md: 'backdrop-blur-md',
    lg: 'backdrop-blur-lg',
    xl: 'backdrop-blur-xl',
  };

  const shadowStyles = {
    none: 'inset 0 0 0 0 rgba(255, 255, 255, 0)',
    xs: 'inset 1px 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 1px 0 rgba(255, 255, 255, 0.3)',
    sm: 'inset 2px 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 2px 0 rgba(255, 255, 255, 0.35)',
    md: 'inset 3px 3px 3px 0 rgba(255, 255, 255, 0.45), inset -3px -3px 3px 0 rgba(255, 255, 255, 0.45)',
    lg: 'inset 4px 4px 4px 0 rgba(255, 255, 255, 0.5), inset -4px -4px 4px 0 rgba(255, 255, 255, 0.5)',
    xl: 'inset 6px 6px 6px 0 rgba(255, 255, 255, 0.55), inset -6px -6px 6px 0 rgba(255, 255, 255, 0.55)',
    '2xl':
      'inset 8px 8px 8px 0 rgba(255, 255, 255, 0.6), inset -8px -8px 8px 0 rgba(255, 255, 255, 0.6)',
  };

  const glowStyles = {
    none: '0 4px 4px rgba(0, 0, 0, 0.05), 0 0 12px rgba(0, 0, 0, 0.05)',
    xs: '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 16px rgba(255, 255, 255, 0.05)',
    sm: '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 24px rgba(255, 255, 255, 0.1)',
    md: '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 32px rgba(255, 255, 255, 0.15)',
    lg: '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 40px rgba(255, 255, 255, 0.2)',
    xl: '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 48px rgba(255, 255, 255, 0.25)',
    '2xl':
      '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 60px rgba(255, 255, 255, 0.3)',
  };

  const containerVariants = expandable
    ? {
        collapsed: {
          width: width || 'auto',
          height: height || 'auto',
          transition: {
            duration: 0.4,
            ease: [0.5, 1.5, 0.5, 1] as [number, number, number, number],
          },
        },
        expanded: {
          width: expandedWidth || 'auto',
          height: expandedHeight || 'auto',
          transition: {
            duration: 0.4,
            ease: [0.5, 1.5, 0.5, 1] as [number, number, number, number],
          },
        },
      }
    : undefined;

  const MotionComponent = draggable || expandable ? motion.div : 'div';

  const motionProps =
    draggable || expandable
      ? {
          variants: expandable ? containerVariants : undefined,
          animate: expandable
            ? isExpanded
              ? 'expanded'
              : 'collapsed'
            : undefined,
          onClick: expandable ? handleToggleExpansion : undefined,
          drag: draggable,
          dragConstraints: draggable
            ? { left: 0, right: 0, top: 0, bottom: 0 }
            : undefined,
          dragElastic: draggable ? 0.3 : undefined,
          dragTransition: draggable
            ? {
                bounceStiffness: 300,
                bounceDamping: 10,
                power: 0.3,
              }
            : undefined,
          whileDrag: draggable ? { scale: 1.02 } : undefined,
          whileHover: { scale: 1.01 },
          whileTap: { scale: 0.98 },
        }
      : {};

  return (
    <>
      {/* Hidden SVG Filter */}
      <svg className='hidden'>
        <defs>
          <filter
            id='glass-blur'
            x='0'
            y='0'
            width='100%'
            height='100%'
            filterUnits='objectBoundingBox'
          >
            <feTurbulence
              type='fractalNoise'
              baseFrequency='0.003 0.007'
              numOctaves='1'
              result='turbulence'
            />
            <feDisplacementMap
              in='SourceGraphic'
              in2='turbulence'
              scale='200'
              xChannelSelector='R'
              yChannelSelector='G'
            />
          </filter>
        </defs>
      </svg>
      <MotionComponent
        className={cn(
          `relative ${draggable ? 'cursor-grab active:cursor-grabbing' : ''} ${expandable ? 'cursor-pointer' : ''}`,
          className
        )}
        style={{
          borderRadius,
          ...(width && !expandable && { width }),
          ...(height && !expandable && { height }),
        }}
        {...motionProps}
        {...props}
      >
        {/* Bend Layer (Backdrop blur with distortion) */}
        <div
          className={`absolute inset-0 ${blurClasses[blurIntensity]} z-0`}
          style={{
            borderRadius,
            filter: 'url(#glass-blur)',
          }}
        />

        {/* Face Layer (Main shadow and glow) */}
        <div
          className='absolute inset-0 z-10'
          style={{
            borderRadius,
            boxShadow: glowStyles[glowIntensity],
          }}
        />

        {/* Edge Layer (Inner highlights) */}
        <div
          className='absolute inset-0 z-20'
          style={{
            borderRadius,
            boxShadow: shadowStyles[shadowIntensity],
          }}
        />

        {/* Content */}
        <div className={cn('relative z-30')}>{children}</div>
      </MotionComponent>
    </>
  );
};

A deliberately retro grey-chrome button — the bevel is four inset box-shadows that invert on :active. Kept un-restyled on purpose: the clash is the point.

Based on the original source.

import { Slot } from "@radix-ui/react-slot";
import * as React from "react";

import { cn } from "@/lib/utils";

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  asChild?: boolean;
}

const Win98Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        className={cn(
          "inline-flex items-center justify-center whitespace-nowrap font-mono text-xs -outline-offset-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
          "focus:outline-dotted focus:outline-1 focus:outline-black",
          "focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-black",
          "text-black bg-[silver] text-transparent [text-shadow:0_0_#222] disabled:[text-shadow:1_1_0_#fff] disabled:text-[grey]",
          "shadow-[inset_-1px_-1px_#0a0a0a,inset_1px_1px_#fff,inset_-2px_-2px_grey,inset_2px_2px_#dfdfdf]",
          "active:shadow-[inset_-1px_-1px_#ffffff,inset_1px_1px_#0a0a0a,inset_-2px_-2px_#dfdfdf,inset_2px_2px_#808080]",
          "disabled:shadow-[inset_-1px_-1px_#0a0a0a,inset_1px_1px_#fff,inset_-2px_-2px_grey,inset_2px_2px_#dfdfdf]",
          "h-7 px-3 min-w-20",
          className
        )}
        ref={ref}
        {...props}
      />
    );
  }
);
Win98Button.displayName = "Win98Button";

export { Win98Button };