Components

Live countdown with rolling digits, inline or as blocks that brighten through the final ten seconds. At zero it can celebrate and show your result, or quietly fade if time ran out.

Endlessly scrolling strip of content with soft faded edges. Press and hold to ease it gently to a stop so you can read an item; let go and it picks back up.

Formatted number field for phone, card, expiry, date, currency or custom patterns. It formats as you type, shows the card network, refuses keys it can’t take and checks the value when you’re done.

Chat bubbles in six styles with grouping, swipe-to-reply and long-press actions. Drag the thread to reveal times, hold a message to react, and watch read ticks update in place.

In-app notification banner that glows in from the top of the screen and fades away on its own. New banners stack neatly; tap to open them as a list, swipe one away, or reply right from it.

Connection banner that appears when you go offline, counts down to the next retry and shows waiting changes. Tap it to retry now, and it confirms with a check once you’re back.

Two-thumb slider for picking a range, with smooth thumbs and a tick you can feel at each step. A chart behind the track lights up inside your range, and the labels merge when they meet.

Star rating with half-star precision where stars light up under your finger as you drag. A word below changes from Awful to Great as you go, and taps and screen readers work too.

Odometer-style number where only the digits that changed roll, up when the value rises and down when it falls, flashing green or red. An arrow shows the trend and it keeps up with live feeds.

Award medallion that shows progress while locked and its tier metal once earned. Unlocking closes the ring, fills the face and pops with a glow in its colour and a haptic. Tile, row and medal layouts.

Docked bottom bar for detail screens with a price or summary and one main action. Its optional confirm button turns into a check that shows the result in place. Solid or glass styles.

One to three concentric goal rings that fill in a quick cascade and lap again past 100%. Closing a ring makes it glow brightly before settling, as a small reward. Room in the centre for a figure.

Add button that becomes its own result: busy dots while adding, a check and “In bag”, then a quantity stepper with a trash icon at one. A compact version stretches open over product photos.

Saved address card with a Home or Work label, default badge, contact details and an optional street-map tile. Picking one highlights the card and drops its pin on the map. Includes an add-new tile.

Day-grouped agenda that follows the clock: past events fade back, the event in progress is highlighted as it runs, and a thin line marks the present moment and moves along with it.

Money keypad where each key glows under your finger and keys it can’t accept flicker once. Pairs with an amount display that lights up each new digit. Types decimals or fills cents from the right.

Hand-drawn icon set that rests still until you set it moving with springs, draw-ons and morphs. A short trace of light runs along each icon as it moves. Looping is kept for icons tied to a live state.

Voice-note bubble with a waveform that lights up as it plays. Has a timer, speed chip, scrub to seek, an unplayed dot and an optional word-by-word transcript; your app plays the sound.

Voice-note recorder controls: hold the mic for a live timer, slide left to throw the take away, or slide up to lock hands-free with a level meter. Your app does the recording.

Hero balance with even-width digits and smaller cents. When money arrives, only the changed digits roll and the amount glows briefly. Tap to hide it behind a row of dots.

Ranked rows with a bar sized to each value, for top categories, app usage, votes and standings. Bars grow in one after another, and rows re-rank smoothly when values change.

Self-contained Code 128 or EAN-13 barcode that fits any width and stays dark-on-white in both themes for reliable scanning. Bars draw in on open, and used codes get a redeemed stamp.

Comparison slider over two images or views. The divider follows your finger and glows as you drag, glides to wherever you tap, and offers a press-and-hold mode for quick comparing.

Face or fingerprint lock that keeps your app dimmed until it’s unlocked. A missed scan flickers once, repeated misses bring up a passcode keypad, and unlocking lights the app back up.

Floating action button that blooms into a column of labelled actions, nearest first. Drag across them to highlight one, and your pick stays lit for a moment before the menu closes.

Floating bottom sheet that settles at the height your flick picks and keeps clear of the keyboard. At full height it meets the screen edges as the screen behind recedes, and lists hand the drag back.

Month calendar with dots under each day that show how busy it is. Swipe between months, fold it into a single week, pick a day to swap the agenda below, and tap Today to jump back.

Horizontal week strip with a selection disc that glides between days. Each day can show a progress ring that lights up once complete. Swipe or tap arrows to change weeks, with marked-date dots.

