I’m building this collection of animated UI patterns to practise timing, easing, gestures and transitions on the web. Each component uses React, Tailwind CSS and Motion, with more examples to come.

Bottom sheet drawer

This was my attempt to recreate the Family drawer from Emil Kowalski’s animations.dev course.

Blue merino crewneck jumper with ribbed collar, cuffs and hem

Merino crew

Extra-fine merino wool crewneck with a relaxed regular fit

$149

Jumper colour

Accordion

The refererence for this accordion is Andrew Trousdale’s website.

A design-minded developer focused on motion, interaction and craft. Building interfaces that feel considered — where every transition has intention and every layout earns its place.

  • Interface animation2023–
  • Design systems2022–
  • Interaction prototyping2021–
  • Accessible motion2020–

Selected work across UI engineering and creative tools.

Order card

Animated drawer UI

Dropdown menu

Motion popover

Scroll transitions

Viewport animation

Motion for React

Animation library

Tailwind CSS

Utility-first styling

Astro

Static-first framework

Frontend

Engineering

Motion

Design

Systems

Architecture

Accessibility

Standards

Hover card

I was inspired by a playful approach to the quick buy option commonly seen on product tiles in online shops. On mobile, tapping opens additional content.

Noma Side Chair in Oak

Hold to delete button

Press and hold to confirm

Dynamic Island

Based on the Dynamic Island exercise from Emil Kowalski’s animations.dev course. The island springs between sizes, while its content blurs out quickly and settles back in as the shell lands.

Island idle

Toast stack

Notifications stack into a deck and fan out on hover or tap. Each one dismisses itself after a few seconds, and the timer pauses while you’re reading. You can also swipe one away.