beautiful-ui

精美 UI

使用 Next.js + Tailwind CSS v4 打造高端玻璃拟态界面——暗色模式优先，采用明亮通透的玻璃表面、流畅动画和精细的视觉润色。

设计 DNA

每个界面都遵循以下不可妥协的原则：

1. 默认使用暗色模式——优先针对暗色进行设计，浅色模式可选
2. 玻璃是主要表面——在丰富的背景上使用带有 backdrop-blur 的半透明图层
3. 光是一种材质——利用光晕、渐变和亮度营造纵深感
4. 动效有其目的——每个动画都服务于层级、反馈或愉悦感
5. 字体要醒目——选择有辨识度的字体，避免使用通用字体（如 Inter、Roboto、Arial）

Tailwind v4 暗色玻璃主题

@import "tailwindcss";

@theme {
  /* Dark-first color system using OKLCH */
  --color-background: oklch(10% 0.015 270);
  --color-surface: oklch(14% 0.01 270);
  --color-elevated: oklch(18% 0.012 270);

  --color-foreground: oklch(95% 0.005 270);
  --color-foreground-muted: oklch(65% 0.01 270);
  --color-foreground-subtle: oklch(45% 0.01 270);

  /* Glass surface tokens */
  --color-glass: oklch(100% 0 0 / 0.06);
  --color-glass-hover: oklch(100% 0 0 / 0.1);
  --color-glass-active: oklch(100% 0 0 / 0.14);
  --color-glass-border: oklch(100% 0 0 / 0.12);
  --color-glass-border-hover: oklch(100% 0 0 / 0.2);

  /* Accent — a vibrant hue that glows on dark surfaces */
  --color-accent: oklch(72% 0.19 250);
  --color-accent-hover: oklch(78% 0.17 250);
  --color-accent-muted: oklch(72% 0.19 250 / 0.15);
  --color-accent-foreground: oklch(98% 0.005 270);

  /* Status colors (muted to match dark glass aesthetic) */
  --color-success: oklch(72% 0.17 155);
  --color-warning: oklch(78% 0.15 75);
  --color-destructive: oklch(65% 0.2 25);

  --color-border: oklch(100% 0 0 / 0.08);
  --color-ring: oklch(72% 0.19 250 / 0.5);

  /* Radius — generous for glass surfaces */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;

  /* Glass-specific animations */
  --animate-glass-in: glass-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --animate-glow-pulse: glow-pulse 3s ease-in-out infinite;
  --animate-fade-up: fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --animate-scale-in: scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --animate-shimmer: shimmer 2.5s linear infinite;
  --animate-float: float 6s ease-in-out infinite;

  @keyframes glass-in {
    from { opacity: 0; backdrop-filter: blur(0px); transform: translateY(8px) scale(0.98); }
    to { opacity: 1; backdrop-filter: blur(16px); transform: translateY(0) scale(1); }
  }

  @keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 20px oklch(72% 0.19 250 / 0.15); }
    50% { box-shadow: 0 0 40px oklch(72% 0.19 250 / 0.3); }
  }

  @keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
  }
}

/* Base layer */
@layer base {
  * { @apply border-border; }
  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
}

/* Glass utility classes */
@utility glass {
  @apply bg-glass backdrop-blur-xl border border-glass-border;
}

@utility glass-hover {
  @apply hover:bg-glass-hover hover:border-glass-border-hover transition-all duration-200;
}

@utility glass-strong {
  @apply bg-glass backdrop-blur-2xl backdrop-saturate-150 border border-glass-border;
}

@utility glow {
  box-shadow: 0 0 20px oklch(72% 0.19 250 / 0.15),
              0 0 60px oklch(72% 0.19 250 / 0.05);
}

@utility glow-border {
  box-shadow: inset 0 0.5px 0 0 oklch(100% 0 0 / 0.15),
              0 0 20px oklch(72% 0.19 250 / 0.1);
}