Snap carousel whose page dots stretch as you swipe, while side pages fade back so each new one feels like it’s arriving. Supports pinch and double-tap zoom.

Cart line with thumbnail, options, quantity stepper and line total. Removing an item offers a quick Undo before the row closes, and saving for later lifts the item away.

Bar chart and progress ring that animate with your data. Drag across the bars to read each value while the others dim, with stacked bars, values below zero, a goal line and smooth range switches.

Message bar with attachments, a field that grows line by line, emoji and camera buttons, and a mic that turns into a send button. Sent text lifts out of the field as a new bubble.

Inbox conversation row where unread chats are highlighted and new messages update the preview in place. Covers mentions, muted, pinned, drafts, typing, read receipts and an edit mode.

Selectable cards for plans, goals, delivery speeds and interests, with single or multiple selection and an optional limit. Picks show a ring and check; going over the limit nudges back.

Feature tour where one spotlight glides from feature to feature, reshaping as it goes, with a tip card alongside. Tap inside the light to try the real control; off-screen features scroll into view.

Large-title header that shrinks its title into the navigation bar as you scroll, while the bar’s bottom edge appears as content passes beneath it. Can reveal a search field in the compact bar.

Colour picker with a shade board, hue and opacity sliders, hex entry and preset swatches. The cursor shows the picked colour live, and a compact mode tucks it all behind a swatch row.

Searchable select that opens a list of options and highlights the letters you type in each one. It forgives typos and initials, shows recent picks before you type, and can add a new option.

Search launcher for actions and destinations with forgiving matching, highlighted letters and keyboard shortcuts. Results refresh as you type, and the chosen row confirms before the panel closes.

Nested comment thread with likes, replies and collapsible branches. A new comment can open into place with a brief highlight, and folding a branch tucks away all of its replies at once.

Celebration burst of soft, accent-coloured specks of light that spill from whatever was just earned and fade away, plus a gentle, pausable rain mode for ambient moments.

Privacy-first consent sheet for cookies, tracking and data sharing. Optional categories start off, Reject all sits as an equal beside Accept all, and per-category toggles let people choose what to allow.

Long-press menu that lifts the pressed item above a dimmed backdrop and opens a list of actions below or above it. Your choice is applied to the item as it settles back into place.

Searchable country list with flags and dial codes that opens from a field or settings row, or sits inline. Picking a country flies its flag into the field. Use the built-in list or bring your own.

Promo and gift code field that turns into a perforated ticket showing your saving when the code works, and explains why when it doesn’t. The ticket also works on its own for coupon wallets.

Large amount entry with a built-in number keypad and currency badge. Digits appear in place as you type, and an amount over the available balance turns red straight away.

Booking-style range calendar, inline or in a sheet. Tap check-in and check-out or hold and drag across your stay, adjust either end, and watch the night count update; sold-out days stay out of reach.

One day as a vertical hour grid, with events sized by duration and overlaps split into columns. Hold and drag to add, move or resize events, with an all-day row and a line that follows the clock.

Bottom tab bar where a soft glow glides to the selected tab. Choose a floating glass pill, a full-width bar or a joined strip, with badges and an optional action button.

Donut or half-donut chart whose slices sweep in clockwise. Tap or drag around the ring to pull a slice out and show its name, value and share in the centre, with an optional legend.

Driver or courier card with licence plate, a drawn car in its real colour, photo, rating, ride PIN and message or call buttons. On arrival it highlights the plate and tells riders what to look for.

Spinning wheel picker on a real 3D drum, where rows tilt away as they turn and brighten in the centre band. Fling it to settle on a row, loop hours and minutes, and link columns for dates and times.

Emoji panel with search, category tabs, a recently used row and long-press skin tones. Picking an emoji can lift it from the grid and fly it to where it’s going.

Calendar event as a card, list row or day-view block, with time, place, guests, video call and RSVP. The card fills a progress band while the event runs, and Join lights up just before a call.

Icon button that grows into a labelled pill. In toggle mode it fills with colour, shows its label briefly, then settles into a filled circle. Optional glass style for use over images.

Level fader for volume, mixers and lights: a mixing-desk strip that can show a scale and live level meter, or a fill-style tile. Optional set points click with a gentle haptic.

