Steal this designpagescomponentsanimationspatternsremotionmusicdatabasesskillsarchitectures3DpromptsMCPs design — all free to copy.

Airline — Baggage Tracker

A polished aviation-themed baggage tracker UI showing each checked bag's tag ID, a five-stage status tracker from checked through loaded, in transit, arrived, and on carousel, plus flight info, carousel number, and last-update line. Features animated progress fills, colour-coded status and delayed pills, a bag-tag lookup, a simulate-progress control, and an accessible report-issue modal with toast confirmations. Mobile-first and responsive down to 360px.

Airline — Boarding Pass

A mobile-first boarding pass UI for a fictional carrier, rendering perforated-edge cards with passenger, route, gate, seat, zone and live status pills. Each pass carries a deterministic animated QR stub, an add-to-wallet action, a brightness boost for gate scanners, and a flip-to-reverse view with fare, baggage and frequent-flyer details. A simulated gate change pulses and toasts in real time. Built with vanilla HTML, CSS and JavaScript, fully responsive down to small handsets.

Airline — Frequent Flyer Card

A polished frequent-flyer status card for a fictional airline loyalty program, showing tier, miles balance, animated progress toward the next tier, a curated benefits list, recent flight and redemption activity, and a digital membership QR. Switch between two tiers (Gold and Platinum) to see palette, miles, and perks update live. Tap the card to flip it and reveal the scannable QR, and redeem miles to watch the balance and progress bar respond with a confirmation toast.

Airline — Our Fleet

A polished Our Fleet marketing page for a fictional airline, built with plain HTML, CSS and vanilla JavaScript. Switch between four aircraft types to reveal live specifications, toggle between performance, dimension and cabin spec views, browse a cabin gallery, and preview a generated seat-configuration map. Includes an aviation-blue and sunrise-orange theme, status pills, animated hero counters, scroll reveals and a fully responsive layout that works down to small phones.

Airline — Loyalty Program

A polished marketing page for SkyMiles, the loyalty program of fictional carrier Skyward Air. It pairs a status-forward hero with an interactive four-tier benefits table you highlight by hovering or tapping a column, clear earn-and-redeem loops, a partner grid, and a live miles calculator that estimates a year of flying and the gap to your next tier. A validated join form reveals an animated digital membership card. Built with vanilla HTML, CSS and JavaScript, responsive to small handsets.

Auto — Repair Status Tracker

A customer-facing repair status tracker styled like a phone chat with the shop. It pairs a five-stage step tracker (checked in, diagnosing, awaiting approval, in repair, ready) with an animated progress bar, a vehicle and ETA panel showing plate, VIN, odometer and bay, plus a live text-message feed. New shop updates pulse in, an add-on approval banner lets the customer approve extra work, and the work-order total updates live.

Auto — Quote Approval

A customer-facing digital quote approval and sign-off screen for an auto shop, pairing a vehicle card with an itemized repair quote split into labor, parts and shop supplies. Each line carries approve and decline controls, bulk approve-all and decline-all actions, and a live authorized total that recomputes tax as decisions change. A working canvas signature pad plus a printed name unlock an authorize button that stamps the total, locks the controls and confirms with a toast.

Auto — Test Drive Booking

A polished test drive booking flow for a dealership, built with plain HTML, CSS and vanilla JavaScript. It pairs a selected vehicle card with stock, VIN and odometer details against a horizontal date picker and a grid of time slots that mark already-booked times as unavailable. Customers enter contact details, confirm a valid license, and submit to a confirmation modal that generates a downloadable calendar invite for Bay 7.

Coworking — Mobile Access Card

A warm-industrial mobile access card for a coworking space, built in pure HTML, CSS and vanilla JS. Shows a member photo, tier badge and an auto-refreshing QR credential with a 30-second countdown, plus an NFC-style hold-to-unlock door button with a success pulse and live toast. Flip the card for plan details, home desk and meeting-room credits, and watch a recent access log update in real time after each unlock.

