Tune a slab.

/* .slab {   width: 280px;   height: 168px; } */
import { glass, attachPress } from "glassy-liquid";

const slab = document.querySelector("#slab");
if (!(slab instanceof HTMLElement)) throw new Error("Add an element with id slab.");
slab.style.width = "280px";
slab.style.height = "168px";
const surface = glass(slab, {
  material: "regular",
  appearance: "light",
  radius: 36,
  refraction: 28,
  bezel: 22,
  blur: 8,
  dispersion: 0.35,
  specular: 1.1,
  lightAngle: -135,
  zoom: 1,
  shadow: true,
  profile: "squircle",
});
attachPress(slab, surface);

"use client";
// Next.js App Router: keep this file a Client Component. useGlass reads the DOM.
import { useRef, useEffect } from "react";
import { useGlass } from "glassy-liquid/react";
import { attachPress } from "glassy-liquid";

/* .slab {   width: 280px;   height: 168px; } */

export function Slab() {
  const ref = useRef<HTMLDivElement>(null);
  const surface = useGlass(ref, {
    material: "regular",
    appearance: "light",
    radius: 36,
    refraction: 28,
    bezel: 22,
    blur: 8,
    dispersion: 0.35,
    specular: 1.1,
    lightAngle: -135,
    zoom: 1,
    shadow: true,
    profile: "squircle",
  });

  useEffect(() => {
    const el = ref.current;
    const ctrl = surface.current;
    if (!el || !ctrl) return;
    const press = attachPress(el, ctrl);
    return () => press.dispose();
  }, [surface]);
  return (
    <div ref={ref} className="slab" style={{ width: 280, height: 168 }}>
      Field glass
    </div>
  );
}

<script setup>
// .slab {   width: 280px;   height: 168px; }
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useGlass } from "glassy-liquid/vue";
import { attachPress } from "glassy-liquid";

const slab = ref(null);
const surface = useGlass(slab, {
  material: "regular",
  appearance: "light",
  radius: 36,
  refraction: 28,
  bezel: 22,
  blur: 8,
  dispersion: 0.35,
  specular: 1.1,
  lightAngle: -135,
  zoom: 1,
  shadow: true,
  profile: "squircle",
});
let press;
onMounted(() => {
  if (slab.value && surface.value) press = attachPress(slab.value, surface.value);
});
onBeforeUnmount(() => press?.dispose());
</script>

<template>
  <div ref="slab" class="slab" style="width: 280px; height: 168px">Field glass</div>
</template>

<script>
  // .slab {   width: 280px;   height: 168px; }
  import { useGlass } from "glassy-liquid/svelte";
  import { onMount } from "svelte";
  import { attachPress, getSurface } from "glassy-liquid";
  let slab;
  const options = {
    material: "regular",
    appearance: "light",
    radius: 36,
    refraction: 28,
    bezel: 22,
    blur: 8,
    dispersion: 0.35,
    specular: 1.1,
    lightAngle: -135,
    zoom: 1,
    shadow: true,
    profile: "squircle",
  };
  onMount(() => {
    const surface = getSurface(slab);
    if (!surface) return;
    const press = attachPress(slab, surface);
    return () => press.dispose();
  });
</script>

<div bind:this={slab} use:useGlass={options} class="slab" style="width: 280px; height: 168px">Field glass</div>