Skip to content
Production site

Microneedle.pro

A site for an independent practitioner in Malta who needed something her own clients would feel was hers, not a templated wellness booking page. The result is a single tactile-cinematic surface: scroll-driven hero choreography, hand-drawn assets, Fraunces variable typography reading at the right weight for the moment, bilingual English and Maltese. Designed and built solo, live in production.

Next.js 16Framer Motion + LenisFraunces variableEN / MTVercel
Open the live site
01 — Scroll-driven hero

Three frames, one continuous gesture

The homepage opens on 320vh of sticky scroll: a pore-level skin macro, then the practitioner mid-treatment, then her portrait with the headline revealing. Lenis carries the smoothness, Framer Motion drives the scroll-progress transforms, prefers-reduced-motion collapses the whole thing to static frames without breaking the layout.

Three keyframes · 320vh sticky stage · Lenis smooth-scroll · Reduced-motion fallback · Frames 1024×1024 served via Next/Image (AVIF/WebP)

02 — The Ritual

Four-stage scroll document

A dedicated page walks through arrival, consultation, treatment, aftercare. Each stage is its own parallax-anchored panel with paired imagery and copy, a science aside underneath, and a closer that hands the reader back to the booking moment. Designed to be read at the pace the gesture actually unfolds, not in scannable bullets.

Four panels · Per-stage parallax · Inline science aside · Fraunces opsz/SOFT/WONK axes used live for tonal shifts

03 — Where

Hand-drawn island, real session locations

Rather than a Google Maps embed, the Where page uses a hand-drawn Malta with seventeen pulse-animating session dots — every village she actually visits. The choice is editorial: clients see her not as a regional service but as someone who knows the island. The pulse respects prefers-reduced-motion and the dots are keyboard-focusable for accessibility.

SVG vector · 17 animated dots · motion-reduce honored · Pairs with three what-is-needed cards beneath

Stack & approach

Next.js 16 on the App Router, Tailwind v4, Framer Motion v12 with Lenis for smooth-scroll, Fraunces variable serif for display and italic, IBM Plex Sans for body, DM Mono for labels. Palette is hand-tuned OKLCH built around warm Mediterranean tones — cream, paper, clay, sand, terracotta, ember, umber, cocoa, ink, pitch, void.

The site is content-fact-grounded: every claim about the treatment maps back to material the practitioner herself signed off on. No templated wellness copy, no stock imagery. The result is a small site that reads as inevitably hers.

Built April – May 2026. Live at microneedle.pro. Showcase published with the practitioner's consent.