Skip to content
The Workbench

Components we build with, working.

A showcase of interface parts — some from this site, some adapted and restyled to fit. Hover, click and drag: every one of them is live.

Built here

Components we designed for this site, running on the pages you have already seen.

  • Still: One file, tabs to switch.

    Hero file stack

    Good for
    Leafing through projects on the home page.
    Ours · built for this site
  • Still: No motion at all.

    Pinned sheet

    Good for
    Every card on this site.
    Ours · built for this site
  • Still: Colours swap instantly.

    Palette customiser

    Good for
    Letting a visitor recolour the site.
    Ours · built for this site
Part two

Adapted, and restyled to fit

Open-source components from React Bits, rebuilt in our colours and type — grouped by the job they do. reactbits.dev (opens in a new tab)

Draw the eye to one thing

Motion earns its place when it points at the one thing that matters on a page.

  • Still: Shows the final word.

    Split-flap text

    Good for
    A headline that changes, like a departure board.
    Adapted from React BitsText
  • Still: Stops turning.

    Circular stamp

    Good for
    A badge or seal beside a call to action.
    Adapted from React BitsText
  • Still: Shows the text at once.

    Decrypted text

    Good for
    An AI result arriving — used on AI Studio only.
    Adapted from React BitsAI Studio

Make a control feel physical

Small responses that tell a visitor their hand did something.

  • Still: Stays put.

    Magnet button

    Good for
    The one button a page exists for.
    Adapted from React BitsControls
  • Still: No sparks.

    Click spark

    Good for
    Confirming a small action landed.
    Adapted from React BitsMotion
  • Still: No stretch.

    Elastic slider

    Good for
    A value someone drags, like a budget.
    Adapted from React BitsControls

Give an empty space some life

Somewhere quiet for the pointer to play, away from anything that has to be read.

  • Still: Needles rest level.

    Magnet lines

    Good for
    A quiet, interactive empty space.
    Adapted from React BitsMotion
  • Still: Sticker lies flat.

    Sticker peel

    Good for
    A playful reveal on a campaign page.
    Adapted from React BitsMotion
  • Still: Plain dots.

    Dot grid

    Good for
    A section background that reacts to the pointer.
    Adapted from React BitsMotion

Walk someone through it

Breaking a long task into parts, and showing what is inside before it opens.

  • Still: Steps swap without sliding.

    Stepper

    Good for
    A form in stages, so it never looks long.
    Adapted from React BitsControls
  • Still: Opens without motion.

    Folder

    Good for
    Showing what is inside before opening it.
    Adapted from React BitsControls

Want one of these on your site?

Or something that isn't here. Tell us what the page has to do, and we'll pick the motion to match — including none at all.

Start a Project