App screens and landing sections

Now-playing card with a token-gradient cover that breathes with playback, title and artist that cross-fade in the skip direction, a draggable scrub bar with buffered and played layers, play/pause icon swap, shuffle and repeat-all/one toggles, volume slider with mute, and a queue drawer that slides up over the card; playback is simulated unless a track has a `src`.

File browser with breadcrumb navigation, folders that slide in from the side you travel, grid/list views, click / Cmd-Ctrl-click / Shift-click range selection with arrow-key movement, kind-tinted file icons, a sort menu, a storage usage meter, and a drop overlay that adds dragged-in files to the open folder.

Container-sized app shell whose sidebar collapses to icons with tooltips and a gliding active pill, a top bar with a Mod+K search field and avatar menu, and a content slot with breadcrumbs, title and actions that cross-fades per page; below its own `mobileBelow` width (768px default) the sidebar moves into a Drawer — a data-driven complement to the viewport-height AnimatedSidebar primitives.

Plan comparison grid with a monthly/yearly switch that rolls every price, plan columns in a sticky header over scrolling feature rows, collapsible feature groups, check / dash / partial / text cells, a recommended column tinted top to bottom, and a plan switcher with one cross-fading column in narrow containers — the detailed companion to PricingTable.

Marketing features section with a vertical tab list beside a visual panel that cross-fades and slides in the direction of travel to each feature's visual, autoplay that fills a progress rail on the active row and advances, pausing on hover or focus, with a pause button and keyboard tabs.

Blog index with category chips and a gliding pill, a wide featured post, and cards with gradient or image covers, excerpt, author avatar, read time and an en-US date that lift on hover; filtering reflows the grid with shared layout and Load more appends the next page with a stagger, falling back to `onLoadMore` for server pagination.

Service status block with an overall banner derived from today's worst status, per-service 90-day uptime bars that grow in on view and reveal a date, status and incident tooltip on hover or arrow-key focus, computed uptime percentages, and an incident timeline whose entries expand into their update history, all formatted in UTC from deterministic data.

Release notes list with a version and date rail, New/Improved/Fixed badges, entries that expand to reveal their staggered change lines, a tag filter with counts that reflows the list with layout animation, and an email subscribe field driven by a StatefulButton promise.

Public product roadmap with Planned, In progress and Shipped columns or a quarter timeline, where cards fly between the two views through shared layout, re-sort by votes as you upvote with a direction-aware rolling count, carry tag badges, and can be filtered by status.

Sign-in card that pairs with Signup Form — email, password and remember-me with generic SSO/passkey buttons — whose "Forgot password?" flow morphs inside the same card from requesting a code to a check-your-inbox screen with a resend cooldown, then an OTP plus new-password step and a drawn success check, with every async handler driving pending states and shaking the card on rejection.

Account settings with a side nav whose pill glides between Profile, Notifications, Appearance and Billing, sections built from inline edits, switches, selects, toggle groups and usage bars, a draft that slides up a sticky unsaved-changes bar with Reset and an async Save that shakes on failure, and a danger zone behind a type-to-confirm dialog.

Contact section with name, email, a topic select and an auto-growing message textarea with a live character counter, validation that only flags fields after blur, an async submit that shakes on error and morphs the card into a drawn-check thank-you panel, plus a side panel of contact methods.

Checkout flow on Stepper — shipping with a gliding delivery-speed choice, display-only payment fields and an editable review — beside an order summary with compact quantity steppers, a promo code that shakes when invalid and pops a removable badge when valid, and subtotal, discount, tax and total that roll on every change.

Printable invoice with number and UTC-formatted dates, an animated Paid / Due / Overdue status badge, bill-from and bill-to, a staggered line-item table and subtotal, tax and total, plus Download, Send and Mark-as-paid actions that stamp the sheet and roll the amount due to zero, with print variants that hide the actions and switch to ink-friendly colors.

Getting-started card with a progress ring and bar and steps that expand to a description and an async CTA; finishing a step pops its check, strikes its title and opens the next unfinished step, and at 100% the list gives way to a confetti celebration, with a dismiss that animates the card away.

Closing call-to-action section in a centered layout (large headline, two CTAs and a reassurance checklist inside a card) or a split layout (copy beside a visual or an email capture with a stateful submit), with a word-by-word headline reveal on scroll, a rotating gradient beam on the card border or a soft dotted field, and a layout that adapts to its own container width.

Trusted-by logo strip with an infinite marquee variant behind edge fade masks that pauses on hover or focus, and a grid variant whose logos fade in with a stagger and lift on hover; logos start muted and grayscale and take their own colors on hover, accept any SVG or node, and fall back to a static row under reduced motion.

Numbered steps section whose connector draws from marker to marker as it scrolls into view, lighting each marker as the line arrives; horizontal on wide containers and a vertical timeline on narrow ones, with optional per-step media that cross-fades when a step is hovered, focused or chosen with arrow keys like a tab.