@utility text-glow {
  text-shadow: 0 0 30px oklch(72% 0.19 250 / 0.5);
}

@utility noise {
  position: relative;
}
/* Apply noise::after with a tiny noise SVG for texture */

玻璃组件模式

玻璃卡片（主要表面）

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

export function GlassCard({
  children,
  className,
  glow = false,
  ...props
}: React.HTMLAttributes<HTMLDivElement> & { glow?: boolean }) {
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-2xl",
        "bg-white/[0.06] backdrop-blur-xl backdrop-saturate-150",
        "border border-white/[0.12]",
        "shadow-[0_8px_32px_rgba(0,0,0,0.4)]",
        glow && "shadow-[0_0_30px_oklch(72%_0.19_250/0.12)]",
        className
      )}
      {...props}
    >
      {/* Top highlight — simulates light hitting glass edge */}
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/25 to-transparent" />
      <div className="relative z-10">{children}</div>
    </div>
  );
}

玻璃按钮

import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const glassButtonVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-xl font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-40",
  {
    variants: {
      variant: {
        default:
          "bg-white/[0.08] backdrop-blur-lg border border-white/[0.12] text-foreground hover:bg-white/[0.14] hover:border-white/[0.2] active:bg-white/[0.18]",
        accent:
          "bg-accent text-accent-foreground hover:bg-accent-hover shadow-[0_0_20px_oklch(72%_0.19_250/0.25)] hover:shadow-[0_0_30px_oklch(72%_0.19_250/0.35)]",
        ghost:
          "text-foreground-muted hover:text-foreground hover:bg-white/[0.06]",
        outline:
          "border border-white/[0.15] text-foreground hover:bg-white/[0.06] hover:border-white/[0.25]",
      },
      size: {
        sm: "h-9 px-3.5 text-sm",
        default: "h-11 px-5 text-sm",
        lg: "h-12 px-8 text-base",
        icon: "size-10",
      },
    },
    defaultVariants: { variant: "default", size: "default" },
  }
);

export function GlassButton({
  className,
  variant,
  size,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement> &
  VariantProps<typeof glassButtonVariants>) {
  return (
    <button
      className={cn(glassButtonVariants({ variant, size, className }))}
      {...props}
    />
  );
}

玻璃输入框

export function GlassInput({
  className,
  ...props
}: React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <input
      className={cn(
        "flex h-11 w-full rounded-xl px-4 text-sm",
        "bg-white/[0.06] backdrop-blur-lg",
        "border border-white/[0.1]",
        "text-foreground placeholder:text-foreground-subtle",
        "focus:outline-none focus:border-white/[0.25] focus:bg-white/[0.1]",
        "focus:ring-2 focus:ring-accent/30",
        "transition-all duration-200",
        className
      )}
      {...props}
    />
  );
}

背景模式

每个玻璃拟态 UI 都需要丰富的背景。每个页面使用一种：

网格渐变背景

export function MeshBackground() {
  return (
    <div className="fixed inset-0 -z-10 bg-background">
      {/* Primary gradient orb */}
      <div className="absolute top-[-20%] left-[-10%] h-[600px] w-[600px] rounded-full bg-[oklch(45%_0.15_270)] opacity-30 blur-[120px]" />
      {/* Secondary orb */}
      <div className="absolute bottom-[-10%] right-[-5%] h-[500px] w-[500px] rounded-full bg-[oklch(50%_0.18_200)] opacity-20 blur-[100px]" />
      {/* Accent orb */}
      <div className="absolute top-[40%] right-[20%] h-[300px] w-[300px] rounded-full bg-[oklch(60%_0.2_320)] opacity-15 blur-[80px]" />
      {/* Subtle noise texture */}
      <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")" }} />
    </div>
  );
}

点阵背景

