Components 34
Interface pieces with the motion built in: menus, docks, carousels, sliders, toasts and confirms.
Every Components effect
- CarouselSlides that share one frame and change by slide, fade, scale, flip, stack or depth, with swipes, dots and an autoplay timer that waits while you read.Components · 3.0 KB gzip
- Spotlight cardA soft light follows the pointer across a card.Components · 0.6 KB gzip
- DockA row of icons that swell toward the pointer and part to make room, with labels that rise above them, launch bounces and badges.Components · 2.5 KB gzip
- Tilt cardA card leans toward the pointer in 3D, with a soft glare.Components · 1.0 KB gzip
- MarqueeA row of items scrolls sideways without end and speeds up while the page scrolls.Components · 0.8 KB gzip
- StepperA flow in steps: numbered marks joined by lines that fill, a ring that glides to the current step and panels that slide in from the side they come from.Components · 2.8 KB gzip
- ToastShort messages that stack in a corner, burn a thin fuse for the time they have left, spread out under the pointer and swipe away.Components · 3.0 KB gzip
- Rise navLinks in a pill bar: under the pointer a fill rises through a link while its label rolls over, a dot glides under the current page, and narrow screens get a menu button.Components · 2.2 KB gzip
- Blob navA nav bar whose active pill breaks into drops of goo that flow over to the link you pick.Components · 1.9 KB gzip
- Pop selectA select chip whose list pops open from its corner while the highlight glides from row to row; it drives the real select underneath.Components · 2.8 KB gzip
- Stretch switchA switch whose thumb stretches with its speed and squashes against the end it hits; flick it, drag it or press Space.Components · 1.6 KB gzip
- Burst menuA round menu button that bursts big pill links over its box, each popping in a beat after the last with its own tilt and hover color.Components · 1.8 KB gzip
- Cascade menuA menu button that sweeps colored layers and then a panel in from the side, its numbered links rising one after another.Components · 2.1 KB gzip
- Card drawerA floating nav bar that springs open into a row of cards, each a group of links, revealed by a clip that only repaints.Components · 1.9 KB gzip
- Marquee menuBig menu rows: under the pointer a band slides in from the edge it entered by, carrying a running marquee of the item's name and picture.Components · 1.3 KB gzip
- MasonryPictures in columns of their own heights that rise into place the first time they come into view, glide to new places when the columns change and open full size.Components · 1.6 KB gzip
- Arc galleryPicture cards on the rim of a wide wheel that you drag, flick, scroll sideways or step with the arrow keys; the front one opens full size.Components · 2.0 KB gzip
- Card deckA 3D stack of cards set up and back from one another; on a timer, a fling or Next the front card drops away and slides in at the back.Components · 2.4 KB gzip
- Doc folderA folder whose papers peek out under the pointer and fan out above it when it opens; each paper is a link you can pick.Components · 1.7 KB gzip
- Tick sliderA range slider drawn as a row of fine bars with no thumb; dragging fast raises a wake of taller bars around the handle that settles behind it.Components · 1.2 KB gzip
- Ring dialA dial of fine ticks you turn by angle: the value arc fills behind a bright head that drags a comet tail when you spin it fast.Components · 1.9 KB gzip
- Slide confirmA slide-to-confirm handle: drag it to the end, it spins while the action runs and unfurls into a done pill; Enter or Space confirms from the keyboard.Components · 1.8 KB gzip
- Wheel pickerA curved picker that spins with a drag, the scroll wheel or the arrow keys, tilting the options away from the chosen one; it drives the real select underneath.Components · 2.0 KB gzip
- Tick checkA checkbox row where one spring fills the box, draws the tick and strikes through the label.Components · 1.2 KB gzip
- Swell radioA radio group of chips where the chosen one swells with a wobble and nudges its neighbors outward.Components · 1.1 KB gzip
- SegmentedA segmented control whose thumb stretches across the gap as it travels and squashes into place.Components · 1.2 KB gzip
- Notify toggleA pill toggle: pressing it rings the bell, crossfades the label and floods the pill with color.Components · 1.1 KB gzip
- Hold confirmA button you press and hold to confirm: a fill sweeps across while you hold, drains back if you let go early and fires the action when it is full.Components · 1.2 KB gzip
- Fuse undoAn action button whose done state carries an Undo on a burning fuse; the action commits only when the fuse runs out.Components · 1.5 KB gzip
- Like heartA like button whose heart squeezes to a dot, flips color and bursts back while the count rolls over to the next number.Components · 1.4 KB gzip
- Code inputA one-time code field drawn as slots: digits spring into place as you type or paste, and the slots flash when the code is complete.Components · 1.4 KB gzip
- Frost iconsIcon tiles of frosted glass over a tilted color plate that swings up and lights the glass when you point at or focus them.Components · 1.3 KB gzip
- Tip groupTooltips for a row of icon buttons: the first one waits a beat, then its neighbors open at once while the group is warm, the tip gliding from one to the next.Components · 1.3 KB gzip
- Scrub numberA number field becomes a chip you drag sideways to change, with rubber-band ends and a fill for where the value sits; click it to type.Components · 1.9 KB gzip
No effect here matches. Search every effect.