Blocks for real pages

Sticky site header with brand, main links, sign-in and primary action, and an accessible mobile menu that closes on Escape or link tap.

Sticky header with brand, a mega menu of grouped links and a featured card, sign-in and primary actions. On phones the same links open in a slide-in sheet with accordions.

A top bar with menus that open full-width panels of grouped links and a feature card, with hover, click and arrow-key support, and a disclosure menu on phones.

A dismissible announcement bar above a floating pill header that shrinks as you scroll, with a moving highlight behind the hovered link and a phone menu.

Split hero: badge, word-by-word headline, two calls to action and proof points on the left, a live product summary card on the right, over an animated grid.

Centered hero for developer tools: headline, two actions, package-manager install tabs and a terminal window with a light beam tracing its border.

Hero for AI products: a real prompt input on the left, and on the right a mock answer with a reasoning panel, a tool call and a streaming reply.

Split hero with a live pill, headline, two actions and headline stats beside a large draggable WebGL globe marking your regions.

Centered hero for a Mac app: shiny highlighted headline, download button and requirements, over a laptop whose lid opens into view on a live app window.

Centered hero over a slowly drifting colour mesh, with gradient headline words and product cards that bob and follow the pointer. Cards stack below the buttons on phones.

Centered hero with a browser frame that leans back and settles flat as you scroll. Ships a sample dashboard drawn with theme tokens; swap in a screenshot or your own UI.

Centered hero with an announcement pill, gradient headline, social proof and a product screenshot in a glowing frame under a slow aurora.

Quote-led hero: one big customer quote at a time with a measurable result, avatar tabs, arrow-key navigation and a pause button for automatic rotation.

Headline beside two rings of integration icons orbiting your logo, one ring turning each way. Static under reduced motion, with a hidden list of tool names for screen readers.

Download hero that picks the visitor's operating system after load, makes that build the big button, lists the other platforms, offers a copyable package-manager command and shows your app window.

Tabbed code editor (Node, Python, cURL) with token colours from your chart tokens and a Run button that streams the response. Keyboard-navigable tabs, left-to-right code in right-to-left pages.

Always-dark event hero: giant event name, date and place, a live countdown, ticket progress, speaker avatars and two actions over a slow gradient field.

Phone frame with an app screen, three floating notification cards that bob gently, store buttons and a star rating. Pass a screenshot or your own element for the screen.

Waitlist hero with a validated email form, a live count of people waiting and, after joining, the visitor's place in line with a copyable invite link to move up.

Typographic studio hero: enormous headline with a rotating gradient word, a clean intro row and a high-contrast ticker strip of services across the bottom.

Centered headline above an opening laptop with a phone overlapping its corner. Pass desktop and mobile screenshots or your own elements.

A slider-driven return-on-investment card beside the pitch: choose team size and see yearly savings, hours, value, cost and return multiple, formatted with a fixed locale.

Split hero with a bento grid of working widgets: a ticking revenue figure, toggles, a goal ring and status tiles that sell the product before the visitor scrolls.

Dark hero where the pointer is a flashlight: a coloured grid and a hidden giant word appear only inside the light. Touch devices get a slowly drifting light; reduced motion rests it in the centre.

Dark-grid hero with a working command palette: type to filter, arrow keys to move, Enter to choose. Shows keyboard-first products at their best.

Centered newsletter or waitlist hero: a pill email form with validation, loading, error and success states, and an infinite customer logo marquee below.

Full-bleed dark hero with a large headline in the lower left and a film card that opens the video in a dialog. A slow gradient shows when you have no backdrop picture.

Dark cinematic hero: a perspective grid floor sliding toward a striped sunset, oversized type with a sunset gradient and a row of hard numbers.

A segmented switch changes the headline, bullet points, call to action and picture for each audience, so one page speaks to teams, developers and founders.

Headline beside a tilted wall of screenshots drifting in three columns, two up and one down. Pauses on hover and focus, stills under reduced motion.

A huge counting number as the headline, supporting stats with trend lines beside it. Numbers are formatted with a fixed locale so server and browser agree.

Bento feature grid of spotlight cards in two sizes, with an animated stat and keyboard-shortcut hints mixed in for texture.

Six features in a hairline grid of numbered cells with an icon, title and one sentence each. Pass your own features array.