export function DotGridBackground() {
  return (
    <div className="fixed inset-0 -z-10 bg-background">
      <div
        className="absolute inset-0 opacity-[0.15]"
        style={{
          backgroundImage: "radial-gradient(oklch(100% 0 0 / 0.3) 1px, transparent 1px)",
          backgroundSize: "24px 24px",
        }}
      />
      {/* Radial fade so dots don't tile harshly */}
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,var(--color-background)_70%)]" />
    </div>
  );
}

动画模式

使用 Framer Motion 编排动画。简单的悬停和过渡效果则使用 CSS。

交错出现的玻璃卡片

import { motion } from "framer-motion";

const container = {
  hidden: {},
  show: { transition: { staggerChildren: 0.08 } },
};

const item = {
  hidden: { opacity: 0, y: 20, filter: "blur(4px)" },
  show: {
    opacity: 1, y: 0, filter: "blur(0px)",
    transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] },
  },
};

export function CardGrid({ cards }: { cards: CardData[] }) {
  return (
    <motion.div
      variants={container}
      initial="hidden"
      animate="show"
      className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
    >
      {cards.map((card) => (
        <motion.div key={card.id} variants={item}>
          <GlassCard className="p-6">
            {/* card content */}
          </GlassCard>
        </motion.div>
      ))}
    </motion.div>
  );
}

交互式玻璃悬停效果

<motion.div
  whileHover={{
    scale: 1.02,
    boxShadow: "0 0 30px oklch(72% 0.19 250 / 0.2)",
  }}
  whileTap={{ scale: 0.98 }}
  transition={{ type: "spring", stiffness: 400, damping: 25 }}
  className="glass rounded-2xl p-6 cursor-pointer"
>
  {children}
</motion.div>

动效规范

交互	时长	缓动
悬停状态	150ms	ease-out
按钮按下	100ms	ease-out
卡片进入	400-500ms	cubic-bezier(0.16, 1, 0.3, 1)
模态框打开	300ms	cubic-bezier(0.16, 1, 0.3, 1)
页面过渡	400ms	cubic-bezier(0.16, 1, 0.3, 1)
交错延迟	60-100ms	—
光晕脉冲	3s	ease-in-out（无限循环）
浮动	6s	ease-in-out（无限循环）

交互元素的弹簧配置： { stiffness: 400, damping: 25, mass: 0.8 }

性能规则：

• 仅为 transform、opacity、filter、box-shadow 添加动画（由 GPU 加速）
• 遵循 prefers-reduced-motion——禁用所有非必要动效
• 将 UI 交互时长控制在 500ms 以内

字体排版

选择有个性、能体现风格的字体。将展示字体与精致的正文字体搭配使用。

适合暗色玻璃美学的出色搭配：

• 太空时代：Orbitron（展示）+ DM Sans（正文）
• 编辑风光效：Playfair Display（展示）+ Outfit（正文）
• 新几何风格：Sora（展示）+ Plus Jakarta Sans（正文）
• 等宽黑客风格：JetBrains Mono（展示）+ Geist Sans（正文）
• 优雅精准风格：Cormorant Garamond（展示）+ Geist Sans（正文）

Next.js 字体加载：

import { Sora, Plus_Jakarta_Sans } from "next/font/google";

const display = Sora({ subsets: ["latin"], variable: "--font-display" });
const body = Plus_Jakarta_Sans({ subsets: ["latin"], variable: "--font-body" });

// In layout.tsx body:
<body className={`${display.variable} ${body.variable} font-body`}>

@theme inline {
  --font-display: var(--font-display), system-ui;
  --font-body: var(--font-body), system-ui;
}

字号比例（1.25）：

• text-xs：0.64rem — 说明文字、徽章
• text-sm：0.8rem — 标签、元数据
• text-base：1rem — 正文
• text-lg：1.25rem — 小标题
• text-xl：1.563rem — 分区标题
• text-2xl：1.953rem — 页面标题
• text-3xl：2.441rem — 主视觉标题（移动端）
• text-4xl：3.052rem — 主视觉标题（桌面端）
• text-5xl：3.815rem — 展示文字