Paywall wrapper that shows premium content dimmed under a small unlock callout. Tap it and the paywall grows out of the lock; after purchase it shrinks back and the content brightens, row by row.

Attachment field with photo, camera and document buttons for your app’s pickers, showing uploads as a list or grid. Each file shows its progress, ticks when done and flags failures.

Horizontal filter row with a Filters button and count badge, toggle chips, and dropdown chips that open a sheet. Sheets show a live result count, and a Clear chip appears once a filter is on.

Follow button that confirms with a check, then reshapes into a quieter Following state. Unfollowing takes two taps, and it handles requested, follow-back and failed follows gracefully.

Arc meter in semicircle or speedometer style, with a fill, coloured bands or a needle and ticks. Each band lights up as the value sweeps into it, and its label updates as it crosses.

Group of glass buttons whose segments melt into one shape on newer iOS and the web. The selected segment lights up from its top edge while the previous one fades.

Glass tab bar whose selection blob stretches and reshapes as it glides between tabs, lighting each tab as it passes and flaring gently when it lands.

Glass floating button that opens a column or row of glass action bubbles. The chosen action lights briefly while the others fade and pull back into the button.

Interactive glass pane that responds to touch: light gathers under your finger and, on the web, the glass bends while you hold, then settles on release. Includes a frost control that works everywhere.

Draggable droplet of glass that follows your finger, squashes and stretches with speed and catches light on its rim. Let go and it springs home, or fling it to dock in the nearest corner.

Glass search button that stretches into a full search field when tapped, then pours back into a small disc when you close it.

Glass card with a glowing top edge that you pull by its handle. Pull far enough and it can open into a detail view or tuck down out of the way; let go early and it slides back.

Bold call-to-action button in the accent colour, lit softly from above. While busy it shows loading dots in place of the label, and on success it narrows to a check.

Headline written as a sentence you can put things inside: a quiet second tone, one keyword in a highlight box, an icon or character in the line and live stats with their glyphs, plus a giant faded word behind the hero. Words switch on in reading order, resolving from a soft blur on the web.

Activity heatmap in weekly columns or as a calendar month, in four shades of one colour that fill in as a wave. Drag across it to read each day’s value, with a gentle tap per day.

Photo crop screen where you pan and pinch under a fixed frame that never shows a gap. Straighten, rotate, flip and switch aspect ratios, with a round crop for profile photos.

Full-screen photo viewer that pinches around your fingers, pans with momentum, pages past a zoomed edge and swipes down to close. Photos grow out of the tile you tapped and fly back into the one showing.

Task card for boards with status, priority, labels, assignees, due date and checklist progress. Marking it done fills the ring and draws a check, and can fold the card out of its column.

Bar that rides on top of the keyboard with previous and next field arrows, a step indicator for each field, a custom middle slot and a Done button.

Ranked list with an optional top-three podium, promotion and demotion lines and a pinned “you” row. When you overtake someone, your row rises as theirs steps down.

Level and XP progress as a bar, ring or segments beside a level medallion. Levelling up is a real moment: the bar fills, the medallion pops, and leftover XP refills the new level.

Photo gallery where any tapped photo grows out of its exact tile into a full-screen viewer, then flies back into the tile of whichever photo is showing when you let it go.

Live line and area chart that draws itself in and reshapes smoothly between ranges. Drag along the line and the header rolls to that point, or use two fingers to measure the change between two.

Place card with an illustrated street map, route, ETA and pin, with no maps SDK needed. Switching travel mode redraws the route, and arriving glides your dot to the pin.

“Where to?” search with pickup and destination fields, saved places, recents and live suggestions with the match in bold. Picking a place fills its field, and a line joins both ends once set.

Bottom panel that stays on screen over a map, resting at peek, half and full heights. A flick snaps it to the right stop, and the map dims as the panel rises.

Calm vector city map with no maps SDK: pickup, dropoff and price pins, a route that draws itself, and a car that drives along it. Nearby cars appear and fade out as they come and go.

Safe markdown renderer for headings, lists, quotes, tables and code blocks with a copy button. In streaming mode, new words fade in smoothly as an AI reply is written.

Audio player controls with a play button that morphs into pause, skip buttons and toggle chips for modes like shuffle or sleep, plus a line or waveform scrubber that follows your finger.

