Spot Your Site · Parts Kit · v2

THE
ELEMENT
CATALOG

Ninety numbered web elements across three series — MD works everywhere, M is mobile-only, D is desktop-only. Note the IDs. Hand us a list — "MD-1, 3, 7; D-2, 5; M-1, 4" — and get a site.

✱ Elements outside this device's platform show a marker and a static fallback.

MD

Mobile + Desktop

41 elements
MD-1
Backgrounds

Dither Field

Live ordered-dither animated background field.

DITHER
FIELD Ordered Bayer 4×4 · canvas
MD-2
Backgrounds

Aurora Gradient

Slow drifting animated mesh-gradient backdrop.

AURORA Drifting radial mesh · CSS keyframes
MD-3
Backgrounds

Particle Field

Constellation canvas of points with near-neighbour links.

PARTICLE
FIELD Constellation · near-neighbour links
MD-4
Backgrounds

Grain Noise

Animated film-grain and noise texture overlay.

GRAIN Film-grain overlay · ~12 fps redraw
MD-5
Motion

Scroll Reveal

Clip-path wipe reveal triggered on scroll-in.

BUILT
TO BE
SEEN

Each line wipes in via clip-path when it enters the viewport.

MD-6
Motion

Scroll Assemble

Scattered fragments converge into place as you scroll.

AS SEM BL ED

Scroll — scattered fragments converge into the word.

MD-7
Motion

Parallax Layers

Three depth layers moving at different scroll speeds.

PARALLAX Three layers · three scroll speeds
MD-8
Motion

Scroll Scrub

Counter and progress bar scrubbed by scroll position.

000 Scrub — the counter + bar track this section's scroll progress
STARTQUARTER HALFEND
MD-9
Motion

Sticky Pin

Section pins to the viewport while inner steps advance.

01 PIN

The panel locks to the viewport.

02 STEP

Inner content advances as you scroll.

03 RELEASE

The section lets go and scroll resumes.

MD-10
Text

Glitch Text

RGB-split glitch headline with clip jitter.

MALFUNCTION

RGB-split layers · clip-jitter keyframes
MD-11
Text

Scramble Decode

Characters scramble then resolve on scroll-in.

DECODED ON ARRIVAL

characters resolve as the section enters view

MD-12
Text

Variable-Font Morph

Variable-font weight morph on hover and scroll.

VARIABLE

WEIGHT FOLLOWS SCROLL

Inter Variable · wght axis on hover + scroll
MD-13
Text

Stencil Reveal

Spray-stencil mask wipe revealing text on scroll-in.

STENCIL
SVG spray-stencil mask · wipes on scroll-in
MD-14
Audio

Audio Reactive

Web-Audio analyser drives a live FFT visualizer.

REACTIVE Synth loop · FFT bars + ring · UI pulses to bass
MD-15
Widgets

Count Up

Numbers count up when scrolled into view.

0 Projects shipped
0 Hours billed
0 Client retention
MD-16
Widgets

Marquee

Infinite seamless marquee strip, pauses on hover.

DESIGNBUILDSHIPREPEAT★NO TEMPLATESONLY ELEMENTS★
DESIGNBUILDSHIPREPEAT★NO TEMPLATESONLY ELEMENTS★
MD-17
Widgets

Bento Grid

Responsive bento layout with varied tile sizes.

01

Lead feature

The big tile carries the headline story.

02

Stat

Compact metric.

03

Quote

A short pull line.

04

Gallery

A taller column for imagery.

05

Link

A call to action.

06

Footer band

A wide closing tile.

MD-18
Motion

Scroll Velocity Skew

Content skews proportional to scroll speed, springs back at rest.

SPEED
BENDS
TYPE Scroll fast — the type leans into the motion
MD-19
Motion

Scroll Snap Sections

Full-viewport scroll-snap panels.

01 SNAP
02 LOCK
03 HOLD
Scroll inside the frame — each panel snaps to fill it.
MD-20
Motion

Scroll Progress Rail

Fixed side rail filling with page scroll progress.

PROGRESS
RAIL The rail tracks how far this section has crossed the viewport.
MD-21
Motion

Image Sequence Scrub

Scroll position scrubs through a frame sequence — video on scroll.

SCRUB Scroll = playhead · canvas frame sequence
MD-22
Text

Text Mask Scroll

Image revealed through a text-shaped mask, shifts on scroll.

THROUGH

An image lives inside the letters — it shifts as you scroll.
MD-23
Motion

Pinned Horizontal Scroll

Section pins, inner track scrolls horizontally with vertical scroll.

01 ONE
02 TWO
03 THREE
04 FOUR
05 FIVE
MD-24
Widgets

Split Flap Counter

Airport split-flap display animating to a number.

00000
Split-flap board · steps through glyphs to the value
MD-25
Widgets

Ticker Headlines

Vertical rolling headline ticker.

LATEST
NEW DROP — the autumn line is liveAWARD — studio of the year, two runningOPEN — we are taking projects for Q3PRESS — featured in three print issues
MD-26
Motion

Sticky Stack Cards

Cards stack and scale as they pin on scroll.

01 Brief
02 Design
03 Build
04 Ship
MD-27
Backgrounds

Scroll Color Shift

Page background cross-fades through a palette over scroll.

COLOUR
FOLLOWS
SCROLL The panel cross-fades through a palette as you move.
MD-28
Motion

Line Draw SVG

SVG path draws itself on scroll-in.

SVG paths draw themselves the moment the block enters view.
MD-29
Motion

Blur In On Scroll

Elements resolve from blur and offset on scroll-in.

FOCUSPULLSINTOPLACE Each line resolves from a defocused blur near the viewport centre — and blurs back as you scroll away, either direction.
MD-30
Motion

Clip Reveal Grid

Grid tiles clip-path reveal in a staggered sequence.

01
02
03
04
05
06
07
08
09
10
11
12
Tiles wipe in on a diagonal stagger when the grid enters view.
MD-31
Text

Kinetic Type Loop

A looping kinetic-typography band.

MAKE IT MOVE
A looping kinetic-typography band — scale, rotate, offset.
MD-32
Widgets

Gradient Border Flow

Animated conic-gradient border on a card.

Featured

FLOWING
BORDER

A conic-gradient ring rotates around the card edge.

MD-33
Motion

Scroll Zoom Poster

Hero poster scales and zooms as the section scrolls past.

ZOOM
The poster scales with scroll — a cinematic push-in.
MD-34
Widgets

Counter Roll Odometer

Odometer digit-roll number.

0123456789 0123456789 0123456789 0123456789 0123456789 0123456789
Odometer roll — each digit strip slides to its value.
MD-35
Widgets

Accordion Stack

Tap or click expanding accordion panels.

A numbered library of reusable web elements you assemble into sites.

Click a row — it expands; the others stay closed. One open at a time.

Yes — tap is click. This element is in the MD series.

MD-36
Widgets

Tab Switcher

Animated sliding-underline tab switcher.

A fourteen-person practice working across brand and product.
Selected projects in motion, type, and interactive systems.
Briefs welcome. We reply within two working days.
MD-37
Motion

Reveal On View Stagger

IntersectionObserver staggered list reveal.

Process
  • 01 Discovery and brief
  • 02 Concept directions
  • 03 Design and prototype
  • 04 Build and integrate
  • 05 Launch and measure
MD-38
Text

Noise Displace Text

Text wobbles via an SVG turbulence filter.

LIQUID
LETTERS

SVG turbulence + displacement map warps the headline.
MD-39
Widgets

Infinite Logo Wall

Seamless two-row logo wall, opposite directions.

Trusted by
MD-40
Text

Scroll Spotlight Text

A moving highlight sweeps the active line as you scroll.

We design the things people scroll past

and make them stop. Every section

earns the next one. Nothing is filler.

This is the line you are reading now.

And the catalog keeps that promise.

MD-41
Backgrounds

Audio Visualizer

Audio-reactive dithered music visualizer — 7 section designs, beat + lead-synth sync, MP3 upload.

DITHER SYNTH Audio-reactive dithered music visualizer → 7 section designs · beat + lead-synth sync · MP3 upload
M

Mobile Only

30 elements
M-1
Sensor ✱

Device Tilt Parallax

DeviceOrientation gyroscope drives layered parallax.

TILT
TILT YOUR
PHONE
Layers shift with the gyroscope as you tilt the device.
M-2
Sensor ✱

Shake To Action

DeviceMotion accelerometer — shake triggers an action.

READY
Shake your phone — the word shuffles.
M-3
Gesture ✱

Swipe Cards

Tinder-style swipe-to-dismiss card deck.

Swipe me
And me
Keep going
Last one
Drag a card off the edge to dismiss it.
M-4
Gesture ✱

Pull To Refresh

Elastic drag-down refresh with a spinner.

PULL DOWN Drag from the top to refresh the feed.
M-5
Touch ✱

Touch Ripple

Material-style ripple at the exact touch point.

TAP
ANYWHERE
A ripple blooms from the exact point you touch.
M-6
Haptic ✱

Haptic Buttons

Vibration API feedback on tap.

Each button requests a haptic pattern — and pulses visually.
M-7
Gesture ✱

Bottom Sheet

Drag-up bottom sheet with snap points.

SHEET
Details

Drag the handle up and down — the sheet snaps to closed, half, and open positions.

A draggable bottom sheet with three snap points.
M-8
Gesture ✱

Pinch Zoom

Two-finger pinch-scale on an image.

PINCH
Pinch with two fingers to zoom · double-tap to reset.
M-9
Touch ✱

Long Press Menu

Touch-hold opens a radial action menu.

HOLD
HERE
Press and hold — a radial action menu fans out.
M-10
Gesture ✱

Swipe Gallery

Horizontal snap carousel with touch momentum.

01
02
03
04
05
Swipe sideways — slides snap with native touch momentum.
M-11
Gesture ✱

Swipe Tabs

Swipe left or right between tab panels.

Today

Three tasks due. One review pending.

Week

A lighter week — two deadlines on Thursday.

Month

The release lands at the end of the month.

Swipe the panel left or right — or tap a tab.
M-12
Touch ✱

Touch Trail

A glowing trail follows the finger.

DRAG
A FINGER A glowing trail chases your touch across the panel.
M-13
Touch ✱

Double Tap Like

Double-tap spawns a burst heart.

DOUBLE-TAP 0 likes
Double-tap the image — a heart bursts at the point.
M-14
Gesture ✱

Drag To Reorder

Long-press then drag list items to reorder.

  • ⋮⋮ Inbox
  • ⋮⋮ Drafts
  • ⋮⋮ Sent
  • ⋮⋮ Archive
  • ⋮⋮ Trash
Press and hold a row, then drag to reorder.
M-15
Sensor ✱

Gyro Card

A card tilts with device orientation.

Member GYRO
CARD Tilt the phone — the card follows in 3D.
The card reacts to the gyroscope.
M-16
Gesture ✱

Two Finger Rotate

Two-finger rotate gesture on an element.

ROTATE
Place two fingers and twist — the panel rotates with you.
M-17
Gesture ✱

Edge Swipe Nav

Swipe from the screen edge to open nav.

SWIPE
FROM EDGE
Swipe in from the left edge — or tap Menu — to open nav.
M-18
Gesture ✱

Scroll Snap Stories

Instagram-stories vertical snap viewer.

Behind the build
The new release
On set today
Coming soon
Tap the right side to advance · swipe up for the next.
M-19
Touch ✱

Thumb Zone Nav

A nav arc positioned in the thumb-reach zone.

THUMB
ZONE
A nav arc placed where the thumb naturally reaches.
M-20
Gesture ✱

Fling Physics List

Flick-to-scroll list with momentum and friction.

Row 01
Row 02
Row 03
Row 04
Row 05
Row 06
Row 07
Row 08
Row 09
Row 10
Row 11
Row 12
Row 13
Row 14
Row 15
Row 16
Row 17
Row 18
Flick the list — it keeps gliding with momentum, then settles.
M-21
Touch ✱

Touch Hold Progress

Hold-to-confirm radial progress button.

Press and hold the button — release fires only at 100%.
M-22
Gesture ✱

Swipe To Delete

Swipe a row to reveal a delete action.

  • Delete
    Q3 budget draft
  • Delete
    Client onboarding
  • Delete
    Site redesign notes
  • Delete
    Press list
Swipe a row left to reveal delete · tap delete to remove.
M-23
Sensor ✱

Accelerometer Background

Background particles react to device motion.

MOTION
FIELD
Particles drift with how you hold and move the phone.
M-24
Sensor ✱

Compass Element

A heading dial driven by the device compass.

N E S W
0°
A compass dial driven by the device heading.
M-25
Touch ✱

Tap Burst

A particle burst at every tap location.

TAP
FOR SPARKS Every tap fires a particle burst at the point.
M-26
Gesture ✱

Drag Handle Sheet

A sheet with a grab handle and multi-snap drag.

DRAG

Adjust the height

Three snap stops

Grab the handle

Release to settle

Grab the handle and drag — snaps to peek, half, and full.
M-27
Gesture ✱

Momentum Carousel

Free-scroll carousel with inertia, no snap.

01
02
03
04
05
06
Flick sideways — the strip glides freely with inertia, no snap.
M-28
Touch ✱

Touch Paint

Finger-paint on a canvas surface.

Drag a finger to paint
M-29
Sensor ✱

Orientation Flip

Layout and content change on portrait or landscape.

PORTRAIT

Rotate the phone — the layout and content re-flow for the new orientation.

The card re-lays-out when the device rotates.
M-30
Haptic ✱

Vibrate On Scroll End

A haptic tick when a scroll snap completes.

01
02
03
04
Swipe between slides — each snap requests a haptic tick.
D

Desktop Only

20 elements
D-1
Pointer ✱

Custom Cursor

Replaced cursor dot with an eased trailing ring.

MOVE
INSIDE Dot snaps · ring eases · hidden on touch
D-2
Pointer ✱

Magnetic

Buttons pulled toward the cursor within a radius.

Hover near a button — it leans toward your cursor.

D-3
Pointer ✱

Hover Zoom

Image zoom with sibling rack-focus blur on hover.

Hover a tile — it zooms; siblings rack-focus to blur.

D-4
Pointer ✱

Cursor Spotlight

Radial mask follows the cursor, revealing a hidden layer.

Move the cursor — a spotlight uncovers the layer below.
D-5
Pointer ✱

WebGL Displace

WebGL displacement shader with a hover ripple.

DISPLACE Hover ripple · WebGL fragment shader
D-6
Pointer ✱

Tilt 3D

Layered CSS-3D object tilting toward the pointer.

3D
Layered planes tilt in CSS 3D toward the cursor.
D-7
Pointer ✱

Tilt Card

Pointer-tracked 3D tilt card with a moving glare.

Membership · 01

FOUNDER
PASS

Unlimited access. Priced for the first hundred only.

$49/mo
Hover the card — it tilts in 3D with a moving glare.
D-8
Pointer ✱

Cursor Trail Particles

Particle trail emitted along the cursor path.

MOVE
THE MOUSE A particle trail is emitted along the cursor path.
D-9
Pointer ✱

Hover Marquee Link

A link whose label scrolls as a marquee on hover.

Hover a link — the label runs as a marquee.
D-10
Pointer ✱

Magnetic Grid

A grid of cells that bend toward the cursor.

Cells pull toward the cursor within a radius.
D-11
Pointer ✱

Hover Video Preview

A thumbnail that plays a preview clip on hover.

►
Launch film
►
Title sequence
►
Brand reel
Hover a thumbnail — a preview clip plays inside it.
D-12
Pointer ✱

Cursor Distort Text

Text distorts and displaces near the cursor.

DISTORTION

Letters scale and lift as the cursor passes over them.
D-13
Pointer ✱

Hover 3D Stack

A stacked-card cluster fans out on hover.

Hover the stack — the cards fan out in 3D.
D-14
Pointer ✱

Mouse Parallax Scene

A layered scene shifts with cursor position.

SCENE
PARALLAX
SCENE
Move the cursor — the layers part with depth.
D-15
Pointer ✱

Hover Reveal Caption

An image caption slides in on hover.

Northwind Identity & web
Apex Labs Product design
Lumen Brand film
Hover a frame — the project caption slides up.
D-16
Pointer ✱

Cursor Area Light

A soft light follows the cursor over a dark panel.

AREA
LIGHT
A soft light pool follows the cursor across the panel.
D-17
Pointer ✱

Click Hold Charge

Hold the mouse button to charge a meter.

0%
Press and hold the button — release fires the charged action.
D-18
Pointer ✱

Hover Split Text

A headline splits and parts around the cursor.

PARTING

The headline parts to make room for the cursor.
D-19
Pointer ✱

Wheel Driven Gallery

The scroll wheel drives a horizontal gallery.

01
02
03
04
05
06
Scroll the wheel over the gallery — it moves horizontally.
D-20
Pointer ✱

Cursor Eye Tracking

An illustrated element's eyes track the cursor.

I SEE YOU
Move the cursor — the eyes follow it across the panel.