Design-focused marketing site for a legendary local bakery.
nextjstailwindframer motionlenis

Key Facts

  • Role: Designer & Developer (Pro Bono)
  • Stack: Next.js 16, React 19, Tailwind CSS v4, Framer Motion, Lenis
  • Target: Local bakery customers & brand discovery
  • Status: Live (isabakes.co.uk)

Executive Summary

Isabakes is a local bakery with a devoted following and a strong visual brand. When the owner opened a new store, I designed and built her a website as a gift to mark the occasion.

The brief I set myself was simple: make it feel as lovingly crafted as her cakes. I used this project as an excuse to run the latest of everything—Next.js 16, React 19, and Tailwind CSS v4—to build a warm, tactile design that matches the brand's personality without relying on templates or component-library defaults.

The Challenge

The "Bakery Problem" is often one of flat, uninspiring digital presence. A brand that is physically tactile and whimsical often struggles to translate that "warmth" to a screen.

  • Translating Tactility: Creating a digital experience that feels "hand-placed" rather than grid-locked.
  • Performance vs. Motion: The site is heavy on decorative animations (sprinkle bursts, bobs, floats), which must be optimized to ensure high-speed mobile loading for customers on the go.
  • Zero-Maintenance Backend: The client needed a site that looked professional but required zero technical overhead to manage, leading to a deliberate decision to avoid a database/CMS in favor of a robust static content architecture.

The Stack

I used this project to stress-test the latest frontend releases in a production-like environment:

  • Framework: Next.js 16 with the React Compiler enabled for automatic memoisation.
  • Styling: Tailwind CSS v4 with custom theme tokens defined as CSS variables.
  • Animation: Framer Motion 12 (spring physics, scroll-linked transforms, layout animations).
  • Scroll: Lenis (smooth-scroll) for cohesive motion across the full page height.
  • Asset Pipeline: Sharp for build-time WebP conversion, optimizing high-res product photography for edge delivery.

Key Architectural Decisions

1. The "SprinkleBurst" Component

The signature interaction of the site—colored sprinkles that shoot outward on hover or scroll—is a custom reusable component (SprinkleBurstMedia.tsx).

  • Physics-Based Motion: I utilized Framer Motion's useInView and animate hooks with a custom spring configuration (stiffness: 300, damping: 20).
  • Deterministic Randomness: Sprinkles are defined with specific angles, distances, and delays to create an organic, "hand-tossed" feel that is consistent across every render.
  • Accessibility: The component integrates with the useReducedMotion hook, ensuring decorative bursts are disabled or simplified for users with motion sensitivity.

2. Layout Transitions & Shared Element Motion

To create a "fluid" feel between sections, I leveraged Framer Motion's layoutId.

  • Logo Morph: The hero logo and header logo share a layoutId, so scrolling past the hero smoothly morphs the large centred logo into the compact nav version.
  • Services Bento: A three-column grid where the middle card lifts and outer cards drop on hover, creating a staggered "shelf" effect. This was achieved using purely declarative variants, avoiding expensive manual DOM manipulations.

3. "Hand-Placed" Design System

Instead of a rigid flex/grid layout, I engineered a system of "offset primitives."

  • Rotated Frames: Product images sit in rounded frames with generous white borders, rotated a few degrees off-axis via CSS transforms to mimic Polaroids scattered on a counter.
  • Typography Pairing: Pairings of Syne (geometric display) and Caveat (handwritten script) are used to break the "web-safe" grid, with script accents skewed and floated relative to their parent headings.

Outcome

The site does exactly what a bakery website should: it makes you hungry. By pouring energy into the craft of the frontend rather than the complexity of the backend, I delivered a site that matches Isabel's brand perfectly. It serves as a proof-of-concept for how bleeding-edge tech (React 19, Tailwind v4) can be used to create warm, human-centric interfaces that load instantly and feel "alive."