In-app photo and video grid for picking one item or several. Each pick flies into a tray with a numbered badge, and reaching the limit gives a gentle warning.

Video and photo thumbnail with duration, continue-watching progress, Live and New badges, and a selection check. Pairs with a zoom transition to grow straight into the player.

Text field with @mention and #tag autocomplete. Suggestions appear as you type, and picking one drops it into your text as a coloured tag.

Segmented bar for storage, budgets and allocation, with a legend. Segments fill in turn and glide to new sizes, and anything past the limit turns red.

Now-playing bar you drag up into the full player: the artwork grows out of its thumbnail as one piece, the screen behind recedes with your finger, and a sideways swipe slides in the next track.

Mood slider with a little character that reacts as you drag: sleepy and squashed at the low end, tall and bright at the top. It snaps to the nearest mood when you let go.

Multi-step modal that smoothly resizes to fit each page as content swaps in place. It grows out of the button that opened it, confirms with a check, then closes back into it.

Multi-select field with a searchable bottom-sheet list. Drag down the checkboxes to pick or clear many rows at once, select all results, set a limit, and see your choices appear as chips.

Side navigation rail for tablets and foldables that expands into a labelled sidebar. As it widens, the selected pill stretches into a full row and labels appear.

Activity row with avatars, a type badge, a sentence that bolds the people, the time and a thumbnail or follow-back button. Unread rows stand out and quietly settle once read.

Swipeable first-run pages with Skip, page dots or a progress bar, and a Continue button that becomes Get started. Each page’s artwork brightens once you land on it.

Order history and tracking card with a status pill, item thumbnails and a step bar that fills as the order moves along. Once delivered, the bar turns into a proof-of-delivery line.

Checkout totals with subtotal, discount, shipping and tax, and a big total that counts to each new value. Applied promo codes show as removable chips.

One-time code input with a focus ring that glides from box to box. Typing, paste and autofill all work, a wrong code flickers and clears, a right one turns into a check, and a resend timer is built in.

Hero photo for detail pages that stretches when you pull down and drifts away as you scroll, condensing into a compact bar. Solid, glass or colour-tinted bar styles.

Wallet-style pass for tickets, boarding passes and memberships, with a header, key fields, a perforated edge and a code. It tilts under your finger and can flip to show its back.

Wallet and card pay buttons with the official marks in their own colours. While paying, the label turns into loading dots and then a check, and the button never changes size.

Physical or virtual bank card that flips over and tilts under your finger. A long press can reveal the full number and CVV, freezing drains it to grey, and unfreezing brings the colour back.

Saved payment method as a list row, card tile or checkout row with official network and wallet marks. Expired cards can’t be picked, and an add-new row is included.

Subscription paywall sheet that can grow out of the button that opened it, with plan cards and a monthly price that rolls as you switch. A clear trial timeline shows when you’ll be reminded and charged.

Explainer screen shown before a system permission prompt, featuring a dimmed picture of what you’re asking for. Allowing brings it to life; a denial shows clear steps to turn it on in Settings.

Phone number field with a country flag and dial code that opens a country picker. The number formats as you type, and a check appears once it’s complete.

Numeric PIN keypad with a row of dots that light up as you type. A wrong code flickers and clears, the right one turns into a check, with a face or fingerprint key and a lockout timer.

Poll whose options turn into result bars once you vote, with percentages that roll in and the leader highlighted. Supports multiple choice and a quiz mode with a right answer.

Feed post with author row, photo, carousel, video or link preview, and a caption that expands in place. Double-tap the photo and a heart appears there, then travels into the like button.

Storefront price with smaller cents, a struck-through original price, sale badge and unit or monthly pricing. When the price changes, only the digits that moved roll to their new values.

Plan picker for paywalls and upgrades, as selectable rows, a feature comparison or swipeable cards. The chosen plan fills with colour, and prices roll smoothly when you switch billing period.

Product card in grid, list-row and hero layouts. Adding to the bag can send a small copy of the photo flying to your basket, quick-add turns into a quantity stepper, and saving fills the heart.

Swipeable photo gallery for product and listing pages, with thumbnails, page dots that stretch with your finger and double-tap zoom. Colour swatches jump straight to the matching photos.

