61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T2497,import { useState } from "react"; import { motion, useReducedMotion } from "framer-motion"; // The photo behind the glass. Glass only reads as glass over something with colour and detail. const PHOTO = "https://images.pexels.com/photos/11143817/pexels-photo-11143817.jpeg?auto=compress&cs=tinysrgb&w=1600"; // Three strengths of frost. Each sets the blur, the tint and the edge through CSS variables. const FROSTS = { light: { label: "Light", blur: "10px", tint: "0.10", edge: "0.28" }, medium: { label: "Medium", blur: "18px", tint: "0.16", edge: "0.34" }, heavy: { label: "Heavy", blur: "30px", tint: "0.24", edge: "0.42" }, } as const; type Frost = keyof typeof FROSTS; const links = ["Trips", "Cabins", "Guides", "Journal"]; const stats = [ { label: "Water", value: "11°C" }, { label: "Wind", value: "6 km/h" }, { label: "Sunset", value: "21:48" }, ]; // The glass recipe. Copy this block into your own stylesheet. const CSS = ` .s2g-glass { background: rgba(255, 255, 255, var(--s2g-tint, 0.16)); -webkit-backdrop-filter: blur(var(--s2g-blur, 18px)) saturate(160%); backdrop-filter: blur(var(--s2g-blur, 18px)) saturate(160%); border: 1px solid rgba(255, 255, 255, var(--s2g-edge, 0.34)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 40px -12px rgba(15, 10, 5, 0.45); } .s2g-glass-dark { background: rgba(20, 16, 14, calc(var(--s2g-tint, 0.16) + 0.22)); -webkit-backdrop-filter: blur(var(--s2g-blur, 18px)) saturate(140%); backdrop-filter: blur(var(--s2g-blur, 18px)) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 40px -12px rgba(0, 0, 0, 0.5); } /* No backdrop-filter support (or the preview switch is on): solid panels that stay readable. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .s2g-glass { background: rgba(58, 44, 38, 0.92); } .s2g-glass-dark { background: rgba(24, 20, 18, 0.94); } } .s2g-nofilter .s2g-glass { background: rgba(58, 44, 38, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; } .s2g-nofilter .s2g-glass-dark { background: rgba(24, 20, 18, 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; } `; const ring = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-stone-900"; function GlassNavbar() { const [active, setActive] = useState("Trips"); return ( ); } function GlassCard() { return (

Frosted card

Lakeshore cabin, three nights

A timber cabin on the north shore with a wood stove, a rowing boat and the ridge line out of every window.

€420total

See dates

); } function GlassLogin() { return ( ); } function StatChips() { return (

{s.label} {s.value}

); } export default function GlassmorphismSet() { const reduce = useReducedMotion(); const [frost, setFrost] = useState("medium"); const [noFilter, setNoFilter] = useState(false); const f = FROSTS[frost]; const enter = (i: number) => ({ initial: reduce ? false : { opacity: 0, y: 14 }, animate: { opacity: 1, y: 0 }, transition: { type: "spring", stiffness: 260, damping: 28, delay: reduce ? 0 : 0.08 * i }, } as const); return (

Mountain lake at sunset with a dark rock in the still water

{(Object.keys(FROSTS) as Frost[]).map((k) => ( ))}

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/glassmorphism-card-css-with-frosted-navbar-login-panel-and-stat-chips-over-a-photo.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]

Lakeshore cabin, three nights

Sign in to your trips