Layers missplaced, Not working, like having a flex missplaced within the component.

thorzambo commented

2025-06-17 08:31:17 -04:00

(Migrated from github.com)

Browser: Arc, still the same over safari chrome or whatever
Tech Stack: NextJs .TS

Installation:

memyselfandi@memyselfandi-MacBook-Pro proj % npm install liquid-glass-react
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: proj@0.1.0
npm error Found: react@18.3.1
npm error node_modules/react
npm error   react@"^18.2.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@">=19" from liquid-glass-react@1.1.1
npm error node_modules/liquid-glass-react
npm error   liquid-glass-react@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/memyselfandi/.npm/_logs/2025-06-17T12_15_20_625Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/memyselfandi/.npm/_logs/2025-06-17T12_15_20_625Z-debug-0.log
memyselfandi@memyselfandi-MacBook-Pro proj %  npm install liquid-glass-react --legacy-peer-deps 

up to date, audited 501 packages in 707ms

143 packages are looking for funding
  run `npm fund` for details

1 low severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
memyselfandi@memyselfandi-MacBook-Pro proj %

Before Liquid Glass Component:

"use client";

import { Button } from "@/components/ui/button";
import { ArrowUpRight, Copy, Send } from "lucide-react";
import { BackgroundPattern } from "./background-pattern";

import { useState } from "react";
import { ContainerTextFlip } from "@/components/ui/container-text-flip";
import { motion, AnimatePresence } from "framer-motion";

const EMAIL = "emailblabla";

