Showcase
199 live previews
Categories
Difficulty
View
Size
Density
Sort
No components match this filter.
Halaman
Agency — Branding / Identity Landing
A full one-page landing for Marrow and Plumb, a fictional branding and identity studio rendered in a cream, plum and warm-sand duotone with refined serif and sans pairing. It opens on an animated brand-mark hero and runs through social proof, end-to-end case studies with type specimens and color blocks, four services, a studio philosophy, a clear four-step process, founder testimonials and an inquiry form, all wired with vanilla JavaScript scroll reveals, counters and a toast.
Halaman
Agency — Marketing / Growth Landing
A full-page landing for a fictional growth marketing agency, Voltline. Bright purple-to-orange gradients on white drive an energetic, results-first mood across a sticky nav, a hero with an animated live revenue dashboard, four service cards, ROI-heavy case studies, an animated metrics band, a four-step funnel, client testimonials, and a validated book-a-call form. Vanilla JS handles the mobile menu, scroll reveals, count-up stats, and toast feedback.
Komponen UI
Agent Trace Viewer
A collapsible execution timeline for LLM agents that streams in each reasoning step, tool call, observation and final answer with status icons, wall-clock durations and token counts, expandable JSON payloads, nested sub-steps, and an all/tools/errors filter, so you can inspect exactly what an agent did and where it spent time or failed.
Halaman
Agency — Design Studio Landing
A polished, single-page landing for a fictional independent design studio, Foundry and Field. Editorial serif headlines on warm off-white with an electric coral accent carry an oversized hero, a selected-works case grid with hover reveals, a numbered services list, a dark studio and team section, an awards and clients strip, four process steps, an auto-rotating testimonial carousel, and a validating contact form. Built with semantic HTML, CSS variables and vanilla JavaScript only.
Halaman
Agency — Video / Production Landing
A full-page landing for Nocturne, a fictional film and motion studio, built on a black canvas with cinematic amber-to-red accents and an animated film-grain overlay. A transparent sticky nav sits over a full-bleed hero with an animated poster and play button, followed by a client marquee, a hover-play showreel grid, three service blocks, a behind-the-scenes band with count-up stats, a four-act process, a rotating testimonial carousel, and a bold make-something CTA. Vanilla JS drives the reel modal, scroll reveals, and validated forms.
Halaman
Agency — Software / Dev Shop Landing
A dark, engineering-grade landing page for Northbyte, a fictional software and product studio, built on a near-black canvas with a mono-lime accent, slate highlights, and a Space Grotesk and JetBrains Mono pairing. The hero pairs a strong headline with a live typewriter terminal that runs a deploy log on loop, plus count-up proof stats. Below sit a scrolling tech stack, a four-practice services grid, case studies with hard metrics, a four-step engagement model, a senior team row, a rotating testimonial carousel, and a validated start-a-project form.
Halaman
AI Product — Code Assistant Landing
A developer-native marketing landing page for Cortex, a fictional AI coding assistant. Built on a dark editor theme with mono headlines and syntax-highlight accents, it pairs a self-typing fake code editor hero with a supported-languages strip, a four-feature grid, a tabbed live demo that switches between completion, repo chat and fix modes, a copyable install snippet, developer testimonials, a monthly-yearly pricing table, a closing CTA and footer. Pure HTML, CSS and vanilla JS.
Halaman
AI Product — Image Generation Landing
A full one-page marketing landing for a fictional AI image generator, Prismeo, built in vanilla HTML, CSS, and JavaScript. It pairs a black, gallery-like canvas with iridescent magenta-to-teal-to-gold accents, a floating masonry hero gallery, and a live prompt bar. Interactive pieces include a style-picker that swaps the gallery, a before-to-after comparison slider, a monthly-annual pricing toggle, scroll reveals, a typewriter prompt, and a mobile nav with toast feedback.
Halaman
AI Product — Chat Assistant Landing
A dark, premium one-page marketing site for Lumio, a fictional conversational AI assistant. It pairs a violet-to-cyan glow aesthetic with an animated hero chat mockup that types a prompt and streams a reply, plus trust logos, a memory and tools feature grid, a three-step how-it-works flow, a genuinely interactive try-a-prompt playground, testimonials, a monthly and yearly pricing toggle, an accordion FAQ, and a waitlist call to action. Built with semantic HTML, responsive CSS, and dependency-free vanilla JavaScript.
Halaman
AI Product — AI Search Landing
A polished one-page marketing site for Sourcely, a fictional AI answer engine that reads the live web and replies with cited answers instead of blue links. Clean white layout with an electric-blue accent, sticky nav, and a hero search bar that animates a typed question into a sourced answer card. Includes a feature grid, three-step explainer, a traditional-search comparison, an interactive ask-a-question demo, testimonials, billing-toggle pricing, an accordion FAQ, and a footer.
Halaman
AI Product — Voice AI Landing
A calm, futuristic one-page marketing site for a fictional voice AI product, built in vanilla HTML, CSS and JS. It pairs a deep indigo palette with pastel waveform accents, an animated hero orb, and a press-to-talk demo. Sections cover assistants, dubbing and accessibility use cases, a play-to-hear voices showcase with a live reacting waveform, a three-step API walkthrough, monthly and annual pricing, testimonials, an email capture CTA, and a footer.
Komponen UI
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.
Komponen UI
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.
Halaman
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.
Halaman
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.
Halaman
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.
Halaman
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.
Halaman
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.
Halaman
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.
Komponen UI
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.
Halaman
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.
Halaman
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.
Halaman
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.
Halaman
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.
Halaman
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.
Komponen UI
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.
Komponen UI
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.
Komponen UI
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.
Komponen UI
CSS Anchor Positioning
Tether tooltips and popovers to their trigger with pure CSS anchor-name and position-anchor, place them around the anchor via position-area, and let position-try-fallbacks flip them into view near a viewport edge. A live placement grid, an interactive playground, and a JS-driven fallback keep it working even in browsers without native support.
Halaman Definisi Ultra Tinggi
Apple Vision Pro UHD Product Page
An ultra-high-definition product showcase inspired by Apple's Vision Pro landing page. Features immersive scroll-based reveals, kinetic typography, depth-mapping shadows, and high-fidelity motion sequences using GSAP and Lenis.
Halaman Definisi Ultra Tinggi
Uber UHD Ride-Share Landing Page
A premium dark-themed ride-share landing page inspired by Uber — featuring animated gradient mesh backgrounds, glassmorphism booking cards, CSS-only vehicle illustrations, scroll-pinned feature reveals, animated stat counters, and a phone app mockup with parallax tilt.
Halaman Definisi Ultra Tinggi
Nike UHD Athletic Brand Landing Page
A premium dark-themed athletic brand landing page inspired by Nike — featuring animated gradient mesh backgrounds, glassmorphism product cards, CSS-only shoe illustrations, scroll-pinned innovation reveals, animated stat counters, and a phone app mockup with Nike Run Club UI and parallax tilt.
Halaman Definisi Ultra Tinggi
Spotify UHD Music Streaming Landing Page
A premium dark-themed music streaming landing page inspired by Spotify — featuring animated gradient mesh backgrounds, glassmorphism playlist cards, CSS-only album art, scroll-pinned feature reveals, animated stat counters, and a phone app mockup with Now Playing UI and parallax tilt.
Halaman Definisi Ultra Tinggi
Tesla UHD Electric Vehicle Landing Page
A premium dark-themed electric vehicle landing page inspired by Tesla — featuring animated gradient mesh backgrounds, glassmorphism model cards, CSS-only vehicle silhouettes, scroll-pinned technology reveals, animated stat counters, and a dashboard mockup with parallax tilt.
Halaman Definisi Ultra Tinggi
Apple UHD Services & Products Page
A premium dark-themed landing page inspired by Apple — featuring gradient mesh canvas, product showcase cards, pinned scroll services walkthrough, animated stat counters, CSS-only iPhone mockup, and glassmorphism ecosystem section.