Layered icon

An app-style icon built in depth layers that floats over the page.

Layered icon is part of Pro.

Get Pro to try it live and copy its code, along with every other element in the library.

Text revealA paragraph that arrives a word (or letter, or line) at a time, each unit blurring or rising in on a stagger. Press it, or hit Enter, to play again.
Image compareDrag the divider to wipe between two pictures. Fling it and it coasts on, bouncing softly off the edges.
TiltThe card sinks under the pointer instead of rising to meet it. It leans away from the cursor, the near edge dips, light pools on the far side and the shadow tightens.
SeekA round search button that leans toward the pointer, then opens into a field. The pill's width is a spring and the placeholder fades in as the edge passes the halfway mark.
Step playerPress play and each step bar fills left to right, then hands over to the next dot. Click a dot while paused to jump.
Play · pauseThe pause bars fold into a play triangle point by point, leaning into the turn. corner points of each half, as [x, y] pairs: [pause shape, play shape]