Coworking — Credits Balance

A warm, industrial members-area widget that shows a coworking member's monthly credits at a glance. An animated circular meter tracks remaining versus plan, a breakdown panel splits the allowance across meeting rooms, print units, guest passes and locker hours, and a filterable usage history lists recent spends and top-ups. A top-up modal lets members pick a credit bundle and instantly raises the balance, with toast confirmation. Built with plain HTML, CSS and vanilla JS.

Coworking — Events Calendar

A warm industrial events calendar page for a coworking space, listing workshops, talks, networking sessions and socials as rich event cards with date blocks, host details and live attendance counts. Members filter the programme by event type, flip between a stacked list and a colour-coded month grid, open any event in a detail dialog, and RSVP with instant toast feedback and a running going-to tally. Self-contained vanilla page, accessible controls, responsive down to small phones.

Coworking — Membership Pricing

A warm-industrial membership pricing page for a fictional coworking space, built with plain HTML, CSS and vanilla JavaScript. Four plan cards — day pass, flex, dedicated and team studio — sit above a full feature-comparison table, an FAQ accordion and a closing tour CTA. A monthly-or-annual toggle animates every price with the 20 percent saving, comparison columns highlight on hover or pin on click, and toasts confirm each action. Responsive down to 360px.

Airline — Online Check-in

A six-step online check-in wizard for a fictional airline, styled with a clean status-forward aviation feel. Passengers find a booking by reference and last name, confirm details, pick a seat from an interactive cabin map with extra-legroom pricing, add checked bags, toggle travel and health declarations, and receive an issued boarding pass with a perforated stub and generated barcode. Built with vanilla JavaScript and a responsive, mobile-first layout.

Airline — Self-Check-in Kiosk

A touch-first airport self-check-in kiosk UI for a fictional carrier, Aurelia Air. Retrieve a booking by document scan, reference, or frequent flyer, then move through a five-step flow: select passengers, pick a seat from an interactive cabin map with extra-legroom rows, add checked bags with a live fee summary, and watch the boarding pass and bag tags print with a perforated stub, barcode, and success animation. Large targets, status pills, and tabular figures throughout.

Airline — Flight Information Display (FIDS)

A polished airport flight information display board with switchable departures and arrivals tabs, a status-forward table of times, flight numbers, destinations, gates and color-coded status pills, plus live search and status filters. Rows animate with a split-flap style flip as flights progress from on time to boarding to departed, a ticking local clock and a relative last-updated stamp keep the board feeling alive, and toasts announce boarding calls. Responsive down to mobile widths.

Airline — Flight Status Board

A status-forward airline flight tracker built with vanilla JS. Search any flight number to reveal a large status card showing the route with airport codes, 24-hour departure and arrival times, gate, terminal, seat range and an animated plane that travels the route line as the flight progresses. Big colour-coded pills cover On time, Boarding, Delayed, Departed and Cancelled states, while a compact departures list and an auto-refresh pulse keep the board feeling alive and current.

Airline — Flight Search

A polished, status-forward flight search panel for the fictional Skyloft Air, built in vanilla HTML, CSS and JavaScript. It pairs Inter with tabular figures for airport codes, times and fares across round-trip, one-way and multi-city tabs, a from and to swap, date pickers, a passenger stepper with cabin selector, inline validation, search toasts, and live recent searches alongside a popular routes grid. Fully responsive down to 360px with an aviation blue and sunrise accent palette.

Airline — Gate Departure Display

A big-screen airline gate departure display built with vanilla JS. A bold banner shows the flight number, LHR to SIN route with airport codes and a plane on the route line, plus a large colour-coded status pill for Boarding, On time, Delayed, Departed or Cancelled. Tiles surface boarding and departure times, gate, terminal and aircraft, while a live countdown ticks toward boarding close. Group rows track who is boarding now, next and waiting, and a progress bar fills as zones advance — all interactive.

