Glass card that refracts the page background at its bezel — canvas-based, works where backdrop-filter fails, reads the background automatically, zero dependencies.
"use client";
import * as React from "react";
import { GlassPanel, type Painter } from "@/components/ui/refractive-glass-panel";
/* Демо: живой полосатый фон и стеклянная карточка поверх. Полосы выбраны
не для красоты — на ровной заливке преломление не видно, а вертикальные
линии показывают его сразу: у кромки они сжимаются в узкую полосу. */
const BASE = 100; /* опорная ширина шейпа: её и масштабируем через scaleX */
/* тень под белым текстом: на горячем фоне без неё буквы разъедает светом */
const INK = "0 1px 3px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.4)";
const GLOW: Array<[number, string]> = [
[0, "#ff8f4e"],
[0.2, "#f4573c"],
[0.36, "#d13340"],
[0.52, "#8d1a25"],
[0.68, "#350810"],
[0.85, "#0d0305"],
[1, "#050305"],
];
/* Фон собран отдельными слоями, а не фоном контейнера, поэтому автоматика
его не увидит: растрировать чужую вёрстку она не умеет. Отдаём фон стеклу
сами — кладём в paintRef функцию, которая рисует ту же картину по той же
раскладке, и полосы под стеклом продолжают наружные кадр в кадр. */
function StripedBackdrop({
count = 34,
paintRef,
}: {
count?: number;
paintRef: React.MutableRefObject<Painter | null>;
}) {
const wrapRef = React.useRef<HTMLDivElement | null>(null);
const barsRef = React.useRef<Array<HTMLSpanElement | null>>([]);
React.useEffect(() => {
const wrap = wrapRef.current;
if (!wrap) return;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* сегменты чередуются: полоса — просвет — полоса — ... */
const seg = Array.from({ length: count * 2 }, () => ({
base: 0.6 + Math.random(),
amp: 0.25 + Math.random() * 0.45,
speed: (2 * Math.PI) / (16 + Math.random() * 18), // период 16–34 с
phase: Math.random() * Math.PI * 2,
}));
let width = wrap.clientWidth;
const ro = new ResizeObserver(() => {
width = wrap.clientWidth;
});
ro.observe(wrap);
/* пары «начало — конец» каждой полосы: по ним рисует и стекло */
const edges: number[] = [];
paintRef.current = (ctx, sw, sh) => {
ctx.save();
ctx.translate(sw * 0.5, sh * 0.1);
ctx.scale(1, (sh * 0.56) / (sw * 0.4));
const g = ctx.createRadialGradient(0, 0, 0, 0, 0, sw * 0.4);
GLOW.forEach(([at, color]) => g.addColorStop(at, color));
ctx.fillStyle = g;
ctx.fillRect(-sw, -sh * 2, sw * 2, sh * 4);
ctx.restore();
ctx.fillStyle = "rgba(0,0,0,.92)";
for (let n = 0; n < edges.length; n += 2) {
if (edges[n] === undefined) continue;
ctx.fillRect((edges[n] / width) * sw, 0, ((edges[n + 1] - edges[n]) / width) * sw, sh);
}
};
let raf = 0;
const frame = (now: number) => {
const t = now / 1000;
const w: number[] = [];
let total = 0;
for (const s of seg) {
const v = s.base * (1 + s.amp * Math.sin(t * s.speed + s.phase));
w.push(v);
total += v;
}
/* сумма сегментов каждый кадр нормируется в ширину контейнера:
соседи поджимаются ровно на столько, на сколько вырос сосед */
const k = width / total;
let x = 0;
w.forEach((v, n) => {
const px = v * k;
if ((n & 1) === 0) {
const bar = barsRef.current[n >> 1];
if (bar) bar.style.transform = `translateX(${x}px) scaleX(${px / BASE})`;
edges[n] = x;
edges[n + 1] = x + px;
}
x += px; /* нечётный сегмент — просвет, шейпа под ним нет */
});
if (!reduce) raf = requestAnimationFrame(frame);
};
raf = requestAnimationFrame(frame);
return () => {
cancelAnimationFrame(raf);
ro.disconnect();
paintRef.current = null;
};
}, [count, paintRef]);
return (
<>
<div
aria-hidden="true"
className="absolute inset-0"
style={{
background:
"radial-gradient(40% 56% at 50% 10%, #ff8f4e 0%, #f4573c 20%, #d13340 36%, #8d1a25 52%, #350810 68%, #0d0305 85%, #050305 100%)",
}}
/>
<div
ref={wrapRef}
aria-hidden="true"
className="absolute inset-0"
style={{ mixBlendMode: "multiply", opacity: 0.95, contain: "strict" }}
>
{Array.from({ length: count }, (_, i) => (
<span
key={i}
ref={(el) => {
barsRef.current[i] = el;
}}
className="absolute bottom-0 left-0 top-0"
style={{
width: BASE,
background: "rgba(0,0,0,.92)",
transformOrigin: "0 0",
transform: "translateX(-9999px)", // до первого кадра шейп за экраном
backfaceVisibility: "hidden",
}}
/>
))}
</div>
</>
);
}
export default function GlassPanelDemo() {
const paintRef = React.useRef<Painter | null>(null);
const sceneRef = React.useRef<HTMLDivElement | null>(null);
/* стабильная ссылка: иначе эффект стекла пересобирался бы каждый рендер */
const paint = React.useCallback<Painter>((ctx, w, h) => {
paintRef.current?.(ctx, w, h);
}, []);
return (
<div
ref={sceneRef}
className="relative flex min-h-[560px] w-full items-center justify-center overflow-hidden bg-[#050305] p-8"
>
<StripedBackdrop paintRef={paintRef} />
<GlassPanel
scene={sceneRef}
paint={paint}
/* фиксируем подсветку: автозамер целится в среднюю яркость, а здесь
под плашкой горячее пятно, и белый текст на нём разъедает светом */
brightness={1.25}
className="w-full max-w-[360px] rounded-[28px] p-[26px] text-center shadow-[0_24px_48px_rgba(0,0,0,.34)]"
style={{ borderRadius: 28 }}
>
<p className="mb-2.5 text-[11.5px] uppercase tracking-[0.2em] text-white" style={{ textShadow: INK }}>
Round-the-clock support
</p>
<p
className="mx-auto mb-4 max-w-[15.5rem] text-[13px] leading-relaxed text-white/90"
style={{ textShadow: INK }}
>
A dedicated manager and a night shift — the account never idles.
</p>
<ul
className="mb-5 flex flex-wrap items-center justify-center gap-x-3.5 gap-y-1 text-[11px] text-white/75"
style={{ textShadow: INK }}
>
<li>Production</li>
<li>Traffic</li>
<li>Sales</li>
</ul>
<div className="inline-flex items-center rounded-full bg-white/[.13] p-[5px] shadow-[inset_0_0_0_1px_rgba(255,255,255,.2)]">
<span className="px-3 text-[11px] text-white/90">no commission</span>
<button
type="button"
className="rounded-full bg-[#150c0f] px-[18px] py-2.5 text-[11px] uppercase tracking-[0.12em] text-white transition hover:bg-gradient-to-r hover:from-[#ea364a] hover:to-[#f2894f]"
>
Get started
</button>
</div>
</GlassPanel>
</div>
);
}