Integrations showcase pairing a hub-and-spoke orbit (your logo at the center, integration icons on counter-rotating rings that keep icons upright and pause on hover) with a searchable card grid filtered by category chips behind a gliding pill, where cards enter, leave and reflow with spring layout animation.

Photo gallery laid out as a masonry or uniform grid sized by its own container width, with hover zoom and caption reveal, category filters behind a gliding chip with spring layout reflow, and a lightbox that grows out of the clicked tile with prev/next, arrow keys, Escape, swipe, a counter and a focus trap; reduced motion turns every move into a fade.

Newsletter signup section with an email field, light validation and a submit button that steps through idle, loading, success and error from your onSubscribe promise, a form that morphs into a confirmation with a draw-in check, a privacy note, optional reader avatars for social proof, and card or inline layouts.

Team page section with member cards that stagger in on view and slide up a bio and links on hover or focus, department filter chips with a gliding pill and spring layout reflow, and a click that opens a focus-managed dialog with the member's full bio, location and links.

Long-form marketing content block in three variants: split copy beside media that stays pinned while paragraphs scroll, a stats layout whose callouts roll their numbers up on view, and a pull quote framed by large typographic quote marks, with paragraphs revealed as they scroll into view.

Chronological activity log grouped by day with actor avatars, verb-plus-target summaries, relative times, severity and category badges, actor, action-type and search filters, entries that expand into a before/after field diff, new events sliding in at the top, and an export hook that receives the filtered rows.

Review queue for pending expense, access, deploy and time-off requests with row and bulk selection, approve and reject that swipe rows out optimistically with an undo toast, a dialog that asks for a rejection reason, Pending/Approved/Rejected tabs whose counts roll, and j/k/x/a/r keyboard shortcuts.

Log stream viewer with a volume histogram you click or drag across to narrow the time window, level filters, a text query with highlighted matches, a virtualized monospace table, live tail that follows new lines until you scroll up and then shows a Jump to latest pill, and a side panel with each line's structured fields as JSON.

Dashboard report with a date range picker and previous-period compare switch, rolling KPI cards with delta badges, an area trend chart that adds the previous period as a muted series, a breakdown table with inline growing bars, and auto-generated highlights that stagger in, with skeletons holding the layout while a new range loads.

Cookie consent card that springs up after mount with Accept all, Reject non-essential and Customize, where Customize grows the card into Necessary (locked on), Analytics and Marketing switches with Save; the choice is reported through onConsentChange and can persist to localStorage, anchored bottom-left, bottom or bottom-right, fixed to the viewport or contained in a parent.

Site navbar with a logo slot, plain links and mega-menu panels: a hover pill glides between items, the dropdown viewport morphs its size to each panel while content slides in the direction you move, panels open on hover intent or click/Enter, close on Escape or outside click, support arrow-key navigation, and collapse below md into a hamburger sheet with accordion sections.

Bento layout of feature tiles on a container-query grid that collapses to one column in narrow containers, with per-card column and row spans, icon, title, description and a visual slot that lifts and zooms on hover, a radial spotlight that follows the cursor across the border and surface, a CTA whose arrow nudges on hover, and cards that stagger in when scrolled into view.

KPI tiles whose headline numbers roll digit by digit to each new value, with Intl number, currency, percent and compact formatting, a delta badge with an up or down arrow toned by whether the move is good news, an inline sparkline that redraws when its data changes, a period caption, a skeleton loading state and a container-query StatGrid layout.

Bell trigger whose unread badge springs when the count rises, opening a panel that grows out of the bell with All/Unread tabs and a gliding indicator, Today/Earlier groups, relative times, unread dots, hover actions to mark read or archive that collapse rows out while the rest glide up, Mark all as read, an empty state, focus management with Escape, and a controlled or uncontrolled notifications list.

FAQ page section with an eyebrow, heading and description column beside an accordion that opens one or many answers with height-morphing panels and a rotating plus, an optional search that narrows questions with spring layout reflow and highlights matches, a Still have questions CTA slot, optional hash deep links, and a layout that splits into two columns based on its own container width.

Testimonial wall of quote cards with names, roles, initials avatars and optional star ratings, laid out in masonry-like columns that scroll vertically in alternating directions behind fade masks, pause on hover or focus, fall back to a static masonry under reduced motion, offer a static grid variant, and pick their column count from the block's own container width.

Landing hero with a New pill badge, a headline revealed word by word with a spring blur-in, supporting copy that follows, primary and secondary CTAs, an install command chip with an animated copy button, an optional media slot that tilts up into place on view, and a CSS-gradient grid background with sweeping beams, centered or left aligned.

Site footer with a brand column of logo, tagline and social icons that lift on hover, link columns that collapse into disclosures in narrow containers, a newsletter signup that validates email and runs idle, loading, success and error states from an onSubscribe promise, and a bottom bar with legal links and a theme toggle slot.

Month and week event calendar: month cells pack events into lanes so multi-day events become bars across the week row and overflowing days open a "+N more" list, while week view places timed events on an hour grid, side by side where they overlap, with a live now line and optional 15-minute drag to reschedule. Periods slide in from the direction you travel, the Month/Week switcher pill glides between views, and day cells support arrow-key navigation.