Airline — Regional Landing

A friendly regional short-hop airline landing page with a quick-search hero, live boarding-pass card with countdown, an interactive SVG route map you can switch between hubs, fast-turnaround perks, two simple fares, an app promo with a phone mockup, and a full footer. Sky-blue and green palette, rounded approachable styling, scroll reveals, mobile nav, and a toast helper. Vanilla HTML, CSS, and JavaScript with no frameworks or build step.

Airline — Load Factor Report

A status-forward airline network revenue dashboard that reports load factor, RASK, yield and passenger revenue across long-haul routes. Headline KPIs carry trend pills and inline sparklines, a horizontal bar chart ranks routes by seat utilisation, and a revenue trend area chart redraws as you toggle between seven-day, thirty-day, quarter-to-date and year-to-date timeframes. A sortable route table, animated cabin-mix donut, route drill-down drawer and one-click CSV export round out the report.

Airline — Low-Cost Carrier Landing

A loud, value-forward landing page for a fictional low-cost carrier built in vanilla HTML, CSS and JavaScript. It pairs a punchy fare-search hero with a live price ticker, a seats-left countdown, a deals grid of discounted routes, a pay-only-for-what-you-need add-ons explainer with a bundle upsell, an interactive SVG route map you can switch by hub, an app-download block with a boarding-pass mockup, a mobile drawer nav and scroll-reveal sections — all in a bold yellow, black and magenta palette.

Airline — Destinations Page

A polished airline destinations page in clean aviation blue and sunrise orange. A live search filters cities, countries and airport codes while region chips narrow the network and a sort control reorders by price or name. A featured spotlight headlines a route, responsive cards show from-prices and flight times, a quick-view dialog surfaces cabin and frequency details, and a stylised route map teaser rounds out the layout, all built with vanilla JS.

Airline — Airline Landing

A polished marketing landing page for a fictional airline, built with vanilla HTML, CSS, and JavaScript. It pairs a horizon hero with an integrated flight-search widget (round-trip and one-way modes, swap, date defaults), a swipeable fare-deals carousel, a trending-destinations grid, a why-fly-us feature row, a SkyMiles loyalty teaser with a membership card, an app-download block with a boarding-pass mockup, and a full footer. Status pills, tabular figures, and scroll reveals give it an aviation feel.

Airline — Trip Itinerary

A multi-leg airline trip itinerary built with vanilla HTML, CSS and JavaScript. It shows a vertical timeline of flight segments with layovers, expandable leg cards exposing terminal, gate, cabin, seat and aircraft details, connection times with tight-layover warnings, large status pills for on-time, boarding and delayed flights, outbound and return tabs, and a manage sheet for changing flights, picking seats, adding bags or cancelling — with toast feedback throughout.

Airline — Booking Flow

A polished, four-step airline checkout that takes a fictional JFK to LHR fare from passenger details through extras, payment, and a final review to an animated confirmation. Validated name and card forms, a baggage stepper, seat and meal pickers, and an insurance toggle all feed a live fare-summary sidebar with a running total. Confirmation issues a perforated boarding pass with codes, gate, seat, and an on-time status pill. Built with vanilla JS and tabular aviation typography.

Airline — Crew Schedule

A crew operations roster board pairing pilots and cabin crew against a week of long-haul flights. Each row shows a duty-time bar with rest and weekly-limit indicators, while each cell is an assignable slot. Click an open slot to pick from eligible crew ranked by legality, swap or unassign rostered members from a detail drawer, and watch rest warnings, open-slot counts and duty loads recompute live as you build the schedule.

Airline — Private Charter Landing

A discreet, luxury private-charter and jet-card landing page for the fictional Méridian Air. Black, champagne, and slate with an elegant serif set the bespoke tone across a request-a-quote hero, a tabbed fleet showcase spanning light, midsize, and heavy jets, three membership tiers, a four-step on-demand process, a concierge section, and a full quote form. Vanilla JS drives tab switching, scroll reveals, form validation, and a toast confirmation.

