Membrane

Overview

Membrane is a full-viewport interactive mesh hero by SonoJS. Built with Vite, React 19, TypeScript, Tailwind CSS 4, and GSAP. A 50×30 spring-physics canvas surface deforms under the cursor, with a staggered content entrance. Playfair Display and Geist Variable ship via Fontsource; award SVGs, avatars, and thumbnail live under public/ - no remote media URLs. Demo mesh study only - no CMS. Static build ready for Cloudflare Workers.

Highlights

1. 01

   Spring mesh surface

   50×30 canvas points deform under the cursor with dampened spring physics.

2. 02

   Staggered content reveal

   GSAP fades the canvas and staggers headline / CTA entrance over the mesh.

3. 03

   Local chrome only

   Award SVGs, avatars, and thumbnail under public/ - Playfair + Geist via Fontsource.

4. 04

   Static and fork-ready

   Vite build to dist/ - deploy on Cloudflare Workers or any static host.

You get

• Full Vite + React 19 + TypeScript source (Membrane)
• Interactive mesh hero canvas + content entrance
• public/ award SVGs, avatars, and thumbnail
• Tailwind CSS 4 + GSAP + Playfair Display + Geist Variable