标题：使用紧凑字间距（-0.02em 到 -0.04em）和粗体字重。 正文：使用默认字间距、常规字重和 leading-relaxed。

色彩策略

暗色玻璃拟态的关键在于深色背景与明亮点缀色之间的对比。

点缀色方案（在主题中替换 --color-accent）：

• 电光蓝：oklch(72% 0.19 250) — 科技感、现代、可信
• 紫色光晕：oklch(68% 0.2 290) — 创意、高端
• 霓虹青：oklch(80% 0.16 195) — 未来感、鲜明
• 祖母绿：oklch(72% 0.17 160) — 清新、自然
• 玫瑰金：oklch(72% 0.14 15) — 温暖、奢华
• 琥珀色：oklch(80% 0.15 75) — 温暖、活力

规则：

• 每个界面仅使用一种主导点缀色——次要点缀色应降低饱和度或不透明度
• 玻璃表面应从背景渐变光斑中吸收环境色
• 玻璃上的文本必须符合 WCAG AA 标准（4.5:1）——主要内容使用 text-foreground，而非 text-foreground-subtle
• 状态色（成功／警告／破坏性）应降低饱和度，避免与点缀色争抢视觉焦点

Next.js 特有说明

玻璃外壳布局

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="dark">
      <body className={`${display.variable} ${body.variable} font-body antialiased`}>
        <MeshBackground />
        <div className="relative z-10 min-h-screen">
          <GlassNavbar />
          <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
            {children}
          </main>
        </div>
      </body>
    </html>
  );
}

玻璃导航栏

export function GlassNavbar() {
  return (
    <nav className="sticky top-0 z-50 border-b border-white/[0.08] bg-background/60 backdrop-blur-xl backdrop-saturate-150">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
        {/* Logo + nav items */}
      </div>
    </nav>
  );
}

页面过渡

// components/page-transition.tsx
"use client";
import { motion, AnimatePresence } from "framer-motion";
import { usePathname } from "next/navigation";

export function PageTransition({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={pathname}
        initial={{ opacity: 0, y: 12, filter: "blur(4px)" }}
        animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
        exit={{ opacity: 0, y: -8, filter: "blur(4px)" }}
        transition={{ duration: 0.35, ease: [0.16, 1, 0.3, 1] }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

质量检查清单

玻璃效果与视觉设计

• 背景具有渐变光斑或网格效果，绝不使用纯色背景
• 玻璃表面具有 backdrop-blur-xl、边框和顶部高光
• 悬停或聚焦时，强调色具有明显的光晕效果
• 叠加低不透明度的噪点纹理，增强层次感
• 不使用纯白或纯黑表面，始终添加色调

动画

• 页面加载时使用错落的入场动画
• 交互元素具有悬停和激活状态，并采用弹簧物理效果
• 模态框和叠加层通过缩放与淡入动画显示
• 尊重 prefers-reduced-motion 设置

排版

• 展示字体具有鲜明特色（不使用 Inter/Roboto/Arial）
• 标题采用紧凑字距，正文采用宽松行距
• 通过 next/font 加载字体，并使用可变 CSS

无障碍性

• 玻璃表面上的文本对比度 >= 4.5:1（在背景效果下测试）
• 焦点环清晰可见（使用 ring-accent/50）
• 触控目标 >= 44px
• 所有交互元素均支持键盘导航
• 图片具有替代文本，图标按钮具有 aria-label

性能

• 动画仅使用 GPU 属性（transform、opacity、filter）
• 图片使用 next/image 并设置合适的尺寸
• 预加载字体，不产生布局偏移
• 仅在可见元素上使用 backdrop-blur（避免叠加使用）

参考资料

如需了解更多模式，请参阅：

• references/glass-patterns.md — 高级玻璃拟态组件配方
• references/animation-recipes.md — Framer Motion 编排模式