Glass Refraction Panel

Cards 39

$Glass Refraction Panel preview$ Preview

About

A physically-inspired glass panel: edge refraction, chromatic dispersion and a moving specular highlight that tracks the pointer.

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

Code

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

Usage.tsx

"use client";

import { GlassRefractionPanel } from "@/components/ui/glass-refraction-panel";

// Hoisted so the parallax layers keep a stable identity across renders.
const LAYERS = [
  {
    id: "uptime",
    depth: 26,
    position: { top: "16%", left: "8%" },
    node: (
      <div className="rounded-xl border border-[var(--motiq-border)] bg-[var(--motiq-surface)]/70 px-3 py-2 backdrop-blur">
        <p className="text-[10px] uppercase tracking-[0.16em] text-[var(--motiq-muted)]">Uptime</p>
        <p className="text-lg font-semibold text-[var(--motiq-fg)]">99.98%</p>
      </div>
    ),
  },
  {
    id: "latency",
    depth: 44,
    position: { bottom: "18%", right: "10%" },
    node: (
      <div className="rounded-xl border border-[var(--motiq-border)] bg-[var(--motiq-surface)]/70 px-3 py-2 backdrop-blur">
        <p className="text-[10px] uppercase tracking-[0.16em] text-[var(--motiq-muted)]">p95</p>
        <p className="text-lg font-semibold text-[var(--motiq-accent-text)]">128 ms</p>
      </div>
    ),
  },
];

export default function GlassRefractionPanelDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <GlassRefractionPanel
        className="w-full max-w-2xl"
        scene="orbs"
        blur={14}
        parallax={1}
        streakOnEnter
        minHeight={320}
        layers={LAYERS}
      >
        <div className="flex h-full flex-col items-center justify-center gap-2 px-8 text-center">
          <h3 className="text-3xl font-semibold tracking-tight text-[var(--motiq-fg)]">
            Glass Refraction
          </h3>
          <p className="max-w-sm text-sm text-[var(--motiq-fg-secondary)]">
            Edge refraction, chromatic dispersion and a specular highlight that
            follows the pointer.
          </p>
        </div>
      </GlassRefractionPanel>
    </div>
  );
}