Effects not working? #15

New issue

Open

opened 2025-06-23 21:25:25 -04:00 by ved-patel226 · 4 comments

ved-patel226 commented 2025-06-23 21:25:25 -04:00 (Migrated from github.com)

Copy link

^^
why isn't the blur working?

Heres my code:

import { ReactNode } from "react";
import styles from "../../styles/css/components/Atoms/Card.module.css";
import LiquidGlass from "liquid-glass-react";

export interface CardProps {
  header?: ReactNode;
  children?: ReactNode;
  imageAlt?: string;
}

export function Card({ header, children, imageAlt = "" }: CardProps) {
  return (
    <div
      style={{
        position: "sticky",
        left: "50%",
        top: "50vh",
        width: "50%",
      }}
    >
      <LiquidGlass
        displacementScale={64}
        blurAmount={1}
        saturation={130}
        aberrationIntensity={2}
        elasticity={0}
        cornerRadius={32}
        style={{
          position: "absolute",
          left: "0",
          top: "0",
          transform: "translateX(-50%)",
        }}
      >
        <div className={styles.card} aria-label={imageAlt}>
          {header && <h1 className="semi_ttl">{header}</h1>}
          <div className={styles.content}>{children}</div>
        </div>
      </LiquidGlass>
    </div>
  );
}

export default Card;

 ^^ why isn't the blur working? Heres my code: ``` import { ReactNode } from "react"; import styles from "../../styles/css/components/Atoms/Card.module.css"; import LiquidGlass from "liquid-glass-react"; export interface CardProps { header?: ReactNode; children?: ReactNode; imageAlt?: string; } export function Card({ header, children, imageAlt = "" }: CardProps) { return ( <div style={{ position: "sticky", left: "50%", top: "50vh", width: "50%", }} > <LiquidGlass displacementScale={64} blurAmount={1} saturation={130} aberrationIntensity={2} elasticity={0} cornerRadius={32} style={{ position: "absolute", left: "0", top: "0", transform: "translateX(-50%)", }} > <div className={styles.card} aria-label={imageAlt}> {header && <h1 className="semi_ttl">{header}</h1>} <div className={styles.content}>{children}</div> </div> </LiquidGlass> </div> ); } export default Card; ```

cyberluke commented 2025-06-24 01:27:04 -04:00 (Migrated from github.com)

Copy link

isn't absolute position with transform an issue?

 style={{
          position: "absolute",
          left: "0",
          top: "0",
          transform: "translateX(-50%)",
        }}

isn't absolute position with transform an issue? ``` style={{ position: "absolute", left: "0", top: "0", transform: "translateX(-50%)", }} ```

ved-patel226 commented 2025-06-24 06:26:22 -04:00 (Migrated from github.com)

Copy link

i used absolute position because all the layers would spill everywhere, but i will try this. Thanks!

i used absolute position because all the layers would spill everywhere, but i will try this. Thanks!

ved-patel226 commented 2025-06-24 17:03:18 -04:00 (Migrated from github.com)

Copy link

Heres what it looks like without the absolute stuff:

Here you can see the misplaced layers with it off:

code:

<div
      style={{
        position: "sticky",
        left: "50%",
        top: "50vh",
        width: "50%",
      }}
    >
      <LiquidGlass
        displacementScale={64}
        blurAmount={1}
        saturation={130}
        aberrationIntensity={2}
        elasticity={0}
        cornerRadius={32}
      >
        <div className={styles.card} aria-label={imageAlt}>
          {header && <h1 className="semi_ttl">{header}</h1>}
          <div className={styles.content}>{children}</div>
        </div>
      </LiquidGlass>
    </div>

Heres what it looks like without the absolute stuff:  Here you can see the misplaced layers with it off:  code: ``` <div style={{ position: "sticky", left: "50%", top: "50vh", width: "50%", }} > <LiquidGlass displacementScale={64} blurAmount={1} saturation={130} aberrationIntensity={2} elasticity={0} cornerRadius={32} > <div className={styles.card} aria-label={imageAlt}> {header && <h1 className="semi_ttl">{header}</h1>} <div className={styles.content}>{children}</div> </div> </LiquidGlass> </div> ```

PickleNik commented 2025-06-27 11:11:30 -04:00 (Migrated from github.com)

Copy link

same issue here

same issue here

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

master

No results found.

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

rdev/liquid-glass-react#15

No description provided.