Tái Tạo Hiệu Ứng Kính Lỏng (Liquid Glass) Của Apple Với React, CSS & SVG Filters

Lê Lân

17/08/2025

Khám Phá Hiệu Ứng Liquid Glass Của Apple Với SVG Filters Và React

Mở Đầu

Hiệu ứng Liquid Glass vừa được Apple giới thiệu thực sự tạo nên một luồng gió mới cho thiết kế giao diện. Hiệu ứng này không chỉ làm mọi thứ trở nên hấp dẫn mà còn giúp trải nghiệm người dùng trở nên sống động và chân thực hơn bao giờ hết.

Việc tái hiện hiệu ứng kính thủy tinh chất lỏng (Liquid Glass) không hề đơn giản. Mặc dù chúng ta có thể dễ dàng áp dụng CSS backdrop-filter để làm mờ nền, nhưng việc tạo ra hiệu ứng biến dạng, kéo giãn và uốn cong các điểm ảnh sao cho giống như kính thật thì lại là một thách thức lớn. Bài viết này sẽ giới thiệu chi tiết cách hoạt động, cũng như cách sử dụng SVG Filters, đặc biệt là feDisplacementMap để mô phỏng chính xác hiện tượng đó.

Nội dung sẽ lần lượt đi qua:

Tìm hiểu bản chất hiệu ứng kính thủy tinh

Giới hạn của CSS Filters và lý do chuyển sang SVG Filters

Mô hình toán học bằng trường khoảng cách (Signed Distance Fields)

Cách tạo bản đồ dịch chuyển cho hiệu ứng

Ứng dụng kỹ thuật trong React để tối ưu hóa hiệu suất

Hiệu Ứng Liquid Glass Là Gì?

Bản Chất Của Hiệu Ứng

Hiệu ứng Liquid Glass khiến cho nền phía sau phần tử giao diện bị biến dạng như kính thủy tinh cong, làm các điểm ảnh bị đẩy hoặc kéo theo một quy luật nhất định, giống như kính thật làm méo hình ảnh phía sau nó.

Trên ảnh, mạng lưới bên trái là trạng thái ban đầu, còn bên phải cho thấy cách lưới bị kéo giãn và khúc xạ, trong đó:

Trung tâm kính có hiệu ứng phóng đại

Các vùng quanh viền bị uốn cong

Tất cả điểm ảnh vẫn tồn tại nhưng vị trí và hình dạng thay đổi theo quy luật

Giới Hạn Của Các Bộ Lọc CSS

CSS cung cấp backdrop-filter hỗ trợ các hiệu ứng như mờ (blur), tương phản (contrast), tăng sáng (brightness)... Tuy nhiên, nó không cho phép điều khiển mức độ và hướng dịch chuyển chính xác từng điểm ảnh như yêu cầu của Liquid Glass.

.glass {
  backdrop-filter: blur(10px);
}

Các bộ lọc CSS native chỉ xử lý hiệu ứng tổng thể, không thể mô phỏng sự biến dạng chi tiết điểm ảnh.

Do vậy, cần phải dùng đến SVG Filters để mở rộng khả năng xử lý một cách tùy chỉnh.

SVG Filters và feDisplacementMap: Người Điều Khiển Pixel

Cách Hoạt Động Của feDisplacementMap

feDisplacementMap là một bộ lọc SVG đặc biệt, cho phép biến đổi vị trí điểm ảnh dựa trên một bản đồ dịch chuyển (displacement map).

<filter id="glass_filter">
  <feImage xlink:href="#displacement_map" result="map"/>
  <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="G" scale="20"/>
</filter>

in2 là tham chiếu đến bản đồ dịch chuyển, bản đồ này dùng màu sắc để chỉ dẫn hướng và độ dịch chuyển.

Kênh đỏ (R) chỉ phương ngang (255 sang phải, 128 không dịch chuyển, 0 sang trái)

Kênh xanh lá (G) chỉ phương dọc (255 xuống dưới, 128 không dịch chuyển, 0 lên trên)

Ý Nghĩa Bản Đồ Dịch Chuyển

Bản đồ dịch chuyển là một ảnh mà mỗi pixel có giá trị màu xác định vector di chuyển tương ứng cho pixel trên màn hình.

Đây chính là ngôn ngữ trung gian giữa mô hình toán học của hiệu ứng và cách áp dụng trực tiếp lên hình ảnh khiến mắt người thấy hiệu ứng kính.

Mô Hình Toán Học: Signed Distance Fields (SDF)

Định Nghĩa SDF

SDF là hàm trả về khoảng cách từ một điểm đến ranh giới hình học, có dấu âm cho điểm nằm trong vùng, dương ngoài vùng, bằng 0 trên biên.

Ví dụ, đối với hình chữ nhật bo góc (rounded rectangle):

