Play with this code
Click

0 clicks

friction: low
Double-click
Double-click
to toggle

Try it!

friction: low
Click and Hold

Hold to fill the bar

friction: medium
Drag
DRAG
ME

Drag me to the Drop box →

friction: high
Drop
Drop something
here
friction: high
Hover
Hover over me

Move your cursor over the card

friction: none
Scroll Wheel

Use your scroll wheel or trackpad to scroll through this text.

The web was one of the first interfaces where scrolling became a primary mode of navigation — the infinite canvas, revealed by the wheel.

Before the scroll wheel was common, users clicked scrollbar arrows one notch at a time.

Today, trackpad gestures, touchscreen swipes, and the scroll wheel all map to the same underlying browser scroll event.

The scroll wheel also controls zoom in many applications (Cmd/Ctrl + scroll).

You've reached the bottom!

friction: low
Click + Drag to Select

Click and drag across this text to highlight and select it. You can select a single word, an entire sentence, or any arbitrary run of characters across this passage.

Nothing selected

friction: medium
Link
friction: low
Select
friction: low
Text Input

0 / 80 characters

friction: high
Checkbox
friction: low
Radio Button
friction: low
Slider
50

Drag the thumb left or right

friction: low
Blink
BLINK

The <blink> tag was removed from browsers,
reproduced here with CSS animation.

friction: none
Marquee
★ Welcome to the Web!      The <marquee> element scrolls text horizontally.      A relic of the 1990s web.      Still renders in most browsers.      ★

The <marquee> element is deprecated
but still supported in most browsers.

friction: none
Custom Cursor
Move your cursor in here
friction: none
Traversable Space
0, 0
Alert

Triggers a blocking browser dialog

friction: high
Countdown Timer
1:00
friction: low
Count Up Timer
0:00
friction: low