Hey 👋. Ever wish you could write Bootstrap markup in HTML emails? Well now you can with Bootstrap Email, check it out 💌

Pressure.js

current v2.1.1 | 2.5kB gzip

Pressure is a JavaScript library for handling Force Touch, 3D Touch, and Pointer Pressure on the web, bundled under one library with a simple API that makes working with them painless.

Click the Circles Above to Test Pressure
Your device does not support force touch or 3d touch so Pressure.js has fallen back to the polyfill.

Features

All Devices

Devices implement force differently from one another. Pressure has a simple to use API that works across all devices.

Support Testing

It can be hard to know if a user is using a force sensitive device. With Pressure, you can determine supported and upsupported devices.

Multitouch Support

Pressure will handle multiple fingers on the screen pushing with different amounts of force on different elements simultaneously.

Polyfill

Don't have a force sensitive device? Not a problem, use the polyfill to use time as a replacement for force.

Device Support

Future devices and browsers that support pressure will be added when they are released.
Microsoft Surface, Wacom Tablets (Device that supports pointer events)
Chrome, Opera, IE, Edge (Can I use Pointer Events)
iPhone 6s, iPhone 6s Plus, iPhone 7, iPhone 7 Plus
Safari, Chrome, anything using WKWebView
MacBook 2015 & MacBook Pro 2015
Safari
Magic Trackpad 2
Safari
iPad Pro with Apple Pencil
Safari, Chrome, anything using WKWebView

Examples

Note: This page is using the "polyfill" option on most of the Pressure elements to give support for browsers that do not support Force or 3D touch. The "polyfill" option is enabled by default but can be useful in lots of situations where time is an ok replacement for force. For Example: The Instagram app uses 3D touch to allow users to quick look images, however if you do not have 3D touch support, you can simply hold down on the image for a second and it will have the same effect.
1. Pressure Change

The best part about Pressure is that is uses a single API that works on both Force Touch and 3D Touch. (note: Apple currently only has support for desktop and mobile safari, but luckily with pressure you can test for that)

Targets All

0

Targets ONLY Force Touch (mouse)

0

Targets ONLY 3D Touch (touch)

0

Targets ONLY Pointer Events (pointer)

0
2. Unblur Photo

The harder you press on the image the less blurry it will become.

3. Text Size

The harder you press on the text, the bigger it gets. Then when you let go it sticks at that size till the next time you press. This could be useful for accessibility on online articles or blogs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4. Rotating Square

The harder you press on the button, the farther the image will spin. Try pressing with variable amounts of pressure.

5. "Deep" or Force Press

Press hard on the button, a "Deep" or Force press will occur and launch a bootstrap popover.

If you are not using one of the devices / browsers listed above, here is a gif to show it in action.