Airline — Results List

A polished flight-results screen for a fictional airline search. Browse fare cards showing carrier, depart-to-arrive times, route duration, stop count and per-person price, then narrow them with a sticky filter rail for stops, departure window, max price and airlines. Sort tabs flip the list between best value, cheapest and fastest, each card expands to compare Economy Light, Flex and Business fares, and selecting a fare fires a confirmation toast.

Airline — Gate Agent Boarding UI

A status-forward gate-agent boarding console for a fictional airline. The flight header tracks load, boarded count, gate and live status, while a scan-to-board panel returns realistic verdicts — accepted, standby for wrong group, or seat-duplicate flag. Agents open boarding groups in sequence, work an upgrade and standby queue, and filter or search a live passenger manifest. Built with semantic HTML, aviation-clean CSS, and dependency-free vanilla JavaScript.

Airline — Premium Boutique Landing

An opulent boutique-airline landing page in deep red, cream and gold with a refined serif voice. A cinematic hero with an indicative fare quoter, three signature cabins (First Suite, Business Pavilion, Premium Salon), a tabbed onboard-experience panel, residence-style lounges with status pills, a filterable seventy-one-city destination network, a tilting Le Cercle membership card, and a season-journal footer. Built with animated counters, scroll reveal and a toast helper in vanilla JavaScript.

Airline — Legacy Flag Carrier Landing

A prestigious national flag-carrier landing page rendered in navy, gold, and serif type. It pairs a flight-search widget with a filterable route network, a four-cabin showcase, an interactive Crown Club loyalty programme with a live membership card, a heritage timeline, and an app section with a boarding-pass mockup. Includes mobile navigation, region filtering, tier switching, a swap control, toasts, and scroll-reveal animations — all in self-contained vanilla JavaScript.

Airline — Ops Control Center

A status-forward airline operations control center built with vanilla HTML, CSS and JavaScript. It pairs a live, filterable flight board with operational KPIs, a network route-status teaser, an acknowledgeable disruption alert feed, and a gantt-style aircraft rotation timeline with a live now-marker. Click any flight row or rotation segment to drill into a boarding-pass-styled rotation detail drawer, toggle auto-refresh to simulate evolving operations, and watch toasts narrate departures, delays and boardings in real time.

Airline — Seat Map Selector

An interactive aircraft seat-map selector for the fictional Skyhaven Air A350-900, spanning first, business, and economy cabins. Passengers tap open seats to select them, with a color-coded legend for available, occupied, extra-legroom, and exit-row seats. Hovering reveals a tooltip with the seat number and price, a running summary tallies the live total, a per-passenger maximum guards selection, and a deck-zoom control scales the cabin for precise tapping on small screens.

Auto — Shop Dashboard

A service-manager dashboard for an auto repair shop, blending industrial garage styling with status-forward data. It surfaces four headline KPIs, an animated revenue and labor-hours chart, a clickable service-mix donut, live bay-utilization tiles that drill into vehicle, VIN, plate and work-order details, an approvals queue with one-tap authorization, and a top-technician efficiency board. A timeframe toggle redraws every chart and metric between today, week and month views.

Auto — EV Dealership Landing

An ultra-clean, Tesla-style landing page for a fictional electric-vehicle maker built in pure HTML, CSS, and vanilla JavaScript. It pairs a minimal white aesthetic with electric-blue accents, animated range and charging stats, a tabbed model lineup, a live charging-curve simulator with an animated SVG battery ring, a performance and autonomy feature grid, and a fully interactive build configurator that updates a running price summary. Scroll reveal, a sticky blurred nav, and a mobile menu round it out.

Auto — Vehicle Inventory Grid