Profile header with avatar, optional cover, verified name, bio, stats and action buttons. Once followed, a coloured ring draws around the avatar and stays, and stat counts roll to new numbers.

Photo or colour promo card with a title, subtitle and action pill. Once your app marks it done, the pill turns into its result in place, with a check and a new label that stays.

AI prompt composer with a field that grows as you type and a button that turns from mic to send to stop. Attach photos and files, switch modes, and an empty send is gently refused.

Real-estate and rental listing card with swipeable photos, price, beds, baths and area. Saving fills the heart and can leave a small marker, so saved homes stand out in the list.

Scrolling list with pull-to-refresh. A ring fills as you pull and lights up once you’ve pulled far enough, keeps turning while new content loads, then settles as the list returns.

Crisp QR code that stays sharp at any size and needs no extra library. It appears from the centre outward, can hold a logo in the middle, and fades the new code in when the value changes.

Row of labelled icon buttons for actions like send, top up or scan. Pressing a disc brightens it, and confirmable actions show a check in place before settling back.

Suggested reply chips that sit above a message composer. Tapping one lights it and can fly it into the conversation as your message, while the other suggestions fade away.

Reviews summary with the average score, partial stars and a 5-to-1 breakdown of bars. Tap a bar to filter reviews by that rating; per-category scores and tap-to-rate are included.

Emoji reaction bar that opens on long press right where you touch. Slide across to grow each emoji, let go to pick it, and watch it fly into a chip with a live count. Tap yours to take it back.

Drag-to-reorder list: hold a row or its handle to lift it, and the others glide aside. It scrolls near the edges, can group one row into another, and works with keyboards and screen readers.

“Resend code” countdown for verification screens. As a link, ring or button that fills as time runs down and confirms with a check. It turns tappable at zero and can lock after too many tries.

Customer review card with avatar, date, star rating or score, photos and a verified badge. Long reviews expand in place, the helpful button counts up, and seller replies sit underneath.

Two-step review card that starts with a quick star or yes/no rating. Happy customers are invited to review you in the store, while lower scores open a short feedback form, then a calm thank-you.

Ride and delivery tier picker showing vehicle, seats, arrival time and price. The chosen vehicle rolls forward, and once requested it drives off while its row reads “Finding your driver”.

Save, bookmark and favourite toggle as an icon or pill. Saving fills the icon with colour from the inside and changes Save to Saved; unsaving drains it back out.

Camera viewfinder overlay with a cutout sized for QR codes, documents, ID cards or barcodes. A soft line of light glows in QR and barcode frames, and the corners close into a green outline on a match.

Sticky tabs that track the sections of one long page. The indicator follows as you scroll and tapping a tab jumps to its section, in underline, pill, numbered or side-rail styles.

Seat picker for cinemas, cabins and arenas, built from your own seating data. Picked seats light up and settle, and trying to pick more than the limit briefly flickers the seat.

A–Z scrubber for long alphabetical lists like contacts. Drag along the rail to jump between sections, with a letter bubble or magnified letters following your finger.

Share button that opens the device share sheet, with a copy-link fallback on the web. After sharing, the arrow lifts away and a check takes its place; comes as a button, card row or icon.

In-app share panel with an item preview, copy link, people and share options. Pick people, add a note and send; the button confirms who it went to before the panel closes.

Camera shutter for photo, video and hold-to-record. It turns red while recording, shows a stop square when a tap will end it, and fills a ring toward the time limit.

Side panel for tablets that grows out of the row you tapped or follows your finger in from the edge, as the screen behind shifts and dims. Drag its edge to choose one of three widths, or swipe it away.

Signature pad with smooth finger-drawn strokes, undo and clear. Signing replays your strokes in colour and adds a date stamp, and the signature exports as a crisp image.

Slide-to-confirm control for payments and other deliberate actions. The thumb follows your finger, shows progress while the action runs and ends with a check; a press-and-hold mode is included.

Appointment picker with a date strip over morning, afternoon and evening time slots. It shows which slots are filling up and who’s available, and offers a jump to the next open day.

Banner that invites website visitors to get your app, with icon, star rating and a button. An Install button can turn into Open with a check, and dismissing folds the banner neatly away.

“Continue with” buttons for popular sign-in providers, email, passkey and phone. In a group, the other options fade while one signs in, and the button can then show who you’re signed in as.

