Page•Premium

Liquid Glass Pro

A focused product hero with one cinematic image and an interactive VFX-JS liquid-glass post effect that follows the pointer.

Phone floating above a reflective surface

Liquid Glass Pro

A new way to look at the web.

Overview

About the Liquid Glass Pro

A focused product hero with one cinematic image and an interactive VFX-JS liquid-glass post effect that follows the pointer. It is delivered as editable TypeScript for Next.js App Router. Tailwind CSS is required because both delivered source files use utility classes. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Premium product launches that need a cinematic, highly interactive presentation.
Technology and creative-studio landing pages built around visual storytelling.

What’s included

Files in the product ZIP

Liquid Glass Pro source

components/liquid-glass-pro-page.tsx

Editable React and TypeScript component source.

Poster fallback

components/liquid-glass-poster.tsx

Shared image constant and static poster used by the interactive page.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import

import { LiquidGlassProPage } from "@/components/liquid-glass-pro-page";

Minimum example

export default function ProductPage() {
  return <LiquidGlassProPage />;
}

Props

Component API

Compatibility

Verified project setup

ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
Tailwind CSS is required because both delivered source files use utility classes.

Images: The preview uses a remote Unsplash image. The image file is not included; replace the URL or configure images.unsplash.com in next.config.ts.
Fonts: No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Liquid Glass Pro ZIP, copy every file from components/ into src/components/, and copy the example into your own page or feature folder.

Target path

src/components/liquid-glass-pro-page.tsx

Install the npm dependencies when adding the source by hand:

npm install @vfx-js/core

Styling requirements

Tailwind CSS is required by the delivered page and poster source.
ReactLoom verifies this source with Tailwind CSS 4.3.3; other Tailwind versions have not been verified.
Keep both installed component paths in Tailwind's source detection scope.
The delivered source uses next/image; allow images.unsplash.com in next.config.ts or replace the remote image with your own local asset.
For the verified Next.js and Tailwind CSS 4 setup, register @tailwindcss/postcss in postcss.config.mjs.
Import tailwindcss from the application's global CSS entry point.