A dealership pre-owned inventory grid built in an industrial, status-forward style. A sticky filter rail toggles make, body, and fuel chips, ranges trim price and mileage, and selects clamp the model-year window, while a search box scans across make, model, VIN, plate, and trim. Vehicle cards pair gradient photos with year, make, model, mileage, fuel badges, and tabular pricing. Sort the grid, save with the heart, quick-view any unit, then tick up to three cars into a compare tray that opens a best-value comparison table.

Auto — Luxury Dealership Landing

A cinematic single-page landing for Vanderhall Automobiles, a fictional luxury marque, in charcoal with champagne and chrome accents. A reveal-driven hero presents the flagship Etoile GT with headline specs, a filterable six-model lineup grid, a signature-craft section, a bespoke concierge ownership panel with a live service timeline, an interactive finance estimator with an animated monthly figure, and a validating book-a-test-drive form. Built with semantic HTML, CSS variables and vanilla JavaScript only.

Auto — Performance / Tuning Landing

A high-octane landing page for a fictional performance and tuning shop, built in vanilla HTML, CSS and JavaScript. It pairs a carbon-and-neon motorsport aesthetic with a live dyno gauge, an interactive virtual power pull, a switchable before-and-after dyno chart drawn in SVG, a masonry build gallery with spec popups, flat-rate stage packages, and a validated book-a-dyno form. Scroll reveals, animated stat counters and a scrolling marquee add adrenaline without any framework or build step.

Auto — Service Bay Board

A kanban-style service bay board for an auto repair shop, organizing live work orders into Waiting, In Progress, Done, and On Hold columns. Each job card shows the vehicle, customer, license plate, requested service, diagnostic code, assigned technician, ETA, and a labor-plus-parts total with a live progress bar. A KPI header tracks active jobs, waiting count, average progress, and open revenue, while drag-and-drop, tech assignment, search, and filters drive the flow.

Auto — Vehicle Detail

A dealership vehicle-detail page for a certified 2022 Toyota 4Runner, pairing a gradient photo gallery with a sticky pricing rail. A spec section flips between overview, engine and history tabs, a key-features grid lists equipment, and a live payment estimator recomputes the monthly figure from down payment, term and APR sliders. A sticky CTA bar surfaces on scroll, while test-drive and trade-in modals validate input and return a fictional trade valuation.

Coworking — Occupancy Dashboard

A warm industrial occupancy and utilization dashboard for a fictional coworking studio. It surfaces live KPIs for occupancy, desk utilization, peak hours and checked-in members, an interactive occupancy-over-day line chart with hover tooltips, a zone-by-hour heatmap with drill-in detail, and a list of underused resources flagged for review. A timeframe toggle reflows every number, the curve and the heatmap between today, week and month views.

Coworking — Desk Booking

A warm industrial desk-booking interface for a coworking studio. An interactive floor plan colors each desk by live status (free, reserved, occupied), while a date row and time-slot picker drive availability. Selecting a desk opens a detail card with its type, amenities and price in dollars or credits, and a running summary totals the cost before you confirm. Confirming marks the desk occupied to mimic real-time updates, with a toast acknowledgement.

Coworking — Live Floor Plan

A warm industrial live floor plan for a fictional coworking space. Desks and meeting rooms are laid out across four zones and colored by real-time status — free, in use, or reserved — over a soft concrete grid. A capacity header tracks live occupancy, zone bars show pressure per area, and hovering any seat reveals who is there and until when. Zoom, filter by zone or status, watch seats flip on a live tick, and reserve open spots.

Coworking — Maker Space Landing

A gritty, technical landing page for a members-run fabrication lab, built on a slate-and-electric-yellow maker palette with monospace accents. It pairs a hero with a live machine-status panel, a badge-gated equipment showcase, a filterable workshop schedule with live seat counts, animated monthly/yearly membership tiers, a safety and training section with a member badge card and QR unlock, a community project wall, and an email day-pass CTA with validation.