Pricing block with a monthly/yearly toggle whose pill glides between options beside a Save 20% badge, prices that roll digit by digit to the new period, three plans with a highlighted Popular card, feature lists with check and cross rows, per-plan CTA buttons, Intl currency formatting and cards that stack based on their own container width.

Task board whose cards drag within and across columns, opening a dashed drop slot where they will land, lighting up the column underneath and flying into place via shared layout. Space, arrows and Escape move cards from the keyboard with live announcements. Columns show count badges, cards carry tags, assignee initials and a priority dot, and on mobile the columns scroll horizontally with snap. Controlled/uncontrolled, reduced-motion safe.

A masonry grid for feeds of unknown length: it measures each card's real height, renders only what is near the viewport with TanStack Virtual, picks a column count from the container width and fetches the next page before the reader runs out.

Piles notifications into a compact deck and fans them out into a full list when someone hovers, focuses or taps it, with a count, a view-all action and an empty state.

A folder card for portfolios and file browsers: hovering or focusing fans out preview cards from inside, clicking grows it into a full overlay with managed focus and Escape to close, and closing plays the same path back into the folder.

A circular take on the draw: the winner sits at the center, each round adds a ring farther out, and the competing teams line the edge. Rings spring in from the middle outward, hovering a team keeps it in focus while every other one dims, and each team shows a flag, logo or initials.

Moves through the draw round by round. The first visible round sits on an even grid, later rounds center each match between the two that fed it, and cards, connector lines, headings and height all animate to each new layout. A separate third place match sits under the tree, and every label, date, crest and result chip comes from your data.

Set weekly working hours: toggle each day on or off, add or remove time ranges that slide and blur in and out, choose times from a scrolling list in steps you set, and copy one day's hours onto other days.

A crypto swap card for moving tokens between chains: pick source and destination token and network, reverse them with a rotating button, see the converted amount and a quote with rate, fee, slippage and time, and set a destination address.

An iPhone-like pill that expands into whichever live view you make active, springing its outline to fit each one and blurring between their contents; set the view to null and it folds back to the compact pill.

A Cmd or Ctrl+K launcher for your app: fuzzy search across labels and keywords, grouped results with hints and badges, arrow-key navigation with a springy highlight on the current row, and a frosted panel.

A search box, or just an icon, that grows into a frosted results panel when clicked or opened with a keyboard shortcut, filtering items by title and keywords with arrow-key selection.

A toolbar that shows just icons until hovered or focused, then widens into labeled buttons with badges and shortcut hints, while a shared highlight follows the current item.

Keeps the main buttons visible in one joined pill and tucks the rest behind a toggle; pressing it springs the rail wider to show the extra actions, and it can close again after one is used.

A bar of icon tabs where the selected one widens to show its label in a pill while a panel above it resizes to fit, sliding its content left or right by the direction you moved; Escape or an outside click closes it.

Tabs you can drag or move with the keyboard to reorder, where the selected tab stretches into the content panel itself, the active shape slides as tabs trade places, and an optional close button sits on every tab.

List rows for touch screens that slide sideways to uncover action buttons, with separate actions for each side and neutral, primary, success, warning or danger tones for things like archive or delete.

A dropzone for mixed attachments: file and image rows that stagger in, upload, done and failed states with retry and remove, image previews that expand smoothly, and audio with a waveform.

Drop or browse files into a list where each row shows progress and status, with retry for failures and a button to take it out.

A trade ticket for prediction markets: switch between buy and sell, choose an outcome by price, type an amount that rolls digit by digit or bump it with quick chips, and see shares and payout before placing the trade.

A crypto wallet summary: switch accounts or search from panels that open out of their buttons, show a balance whose characters cascade in beside a change badge, hide it behind dots, copy the address, and act with Send, Deposit, Swap and Buy.

A verification code field with one slot per digit: a focus ring that slides between slots, digits that roll into place, paste and SMS autofill support, a shake on wrong codes and a drawn check on success.

A ready registration form with name, email, password, confirmation and terms: errors appear only after a field loses focus and clear once it is valid, plus a password strength bar, a show-password toggle and a submit button with loading, success and error states.

A single button that opens into a grid of options by widening from its center like an iris, with items appearing in rings outward from the middle; it ships with Doc, Board, Table, Folder, Reminder and Link entries.

A small corner button that grows into a feedback box with sending, sent and retry states and an async submit handler; it can sit bottom right or bottom left and closes with Escape.

The 404 cycles through random characters before settling, and hovering splits it into offset color channels.

Every digit is pulled toward the pointer by the Magnetic wrapper, then settles back when it leaves.

A dim panel where a light that follows your cursor brings the error code up to full brightness.

An error card resting on a hidden pile that springs open into a fan when hovered.

A terminal window types out a cd into a missing path, prints a 404 and leaves a blinking cursor.