Glass Lens Switch

Component

About

A segmented control whose selection indicator is a drop of glass that slides between options on a spring, stretching with momentum and magnifying the label underneath it.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Lens Switch to your project and fits it to your theme.

Code

How Glass Lens Switch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { GlassLensSwitch } from "@/components/ui/glass-lens-switch";
import { useState } from "react";

const SPEND: Record<string, { label: string; amount: string; note: string }> = {
  day: {
    label: "Today",
    amount: "OMR 18.450",
    note: "4 payments · mostly groceries, delivery",
  },
  week: {
    label: "This week",
    amount: "OMR 96.200",
    note: "21 payments · 12% less than last week",
  },
  month: {
    label: "September",
    amount: "OMR 412.875",
    note: "88 payments · rent paid on the 1st",
  },
  year: {
    label: "2026 so far",
    amount: "OMR 3,904.600",
    note: "On track to save OMR 1,200",
  },
};

export default function Demo() {
  const [p, setP] = useState("week");
  const s = SPEND[p];
  return (
    <div
      className="relative flex min-h-full w-full items-center justify-center overflow-hidden p-8"
      style={{ background: "#0b1220" }}
    >
      <div
        aria-hidden="true"
        className="absolute inset-[-20%]"
        style={{
          background:
            "radial-gradient(32% 42% at 30% 45%, #3b82f6, transparent 70%), radial-gradient(30% 40% at 72% 55%, #22c55e, transparent 70%), radial-gradient(25% 30% at 50% 22%, #e879f9, transparent 70%)",
        }}
      />
      <div className="relative flex flex-col items-center gap-6 text-center">
        <GlassLensSwitch
          label="Period"
          theme="night"
          value={p}
          onChange={setP}
          options={[
            { id: "day", label: "Day" },
            { id: "week", label: "Week" },
            { id: "month", label: "Month" },
            { id: "year", label: "Year" },
          ]}
        />
        <div aria-live="polite" className="text-white">
          <p className="font-mono text-[0.6875rem] uppercase tracking-[0.14em] opacity-75">
            {s.label} · spent
          </p>
          <p className="mt-2 text-[2.5rem] font-semibold tracking-[-0.04em] tabular-nums">
            {s.amount}
          </p>
          <p className="mt-1 text-[0.875rem] opacity-80">{s.note}</p>
        </div>
      </div>
    </div>
  );
}