Liquid Type

Overview

Liquid Type is a full-viewport typography hero by SonoJS. Built with Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, GSAP, and Geist. The headline Words have weight responds to the cursor with spring physics - variable font weight, scale, trail dots, and ripples. Light/dark theme chrome and local media (liquid-type / membrane webm) under public/media. Demo type study only - no CMS. Deploy with Next.js on Cloudflare Workers or Node.

Highlights

1. 01

   Spring-weight type

   Each character tracks the cursor with dampened weight and scale - Words have weight.

2. 02

   Trail and ripples

   Soft pointer trail and ripple accents that follow motion across the stage.

3. 03

   Liquid media accents

   Local liquid-type / membrane webm and PNG under public/media - no remote CDN.

4. 04

   Next App Router ready

   Next.js 16 + React 19 + Tailwind 4 + Geist - deploy on Workers or any Node host.

You get

• Full Next.js 16 + React 19 + TypeScript source (Liquid Type)
• LiquidTypeHero + loader components with GSAP springs
• public/media liquid-type and membrane assets
• Geist sans/mono + Tailwind CSS 4