Integrations section: heading, description and checked benefits beside a hub diagram where animated beams flow between your product and six tools.

Bento feature grid for a desktop app: menu bar companion, keyboard shortcuts, privacy, iCloud sync and notifications, each with a small live visual.

Numbered steps on the left; as each scrolls into view, a sticky panel on the right crossfades to its picture. On phones every step carries its own picture.

Pill tabs with a sliding indicator switch between feature panels: heading, checked points and link beside a product picture. Tabs scroll sideways on phones.

A feature picker for menu bar apps: choose a feature and a miniature desktop shows the app's panel hanging from its menu bar icon, with quick capture, clipboard history, a focus timer and shortcuts drawn from tokens.

Drag or arrow-key a divider across two pictures to show a transformation. Built-in art shows without images; pass your own before and after.

A shortcut list that listens to the real keyboard: press the combination and the keys light up and the result appears. Adapts symbols to Mac or Windows.

Pick a feature on the left and a dark terminal types the matching commands on the right. Replay on demand; prints everything at once under reduced motion.

A vertical timeline of releases with version, date and typed changes (new, improved, fixed). Entries ease in as you scroll.

Cards with a slow travelling glow on the edge. Extra detail opens on hover or keyboard focus without moving the layout; always open under reduced motion.

Three rows of capability chips drifting in opposite directions (planning, integrations, enterprise). Pauses on hover and focus; still under reduced motion.

Tabs for Web, Mobile and Desktop swap the copy and screenshot. Proper tablist semantics, arrow/Home/End keys, right-to-left aware.

A row of feature cards that snaps as you scroll or use the arrows. The track is focusable and keyboard scrollable; arrows disable at the ends and flip in right-to-left.

The heading stays on the left while big cards slide up and stack on top of each other as you scroll. Pure CSS sticky, no scroll listeners.

A mosaic of picture tiles with titles over a gradient, some spanning two columns. Tiles can link; the whole tile is the hit target.

A calm panel of eight things every plan includes, with icons and a footnote that points to higher plans. Reduces pricing anxiety.

Six feature cards share one glow that follows the pointer across the whole grid, lighting borders and backgrounds where it passes. Switched off on touch.

Pick a skill (summarise, find, write, translate) and watch a sample question and a streaming answer. Honest about what the assistant can do.

A vertical list of steps, one open at a time, with a progress line that fills and moves to the next step. The picture crossfades. Pauses on hover and focus; has a pause control.

A real comparison table with a glowing column for your product. Ticks, crosses and partials carry hidden text; text cells work too. Rows highlight on hover.

Three cards with a counting headline number and a small animated chart each: bars, a drawing line or a progress ring. Charts draw once when scrolled into view.

Category chips and a search box filter a grid of capabilities with an animated layout and a live count. Shows breadth without a wall of text.

Real switches change a security score ring and add lines to an activity log. Teaches by letting the visitor try the controls.

Steps along a line that draws itself as the section scrolls into view; horizontal on wide screens and vertical on narrow ones.

Large alternating rows, each with a tag, headline, points, a customer quote and a picture slot. The classic long feature page, done carefully.

Four large numbers in a hairline grid that count up on scroll, each with a change badge, a small trend line and one line of context. Heading and copy sit above.

Four counting numbers with a change note and a sparkline each, set in a single bordered grid.

A large uptime figure computed from ninety daily bars. Move through the days with arrow keys to read what happened on each.

Slide a team size and watch hours saved, money saved and return update. Assumptions are editable props and printed under the result.

A dotted world map beside regions with bars. Choose a region to highlight it and swap the big number.

Paired bars for each metric that grow when scrolled into view, with a how-many-times badge and a visible source line.

Customer logos as an endlessly scrolling row with faded edges, or a static grid with hairline dividers. Wordmarks brighten on hover.

A count of customers that ticks up, over two rows of logos moving in opposite directions with soft edges.

Eight logos in a bordered grid beside the heading. Hover or focus a logo to lift it and see what that customer achieved.

Industry tabs filter a grid of logos with animated layout changes, arrow-key tabs and a polite count.

Two rings of logos slowly circling a central statement and button. Logos stay upright and everything is still under reduced motion.

A wall of testimonial cards in three columns that scroll at different speeds in opposite directions, pausing on hover, with a plain list on phones.