const Hero = () => {
  const [copied, setCopied] = useState(false);
  const [showContactCard, setShowContactCard] = useState(false);

  const copyEmail = () => {
    navigator.clipboard.writeText(EMAIL);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  const sendEmail = () => {
    window.location.href = `emailblabla`;
  };

  return (
    <div className="flex-1 flex items-center justify-center px-6">
      <BackgroundPattern />

      <div className="relative z-10 text-center max-w-3xl mx-auto text-white flex flex-col justify-center h-full">
        <div className="font-mono text-lg text-white/90 px-6 py-3 rounded-xl flex items-center gap-2 mx-auto w-fit">
          <span>$ Site under construction</span>

          <span
            className="font-bold text-white animate-blink text-xl ml-1"
            style={{ animation: "blink 0.8s steps(1) infinite" }}
          >
            _
          </span>
        </div>
        <style>
          {`
            @keyframes blink {
              0%, 49% { opacity: 1; }
              50%, 100% { opacity: 0; }
            }
          `}
        </style>
        <div className="h-10"></div>

        <h1 className="mt-6 text-4xl md:text-9xl font-bold leading-tight tracking-tight max-w-screen">
          <ContainerTextFlip
            words={[
              "il calzolaio ha le scarpe rotte",
              "The shoemaker’s children go barefoot",
            ]}
          />
        </h1>

        <div className="mt-12 flex items-center justify-center gap-4">
          <Button
            size="lg"
            className="rounded-full text-base bg-gradient-to-r from-white/20 to-white/5 text-white border border-white/20 shadow-lg backdrop-blur hover:bg-white/20 transition-all duration-200 flex items-center gap-2 px-8 py-4"
            onClick={() => setShowContactCard(true)}
          >
            <span
              className="font-normal tracking-wide"
              style={{ letterSpacing: "0.1rem" }}
            >
              CONTACT US
            </span>
            <ArrowUpRight className="h-5 w-5" />
          </Button>
        </div>

        <AnimatePresence>
          {showContactCard && (
            <motion.div
              className="fixed inset-0 z-50 flex items-center justify-center"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            >
              <div className="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
              <motion.div
                className="relative bg-gradient-to-br from-white/10 to-white/5 border border-white/20 rounded-2xl shadow-2xl p-8 min-w-[320px] max-w-full text-white"
                initial={{ scale: 0.95, opacity: 0, y: 40 }}
                animate={{ scale: 1, opacity: 1, y: 0 }}
                exit={{ scale: 0.95, opacity: 0, y: 40 }}
                transition={{ type: "spring", stiffness: 300, damping: 30 }}
              >
                <button
                  className="absolute top-3 right-3 text-white/60 hover:text-white transition"
                  onClick={() => setShowContactCard(false)}
                  aria-label="Close"
                >
                  <svg
                    width="20"
                    height="20"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    viewBox="0 0 24 24"
                  >
                    <line x1="18" y1="6" x2="6" y2="18" />
                    <line x1="6" y1="6" x2="18" y2="18" />
                  </svg>
                </button>
                <div className="flex flex-col items-center gap-4">
                  <div className="font-mono text-lg text-white/90 mb-2">
                    Get in touch
                  </div>
                  <div className="flex gap-4">
                    <Button
                      size="lg"
                      className="rounded-full bg-gradient-to-r from-white/20 to-white/10 text-white border border-white/20 shadow backdrop-blur hover:bg-white/20 transition-all duration-200 flex items-center gap-2 px-6 py-3"
                      onClick={copyEmail}
                    >
                      <Copy className="h-5 w-5" />
                      <span style={{ letterSpacing: "0.05rem" }}>
                        {copied ? "EMAIL COPIED!" : "COPY EMAIL"}
                      </span>
                    </Button>
                    <Button
                      size="lg"
                      className="rounded-full bg-gradient-to-r from-white/20 to-white/10 text-white border border-white/20 shadow backdrop-blur hover:bg-white/20 transition-all duration-200 flex items-center gap-2 px-6 py-3"
                      onClick={sendEmail}
                    >
                      <Send className="h-5 w-5" />
                      <span style={{ letterSpacing: "0.05rem" }}>
                        SEND EMAIL
                      </span>
                    </Button>
                  </div>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};

export default Hero;

https://github.com/user-attachments/assets/16dab094-9705-41b6-818d-885036c7a963

After Liquid Glass component:

"use client";

import { ArrowUpRight, Copy, Send } from "lucide-react";
import { BackgroundPattern } from "./background-pattern";
import LiquidGlass from "liquid-glass-react";

import { useState } from "react";
import { ContainerTextFlip } from "@/components/ui/container-text-flip";
import { motion, AnimatePresence } from "framer-motion";

const EMAIL = "emailblabla";

const Hero = () => {
  const [copied, setCopied] = useState(false);
  const [showContactCard, setShowContactCard] = useState(false);

  const copyEmail = () => {
    navigator.clipboard.writeText(EMAIL);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  const sendEmail = () => {
    window.location.href = `emailblabla`;
  };

  return (
    <div className="flex-1 flex items-center justify-center px-6">
      <BackgroundPattern />

      <div className="relative z-10 text-center max-w-3xl mx-auto text-white flex flex-col justify-center h-full">
        <div className="font-mono text-lg text-white/90 px-6 py-3 rounded-xl flex items-center gap-2 mx-auto w-fit">
          <span>$ Site under construction</span>

          <span
            className="font-bold text-white animate-blink text-xl ml-1"
            style={{ animation: "blink 0.8s steps(1) infinite" }}
          >
            _
          </span>
        </div>
        <style>
          {`
            @keyframes blink {
              0%, 49% { opacity: 1; }
              50%, 100% { opacity: 0; }
            }
          `}
        </style>
        <div className="h-10"></div>

        <h1 className="mt-6 text-4xl md:text-9xl font-bold leading-tight tracking-tight max-w-screen">
          <ContainerTextFlip
            words={[
              "il calzolaio ha le scarpe rotte",
              "The shoemaker’s children go barefoot",
            ]}
          />
        </h1>

        <div className="mt-12 flex items-center justify-center gap-4">
          <LiquidGlass
            displacementScale={64}
            blurAmount={0.1}
            saturation={130}
            aberrationIntensity={2}
            elasticity={0.35}
            cornerRadius={100}
            padding="12px 32px"
            onClick={() => setShowContactCard(true)}
            className="cursor-pointer"
          >
            <div className="flex items-center gap-2 text-white">
              <span
                className="font-medium tracking-wide instrument-serif-regular text-base"
                style={{ letterSpacing: "0.1rem" }}
              >
                CONTACT US
              </span>
              <ArrowUpRight className="h-5 w-5" />
            </div>
          </LiquidGlass>
        </div>

        <AnimatePresence>
          {showContactCard && (
            <motion.div
              className="fixed inset-0 z-50 flex items-center justify-center"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            >
              <div className="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
              <motion.div
                className="relative min-w-[320px] max-w-full"
                initial={{ scale: 0.95, opacity: 0, y: 40 }}
                animate={{ scale: 1, opacity: 1, y: 0 }}
                exit={{ scale: 0.95, opacity: 0, y: 40 }}
                transition={{ type: "spring", stiffness: 300, damping: 30 }}
              >
                <LiquidGlass
                  displacementScale={70}
                  blurAmount={0.0625}
                  saturation={140}
                  aberrationIntensity={2}
                  elasticity={0.15}
                  cornerRadius={32}
                  padding="32px"
                  className="shadow-2xl"
                >
                  <div className="text-white">
                    <button
                      className="absolute top-3 right-3 text-white/60 hover:text-white transition z-10"
                      onClick={() => setShowContactCard(false)}
                      aria-label="Close"
                    >
                      <svg
                        width="20"
                        height="20"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        viewBox="0 0 24 24"
                      >
                        <line x1="18" y1="6" x2="6" y2="18" />
                        <line x1="6" y1="6" x2="18" y2="18" />
                      </svg>
                    </button>
                    <div className="flex flex-col items-center gap-4">
                      <div className="font-mono text-lg text-white/90 mb-2">
                        Get in touch
                      </div>
                      <div className="flex gap-4">
                        <LiquidGlass
                          displacementScale={64}
                          blurAmount={0.1}
                          saturation={130}
                          aberrationIntensity={2}
                          elasticity={0.35}
                          cornerRadius={100}
                          padding="12px 24px"
                          onClick={copyEmail}
                          className="cursor-pointer"
                        >
                          <div className="flex items-center gap-2 text-white">
                            <Copy className="h-5 w-5" />
                            <span className="instrument-serif-regular" style={{ letterSpacing: "0.05rem" }}>
                              {copied ? "EMAIL COPIED!" : "COPY EMAIL"}
                            </span>
                          </div>
                        </LiquidGlass>
                        <LiquidGlass
                          displacementScale={64}
                          blurAmount={0.1}
                          saturation={130}
                          aberrationIntensity={2}
                          elasticity={0.35}
                          cornerRadius={100}
                          padding="12px 24px"
                          onClick={sendEmail}
                          className="cursor-pointer"
                        >
                          <div className="flex items-center gap-2 text-white">
                            <Send className="h-5 w-5" />
                            <span className="instrument-serif-regular" style={{ letterSpacing: "0.05rem" }}>
                              SEND EMAIL
                            </span>
                          </div>
                        </LiquidGlass>
                      </div>
                    </div>
                  </div>
                </LiquidGlass>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};

export default Hero;

https://github.com/user-attachments/assets/c53d809c-b921-4e83-a0a1-daf08c8e2962

ps for reference

// page.tsx
import Hero from "@/components/hero/hero";
import Footer from "@/components/Footer";
import Logo from "@/components/Logo";

export default function Home() {
  return (
    <div className="h-screen overflow-hidden relative flex flex-col">
      <Logo />
      <Hero />
      <Footer />
    </div>
  );
}

// layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "blabla",
  description:
    "blabla",
};

export const viewport = {
  width: "device-width",
  initialScale: 1.0,
  maximumScale: 1.0,
  userScalable: false,
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-black`}
      >
        {children}
      </body>
    </html>
  );
}

lmk if you need anything else :)

*Browser: Arc, still the same over safari chrome or whatever Tech Stack: NextJs .TS* Installation: ```bash memyselfandi@memyselfandi-MacBook-Pro proj % npm install liquid-glass-react npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: proj@0.1.0 npm error Found: react@18.3.1 npm error node_modules/react npm error react@"^18.2.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@">=19" from liquid-glass-react@1.1.1 npm error node_modules/liquid-glass-react npm error liquid-glass-react@"*" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /Users/memyselfandi/.npm/_logs/2025-06-17T12_15_20_625Z-eresolve-report.txt npm error A complete log of this run can be found in: /Users/memyselfandi/.npm/_logs/2025-06-17T12_15_20_625Z-debug-0.log memyselfandi@memyselfandi-MacBook-Pro proj % npm install liquid-glass-react --legacy-peer-deps up to date, audited 501 packages in 707ms 143 packages are looking for funding run `npm fund` for details 1 low severity vulnerability To address all issues, run: npm audit fix Run `npm audit` for details. memyselfandi@memyselfandi-MacBook-Pro proj % ``` ### Before Liquid Glass Component: ```typescript "use client"; import { Button } from "@/components/ui/button"; import { ArrowUpRight, Copy, Send } from "lucide-react"; import { BackgroundPattern } from "./background-pattern"; import { useState } from "react"; import { ContainerTextFlip } from "@/components/ui/container-text-flip"; import { motion, AnimatePresence } from "framer-motion"; const EMAIL = "emailblabla"; const Hero = () => { const [copied, setCopied] = useState(false); const [showContactCard, setShowContactCard] = useState(false); const copyEmail = () => { navigator.clipboard.writeText(EMAIL); setCopied(true); setTimeout(() => setCopied(false), 1500); }; const sendEmail = () => { window.location.href = `emailblabla`; }; return ( <div className="flex-1 flex items-center justify-center px-6"> <BackgroundPattern /> <div className="relative z-10 text-center max-w-3xl mx-auto text-white flex flex-col justify-center h-full"> <div className="font-mono text-lg text-white/90 px-6 py-3 rounded-xl flex items-center gap-2 mx-auto w-fit"> <span>$ Site under construction</span> <span className="font-bold text-white animate-blink text-xl ml-1" style={{ animation: "blink 0.8s steps(1) infinite" }} > _ </span> </div> <style> {` @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } `} </style> <div className="h-10"></div> <h1 className="mt-6 text-4xl md:text-9xl font-bold leading-tight tracking-tight max-w-screen"> <ContainerTextFlip words={[ "il calzolaio ha le scarpe rotte", "The shoemaker’s children go barefoot", ]} /> </h1> <div className="mt-12 flex items-center justify-center gap-4"> <Button size="lg" className="rounded-full text-base bg-gradient-to-r from-white/20 to-white/5 text-white border border-white/20 shadow-lg backdrop-blur hover:bg-white/20 transition-all duration-200 flex items-center gap-2 px-8 py-4" onClick={() => setShowContactCard(true)} > <span className="font-normal tracking-wide" style={{ letterSpacing: "0.1rem" }} > CONTACT US </span> <ArrowUpRight className="h-5 w-5" /> </Button> </div> <AnimatePresence> {showContactCard && ( <motion.div className="fixed inset-0 z-50 flex items-center justify-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} > <div className="absolute inset-0 bg-black/60 backdrop-blur-sm"></div> <motion.div className="relative bg-gradient-to-br from-white/10 to-white/5 border border-white/20 rounded-2xl shadow-2xl p-8 min-w-[320px] max-w-full text-white" initial={{ scale: 0.95, opacity: 0, y: 40 }} animate={{ scale: 1, opacity: 1, y: 0 }} exit={{ scale: 0.95, opacity: 0, y: 40 }} transition={{ type: "spring", stiffness: 300, damping: 30 }} > <button className="absolute top-3 right-3 text-white/60 hover:text-white transition" onClick={() => setShowContactCard(false)} aria-label="Close" > <svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24" > <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg> </button> <div className="flex flex-col items-center gap-4"> <div className="font-mono text-lg text-white/90 mb-2"> Get in touch </div> <div className="flex gap-4"> <Button size="lg" className="rounded-full bg-gradient-to-r from-white/20 to-white/10 text-white border border-white/20 shadow backdrop-blur hover:bg-white/20 transition-all duration-200 flex items-center gap-2 px-6 py-3" onClick={copyEmail} > <Copy className="h-5 w-5" /> <span style={{ letterSpacing: "0.05rem" }}> {copied ? "EMAIL COPIED!" : "COPY EMAIL"} </span> </Button> <Button size="lg" className="rounded-full bg-gradient-to-r from-white/20 to-white/10 text-white border border-white/20 shadow backdrop-blur hover:bg-white/20 transition-all duration-200 flex items-center gap-2 px-6 py-3" onClick={sendEmail} > <Send className="h-5 w-5" /> <span style={{ letterSpacing: "0.05rem" }}> SEND EMAIL </span> </Button> </div> </div> </motion.div> </motion.div> )} </AnimatePresence> </div> </div> ); }; export default Hero; ``` https://github.com/user-attachments/assets/16dab094-9705-41b6-818d-885036c7a963 ### After Liquid Glass component: ```typescript "use client"; import { ArrowUpRight, Copy, Send } from "lucide-react"; import { BackgroundPattern } from "./background-pattern"; import LiquidGlass from "liquid-glass-react"; import { useState } from "react"; import { ContainerTextFlip } from "@/components/ui/container-text-flip"; import { motion, AnimatePresence } from "framer-motion"; const EMAIL = "emailblabla"; const Hero = () => { const [copied, setCopied] = useState(false); const [showContactCard, setShowContactCard] = useState(false); const copyEmail = () => { navigator.clipboard.writeText(EMAIL); setCopied(true); setTimeout(() => setCopied(false), 1500); }; const sendEmail = () => { window.location.href = `emailblabla`; }; return ( <div className="flex-1 flex items-center justify-center px-6"> <BackgroundPattern /> <div className="relative z-10 text-center max-w-3xl mx-auto text-white flex flex-col justify-center h-full"> <div className="font-mono text-lg text-white/90 px-6 py-3 rounded-xl flex items-center gap-2 mx-auto w-fit"> <span>$ Site under construction</span> <span className="font-bold text-white animate-blink text-xl ml-1" style={{ animation: "blink 0.8s steps(1) infinite" }} > _ </span> </div> <style> {` @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } `} </style> <div className="h-10"></div> <h1 className="mt-6 text-4xl md:text-9xl font-bold leading-tight tracking-tight max-w-screen"> <ContainerTextFlip words={[ "il calzolaio ha le scarpe rotte", "The shoemaker’s children go barefoot", ]} /> </h1> <div className="mt-12 flex items-center justify-center gap-4"> <LiquidGlass displacementScale={64} blurAmount={0.1} saturation={130} aberrationIntensity={2} elasticity={0.35} cornerRadius={100} padding="12px 32px" onClick={() => setShowContactCard(true)} className="cursor-pointer" > <div className="flex items-center gap-2 text-white"> <span className="font-medium tracking-wide instrument-serif-regular text-base" style={{ letterSpacing: "0.1rem" }} > CONTACT US </span> <ArrowUpRight className="h-5 w-5" /> </div> </LiquidGlass> </div> <AnimatePresence> {showContactCard && ( <motion.div className="fixed inset-0 z-50 flex items-center justify-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} > <div className="absolute inset-0 bg-black/60 backdrop-blur-sm"></div> <motion.div className="relative min-w-[320px] max-w-full" initial={{ scale: 0.95, opacity: 0, y: 40 }} animate={{ scale: 1, opacity: 1, y: 0 }} exit={{ scale: 0.95, opacity: 0, y: 40 }} transition={{ type: "spring", stiffness: 300, damping: 30 }} > <LiquidGlass displacementScale={70} blurAmount={0.0625} saturation={140} aberrationIntensity={2} elasticity={0.15} cornerRadius={32} padding="32px" className="shadow-2xl" > <div className="text-white"> <button className="absolute top-3 right-3 text-white/60 hover:text-white transition z-10" onClick={() => setShowContactCard(false)} aria-label="Close" > <svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24" > <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg> </button> <div className="flex flex-col items-center gap-4"> <div className="font-mono text-lg text-white/90 mb-2"> Get in touch </div> <div className="flex gap-4"> <LiquidGlass displacementScale={64} blurAmount={0.1} saturation={130} aberrationIntensity={2} elasticity={0.35} cornerRadius={100} padding="12px 24px" onClick={copyEmail} className="cursor-pointer" > <div className="flex items-center gap-2 text-white"> <Copy className="h-5 w-5" /> <span className="instrument-serif-regular" style={{ letterSpacing: "0.05rem" }}> {copied ? "EMAIL COPIED!" : "COPY EMAIL"} </span> </div> </LiquidGlass> <LiquidGlass displacementScale={64} blurAmount={0.1} saturation={130} aberrationIntensity={2} elasticity={0.35} cornerRadius={100} padding="12px 24px" onClick={sendEmail} className="cursor-pointer" > <div className="flex items-center gap-2 text-white"> <Send className="h-5 w-5" /> <span className="instrument-serif-regular" style={{ letterSpacing: "0.05rem" }}> SEND EMAIL </span> </div> </LiquidGlass> </div> </div> </div> </LiquidGlass> </motion.div> </motion.div> )} </AnimatePresence> </div> </div> ); }; export default Hero; ``` https://github.com/user-attachments/assets/c53d809c-b921-4e83-a0a1-daf08c8e2962 *ps for reference* ```typescript // page.tsx import Hero from "@/components/hero/hero"; import Footer from "@/components/Footer"; import Logo from "@/components/Logo"; export default function Home() { return ( <div className="h-screen overflow-hidden relative flex flex-col"> <Logo /> <Hero /> <Footer /> </div> ); } ``` --- ```typescript // layout.tsx import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "blabla", description: "blabla", }; export const viewport = { width: "device-width", initialScale: 1.0, maximumScale: 1.0, userScalable: false, }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={`${geistSans.variable} ${geistMono.variable} antialiased bg-black`} > {children} </body> </html> ); } ``` lmk if you need anything else :)

👍 6 👀 1

kongweiying2 commented

2025-06-17 20:50:35 -04:00

(Migrated from github.com)

I have this problem too

👍 20

FinnFunk commented

2025-06-21 03:48:48 -04:00

(Migrated from github.com)

this is my solution with which i simultaneously remove the navigatior is undefined error that can occur:

💡 don't be surprised about my imports. i just split the code into single components and exported it as well as the interface to use it as props

"use client";

import { LiquidGlassProps } from "@/interfaces/LiquidGlass.interface";
import LiquidGlass from "@/liquid-glass/LiquidGlass";
import React, { useEffect, useState } from "react";

const LiquidBase = (props: LiquidGlassProps) => {
  const [mounted, setMounted] = useState<boolean>(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <div className="relative w-auto h-auto">
      <LiquidGlass
        {...props}
        style={{
          position: "absolute",
          top: "0%",
          left: "0%",
        }}
      >
        {props.children}
      </LiquidGlass>
    </div>
  );
};

export default LiquidBase;

and then I use it as follows

"use client";

import React from "react";
import LiquidBase from "./LiquidBase.components";
import { LiquidGlassProps } from "@/interfaces/LiquidGlass.interface";

type Props = {
  liquidProps?: LiquidGlassProps;
};

const Button = ({ liquidProps }: Props) => {
  return (
    <LiquidBase {...liquidProps}>
      <span>Hallo</span>
    </LiquidBase>
  );
};

export default Button;

💡 if you want the Liquid Glass to really use height and width in your layout, the following may be of interest to you

this is the extended version of my base component:

"use client";

import { LiquidGlassProps } from "@/interfaces/LiquidGlass.interface";
import LiquidGlass from "@/liquid-glass/LiquidGlass";
import React, { useEffect, useRef, useState } from "react";

const LiquidBase = (props: LiquidGlassProps) => {
  const [mounted, setMounted] = useState<boolean>(false);
  const glassRef = useRef<HTMLDivElement>(null);
  const [size, setSize] = useState<{ width: number; height: number }>({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!mounted || !glassRef.current) return;

    const observer = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const { width, height } = entry.contentRect;
        setSize({
          width: width || 0,
          height: height || 0,
        });
      }
    });

    observer.observe(glassRef.current);

    return () => {
      observer.disconnect();
    };
  }, [mounted]);

  if (!mounted) return null;

  return (
    <div
      className="relative"
      style={{
        width: size.width,
        height: size.height,
      }}
    >
      <LiquidGlass
        {...props}
        ref={glassRef}
        style={{
          position: "absolute",
          top: "0%",
          left: "0%",
        }}
      >
        {props.children}
      </LiquidGlass>
    </div>
  );
};

export default LiquidBase;

and this is the change i made for the ref. first i added the following to the interface “LiquidGlassProps”:

ref?: React.Ref<HTMLDivElement>;

then I have components from this one in "LiquidGlass":

const glassRef = useRef<HTMLDivElement>(null);

made the following:

const localRef = useRef<HTMLDivElement>(null);
const glassRef = (ref as React.RefObject<HTMLDivElement>) || localRef;

and so as not to forget, I have of course also included the ref from the props here:

export default function LiquidGlass({
  children,
  displacementScale = 70,
  blurAmount = 0.0625,
  saturation = 140,
  aberrationIntensity = 2,
  elasticity = 0.15,
  cornerRadius = 999,
  globalMousePos: externalGlobalMousePos,
  mouseOffset: externalMouseOffset,
  mouseContainer = null,
  className = "",
  padding = "24px 32px",
  overLight = false,
  style = {},
  mode = "standard",
  onClick,
  ref,
}: LiquidGlassProps) {

I hope this helps some of you

💡 for those who are wondering what i mean by the real height and width here is the visualization for it

This is my code example to show the button with a background.:

import Button from "@/components/Liquid/Button.components";

export default function Home() {
  return (
    <div className="flex flex-col justify-start items-start">
      <div className="min-h-3xl w-full flex flex-col justify-start items-start bg-gradient-to-br from-teal-400 to-yellow-300">
        <Button />
      </div>
    </div>
  );
}

this is what it would look like if i didn't take the real height and width:

and this is what it looks like with the real height and width:

this is my solution with which i simultaneously remove the navigatior is undefined error that can occur: >💡 don't be surprised about my imports. i just split the code into single components and exported it as well as the interface to use it as props ```tsx "use client"; import { LiquidGlassProps } from "@/interfaces/LiquidGlass.interface"; import LiquidGlass from "@/liquid-glass/LiquidGlass"; import React, { useEffect, useState } from "react"; const LiquidBase = (props: LiquidGlassProps) => { const [mounted, setMounted] = useState<boolean>(false); useEffect(() => { setMounted(true); }, []); if (!mounted) return null; return ( <div className="relative w-auto h-auto"> <LiquidGlass {...props} style={{ position: "absolute", top: "0%", left: "0%", }} > {props.children} </LiquidGlass> </div> ); }; export default LiquidBase; ``` and then I use it as follows ```tsx "use client"; import React from "react"; import LiquidBase from "./LiquidBase.components"; import { LiquidGlassProps } from "@/interfaces/LiquidGlass.interface"; type Props = { liquidProps?: LiquidGlassProps; }; const Button = ({ liquidProps }: Props) => { return ( <LiquidBase {...liquidProps}> <span>Hallo</span> </LiquidBase> ); }; export default Button; ``` >💡 if you want the Liquid Glass to really use height and width in your layout, the following may be of interest to you this is the extended version of my base component: ```tsx "use client"; import { LiquidGlassProps } from "@/interfaces/LiquidGlass.interface"; import LiquidGlass from "@/liquid-glass/LiquidGlass"; import React, { useEffect, useRef, useState } from "react"; const LiquidBase = (props: LiquidGlassProps) => { const [mounted, setMounted] = useState<boolean>(false); const glassRef = useRef<HTMLDivElement>(null); const [size, setSize] = useState<{ width: number; height: number }>({ width: 0, height: 0, }); useEffect(() => { setMounted(true); }, []); useEffect(() => { if (!mounted || !glassRef.current) return; const observer = new ResizeObserver((entries) => { for (const entry of entries) { const { width, height } = entry.contentRect; setSize({ width: width || 0, height: height || 0, }); } }); observer.observe(glassRef.current); return () => { observer.disconnect(); }; }, [mounted]); if (!mounted) return null; return ( <div className="relative" style={{ width: size.width, height: size.height, }} > <LiquidGlass {...props} ref={glassRef} style={{ position: "absolute", top: "0%", left: "0%", }} > {props.children} </LiquidGlass> </div> ); }; export default LiquidBase; ``` and this is the change i made for the ref. first i added the following to the interface “LiquidGlassProps”: ```ts ref?: React.Ref<HTMLDivElement>; ``` then I have components from this one in "LiquidGlass": ```tsx const glassRef = useRef<HTMLDivElement>(null); ``` made the following: ```tsx const localRef = useRef<HTMLDivElement>(null); const glassRef = (ref as React.RefObject<HTMLDivElement>) || localRef; ``` and so as not to forget, I have of course also included the ref from the props here: ```tsx export default function LiquidGlass({ children, displacementScale = 70, blurAmount = 0.0625, saturation = 140, aberrationIntensity = 2, elasticity = 0.15, cornerRadius = 999, globalMousePos: externalGlobalMousePos, mouseOffset: externalMouseOffset, mouseContainer = null, className = "", padding = "24px 32px", overLight = false, style = {}, mode = "standard", onClick, ref, }: LiquidGlassProps) { ``` I hope this helps some of you > 💡 for those who are wondering what i mean by the real height and width here is the visualization for it This is my code example to show the button with a background.: ```tsx import Button from "@/components/Liquid/Button.components"; export default function Home() { return ( <div className="flex flex-col justify-start items-start"> <div className="min-h-3xl w-full flex flex-col justify-start items-start bg-gradient-to-br from-teal-400 to-yellow-300"> <Button /> </div> </div> ); } ``` this is what it would look like if i didn't take the real height and width: <img width="1160" alt="Image" src="https://github.com/user-attachments/assets/ed00cef8-1166-4bec-b3a9-1bcfd68511d3" /> and this is what it looks like with the real height and width: <img width="998" alt="Image" src="https://github.com/user-attachments/assets/756a44ea-88a6-48f4-bbca-6fd02886f9e2" />

👍 2

cpojer commented

2025-06-25 11:18:01 -04:00

(Migrated from github.com)

This library kind of only works by using position: 'fixed' or 'sticky'. I spent half a day fixing it up and making it work well with position: 'absolute' and 'relative'. Try out @nkzw/liquid-glass if you like and see if that fixes your styling issues.

This library kind of only works by using `position: 'fixed'` or `'sticky'`. I spent half a day fixing it up and making it work well with `position: 'absolute'` and `'relative'`. Try out [`@nkzw/liquid-glass`](https://github.com/nkzw-tech/liquid-glass) if you like and see if that fixes your styling issues.

👍 1

Azione-Universitaria-Padova commented

2025-06-29 06:31:25 -04:00

(Migrated from github.com)

I'm having the same problem:

From the devtools it seems like the layers are mismatched.
Here's the code:

import { useEffect, useState } from "react";
import Jumbotron from "./Jumbotron";
import Features from "./Features";
import Pricing from "./Pricing";
import LiquidGlass from "liquid-glass-react";

function Body() {
  // Function to set the padding for the body dynamically (the header hides it normally)
  const [paddingTop, setPaddingTop] = useState(0);

  useEffect(() => {
    const header = document.querySelector(".navbar") as HTMLElement; // Cast to HTMLElement
    if (header) {
      setPaddingTop(header.offsetHeight);
    }
  }, []);
  // End function padding

  return (
    <div
      className="container-fluid"
      style={{ paddingTop: paddingTop }}
      data-bs-theme="dark"
    >
      <Jumbotron />
      <Features />
      <Pricing />
      <LiquidGlass
        displacementScale={64}
        blurAmount={0.1}
        saturation={130}
        aberrationIntensity={2}
        elasticity={0.35}
        cornerRadius={100}
        padding="8px 16px"
        onClick={() => console.log("Button clicked!")}
      >
        <span className="text-white font-medium">Click Me</span>
      </LiquidGlass>
    </div>
  );
}

export default Body;

I'm having the same problem: ![Image](https://github.com/user-attachments/assets/c58a4ea0-3e1f-4e53-a203-4d41dda8bd86) From the devtools it seems like the layers are mismatched. Here's the code: ``` import { useEffect, useState } from "react"; import Jumbotron from "./Jumbotron"; import Features from "./Features"; import Pricing from "./Pricing"; import LiquidGlass from "liquid-glass-react"; function Body() { // Function to set the padding for the body dynamically (the header hides it normally) const [paddingTop, setPaddingTop] = useState(0); useEffect(() => { const header = document.querySelector(".navbar") as HTMLElement; // Cast to HTMLElement if (header) { setPaddingTop(header.offsetHeight); } }, []); // End function padding return ( <div className="container-fluid" style={{ paddingTop: paddingTop }} data-bs-theme="dark" > <Jumbotron /> <Features /> <Pricing /> <LiquidGlass displacementScale={64} blurAmount={0.1} saturation={130} aberrationIntensity={2} elasticity={0.35} cornerRadius={100} padding="8px 16px" onClick={() => console.log("Button clicked!")} > <span className="text-white font-medium">Click Me</span> </LiquidGlass> </div> ); } export default Body; ```

Niclassslua commented

2025-07-29 16:28:57 -04:00

(Migrated from github.com)

This library kind of only works by using position: 'fixed' or 'sticky'. I spent half a day fixing it up and making it work well with position: 'absolute' and 'relative'. Try out @nkzw/liquid-glass if you like and see if that fixes your styling issues.

This really fixed my positioning issues. Great job!!

> This library kind of only works by using `position: 'fixed'` or `'sticky'`. I spent half a day fixing it up and making it work well with `position: 'absolute'` and `'relative'`. Try out [`@nkzw/liquid-glass`](https://github.com/nkzw-tech/liquid-glass) if you like and see if that fixes your styling issues. This really fixed my positioning issues. Great job!!

LKTeloeken commented

2025-09-03 14:46:30 -04:00

(Migrated from github.com)

This library kind of only works by using position: 'fixed' or 'sticky'. I spent half a day fixing it up and making it work well with position: 'absolute' and 'relative'. Try out @nkzw/liquid-glass if you like and see if that fixes your styling issues.

This literally solved the problem I’d been trying to fix for over 2–3 hours. You’re the man!

> This library kind of only works by using `position: 'fixed'` or `'sticky'`. I spent half a day fixing it up and making it work well with `position: 'absolute'` and `'relative'`. Try out [`@nkzw/liquid-glass`](https://github.com/nkzw-tech/liquid-glass) if you like and see if that fixes your styling issues. This literally solved the problem I’d been trying to fix for over 2–3 hours. You’re the man!

StoyanGoranov commented

2025-12-11 11:46:08 -05:00

(Migrated from github.com)

This library kind of only works by using position: 'fixed' or 'sticky'. I spent half a day fixing it up and making it work well with position: 'absolute' and 'relative'. Try out @nkzw/liquid-glass if you like and see if that fixes your styling issues.

The @nkzw/liquid-glass really solves the layers placement. However issues remain.

z-index still breaks the visual;

Most importantly using transform on the LiquidGlass interferes with the refraction visuals and removes them. This is important as it renders the LiquidGlass completely unusable in moving elements like carousels, nav bars, etc. Also tried different workarounds like clip-path and transition. Although, their animation feel is quite poor, it would have been acceptable but they still didn't work.

> This library kind of only works by using `position: 'fixed'` or `'sticky'`. I spent half a day fixing it up and making it work well with `position: 'absolute'` and `'relative'`. Try out [`@nkzw/liquid-glass`](https://github.com/nkzw-tech/liquid-glass) if you like and see if that fixes your styling issues. The [`@nkzw/liquid-glass`](https://github.com/nkzw-tech/liquid-glass) really solves the layers placement. However issues remain. - z-index still breaks the visual; Most importantly using `transform` on the LiquidGlass interferes with the refraction visuals and removes them. This is important as it renders the LiquidGlass completely unusable in moving elements like carousels, nav bars, etc. Also tried different workarounds like `clip-path` and `transition`. Although, their animation feel is quite poor, it would have been acceptable but they still didn't work.

Rows
Columns

Layers missplaced, Not working, like having a flex missplaced within the component. #13

Before Liquid Glass Component:

After Liquid Glass component: