v2 · continuous scroll

An interactive field guide to interface design.

Motion, scroll, micro-interactions, layout, data viz, and the UX laws behind them. Click everything.

0
Sections
0
Demos
0
UX laws
01

Foundations

Tokens, type, color, space, elevation and grid.

Type scale

Display
Headline
Subheadline
Body reads at a natural rhythm.
caption / mono

Colors · click to copy

accent
hover
sec
ok
warn
err
info
raised
surf
bg

Spacing

xs
sm
md
lg
xl

Elevation · hover

sm
md
lg

12 column grid

1
2
3
4
5
6
7
8
9
10
11
12

Theme toggle

02

States & feedback

Hover, focus, active, error, loading, empty.

Buttons

Form validation

Skeleton

Toasts

Loaders

Badges

Beta ✓ Active ⚠ Warn ✕ Error 14 new
03

Motion

Easing curves, stagger, tilt, magnetic, ripple, counter.

Easing race

linear
ease-out
ease-in-out
spring

Stagger

Magnetic button

3D tilt

Move me

Ripple

Counter · tap

0
04

Micro-interactions

The tiny confirmations that tell you the system heard you.

Toggle

Stepper

1

Like

Password strength

Type to begin

Segmented

Copy

Range · drag

042100

Star rating

Reaction pick

👍❤️🔥😱😂🤩
05

Scroll & reveal

Parallax, sticky pinning, horizontal snap, scroll-linked progress.

Parallax

Layers move at different rates

Sticky storytelling

Left pins while right scrolls.

01

Hook

Set the promise.

02

Proof

Numbers, logos, outcomes.

03

Mechanism

Show how it works.

04

Ask

One call to action.

01

Foundation

Tokens, grid, type.

02

Motion

Timing, easing.

03

Scroll

Reveal, parallax.

04

Data

Charts, sparks.

Scroll progress ring

0%

Word reveal

Good design is obvious. Great design is transparent. The best design feels inevitable.

06

Depth & glass

Blur, elevation, spotlight.

Frosted glass

Signed in
sean@tippen

Layer stack · hover

Cursor spotlight

Move over me
07

Text effects

Type as material.

Typewriter

Hello, I am a typewriter.

Wave

Scramble · click

CLICK TO DECODE

Gradient shine

PRESTIGE

Line reveal

Designed in public.

Weight slider · drag

Inter
400
08

Layout & creative

Bento, masonry, marquee, drag-reorder.

Bento grid

OverviewFeature one
14%Growth
LiveUptime
Detail
3.2kUsers
HighlightCall to action

Masonry

1
2
3
4
5
6
7
8
9

Drag to reorder

⋮⋮First item
⋮⋮Second item
⋮⋮Third item
⋮⋮Fourth item

Marquee

Figma
Notion
Linear
Vercel
Stripe
Framer
Arc
Raycast
Figma
Notion
Linear
Vercel
Stripe
Framer
Arc
Raycast
09

Data viz

Bars, donut, KPIs, sparklines.

Bar chart

MonTueWedThuFriSatSun

Donut

82%
Retention

KPI tiles

Users
12.4k
↑ 14%
Revenue
482k
↑ 8%
Churn
2.1%
↓ 0.3%
NPS
68
↑ 6

Sparklines

Sessions+24%
Signups+52%
Bounce−12%
10

Showcase

Blocks every pitch deck and sponsorship proposal reuses.

0Audience reach
0Engagement
0Weekly sessions
0NPS score
The scroll rhythm was so smooth our sponsors stayed on every slide. Two renewals closed by end of call.
JR
Jordan Rivera
VP Partnerships, Altus Sport
Cleanest interface work I have seen in the region. Every detail feels considered.
MK
Maya Koenig
Head of Brand, Fieldline
BEFORE · tabs & flat cards
AFTER · continuous scroll & motion

Roadmap

Q4 2025

Tokens shipped

OKLCH token system linked to every project.

Q1 2026

Playground v1

First tabbed version.

Apr 2026

v2 continuous scroll

Reveal system, data viz, showcase blocks.

Next

Code snippet viewer

Reveal HTML and CSS for each demo inline.

Features

FeatureBasicProEnt
Tokens
Scroll effects
Data viz
Custom domain
Dedicated support
SSO
Basic
Free
  • Core components
  • Both themes
  • Community support
Enterprise
Talk to us
  • Everything in Pro
  • SSO & audit log
  • Dedicated support
  • Custom components
Is this a framework or a reference?
A reference. Every demo is single-file HTML with inline CSS and vanilla JS. Copy what you need.
How are tokens shared?
Every project links design.seantippen.com/tokens.css. Update once, every downstream project picks it up.
Accessibility?
Respects prefers-reduced-motion. Focus rings stay visible. Pairings hit WCAG AA.
Good for sponsorship decks?
Yes. The showcase blocks map directly to what a deck needs.

Click everything.

If it moves, it's interactive.

Back to top Design system
11

UX laws

Research-backed principles.

Fitts's Law

Bigger, closer targets are faster

Click each button
Hicks's Law

More choices, longer decisions

A
B
C
3 choices
A
B
C
D
E
F
G
7 choices
Miller's Law

7 ± 2

41929183746502
41929183746502
Doherty

Under 400ms feels live

Aesthetic-Usability

Pretty feels easier

A
0
B
0
Serial Position

First & last get remembered

AppleOrangeBananaGrapeMangoPeachPearKiwiPlum
Peak-End

Memory = peak + end

peak & end dominate recall
Jakob's Law

Users expect familiarity

☰ MenuHome🔍
← Back
Sign in
Goal-Gradient

Motivation spikes near finish

Step 4 of 580%