One large quote at a time with the person, role and a highlighted result. A row of avatars switches quotes with arrow keys; optional gentle autoplay that pauses on hover and focus.

A masonry wall of quotes with topic chips, star ratings, one highlighted quote and a polite live count of what is shown.

Two rows of quote cards that scroll in opposite directions, with a visible pause button, pause on hover and focus, and a static scrollable row under reduced motion.

A single large quote with a result chip, switched by avatar tabs that follow the tabs pattern with arrow keys, Home and End.

Three customer cards led by a counting number, with the quote underneath and a link to the full story.

Large quotes in a scroll-snap row with previous and next buttons, a progress indicator, keyboard keys and a polite position announcement.

An average and rating bars you can click to filter, a sort menu and review cards with verified badges and a Helpful toggle.

Customer panels that open like an accordion on phones and widen side by side on desktop, each with a headline, quote and two numbers.

A grid of team portraits with name, role, location and links. On hover or keyboard focus a bio slides up over the photo; phones show it inline. Initial tiles when there is no photo.

People cards with generated cover colours and avatars, team filters with counts, expandable bios with links and a hiring card.

A product-versus-alternatives table where your column is lifted into its own card, with yes, partly, no and text values and a row of headline results. Phones switch between alternatives.

A sticky-header comparison table with a highlighted column for you, group filters, a differences-only switch and computed feature counts.

Two pricing cards side by side with included and excluded features, a highlighted plan with a border beam and badge, and small print.

Three plan cards with a monthly/yearly switch. Prices roll to the new value, a savings badge and billed-total line update, and the middle plan is lifted with a border beam.

A feature-by-feature comparison table with a sticky plan header, collapsible groups and a highlighted column. On phones it becomes a plan switcher with one clean list.

A pricing section for Mac apps that sell both ways: a Buy once / Subscribe switch, license size cards and a cumulative-cost chart that computes the break-even year.

Three plans with a Monthly/Yearly switch where prices roll to the new number, a computed saving badge and a glowing featured plan.

Plan cards over a feature table where each row has an info button that opens a plain-language explanation. Pricing that teaches.

Good, better, best: the middle plan is drawn dark and raised above its neighbours with a badge, so the choice is obvious without shouting.

Choose a base plan, tick optional extras and watch an order summary and total update, with a yearly discount switch. A real quote builder.

Radio cards for credit packs with bonus credits and the real price per credit, an order summary, an auto top-up switch and a savings figure computed against the smallest pack.

Tabs for Individuals, Teams and Students and nonprofits swap in the plans that fit each, with arrow-key tabs and an eligibility note.

A timeline of what happens during the trial (today, a reminder, decision day) beside the price you pay afterwards. Removes fear of the unknown.

A slider chooses the number of seats; every seat moves to the tier price for that team size. Shows the tier table with your tier highlighted, the total and the saving.

Sliders for requests, storage and people produce a line-by-line bill estimate: base plan plus what you use beyond the included amounts.

A real comparison table with a sticky header, collapsible feature groups and, on small screens, a switch that shows one plan at a time.

A single plan with every feature included. The visitor picks monthly, yearly or longer terms and the price rolls; the full inclusion list sits beside it.

Preset amounts plus a custom field with validation, one-time or monthly, and a line that says what the chosen amount makes possible.

Three questions, one at a time, then a recommended plan with reasons while the matching plan card lights up. Fully replaceable scoring.

A currency switch shows each plan's real price in that currency, formatted for its locale. You enter every price yourself; nothing is converted on the fly.

Two self-serve plans beside a dark enterprise panel with a contact form: validation, loading, error and success states, all accessible.

Frequently asked questions in an accessible accordion, with the heading and a help line in a side column on desktop.

Frequently asked questions with live search that highlights matches, topic filters with counts, a friendly empty state and a support prompt. Topics scroll sideways on phones.

A search box that filters questions and highlights the match, topic chips and an accordion. A friendly empty state links to support.

An accordion where each answer asks Was this helpful, next to a sticky support card with chat and email.

A closing call-to-action panel: large heading, one line of reassurance and two buttons, over a softly lit animated grid.

A waitlist or newsletter signup over rising light beams: heading, email field with validation, loading, success and error states.

A closing call-to-action for developer products: heading, two buttons and a copyable install command with package-manager tabs, over a soft dotted glow.

