Open to work
Work Lab Notes About LinkedIn ↗
Lab

Small things I build to understand how interfaces move, respond and behave.

I like experimenting with interactions and product concepts, trying out ideas and seeing where they go. It’s a space to play with the details that make digital products easier and more enjoyable to use.

Action
Variant
01

Dynamic Button

A button that resizes to fit its label and crossfades its icon and text as the action or state changes. Click it to run through its states.

Micro Interaction · Motion · Code Prototype, 2026

Jetway_Brand_v3.figFigma file · 24 MB
02

Undo, not Confirm

Exploring reversible actions as an alternative to confirmation dialogs. Hold to delete, then change your mind.

Interaction · UX Pattern · Prototype Experiment, 2026

2 crêpes
03

Crêpe Receipt

A checkout that prints a paper receipt once the payment clears — for the crêpe robot from my Maus Robotics project.

Micro Interaction · Motion · Code Experiment, 2026

Alex Wardle, Visual Designer

04

Role Scramble

Text that scrambles through my roles before settling on the next one.

Typography · Motion · Code Study, 2026

Tap the pod to start

05

Pod Button

A tactile pod from Eyes Up: it signals with light and sound, you tap it off, and it tells you how fast you were.

Physical UI · Sound · Interaction Study, 2026

Drop it on the board
06

Moodboard Drop

A drop zone that pulls a file towards it before it lands, so the target meets you halfway.

Drag & Drop · Motion · Code Experiment, 2026

07

Principle Cards

My design principles as a fanned hand of cards. Pick one to pull it out of the fan.

Interaction · Motion · Code Study, 2026

08

Jetway Boarding Pass

A perforated boarding pass in the colours of my Jetway rebrand, with layers that shift in depth as the pointer moves.

Visual Design · Motion · CSS Study, 2026

09

Swiss Stamp

A perforated stamp frame with a small alpine motif. Press it to postmark it in Olten.

Visual Design · CSS · Interaction Study, 2026

· Olten

10

Signature

My name written out in my own handwriting font, revealed like a pen moving across the page.

Typography · Motion · Code Study, 2026

Loading…

11

Monogram Loader

A loader that traces the three strokes of my site mark, then resolves into the solid mark.

Motion · SVG · Code Study, 2026

12

Foil Card

A Lab membership card with a layered CSS foil that shifts with the pointer and with scroll.

Visual Design · CSS · Motion Experiment, 2026

  • FigmaInterface
  • IllustratorVector
  • PhotoshopImage
  • InDesignLayout
  • After EffectsMotion
  • LottieFilesMotion
  • Blender3D
  • Cinema 4D3D
  • SketchInterface
  • MiroMapping
  • NotionNotes
  • SlackTeams
  • ChatGPTAI
  • DeepSeekAI
  • ManusAI
  • SpotifyFocus
13

Toolkit List

A compact scrolling list of my tools, with a soft fade at whichever edge has more to see.

UI · CSS · Code Study, 2026

Playlist Commute Tape

    Silent demo — no audio

    14

    Commute Tape

    My Olten → Basel train playlist as a playlist-style player — play, skip and watch the progress (a silent demo, no audio).

    Sound · Motion · Interaction Experiment, 2026

    Try “eyes”, “design” or “xyz”.

      Connection
      15

      Every State Matters

      A search over my own projects exploring what happens beyond the happy path — from focus and loading to empty, error and retry states.

      UI States · Accessibility · Code Prototype, 2026

      16

      Lanyard Physics

      A draggable lab badge on a lanyard, exploring tension, gravity and release.

      Interaction · Physics · Web Experiment, 2026

      Move the cursor near the links

      17

      Magnetic Navigation

      My site navigation, with links that subtly respond to cursor proximity.

      Motion · Cursor · Interaction Study, 2026

      Move the cursor across the word

      18

      Kinetic Type

      Typography that responds to scrolling, cursor movement or interaction.

      Typography · Motion · Code Experiment, 2026

      I care about typography, hierarchy and detail.

      About me

      Best with a mouse or trackpad

      19

      Cursor Playground

      Exploring how the cursor can change its behaviour depending on context and interaction.

      Interaction · Motion · Web Experiment, 2026

      Use the left and right arrow keys to move a task between columns.

      Now

      Soon

      Later

      20

      Drag to Organise

      Tasks you can physically pick up and move between Now, Soon and Later.

      Drag & Drop · Physics · Prototype Prototype, 2026

      21

      Elastic Toggle

      My “Open to work” switch as a small study in spring physics, feedback and interface states.

      Micro Interaction · Motion · Code Study, 2026

      Work
      22

      Spatial Menu

      My site sections on a ring in space — navigation as a spatial interface rather than a traditional list.

      Navigation · Experimental UI · Interaction Experiment, 2026

      Notifications
      23

      Sound Feedback

      Subtle audio feedback for everyday controls, with every sound also shown as a caption.

      Sound · Interaction · Accessibility Study, 2026

      Generated mark
      24

      Generative Identity

      My mark, regenerated from the word you type and the current hour — an identity that changes through data, time and interaction.

      Branding · Generative Design · Code Experiment, 2026

      Work

      Designing between interface, interaction and code.

      A mix of professional work, UX projects and ongoing experiments.

      25

      Responsive Type System

      A typography system that responds continuously to the viewport rather than relying only on fixed breakpoints.

      Typography · CSS · Design System Study, 2026

      Scroll here to depart from Olten

      26

      Scroll as Timeline

      My Olten → Basel train ride, driven by scrolling inside the entry — using scroll as an input for states and narrative rather than simply moving down a page.

      Scroll · Storytelling · Motion Experiment, 2026

      27

      One Component, 12 States

      Taking a single interface component through default, hover, focus, active, loading, success, error, disabled and other relevant states.

      Design Systems · States · Accessibility Study, 2026

      Input: —0 hits

      28

      Cursor → Keyboard

      Eyes Up pods you can hit with a pointer or the keyboard — the same interaction working equally well through either input.

      Accessibility · Interaction · Code Experiment, 2026

      Some studies are inspired by dqnamo’s Kitchen.