Published
iPadOS cursor on the web
just because it’s fun!
Are Apple good at designing UIs (User Interfaces)? Should a touch device only be a touch device? Or is it time for more precision and control that doesn’t cost over £100 and isn’t a pencil?
There’s a lot that can be said about UI (User Interface) in touch devices, design and innovation, and how Apple fits into all of that. Their new cursor is an interesting example: new, different, interesting... useful?
The iPadOS Cursor (video) was released recently in iPadOS 13.4, allowing mouse and trackpad support for iPads. It hovers above everything, snaps to certain UI elements, and fades away when not in use.
From https://support.apple.com/en-us/HT211008:
When the cursor hovers over various parts of iPadOS, they also change appearance and use subtle animation to help you navigate. For example, toolbar buttons in apps change color, and app icons on the Home screen get bigger...
The cursor disappears after a few seconds of inactivity. To make it appear again, just move the mouse or touch the trackpad.*
I think it looks kinda cool! Honestly though, I have no idea if it will be useful 💁♂️
I’d rather not try to answer such lofty questions as were posed above 😅 So, let’s have some useless fun by trying to emulate the iPadOS Cursor in the browser! You can turn it on in my Playground** and at the bottom of this post is an example gif recorded on the iPadOS cursor testbed page.
Please do have a read of the code if it interests you – I certainly haven’t taken care to make it nice... yet! I’ll write up an explanation of it soon, and then also go through a refactor and blog that too.
* I’ve guessed my own fade-away timeout, I don’t care about matching Apple, because we’re all about being useless here, right??
** the on/off value persists in localStorage, named hb_ipad_cursor
P.S. it would be cool to support the I-beam cursor over text too! That would mean detecting when the cursor is over a text node... maybe there’s a DOM method for this? I found document.elementFromPoint(point) (docs) but I haven’t tested if that will return a TextNode 🤔
From the same Apple information page as above:
As it moves across different elements on the screen, the cursor changes shape. For example, it turns into an I-beam over text, indicating that you can insert the cursor into a text document or highlight and copy words from a webpage