function roundedRectSDF(x: number, y: number, width: number, height: number, radius: number): number {
  const qx = Math.abs(x) - width + radius;
  const qy = Math.abs(y) - height + radius;
  return Math.min(Math.max(qx, qy), 0) + length(Math.max(qx, 0), Math.max(qy, 0)) - radius;
}

Vai Trò Trong Hiệu Ứng Kính

Xác định vùng trung tâm kính (điểm ảnh dịch chuyển ít)

Xác định biên kính (vùng dịch chuyển mạnh hơn)

Tạo vùng chuyển tiếp mượt mà giữa các vùng này

Tạo Bản Đồ Dịch Chuyển (Movement Instruction Map)

Quy Trình Tạo Bản Đồ

Chạy fragmentShader tính vị trí dịch chuyển mới cho từng pixel theo công thức SDF và hiệu ứng phóng đại, bóp méo.

Tính toán độ dịch chuyển trên trục x (dx) và y (dy).

Chuẩn hóa giá trị dịch chuyển theo khoảng [-0.5, 0.5] rồi mã hóa thành kênh màu đỏ (R) và xanh lá (G).

Ghi dữ liệu màu vào một canvas ẩn.

Trỏ feImage trong SVG filter đến canvas này như một nguồn dữ liệu dịch chuyển.

const updateShader = () => {
  const data = new Uint8ClampedArray(w * h * 4);
  let maxScale = 0;
  const rawValues: number[] = [];

  for (let i = 0; i < data.length; i += 4) {
    const x = (i / 4) % w;
    const y = Math.floor(i / 4 / w);
    const pos = fragmentShader({ x: x / w, y: y / h });
    const dx = pos.x * w - x;
    const dy = pos.y * h - y;
    maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy));
    rawValues.push(dx, dy);
  }

  let index = 0;
  for (let i = 0; i < data.length; i += 4) {
    const r = rawValues[index++] / maxScale + 0.5;
    const g = rawValues[index++] / maxScale + 0.5;
    data[i] = r * 255;
    data[i + 1] = g * 255;
    data[i + 2] = 0;
    data[i + 3] = 255;
  }

  context.putImageData(new ImageData(data, w, h), 0, 0);
  feImage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', canvas.toDataURL());
  feDisplacementMap.setAttribute('scale', (maxScale / canvasDPI).toString());
};

Hàm updateShader là cầu nối quan trọng giúp toán học trở thành hình ảnh mã hóa màu cho bộ lọc SVG xử lý.

Làm Hiệu Ứng Tự Nhiên Hơn Với Smooth Transitions

Hàm smoothStep

Một điểm mấu chốt làm hiệu ứng kính không bị cứng nhắc, mà chuyển động mượt mà là hàm smoothStep :

function smoothStep(a: number, b: number, t: number): number {
  t = Math.max(0, Math.min(1, (t - a) / (b - a)));
  return t * t * (3 - 2 * t);
}

Hàm này tạo ra sự thay đổi không tuyến tính, giống như vận tốc xe tăng dần rồi giảm dần.

Giúp hình ảnh kính méo hài hòa, không bị đột ngột hay răng cưa.

Tổng Quan Quy Trình Triển Khai

Định nghĩa hình dạng kính qua Distance Field (SDF)

Tính toán vị trí từng pixel thông qua fragmentShader và smoothStep

Mã hóa vị trí mới thành map màu đỏ-xanh (R-G)

Truyền map màu này vào SVG filter với feDisplacementMap

Áp dụng filter này vào CSS backdrop-filter

Kết quả: Nền phía sau phần tử có kiểu biến dạng như kính thủy tinh

Chuỗi xử lý này tạo nên hiệu ứng Liquid Glass sắc nét, sống động và có thể tái sử dụng dễ dàng trong các ứng dụng React hiện đại.

Ứng Dụng Trong React

Cài Đặt Thư Viện hỗ trợ

Để tăng tốc quá trình phát triển, hãy tận dụng bộ hooks phong phú từ:

npm install @reactuses/core

Trang tài liệu đầy đủ tại: www.reactuse.com

Tích Hợp SVG Filter Với React

Sử dụng React state để lưu trữ ID filter, cập nhật khi cần.

Dùng useEffect để chạy updateShader cập nhật bản đồ dịch chuyển khi kích thước canvas hoặc tham số đổi.

Áp dụng CSS backdropFilter style với đường dẫn SVG filter tương ứng.

Đây là cách giúp project React của bạn có hiệu ứng Liquid Glass mà không ảnh hưởng hiệu năng.

Tham Khảo

React Use - Bộ Hooks React mạnh mẽ

Liquid Glass GitHub Repository

Reference Implementation by Shuding

SVG Filters Documentation - MDN

CSS backdrop-filter Specification

June 1, 2024