A calm card with a validated email form, busy and error states, a success message that takes focus and a row of avatars with a reader count.

Heading, two buttons, reassurances and a rating beside a picture slot (generated art by default).

A dark panel with a light that follows the pointer, a faint grid, two buttons and reassurances. Touch and keyboard users get a steady glow.

A live countdown to a launch date, a validated waiting-list form and a count of people already waiting. Shows a launched message afterwards.

An editorial newsletter signup: topic chips, an email field with validation, loading, error and success states, avatar social proof, and a tilted sample issue card beside it.

Choose topics and how often, add an email, subscribe. A tilted sample issue sits beside the form, and a confirmation repeats the choices.

Site footer with brand and tagline, an optional newsletter form, up to four link columns and a legal bar.

Brand, tagline and a live status pill beside three link columns, a legal bar with icon links, and an oversized wordmark that sinks into a fading gradient along the bottom.

Link columns, a short email signup, social and contact icons, legal links, a language picker, a live status pill and a large faded wordmark.

A blog index with a large featured post, topic filter chips and a three-column grid. Posts without a photo get a generated cover drawn from theme tokens, in five compositions.

A long-form article page: centered title and author row, cover, comfortable prose with pull quote and code, sticky table of contents with scroll spy, reading progress bar, author card and related posts.

A featured post, category chips, search and a grid of posts with a Load more button. A polite count says how many posts match.

A long-form article with a reading progress bar, a sticky contents list that follows your place, copy and share buttons, pull quotes and an author box.

A large lead story, two medium stories and four numbered headlines in a bordered strip.

A calm list of posts grouped by year with date, category, reading time, a small cover and numbered pagination that moves focus to the heading.

A writer's header with avatar, bio, links and three numbers, followed by their posts in Latest and Popular order.

Topic cards that open to list their posts, plus a tag cloud whose size follows how often each tag is used.

Building blocks for developer writing: an install command with package manager tabs, a copyable code block with line numbers, three kinds of callout and footnotes that link both ways.

A comment form with validation and a character count, replies one level deep, like buttons and sorting by newest, oldest or most liked.

A series panel with a progress bar, a list of parts, a Mark as read toggle and previous and next cards.

A release-notes page: a sticky version and date beside each release card, optional banner art for headline releases, typed changes with filters and counts, and a show-older button.

Releases on a timeline with filters for New, Improved, Fixed and Breaking changes, expand and collapse, and a copyable link to each release.

Planned, In progress and Shipped columns with area filters and vote buttons that re-rank cards.

A version picker that swaps a headline and three highlight cards with pictures and learn-more links.

Open roles grouped by team with team filter chips, live search and an empty state, then a hairline grid of perks. Every role row is one large link with location and type.

Open roles with team filters and counts, a remote switch and rows that open to show the summary, requirements and an Apply link.

A contact section with a validated form (name, email, topic, message with counter, consent), loading, error and thank-you states, beside tiles for email, chat, phone and office with a response-time pill.

A message form with topic chips, validation and a character count beside email, phone, hours and offices, with a clear success state.

A month grid with arrow-key navigation, available times, and a short form, ending in a clear confirmation. Dates come from a today prop.

An error page with giant fading numerals whose zero is a ring with an orbiting moon, plain-language copy per status, home and back buttons, site search and helpful links.

One block for 404, 500, 403 and offline: a big code, a plain explanation, page search for 404, a copyable reference for 500, and sensible buttons.

The whole password-recovery flow in one card: request a link, check-your-email with a resend countdown, choose a new password with confirmation and strength, and a success screen. Focus moves to each new heading.

Centered sign-in card: SSO and email-link buttons, an email and password form with remember me, a loading submit and an inline error.

A split-screen sign-in: SSO and passkey buttons, validated email and password with show/hide, remember me and error state on one side, a soft colour mesh with a customer quote on the other.

A signup page: validated name, work email and password with a live strength guide, terms checkbox, SSO option and a check-your-inbox confirmation, beside a benefits list with social proof.

A code-entry screen: masked email, six slots that accept typing and pasting, automatic submit on the last digit, shake and alert on a wrong code, a resend countdown and an animated success state.

A calm sign-in card with provider buttons, email and password with a show button, remember me, field errors that take focus and a server error banner.

Name, email and a password with a four-step strength meter and a live checklist, plus a required terms checkbox and clear errors.

Six digit boxes backed by one real input, so paste and autofill work. Checks on the last digit, shows a wrong-code state and offers a resend with a countdown.

Ask for an email and send a sign-in link, then a check-your-inbox step with resend and a way back. An optional passkey button is disabled where the browser cannot use it.

Four steps in one block: ask for an email, a check-your-email confirmation that does not reveal whether an account exists, a new password with strength and confirmation, and a done state.

Work email first. If the domain uses single sign-on, offer that; otherwise ask for a password. A dark side panel carries reasons and a quote.

The page an invitation email opens: workspace tile, who invited you, your role and what it allows, the account being used, accept and decline, with welcome, declined and expired states.

A four-step setup wizard with a progress rail: name and address a workspace (auto-filled), pick goals as cards, invite teammates as removable chips, review, then a finish screen. Slides between steps.

Progress across four steps: about you, workspace (with an address made from its name), invitations and a review. Each step validates and moves focus.

Six cards to choose up to three goals, announced as you pick, with Skip and Continue.

A mock app with a dimmed backdrop and a moving highlight, and a tour card with Next, Back, Close, keyboard arrows and Escape. Restart when it ends.

Type or paste emails into one field that turns them into removable chips, flags bad addresses in words, pick a role and send. Seats left are counted.

A product frame: workspace switcher, grouped navigation with badges that collapses to an icon rail, top bar with search, notifications and a ⌘K command menu, and a scrolling page slot. A drawer on phones.

A narrow icon rail opens a second panel of pages, with a collapsible panel, breadcrumbs and a scrolling page area. Becomes a top bar on phones.

A product top bar with navigation, search with a shortcut hint, a notifications menu and an account menu, then a page header with arrow-key tabs.

A sales dashboard page: a date-range switch that recomputes everything, four KPI cards with change and trend, a revenue area chart against the previous period, revenue by channel and a recent-orders table.

A web analytics page: a live-now pill, date range and compare switch, a visitors line chart against the previous period, traffic sources as a donut, devices, top countries and a top-pages table.

KPI tiles with trend lines, a revenue chart against the previous period, a quarterly goal ring that shows whether you are ahead of pace, best sellers and channel shares.

A semicircle quota gauge with a forecast arc, pipeline value by stage and the deals closing soon with their chance of closing.

Tickets opened and solved per day, answered-on-time against the target, customer satisfaction and a ranked team table.

A plain-language start-of-day page: four headline numbers each with the reason it moved, a good-news or worth-a-look cue, and a watchlist of drifting metrics.

Search, status filters, sortable columns, select-all with a partial state, a bulk action bar, pagination and a details panel for the open row.

A segmented usage bar with a text alternative, a drop zone that adds files (drag or choose), recent files by type and folders.

A progress ring, the next best action and expandable steps that can be ticked off. Fires onComplete once when everything is done.

A filterable feed grouped by day with unread markers and Mark all read, beside a list of who is online and what they are doing.

MRR movements as a stacked diverging bar (new and expansion up, contraction and churn down), retention and churn tiles, plan mix donut and a shaded cohort retention table.

Step bars with the share that continues and how many leave, a segment switch that recomputes everything, the biggest drop flagged and a plain-language estimate of what fixing it is worth.

A line chart that updates every second with a limit line, latency and error tiles and a service status list. Has a pause button; starts paused when interval is 0.

Income against expenses by month, net cash flow, runway in months from the average burn, and a list of upcoming bills with autopay status.

An orders-by-hour heatmap (keyboard navigable, with the busiest slot called out), sales by category with direct value labels, and the latest orders.

A sortable campaign table with return on spend, inline bars, trend lines and a flag for anything below your minimum return.

Sprint burndown against the ideal line with an honest 'will it finish' sentence, open risks by severity, and project cards with progress and health.

Machines sorted by severity with CPU trend and memory meters, a filter for what needs attention, and an incident timeline.

An account settings page: profile with username availability, sign-in details with a change-password dialog, language, time zone and appearance, a type-to-confirm delete, and a sticky save bar that appears only when something changed.

Notification settings that save as you go: digest frequency as radio cards, a grid of switches for each event and channel (cards on phones), and quiet hours with times and weekdays.

Team management: a seats meter, an invite form with role, role filters and search, a member list with role selects, pending invitations and a confirm-before-remove dialog. Stacks cleanly on phones.

A table of events by channel with switches, turn-all-on/off per channel, a digest choice, quiet hours and a save bar that appears when something changed.

Turn on two-step sign-in with a code check, sign out other devices with a confirmation, and create, reveal, copy and revoke API tokens.

A billing page: current plan and monthly cost, usage meters that turn amber near the limit, the card on file with an update dialog (formatted, validated), the billing contact and an invoice list with status and downloads.

A change-plan flow: billing interval, plan cards as radios, a seat stepper that respects the current team, and a sticky summary that works out the prorated charge, the credit and what is due today.

Current plan with usage meters that turn to a warning near the limit, a banner naming what is close, a replaceable card and downloadable invoices with status.

A working inbox: folders with an unread count, a searchable message list with stars and keyboard navigation, a reading pane with archive, delete, mark unread and reply, and a compose dialog. One pane at a time on phones.

A fast inbox: J and K move, E archives, S stars, # deletes, U marks unread and Z undoes. A status line announces every action and offers Undo.

A project board: columns with counts, rich task cards (tags, priority, due date, comments, assignee), drag and drop with a drop indicator, keyboard pick-up and move with announcements, a Move-to menu, quick add and a person filter.

A board with lanes per person, work-in-progress limits per column, drag and drop and a Move menu on every card so it works without a mouse.

A week calendar: a time grid with overlapping events placed side by side, an all-day row, a now line, a mini month and calendar toggles, event popovers and a new-event dialog. One day at a time on phones.

Rooms or people as rows, hours as columns, bookings as blocks and a line for now. Click or use the arrow keys on an empty time to hold an hour; release it again.

A complete assistant screen: collapsible conversation sidebar, model picker, messages with reasoning and tool calls, streaming replies, copy and regenerate, and a prompt with attachments.

A chat that builds things: conversation list, streaming replies, suggestion chips and a side panel with Preview and Code tabs, version history, copy and download. The panel overlays the chat on narrow screens.

A conversation with tool-call chips, numbered sources, suggestions and a model picker. Documents the assistant writes open in a side panel with a plain-text view and copy.

A product grid with category, price and colour filters, sorting, a wishlist heart and a quick add button. A live count says how many products match.

A thank-you page with a copyable order number, a four-stage tracker, items, totals, address and payment summary.

Past orders with status filters and counts, search, expandable details, a track link and Buy again.

Choose up to three products and compare them in a table with a sticky first column, a differences-only switch and add buttons.

Height and weight sliders and a fit preference give a suggested size and highlight its row in a size chart. Your chart is a prop.

A countdown to the end of the sale, a copyable code, and deals with the percent off and a bar showing how much stock is claimed.

A scroll-snap row of products with previous and next buttons that disable at the edges, arrow-key paging and a quick add on each card.

A product page with a photo gallery, colour and size pickers built on real radio buttons, a quantity stepper, an add to bag button with success and error states, and collapsible details.

A grid of products where each opens a dialog with a larger picture, a size choice and an add button, without leaving the page.

A store bar with a bag button that opens a side drawer: quantities, remove with undo, a free-delivery progress bar, subtotal and checkout.

A full cart with steppers, a promo code field that validates, delivery choices and a live summary of subtotal, discount, delivery, tax and total.

A bento of collection tiles with pictures, counts and arrows. The whole tile is one link.

Pick pieces to complete a set. The price updates, a saving appears once enough are chosen, and one button adds the bundle.

Enter a postcode to see delivery methods with real dates counted in working days, plus returns and payment reassurances.

Contact, address, delivery and payment on one page with an error summary that takes focus, field errors and a sticky order summary. Card fields come from your provider through a slot.

A working Mac desktop for your landing page: wallpaper, a menu bar with menus and a clock, draggable and resizable windows, desktop widgets and a magnifying dock that launches and relaunches them.

A Mac app download section: app icon and version, an Apple silicon or Intel choice that swaps the file, copyable checksum and Homebrew command, install steps and release notes you can flip between.

Platform tabs that pick your device, builds with sizes and copyable checksums, requirements and an earlier versions table.

A lineup of laptop, tablet, phone and watch frames with their own token-drawn screens, scaled as one picture. Buttons underneath bring a device forward and dim the rest.