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

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.

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.

Press Me!

5. "Deep" or Force Press

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

Press hard to toggle popover

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