Small trend line with an end dot that draws itself in and tints up or down. New data reshapes the line smoothly, and it can follow your finger with a cursor so your app shows the value.

Launch screen that shows your mark while the app loads, then hands off smoothly to the first screen. Slow starts get a gentle breathing glow instead of a spinner.

Main action joined to a menu of alternatives. Used as a picker, choosing an option swaps the main label in place, and a finished state fuses both halves into one pill with a check.

KPI tile with a big figure, a trend delta and an optional sparkline. Changed digits roll into place, and beating a best or goal marks the moment with a “New best” label.

Button that shows its own progress and result. It draws a check on success and can settle on a short summary like “Order placed”, or flickers once if something goes wrong.

Step-by-step container for questionnaires and onboarding. Continue brings in the next step as the progress bar fills, and the line brightens in full once the last step is done.

Wizard step indicator where finishing a step closes its ring, draws a check and fills the line to the next marker. Also comes as compact page dots.

Stopwatch with a large, steady readout and start, stop, lap and reset. Each new lap lands at the top of the list, with the fastest and slowest laps clearly marked.

Segmented progress bar for stories that advances on its own. It pauses and resumes when your app says so, can take taps to jump between segments, and lets each segment run for its own length.

Full-screen stories that grow out of the avatar ring you tapped. They play on their own, a swipe turns to the next person on a cube, holding pauses, and swiping down flies the story back into its ring.

Avatar in an accent story ring when there’s something new, which sweeps down to a thin line once viewed. While posting, the ring fills with the upload’s progress.

Streak counter with a friendly flame that grows with the streak, plus this week’s day dots. Extending the streak lights the flame up, and it rests grey until today’s goal is done.

AI reply that appears word by word as it streams in, with the newest words softly highlighted. Screen readers hear the full answer once instead of every fragment.

Swipeable card stack where the top card hangs from the point you grab and stamps fade in as you drag. Flick it away on your own momentum, tap to page through photos, and undo flies it back in.

List row that swipes to reveal actions on either side. Pull far enough and the main action fills the row and runs when you let go; deleted rows fold away and only one row stays open.

Headline reveal where words, lines or letters brighten and rise in reading order. Includes a rotating word slot that swaps words in place and resizes to fit each one.

AI working state with a gently pulsing label and steps that check off as they finish, in a fold-out list or a pill. When done it settles into a summary like “Researched for 8s”.

Time picker with looping wheels in a bottom sheet, set over a sky that changes with the chosen hour. Also includes a bedtime and wake ring that tracks your sleep goal, and a duration ruler you scrub.

Vertical step tracker for orders, shipping and onboarding. Each completed step fills the line down to the next point, and a soft glow marks the step in progress.

Countdown shown as a ring that drains as time passes, with pause, resume and a one-minute extend. The last ten seconds count down digit by digit and it finishes on “Done”.

Tip picker with percentage or fixed-amount options and a highlight that glides between them. An Other option opens a custom amount field for any tip you like.

List row for songs, episodes and chapters with artwork or a number, badges, progress and duration. The playing row shows live equaliser bars, and finished episodes are marked Played.

Payment row with an icon or photo, details and a signed amount. Pending payments look muted until they post, declines are struck through and refunds turn into credits.

Trip and delivery timeline from pickup through stops to dropoff, with times, status and room for extra details. A glowing marker rides the current leg and lights up each arrival.

Product option picker for sizes, colours and materials. The chosen value appears beside the label, and a sold-out chip can switch to “Notify me” when tapped, so shoppers can ask for a restock.

Player controls over any video, with a scrubber, play and pause, skip, speed, captions, mute and fullscreen. Double-tap either side to seek, plus a minimal short-form mode.

Audio scrubber that shows playback as a filling waveform. Bars near the playhead grow and brighten as you drag, and chapter marks appear as small gaps in the wave.

Weather card with current conditions, an hourly strip and daily ranges. Pick an hour and the temperature rolls to match, and in its sky style the whole card shifts from day to night.

Seven-day picker for repeating schedules. Days light up as you choose them, with optional presets like Weekdays and a summary line that reads your choice back in plain words.

Screen transition where a tile grows out of its exact spot into a full page before the content fades in. Closing returns it to the tile, and dragging down dismisses it.