Creator — Author Landing
A warm, bookish personal-brand landing page for a literary novelist, built in vanilla HTML, CSS, and JavaScript. Features a serif hero with the latest book cover and buy CTA, a four-book shelf grid, an about-the-author bio with portrait, praise and press quotes, a readings and events list with RSVP, a slow-newsletter signup, and social links. Interactions include a book quick-look modal, an accessible mobile nav, scroll reveal animations, and toast confirmations on every call to action.
Creator — Coach / Speaker Landing
A polished, single-page personal-brand landing for a leadership coach and keynote speaker, built in vanilla HTML, CSS, and JavaScript. Warm-white canvas with a bold coral accent and a confident friendly sans, it pairs a strong hero and book-a-call CTA with program cards, an about and credentials block, a results testimonial slider, signature speaking topics, a free-resource lead magnet, and a booking form. Fully responsive with a mobile nav, scroll reveal, and validated forms.
Creator — Musician Landing
A dark, neon-soaked one-page landing for a fictional electronic artist. It pairs a hype hero with new-release cover art and CTA, a latest-tracks list driven by a mock play and pause mini-player, a tour-dates schedule with ticket states, a music-video gallery, a merch capsule teaser, press quotes, a newsletter signup with validation, and social links. Vanilla JS handles the mobile nav, scroll reveal, toast feedback, and the persistent fake player.
Creator — Photographer Landing
A gallery-quiet personal landing page for a fictional photographer, built in vanilla HTML, CSS and JavaScript. A full-bleed cinematic hero opens onto a filterable masonry portfolio with a keyboard-accessible lightbox, then services with pricing, a story-driven about block with stats, client logos, testimonials and a validating booking form. Minimal sans typography, an ink-on-white palette and tasteful scroll reveals keep the focus on the work.
Creator — Streamer / Gamer Landing
A dark, electric personal-brand landing page for a variety streamer, built with semantic HTML, CSS, and vanilla JavaScript. Features a neon-on-black hero with a live-now pulse badge and drifting viewer count, a tabbed weekly stream schedule, a clip gallery with an accessible lightbox, membership sub tiers, sponsors and gear, a Discord community block, a validated newsletter form, scroll reveals, a mobile nav toggle, and toast feedback on every call to action.
Job Board — Application Form
A multi-section job application form for an applicant tracking flow. Pick a saved resume or drag-and-drop a new file with live upload preview, edit autofilled contact details, answer screening questions with radio pills and selects, write an optional cover letter with a character counter, then review every answer and submit to a confirmation screen with a reference number. Includes inline validation, a stepper, toasts, save-draft and bookmark controls.
Job Board — Application Status Pills
A clean, scannable application-status system for a job board or ATS — semantic pills for applied, screening, interview, offer, hired, and rejected, paired with a live horizontal stepper that animates as you transition between stages. Includes a featured tracker with advance, back, reject, and reset controls, plus a filterable pipeline list of fictional applications with company logos, remote and salary chips, save toggles, and a toast helper. Built with vanilla HTML, CSS, and JavaScript.
Job Board — Applications Tracker
A polished seeker dashboard for tracking the whole job hunt in one scannable view. Pipeline rows show each application with company logo, location and salary chips, remote badges, and color-coded status pills for applied, in review, interview, offer, and rejected. Filter by status, withdraw or re-apply, resume saved jobs into the pipeline, bookmark recommended roles, and watch a profile-completeness meter climb as you act on nudges. Built with semantic HTML, CSS variables, and vanilla JavaScript.
Job Board — Candidate Detail
A recruiter-facing candidate detail page for an applicant tracking system, built with vanilla HTML, CSS, and JavaScript. It pairs a profile header showing name, role, stage pill, and star rating with tabbed sections for resume, scorecard, activity, and notes. Interview criteria sliders feed a live average back into the overall rating, while a sticky action bar advances, rejects, or schedules the candidate with toast confirmations and a self-updating activity feed.
Job Board — Candidate Pipeline
A recruiter-side ATS pipeline that turns a hiring funnel into a scannable kanban board. Five color-coded stages — applied, screening, interview, offer, and hired — carry candidate cards with generated avatars, star ratings, location and salary chips, remote badges, and skill tags. Drag candidates between columns or nudge them with arrow buttons, watch live column counts update, open a quick-view drawer for full context, and filter the whole board by role, minimum rating, or free-text search. Built with semantic HTML, CSS variables, and vanilla JavaScript.
Job Board — Executive Landing
A discreet executive-search landing page in charcoal, gold and ivory with a refined serif-and-sans pairing. Features an elegant hero with a confidential mandate card and animated figures, a confidential-search value prop, filterable leadership mandates with save toggles, a vetted-network panel, dark process steps, client logos, and a validating request-access form. Vanilla JS handles scroll reveal, counters, filtering, bookmarks and a toast — fully responsive down to 360px.
Job Board — Filter Rail
A faceted job-search filter rail with collapsible groups for role, job type, experience and remote mode, plus a minimum-salary slider, a location input that turns cities into removable chips, and segmented controls. Every interaction updates a live results count and a row of active-filter chips with one-tap removal and clear-all. On narrow screens the rail becomes an accessible slide-in drawer, and job cards carry salary, location and remote badges with a bookmark toggle.
Job Board — General Board Landing
A clean, trustworthy marketing landing for a general job board, built on white, trust-blue, and slate. It pairs a dual-field role and location search with trending categories, featured employer cards carrying remote and hiring pills, seeker and employer value props, a vivid stats band, hired-through testimonials, and a dual find-a-job or post-a-job call to action. Vanilla JS drives interactive search, popular-search chips, a mobile menu, toast feedback, and smooth scroll reveal, fully responsive down to 360px.
Job Board — Gig / Shift Work Landing
A mobile-first marketing landing page for a fictional gig and shift-work platform, built with a bold orange-and-teal palette and chunky sans typography. It pairs an energetic hero with a live shift feed, animated count-up stats, an instant-pay wallet widget, scannable shift categories, a three-step how-it-works flow, an app-download block, and a business hiring call to action. Every section reveals on scroll and interactions surface lightweight toasts.
Job Board — Internal Mobility Landing
A warm, belonging-first internal careers landing page for a fictional company called Lumen. It pairs a navy-and-coral brand with a welcoming hero, animated stats, a spotlight role with skill-match meter, a filterable grid of open internal roles, employee growth stories, learning and development perks, culture values on a navy band, and an express-interest CTA. Includes bookmarks, count-up numbers, scroll reveals, a mobile menu, and a validated form.
Job Board — Job Detail
A polished, scannable job detail page for a job board or ATS. Shows a sticky header with title, company, location, salary chips and remote badge, plus apply and save actions. Sections cover the role, responsibilities, requirements and benefits, alongside a company snapshot card, hiring-manager note and similar roles. Interactions include a sticky apply bar that appears on scroll, a synced save toggle, an expandable company panel and native share with clipboard fallback.
Job Board — Job Listing Card
A reusable, scannable job listing card for a careers board or ATS. Each row pairs a colored company logo with the role title, company, location and a green salary chip, plus status badges for new, urgent and remote roles. A bookmark toggle tracks saved jobs in a live header counter, quick-apply turns into an applied confirmation, and chip filters and search narrow the list. Clean, accessible, responsive vanilla HTML, CSS and JavaScript with no dependencies.
Job Board — Job Posting Editor
A polished applicant-tracking job posting editor with a split-pane layout: edit title, department, location, employment type, salary range and a mock rich-text description on the left, build add/remove screening questions with required toggles, and watch a candidate-facing job card update live on the right. Toggle remote-friendly, save as draft or publish, and see status pills, salary and location chips, a bookmark toggle, and friendly toasts confirming every action.
Job Board — Job Search
A polished job search page with a sticky filter rail for role, location, remote, salary range, type and experience, a live search bar, and a sortable list of scannable job cards. Each card shows a company logo, title, salary and location chips, tags, posted date, plus a save toggle. Results count, relevance and salary sorting, and pagination all update instantly with vanilla JavaScript and no dependencies.
Job Board — Resume Builder
A candidate profile and resume builder with editable sections for summary, experience, education, skills, and links beside a live preview pane that updates as you type. A completeness meter tracks profile health with status pills, while a visibility toggle controls recruiter discoverability. Add, remove, and drag-reorder entries, manage skill chips, and export a plain-text resume. Clean, scannable, professional job-board styling with soft shadows and accessible controls.
Job Board — Resume Upload
A candidate-portal resume upload step with a drag-and-drop zone, a file chip that shows an animated upload progress bar, and a simulated parse that streams section checks before populating an editable preview. The preview auto-fills name, title, email, phone and location, renders removable skill pills with an add-on-Enter input, and lists prior roles with colored company logos. Remove, re-upload and sample actions all work, powered by dependency-free vanilla JavaScript.
Job Board — Tech / Startup Landing
A dark, developer-cool landing page for a tech and startup job board. A grid-lit hero pairs animated count-up stats with a live terminal motif that types out a match-and-apply session. Below it sit curated startup roles with salary bands and remote badges, category filters, an interactive salary-transparency card driven by a seniority slider, a tech-stack chip cloud that totals matching roles, a why-us grid for engineers, and an email capture CTA. Built with vanilla JS, scroll reveal, and a toast helper.
Nonprofit — Animal Welfare Landing
A warm, friendly animal-welfare landing page for a fictional rescue shelter, built with plain HTML, CSS and vanilla JavaScript. It pairs a heart-warming hero and live adoption ticker with a filterable adoptable-animals grid, animated impact counters, a campaign progress thermometer wired to an interactive donate box, a sponsor-a-pet slider, success-story cards, and a volunteer sign-up — all responsive down to mobile with scroll reveals, toast feedback and accessible, keyboard-usable controls.
Nonprofit — Campaign / Fundraiser
A warm, polished fundraiser landing page for a fictional clean-water charity, featuring an animated goal thermometer with raised-versus-goal totals, donor and days-left counters, and a wells-funded tracker. Visitors pick a perked donation tier or enter a custom one-time or monthly amount, watch a 2x matching note update live, follow a streaming recent-donors feed, read an updates timeline, and share the campaign across networks — all with vanilla JavaScript and trust badges.
Nonprofit — Campaign Manager
A warm, polished back-office campaign manager for a fictional charity, showing fundraising drives as cards or a sortable table with status badges, animated progress bars, goal-versus-raised totals, and date ranges. Staff filter by status, search by name, toggle the card and table views, and pause or activate drives in one click. A slide-in drawer creates or edits a campaign with goal, dates, status, a short story, and repeatable giving tiers, while impact numbers and a registered-charity badge reinforce transparency.
Nonprofit — Donation Flow
A warm, four-step nonprofit donation flow for the fictional Open Harvest charity. Pick a preset or custom amount, toggle one-time versus monthly giving, choose a designation, and optionally cover processing fees. Live impact equivalence translates each gift into meals served, while a fundraising thermometer, impact stats, and a donor wall build trust. Inline validation guides donor details and payment before a review step and an animated thank-you screen confirm the gift.
Nonprofit — Donation Widget
A warm, conversion-minded donation widget for charities and nonprofits. Preset amount chips with a custom-amount input, a one-time versus monthly frequency toggle, live impact-equivalence copy that changes per gift size, an optional cover-the-fee checkbox, a campaign progress thermometer, donor recognition, and trust badges. The donate button label updates to reflect the running total and frequency, and a toast confirms each gift, all in self-contained vanilla HTML, CSS, and JavaScript.
Nonprofit — Donations Dashboard
A warm, human nonprofit admin dashboard for tracking fundraising. It surfaces four headline KPIs (total raised, recurring revenue, average gift, new donors), a redrawable donations-over-time area chart with hover tooltips, a recurring-versus-one-time donut split with live impact numbers, ranked top campaigns with drill-in filtering, a goal thermometer with leadership donor recognition, and a searchable recent-donations table that exports to CSV — all self-contained vanilla HTML, CSS, and JavaScript.
Nonprofit — Donor Wall
A warm, hopeful donor recognition wall for nonprofits and charities. Supporters are grouped into platinum, gold, and silver giving tiers with colored avatars built from their initials, a tier-colored accent border, and optional gift amounts that can be revealed or kept private. Visitors can filter by tier, search by name, and watch matching supporters highlight on hover. Animated impact counters, trust badges, and a prominent donate call-to-action round out the experience.
Nonprofit — Education / Youth Landing
A bright, optimistic landing page for an education and youth nonprofit, built with vanilla HTML, CSS and JavaScript. It pairs a hopeful hero and animated impact counters with three program cards, a transparency ledger, a sponsor-a-student giving widget, a campaign progress thermometer, donor recognition, success-story testimonials, and volunteer and donate calls to action. Scroll reveals, a working donation amount picker, an email signup and a mobile nav make the page feel alive without any framework or build step.
Nonprofit — Environmental Landing
A complete environmental climate nonprofit landing page for a fictional reforestation charity. It pairs a full-bleed nature hero with count-up cause stats, four restoration program cards, an interactive impact-map teaser with clickable site pins, a petition pledge with an animated signature thermometer, a transparency breakdown with allocation bars and trust badges, partners, and a frequency-aware donate widget that translates dollars into trees. Forest green, ocean blue and earth tones; scroll reveals; fully responsive vanilla JS.
Nonprofit — Events Calendar
A warm, hopeful events and fundraisers page for a fictional charity. Browse galas, runs, food drives and workshops as photo cards showing date, time, location, a live spots-left counter and an RSVP button, then toggle to a month calendar where each day carries colored dots per event type. Chip filters narrow by category, RSVPs and waitlist confirm with a toast, animated impact counters and a campaign progress thermometer round out the design — all self-contained vanilla JS.
Nonprofit — Fundraising Thermometer
A warm, self-contained fundraising progress UI for nonprofits and charity campaigns. Pairs a classic vertical thermometer with bulb and milestone markers alongside horizontal progress bars for multiple funds. Shows raised, goal, percent and donor count with transparent impact numbers, trust badges and donor recognition. Preset and custom donation buttons animate the fill, fire milestone toasts, and add recent givers in real time.
Nonprofit — Giving Toggle
A warm, donor-ready giving toggle that lets supporters switch between one-time and monthly gifts with a single segmented control. Choosing monthly surfaces a most-impact badge, rewrites the supporting copy, relabels every preset amount, and projects an annual total alongside a friendly impact line. Preset chips and a custom amount field stay in sync, an animated progress thermometer anchors the campaign, and trust badges plus recent donors reinforce transparency — all self-contained vanilla HTML, CSS and JavaScript.
Nonprofit — Home
A warm, human nonprofit home page for a fictional clean-water charity, built with vanilla HTML, CSS, and JavaScript. It pairs a mission hero and prominent donate CTA with an animated impact stat band, what-we-do cards, a featured campaign progress thermometer, an accessible auto-playing impact-story carousel, a ways-to-help grid, and a newsletter signup. Interactions include count-up counters, a donate quick-amount picker with live impact copy, toasts, and a focus-trapped modal.
Nonprofit — Humanitarian Landing
A full humanitarian relief NGO landing page built in vanilla HTML, CSS and JavaScript. It opens with an urgent crisis hero, a live fundraising thermometer and a prominent donate call to action, then moves through where-we-work region cards, animated impact statistics, an emergency appeal with selectable gift amounts and live impact copy, ways-to-help options, a transparency breakdown with trust badges and donor recognition, and a matched-giving donate form. Includes a mobile nav, scroll reveal and animated counters.
Nonprofit — Impact Report
A warm, transparent annual impact report page for a fictional charity. Headline stat cards count up on scroll, a hover-linked donut chart breaks down where every dollar goes, and program-outcome sections reveal as you scroll with photo placeholders, beneficiary quotes and animated progress thermometers. Rounds out with an audited financial-transparency table, donor recognition, and download and share actions wired to a small toast helper. Built with vanilla HTML, CSS and JavaScript — no frameworks, fully responsive and accessible.
Nonprofit — Impact Stat Counter
A warm, mission-driven impact stat counter for nonprofits and charities. A responsive grid of bold count-up figures pairs each number with an icon, label, and human context line such as meals served, wells repaired, and students kept in school. Numbers animate from zero with eased easing the moment the grid scrolls into view, and a replay button lets visitors watch the impact build again. Includes trust badges, a prominent donate call to action, and a toast helper.
Nonprofit — Petition / Pledge
A warm, hopeful petition and pledge page for a fictional clean-water charity. It pairs a bold cause statement and impact stats with an animated signature-goal thermometer and progress bar, a validated sign form with optional comment and privacy toggle, a live recent-signatures feed that grows as people sign, and quick share actions. A sticky donate call-to-action and trust badges round out a self-contained, accessible, responsive vanilla build.
Nonprofit — Pledge / Sponsorship Card
A warm set of four nonprofit sponsorship cards for sponsor-a-child and sponsor-a-cause programs, each with a photo placeholder, name, story snippet, monthly amount and a progress thermometer. Cards flip to reveal the impact details, facts and donor recognition, while a sponsor toggle adds each pledge to a running monthly total with animated counters and friendly toasts. Built with semantic HTML, responsive CSS and vanilla JavaScript, accessible and keyboard-friendly down to small screens.
Nonprofit — Religious / Community Landing
A warm, welcoming landing page for a fictional religious community center, built with vanilla HTML, CSS, and JavaScript. It pairs a classic serif voice with gold and teal accents across a sticky nav, hero with live service times, animated impact counters, a filterable ministries grid, an events list with RSVP, a give and tithe panel with amount presets and a fundraising thermometer, community stories, donor recognition, and a get involved form.
Nonprofit — Story Spotlight
A warm, long-form beneficiary spotlight page for a fictional water charity. Features a photo hero, magazine-style narrative with drop cap and pull quotes, a draggable before-and-after comparison, a four-image gallery with keyboard-navigable lightbox, related-story cards, and a sticky donate rail with a live fundraising thermometer, preset amounts, animated impact counters, recent-donor feed, trust badges, and native share with a fallback sheet.
Nonprofit — Volunteer Manager
A warm, human nonprofit admin screen for managing a volunteer roster and shift roster in one view. It pairs a searchable, filterable volunteers table — name, role, logged hours and status — with a Saturday shift grid showing live fill thermometers and open slots. Coordinators can approve pending applicants, log hours, select a volunteer and assign them to an open shift, while impact stats roll up total hours, active helpers and estimated meals served.
Nonprofit — Volunteer Portal
A warm, human volunteer dashboard for a fictional community pantry network, pairing logged-hours and meals-served impact stats with an animated monthly-goal thermometer. Volunteers browse upcoming, available, and past shifts through keyboard-navigable tabs, claim or cancel a shift to watch spot counts and totals recalculate live, scan a June schedule calendar, track earned badges and a top-volunteers leaderboard, and log new hours through an accessible modal with toast confirmations — all in vanilla JavaScript.
Nonprofit — Volunteer Signup
A warm, hopeful volunteer recruitment page for a fictional charity. Browse open roles as photo cards showing cause, skills, schedule, location and a live spots-left bar that shifts amber when seats run low and red when a role is fully staffed. Chip filters narrow by cause, time commitment and on-site versus remote, with an instant text search. Clicking a card slides open a detail drawer with an apply form — validated availability, interests and contact fields — confirmed through a small toast, all self-contained vanilla JS.
Ticketing — Checkout
A bold event-ticketing checkout page with a live order summary, seat-tier legend, quantity steppers, and a perforated ticket motif. Apply a promo code for instant discounts, watch the service-fee and facility-charge breakdown recalculate, and race a ten-minute seat-hold countdown. Inline-validated attendee and payment forms format card details as you type, and placing the order reveals an animated success ticket with a generated QR placeholder. Vanilla HTML, CSS, and JavaScript only.
Ticketing — Concert Landing
A loud, electric concert ticketing landing page for a fictional stadium tour, built with vanilla HTML, CSS, and JavaScript. Features a full-bleed neon hero with a live countdown to opening night, a filterable tour-dates list with availability badges, a three-act lineup, perforated ticket-tier cards with a sticky cart, a stylized venue map, a hype gallery, an accordion FAQ, mobile navigation, toast feedback, and scroll-reveal animations on a black plus magenta palette.
Ticketing — Conference Landing
A clean, modern landing page for the fictional DevHorizon 2026 engineering conference. An indigo gridded hero pairs the event name, dates and San Francisco venue with a live early-bird countdown, headline stats and dual register calls to action. Below it sit a speakers grid with keynote badges, a four-track agenda built from accessible tabs, three pricing tiers with strikethrough early-bird rates, a stylized venue and travel block, a sponsor wall and a register form. Vanilla JS handles the tabs, countdown, scroll reveal and toast feedback.
Ticketing — Date Filter Chips
A polished event-ticketing date filter that pairs one-tap window chips (today, this weekend, this week, this month) with a custom range calendar. Selecting a chip jumps the calendar to the matching month and updates an applied-range banner with a live show count, while tapping two days draws a custom start-to-end range. The matching event list re-sorts and re-filters instantly, showing perforated ticket posters, prices, and low-stock or sold-out badges.
Ticketing — Digital Ticket
A self-contained mobile digital event ticket with a perforated stub layout, photographic gradient hero, prominent date and venue, and a seat-tier color legend. It features an animated SVG-style QR code on canvas that refreshes on a security timer, a countdown to doors, and a brightness boost for scanning. Tap to flip the card for full event details, add the pass to a wallet, or open a validated transfer modal that voids your QR and reissues a fresh one.
Ticketing — Door Check-in Scanner
A bold door check-in console for festival gate staff. A mock camera viewport with an animated targeting frame and sweeping laser feeds a color-coded result card that turns green for valid passes, amber for already-used tickets, and red for invalid codes. A live counter tracks admitted guests against capacity with a scan-rate readout, while a manual lookup searches by name or ticket code and a recent-scans feed logs every decision. Vanilla HTML, CSS, and JavaScript only.
Ticketing — Event Card
A reusable event ticketing card pattern rendered as a responsive grid of six distinctive variants. Each card pairs a photographic gradient hero with a floating date badge, category tag, venue line, and a prominent price-from figure. Interactive states cover a save heart toggle with a satisfying pop, hover lift, low-stock and sold-out badges, plus disabled checkout for unavailable shows. Keyboard friendly with a lightweight toast helper and full WCAG-minded contrast.
Ticketing — Event Detail
A high-energy event detail page for a fictional music festival. Photographic gradient hero with title, date, venue and a live countdown to doors. Three ticket tiers with color-coded seat legend, low-stock and sold-out badges, and quantity steppers that drive a running order summary and sticky checkout bar. Includes a tabbed lineup schedule, a stylized venue map with info, and an FAQ accordion. Vanilla JS only.
Ticketing — Event Discovery
A bold, high-contrast event discovery page for a fictional ticketing service. Search artists and venues, filter by city, category and date chips, and browse a responsive grid of event cards with photographic gradient heroes, date flags, price-from labels and low-stock or sold-out badges. A featured carousel, trending sidebar with interest scores, and a color-coded tier legend round it out, while sorting by soonest, popularity or price and one-tap save keep the whole thing genuinely interactive.
Ticketing — Event Setup
A bold event setup wizard for organizers. A four-step flow covers event details, a live ticket-tier builder with per-tier color, price and quantity, a seating-mode switch between general admission and reserved sections, and publish toggles. Every edit drives a live ticket-style preview with color-coded tiers, sold-out flags and running capacity and gross-potential totals. Inline validation blocks publishing until the name, venue and a future date are set. Vanilla JS only.
Ticketing — Festival Landing
An immersive multi-day festival landing page wrapped in a warm sunset gradient with a film-grain overlay and a funky display headline. A poster-style hero stacks the dates, a live countdown to gates, and a stacked-headliner lineup. Day-by-day tabs swap the schedule, three pass tiers carry sold-out and low-stock badges, and a stylized site map, experiences grid, and accordion FAQ round it out. Scroll reveals, a mobile menu, and toasts run on vanilla JavaScript only.
Ticketing — Organizer Dashboard
A bold, high-contrast organizer dashboard for the fictional Neon Pulse Festival. Four KPI cards track tickets sold, revenue, capacity and gate scans with trend chips and a low-stock badge. A timeframe toggle redraws an SVG sales chart across 7, 30 and 90 days, an interactive donut breaks sales down by ticket tier, a check-in progress ring shows pre-event readiness, and a recent-orders table drills into a ticket-stub drawer. Vanilla JS only.
Ticketing — QR Ticket Stub
A mobile entry-pass stub component shown across three lifecycle states — valid, used, and expired. Each card pairs a photographic gradient hero with a floating state badge, a perforated torn-stub divider with rounded notches, and a colour-coded seat tier legend. A faux QR pattern carries a live scan-pulse ring while valid, enlarges into an accessible lightbox on tap, and a mark-as-used demo flips a ticket to scanned with a timestamp and toast. Keyboard friendly and responsive to 360px.
Ticketing — Seat Picker Widget
A standalone, zoomable seat-map picker widget for event ticketing. Renders a tiered seating chart with a color-coded legend, per-seat hover tooltips showing row, seat number and price, and tap-to-select with a six-seat order guard. A best-available button auto-picks the highest tier contiguous block, while a live chip bar, running total and countdown keep the selection state clear. Built with semantic markup, keyboard support and vanilla JavaScript only.
Ticketing — Seat Selection Map
An interactive event-ticketing seat picker built with vanilla JavaScript and an SVG venue chart. Fans pan and zoom across a tiered arena, filter sections by price using a color legend, and tap open seats to add them to a live cart that totals subtotal, service fee, and grand total. Seat states cover available, selected, taken, and accessible, with a six-seat max guard, keyboard support, toast feedback, and a countdown to showtime.
Ticketing — Sports Landing
A bold stadium ticketing landing page for a fictional football derby, built with semantic HTML, CSS and vanilla JavaScript. Features a team-vs-team fixture hero in deep blue and red with a live kickoff countdown, buy-by-section ticket cards with tier colours and stock badges, a clickable seating-map teaser, an upcoming fixtures list, hospitality packages, an expandable fan-info FAQ, sticky cart bar, toast feedback, mobile nav and scroll reveals.
Ticketing — Theater Landing
An elegant theater and arts ticketing landing page for a fictional stage production, built in burgundy, gold, and cream with a refined serif headline treatment. It pairs a cinematic gradient hero and live opening-night countdown with a synopsis, a cast and creative grid, an interactive month-by-month performance calendar showing seat availability, seating tiers with sold-out and low-stock badges, critic quotes, and a booking form that tallies a live total.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Banking — Account Funded
A trust-first onboarding success screen for a fintech account opening. A celebratory navy hero with a check seal and canvas confetti confirms the opening deposit cleared, then reveals the new account number with one-tap copy and a tappable virtual debit card whose digits unmask on demand. A three-step next-action checklist drives direct deposit, card ordering, and referrals with a live progress bar, and ships as self-contained vanilla HTML, CSS, and JavaScript.
Banking — Account Overview
A trust-first banking account overview dashboard with a total balance hero and sparkline, checking, savings and credit account cards with masked numbers, a conic-gradient spending donut with category legend, a filterable recent transactions feed showing credit and debit colors plus cleared, pending and failed status pills, quick actions for transfer, pay and deposit, and an upcoming bills panel. Hide and show balances, switch accounts and filter activity, all in self-contained vanilla JS.
Banking — Account-Open Wizard
A trust-first fintech account-opening (KYC) wizard that walks new customers through four guided steps — personal details, home address, identity verification and a final review. It features a vertical progress stepper, an animated progress bar, inline field validation with friendly errors, an age and email check, a mock ID and selfie upload with scanning progress, an editable summary, terms acceptance and an encrypted success screen with a generated application reference and masked IBAN. Built with semantic HTML, Inter typography and responsive, accessible vanilla JavaScript.
Banking — Amount Keypad
A trust-first currency amount entry screen for fintech send-money and top-up flows. A large tabular-figure display formats digits live with thousands separators, a tappable currency pill cycles EUR, USD and GBP, and a backspace key trims one character at a time. Quick-amount chips, a Send-max shortcut, and a live balance hint speed real input, while invalid taps shake the display and over-balance amounts disable the call to action. Built with on-screen and physical keyboard support, vanilla JS only.
Banking — Balance Card
A trust-first fintech balance card you can drop into any banking dashboard. Shows account name and type, a masked card number, and a balance set in tabular figures with a mini sparkline trend. A per-card and global hide/show toggle blurs sensitive numbers, status pills flag activity and due dates, and quick actions sit one tap away. Ships as three real-feeling variants — checking, high-yield savings, and a credit card with a utilisation bar — in a responsive grid, vanilla JS only.
Banking — Business Banking Landing
A polished, trust-first marketing landing for a fictional SMB business bank, Ledgerline. It pairs a headline hero with an animated dashboard mockup — a counting-up balance, sparkline chart, live transaction rows and a tilted expense card — with feature cards for multi-user access, invoicing, expense cards and integrations, a team-sized pricing table with a monthly/yearly toggle, a customer logo strip, a case-study quote with count-up stats, an email capture CTA and a full footer. Built with semantic HTML, Inter typography and accessible, responsive vanilla JavaScript.
Banking — Card Detail
A trust-first card management screen for a fintech app, featuring an animated 3D card that flips to reveal its security code, a one-tap freeze and unfreeze control, a live monthly spending-limit slider with usage tracking, copy-to-clipboard card number, virtual card creation, granular controls for online, contactless, ATM and international use, and a card transaction feed with credit and debit amounts plus cleared, pending and failed status pills.
Banking — Customer Detail
A trust-first admin customer detail screen for a fintech back office. It pairs a profile header carrying an animated risk score, verified-identity cues and an action toolbar with tabbed sections for overview, accounts, activity and internal notes. Operators can freeze accounts, flag the customer for review, re-run KYC and add notes, with toast feedback and a live-updating risk ring. Built with semantic HTML, layered shadows, status pills and tabular figures for every monetary value.
Banking — Disputes Queue
A trust-first chargeback and disputes console for bank operators, with a navy header carrying a 2FA-verified session badge, summary stats for open cases, at-risk aging, escalations and total exposure, and a dense table of disputes showing case IDs, masked card numbers, customers, reason codes, tabular-figure amounts, age and status pills. Filter by status, search across cases, and open a sliding detail drawer with evidence, an activity timeline and accept, reject or escalate actions that transition status live.
Banking — ID Verification
A trust-first KYC identity-check flow for fintech onboarding, built in vanilla JS. Customers pick a document type, then upload front and back through drag-and-drop zones that show a live progress bar, a masked preview thumbnail, and a sharp-and-readable status before a mock selfie liveness step runs blink and head-turn checks. An animated scan line reads the document, compares biometrics, and screens for sanctions, ending in a verified result card with match score and reference, or a needs-review state. Fully keyboard-usable and responsive to 360px.
Banking — Investing
A trust-first fintech investing screen rendered in pure HTML, CSS and vanilla JavaScript. It pairs a headline portfolio value with day gain or loss, an interactive SVG performance chart with timeframe tabs and hover scrubbing, a holdings table, an allocation donut with legend, and a buy or sell trade panel that opens a confirmation modal. Clicking any holding reveals a detail sheet with cost basis and total gain. Tabular figures, masked security cues and toast feedback complete the experience.
Banking — Lending / BNPL Landing
A warm, optimistic marketing landing for a fictional buy-now-pay-later product called Splitly. It pairs a friendly coral-and-mint hero with a live split-in-4 calculator where a slider and editable amount field rebuild four equal instalments and a running total in real time. Below it sit how-it-works steps, an eligibility panel with no-score-impact cues, a filterable grid of partner merchants, three transparent rate plans, an accordion FAQ, an email capture, and a footer — all responsive vanilla HTML, CSS and JavaScript with toasts and a mobile nav.
Banking — Neobank Landing
A complete marketing landing page for a fictional neobank built with vanilla HTML, CSS and JavaScript. Features a tilting phone mockup with a live account screen, animated stat counters, a flippable virtual card, a tabbed in-app showcase, social proof, switchable monthly and yearly pricing tiers, a validated signup form with toasts, mobile navigation and scroll reveal. Energetic white and electric violet aesthetic, fully responsive down to 360px.
Banking — Ops Dashboard
An internal banking operations dashboard built with vanilla HTML, CSS and JavaScript. Surfaces live KPIs for transaction volume, active users, fraud flags and the KYC queue, alongside a layered credit-versus-debit volume chart, a triaged fraud-alert feed, a KYC approval queue and a recent disputes table. Operators can switch timeframes, approve or reject applicants inline, and dismiss alerts, each action confirmed with a toast and tabular-figure money formatting throughout.
Banking — OTP / 2FA Input
A trust-first six-digit OTP and two-factor verification screen for banking and fintech flows. Boxes auto-advance as you type, accept a full pasted code, and support an optional masked mode for shoulder-surfing safety. A resend countdown timer throttles new codes, while clear error and success states confirm whether the entered code matches. Includes an encrypted badge, accessible inputs, keyboard navigation, tabular figures, and a responsive layout that holds together down to small mobile widths.
Banking — Send Money
A trust-first mobile send-money flow for a fintech app, walking from payee selection through amount entry to a verified confirmation. Pick a saved or brand-new payee, type an amount on a numeric keypad that validates against your real balance, choose a source account, add a note, then release the transfer behind a mocked two-factor code. Closes with a clearing receipt and an animated success check. Pure HTML, CSS and vanilla JavaScript.
Banking — Spending Breakdown
A trust-first spending breakdown widget for banking and fintech dashboards. An SVG donut chart splits the month's spend by category, with the running total centred inside the ring and a colour-matched legend listing every category by amount and share. Hovering or clicking a slice highlights its legend row and surfaces that category's amount in the centre, while a month switcher steps through four months of real-feeling data and recomputes totals, the budget pill, and a month-over-month delta. Tabular figures, keyboard support, and vanilla JS only.
Banking — Statements
A trust-first fintech statements and documents page where customers browse monthly account statements with period, closing balance and status, alongside a dedicated tax documents section. Filter every list by year, search across titles, download any file with a simulated progress toast, and open a polished preview modal that renders a realistic statement or tax certificate. Built with semantic HTML, Inter typography, tabular money figures and a fully responsive layout.
Banking — Traditional Bank Landing
A trust-forward marketing landing page for a traditional retail bank, styled in navy, gold, and ivory with serif headlines over a clean sans body. It pairs a confidence-building hero and account snapshot with product cards, an honest daily rates table, a branch and ATM locator teaser, security assurances, member testimonials, and a quick open-account form — all responsive down to mobile with smooth scrolling and tasteful micro-interactions.
Banking — Transaction Row
A trust-first fintech transaction list built with vanilla HTML, CSS and JavaScript. Each row pairs a merchant avatar, name, category and date with a right-aligned amount that colors credits green and debits ink, plus a clear status pill for pending, cleared or failed states. Rows lift on hover and expand on click to reveal method, reference, settlement state and quick actions. Filter chips, live merchant search, masked card numbers and a small toast helper round out a polished, dependency-free pattern.
Banking — Transactions
A trust-first fintech transaction history screen with a navy gradient account card, available balance, money-in and money-out totals, and a searchable ledger grouped by day. Rows show category icons, credit-green and debit-ink amounts, a running balance, and pending, cleared or failed status pills. Filter by type, category and date range, expand any row for reference and method detail, and export the filtered view with a toast. Pure HTML, CSS and vanilla JavaScript.
Banking — Virtual Card Visual
A polished, 3D flippable virtual bank card component built in the trust-first fintech style with Inter typography and tabular figures. The brand face shows a metallic chip, contactless glyph, masked PAN, holder and expiry, then flips in 3D to reveal the CVV on a magnetic-stripe back. Tap to flip, reveal or hide the number, and copy it to the clipboard, and switch live between three designs — metal black, aurora gradient and minimal white — all in vanilla JavaScript with a small toast helper.
Banking — Wealth / Investing Landing
A refined marketing landing page for a fictional wealth and investing platform, built in vanilla HTML, CSS, and JavaScript. It pairs a calm charcoal-and-emerald palette with serif display type, an animated SVG portfolio chart, an allocation breakdown, a switchable performance band, transparent pricing tiers, verifiable trust credentials, testimonials, and an email capture call to action — all responsive down to small phones with reveal-on-scroll and toast micro-interactions.
D2C — Coffee / Beverage Landing
A warm, craft-forward direct-to-consumer landing page for a fictional specialty coffee brand. Built with semantic HTML, kraft-paper and espresso styling, and vanilla JavaScript, it pairs an origin-story hero and product-bag mockup with an interactive roast-level selector, flavor-note grid, a four-step pour-over guide, a subscribe-versus-one-time pricing toggle, verified reviews, a sustainability section, an accordion FAQ, a sticky cart, and a footer.
D2C — Fashion / Apparel Landing
A full editorial direct-to-consumer landing page for a fictional limited-run apparel label. White-and-black canvas lifted by a single terracotta accent, a couture serif paired with a clean sans, and an aspirational, minimal mood. Includes a full-bleed hero with a running marquee, a masonry lookbook with hover styling notes, an interactive product configurator with colour swatches and size picker, a fabric-quality story, dark customer reviews, bundle pricing, a drop waitlist, a sticky add-to-cart bar, scroll-reveal, and a responsive mobile nav.
D2C — Hardware / Gadget Landing
A full one-page direct-to-consumer landing for Lumen Halo, a fictional 1,400-lumen pocket flashlight, rendered in spotlight-dark with an electric teal accent and a CNC-rendered product mockup. It runs a dramatic hero with floating device render and key specs, a maker social-proof row, interactive spec tabs, spotlight feature cards with a live color-finish picker, a four-step build process, a comparison table, owner reviews, a pre-order pricing card with quantity stepper, an accordion FAQ, a sticky buy bar and footer, all wired in vanilla JavaScript.
D2C — Skincare / Beauty Landing
A polished direct-to-consumer skincare landing page for a fictional glow serum brand. Soft blush-and-gold palette, an elegant serif-and-sans pairing, and a dewy, premium mood. Includes a product-shot hero with add-to-cart, a benefit grid, ingredient callouts, a three-step routine with results stats, star-rated reviews, bundle pricing cards, an accordion FAQ, a sticky add-to-cart bar that appears on scroll, scroll-reveal animations, a mobile nav, and a fully responsive layout.
D2C — Supplements / Wellness Landing
A full direct-to-consumer landing page for a fictional clinically-dosed supplements brand, built in clean vanilla HTML, CSS and JS. It pairs a product hero and benefit claim with an ingredient-science breakdown carrying study callouts, a benefit icons grid, a how-it-works timeline, star-rated reviews, a subscribe-versus-one-time pricing toggle, an accordion FAQ and a sticky add-to-cart bar. Energetic teal-and-lime accents on clinical white give it a confident, science-backed wellness feel.
Delivery — Delivery Confirm
A mobile-first driver delivery-confirmation screen for a fictional courier app. It pairs a customer and address card with a live delivery window countdown, a three-step proof checklist, mock photo-proof capture, a working canvas signature pad, quick drop-off note chips, and a leave-at-door toggle that swaps signature for drop-and-photo. A guarded confirm button plays a success animation once proof is collected, logging the stop and cueing the next.
Delivery — Dispatch Board
A desktop dispatch board for a fictional food-delivery hub, built as a horizontal kanban with an unassigned-orders column beside one queue per driver. Each order card shows pickup and drop-off legs, a priority pill, a live ETA, and the customer; cards drag between columns or assign through a driver picker dialog. A live status sidebar tracks each courier with availability dots and active load, and a sticky toolbar drives priority filters, search, and real-time counts.
Delivery — Driver Earnings
A mobile-first driver earnings and shift summary screen for a fictional food-delivery app. A bold orange hero shows net pay with a base, tips, and bonus breakdown plus trips, hours online, and per-hour stats, and toggles between today and the full week. A seven-day bar chart animates into place and reacts to taps, a recent-trips list flags delivered, in-progress, and failed runs with pay pills, and a sticky cash-out bar fires a confirmation toast — all in vanilla JS.
Delivery — Driver Route
A mobile-first delivery driver route screen with a live map placeholder, animated driver marker, and an ordered list of stops. A prominent next-stop card shows the customer, address, ETA, and delivery notes with call, navigate, and complete actions. A running earnings header tracks today's pay, and an incoming-order sheet with a countdown ring lets the driver accept or decline a fresh offer that joins the route.
Delivery — ETA / Countdown Badge
A self-contained set of delivery ETA and countdown badges for tracking screens. It pairs a map-forward hero card with a live ticking countdown, an animated driver marker following an SVG route, and a full gallery of badge states — en-route countdown, arriving-now pulse, amber delayed alert, safety-green delivered confirmation, failed attempt, and a scheduled time-window pill. A live order feed shows independent mini countdowns flipping between states with toast notifications. Vanilla JS, no dependencies.
Delivery — Food Delivery Landing
A crave-able, mobile-first marketing landing for a fictional food-delivery brand. It opens with a bold hero, an address bar that validates input and scrolls to results, and floating dish cards over an animated blob. A scrollable cuisine rail filters a live restaurant grid of rating, ETA and delivery-fee cards with savable favorites. Below sit a three-step how-it-works, a phone-mockup app section with SMS link capture and an animated rider on a route map, plus restaurant and rider partner CTAs, a full footer, mobile nav and scroll reveal.
Delivery — Freight / B2B Logistics Landing
An enterprise freight and B2B logistics landing page built with vanilla HTML, CSS and JS. An industrial slate-and-amber hero leads into mode-flexible services (FTL, LTL, intermodal rail, warehousing), an animated fleet and network stat band, a real-time visibility console with a predictive ETA countdown and a live shipment status tracker, enterprise customer logos with a testimonial, and a validated request-a-quote form. A heavy-duty, map-forward layout that feels built for shippers who can't miss a dock window.
Delivery — Grocery Delivery Landing
A wholesome, fresh-green grocery delivery landing page for the fictional FreshCart brand. Includes a produce-basket hero with an animated ZIP coverage checker, a twelve-aisle category grid, a freshness guarantee section with cold-chain promise cards, a monthly or yearly membership pricing switcher, a four-step how-it-works flow, an app download CTA with a live ETA phone mockup, plus mobile navigation, scroll reveals and toast feedback.
Delivery — Last-mile / Instant Landing
A high-energy last-mile delivery landing page for a fictional instant-courier brand, built in pure HTML, CSS and vanilla JS. It pairs a bold black-and-lime hero with an address bar and a live ETA tracker card — an animated rider marker following an SVG route, a ticking countdown, status pills and a step tracker. Below sit use-case cards, an interactive coverage-cities grid, a slider-driven rider earnings calculator, an app-download section with a phone mock, plus a mobile nav, scroll reveals and toast feedback.
Delivery — Live Order Tracking
A mobile-first live order tracking screen for a fictional food delivery app. A gridded map placeholder draws an animated SVG route with a pulsing driver puck that creeps toward home, a big ETA countdown ticks down minute by minute, and a four-stage status stepper advances from placed to delivered. A courier card offers call and message actions, while an itemised order summary lists food, totals, and the delivery address — all driven by a small vanilla-JS state machine.
Delivery — Map Route
A mobile-first live tracking component that draws a stylized CSS-grid map with roads, an SVG route polyline from pickup to drop-off, and an animated driver marker that glides along the path. A play, pause, and restart control plus 1x, 2x, and 4x speeds drive the trip, while a big countdown ETA, distance-remaining, arrival clock, and a progress bar update in real time. Pickup and drop pins, a recenter button, and a status step tracker round out the screen with delivered and pending pills.
Delivery — Order Detail
A mobile-first food delivery order detail and receipt screen with a delivered status banner, four-step progress tracker, itemized list with quantities and prices, and an expandable payment summary covering subtotal, delivery and service fees, estimated tax, courier tip, and total. Includes delivery address with drop-off instructions, courier and payment rows, a five-star order rating control, and reorder and get-help actions wired to lightweight toast feedback.
Delivery — Package / Shipment Row
A reusable delivery shipment list row that packs a tracking number, origin-to-destination route, carrier badge, animated status pill, ETA, and a thin progress mini-bar into one tidy, scannable line. Each row expands to reveal a vertical tracking-history timeline with done, current, and failed states. The demo lists eight fictional packages across in-transit, out-for-delivery, delivered, and exception statuses, with status filters, a toast helper, and a mobile-first responsive layout.
Delivery — Parcel / Courier Landing
A full parcel and courier landing page built around a trustworthy blue-and-slate palette. It leads with a hero track-your-package input that returns live status, ETA and courier detail, paired with a map-forward shipment card where an animated driver marker follows an SVG route and a countdown ticks down. Below sit same-day, next-day and international service cards, an instant pricing calculator with service, size and distance controls, an interactive coverage map with hub tooltips, a dark business-solutions band, CTA and footer. Vanilla JS, no dependencies.
Delivery — Schedule a Delivery
A polished schedule-a-delivery flow for a fictional same-day courier. Riders enter pickup and drop-off addresses, choose a package size, pick a date from a seven-day strip and a two-hour time slot, then select Standard or Express service. The estimate recalculates live from base fare, distance, size handling and service multiplier, with a route map preview, animated driver marker, and a confirmation modal issuing a tracking number.
Delivery — Status Step Tracker
A reusable delivery status step tracker in horizontal and vertical variants, walking a parcel through placed, confirmed, out for delivery and delivered. Features an animated active step with a pulsing marker, green completed checks, live timestamps, a shrinking ETA and arrival clock, a courier card that appears only in transit, status pills, and buttons to advance, step back or reset the whole flow.
Delivery — Warehouse / Picking
A warehouse picking console for a fictional fulfillment floor, pairing a prioritized pick-list queue with an active list that shows item rows, bin locations, quantities and scan-to-pick check-off. A big picked counter and progress rail track completion, a low-stock inventory table flags SKUs below reorder point, and a schematic Zone B map teaser animates a driver marker along the route to the next bin as picks are confirmed and lists completed.
LMS — Classroom Player
A focused e-learning classroom built in vanilla JS: a video player area with poster, scrubber, speed and caption controls, plus a sticky curriculum sidebar that highlights the current lesson and tracks check-offs. Below sit tabbed panels for an interactive click-to-seek transcript, autosaving notes with timestamp insertion, downloadable resources, and a class Q&A thread. Switching lessons updates progress rings and bars, and mark-complete advances to the next item.
LMS — Coding Bootcamp Landing
A high-energy, career-focused coding bootcamp landing page built with semantic HTML, CSS variables, and vanilla JavaScript. Features a bold technical-mono hero with animated outcome counters, a four-phase curriculum timeline, a filterable tech-stack grid, mentor cards, hiring-partner logos, three financing options, and an interactive cohort-date picker with toast feedback. The dark neon-green theme, conic-gradient progress rings, scroll reveal, sticky nav, and responsive mobile menu make it feel like a real bootcamp site down to 360px screens.
LMS — Completion Certificate
A polished e-learning completion certificate page with a framed parchment-style award showing the learner name, course title, completion date, instructor signature, official seal and a scannable verification QR. A side panel offers download-to-PDF, print, share-link and add-to-LinkedIn actions, a copyable credential code, earned-skill badges and credential metadata. Built with semantic HTML, CSS variables, print styles and small vanilla-JS interactions, optionally toggling a calm study mode.
LMS — Course Builder
A focused, three-pane course builder for an online learning platform. A reorderable module and lesson tree on the left drives a center lesson editor with title, type, a mock video uploader, content, and a free-preview toggle, while a right rail handles pricing, difficulty levels, category, and tags. Drag modules and lessons to reorder, check lessons off, watch live curriculum stats and a completion bar, then save or publish with friendly toasts and a draft-to-published status pill.
LMS — Course Card
A reusable e-learning course card rendered as a responsive grid of six real-feeling variants — free, paid, in-progress and completed. Each card pairs a gradient thumbnail with a level pill, course title, instructor avatar, half-step star rating, duration and lesson counts, and either a price block or an animated progress bar. Cards lift on hover, quick-enroll inline, filter by type, and a study mode swaps the calm light theme for a focused dark palette.
LMS — Course Catalog
A friendly, focused e-learning course catalog with a sticky filter rail for level, category, duration and price, plus an instant search that narrows the grid as you type. Sortable course cards show thumbnails, instructors, ratings, level pills and live progress bars for enrolled classes. Active filters appear as removable chips, a sort dropdown reorders results, and enrolling fires a calm confirmation toast. Built with semantic, accessible, responsive vanilla HTML, CSS and JavaScript.
LMS — Course Detail
A polished e-learning course detail page with a gradient preview hero, instructor credit, star rating and enroll CTA. Tabbed overview, curriculum and reviews sections sit beside a sticky buy box with price, countdown and live progress ring. The curriculum is an accordion of modules with checkable lessons that update your completion percentage, plus a study (dark) reading mode, rating distribution bars, learner reviews and a sticky enroll bar on scroll.
LMS — Curriculum Accordion
A self-contained e-learning curriculum accordion where course modules expand to reveal their lessons. Each lesson row shows a type icon for video, quiz, or reading, its duration, and a tappable completion check. Module progress bars and an overall completion ring update live as you check lessons off, free-preview links open a toast, and locked modules unlock automatically once the previous module is fully finished.
LMS — Gradebook
An instructor gradebook for an online course platform, built as a students-by-assignments matrix. Color-coded score cells show grades, pending submissions, and missing work at a glance, with a sticky student column and per-assignment class averages in the header. A cohort filter and search narrow the roster, and clicking any cell opens a grading drawer with the submission, a weighted rubric, a feedback box, and a grade input that writes straight back into the matrix and recomputes averages live.
LMS — Instructor Dashboard
A polished instructor analytics dashboard for an online course platform. Four animated KPI cards track enrollments, net revenue, completion rate, and average rating, with trend pills and a progress bar. An interactive SVG revenue chart redraws as you switch the 7d, 30d, 90d, and 12-month timeframe, and a top-courses table drills into a slide-in panel with a completion ring and lesson check-offs. A live enrollment feed and a student-questions thread with inline replies round out a friendly, focused-reading learning workspace.
LMS — Kids Learning Landing
A bright, playful marketing landing page for a make-believe kids learning platform. Features a bouncing fox mascot whose eyes follow the cursor, a sticky responsive nav with a mobile drawer, tappable subject cards, age-group paths, a parent-trust section with an animated weekly progress report, fun testimonials, and a free-trial form with email validation, a confetti burst, and toast feedback. Built with bright primary colors, chunky rounded sans type, and springy hover animations.
LMS — Language App Landing
A gamified language-learning app landing page built with vanilla HTML, CSS and JavaScript. A warm green-to-teal palette and friendly rounded type frame a floating phone mockup that runs a live word-bank lesson: tap chips to build the translation, check your answer, lose a heart when wrong, then continue. Streak and XP counters animate up, language cards fill progress bars, and a monthly to yearly pricing toggle swaps plan prices, all with scroll reveals and toasts.
LMS — Learner Dashboard
A friendly, focused learner dashboard for an online course platform. Continue-learning cards carry mini progress rings, difficulty pills, and resume buttons, while a streak and XP widget tracks daily momentum with a level bar and animated weekly dots. A weekly-goal progress ring, in-progress versus completed tabs, earned certificates with PDF actions, and color-coded upcoming deadlines round it out, plus an optional dark study mode for late-night sessions.
LMS — Lesson Player Controls
A polished e-learning lesson player control bar with a draggable scrubber that shows buffered and played ranges, a hover time tooltip, volume slider with mute, a playback-speed menu, captions and quality toggles, fullscreen, and a next-lesson button. Full keyboard shortcuts drive play, seek, volume, mute, captions, fullscreen and skip. Built with semantic landmarks, ARIA slider roles and AA contrast, it stays usable from wide desktop down to narrow mobile screens.
LMS — Professional Certification Landing
A polished, B2B-credible landing page for a professional certification body, built in vanilla HTML, CSS, and JavaScript. It pairs an authoritative slate-and-gold hero and a blockchain-style credential card with filterable certification paths, an interactive exam-blueprint panel showing domain weightings, animated salary-uplift counters, employer-recognition logos, serif testimonials, and a validating enrollment form. Fully responsive from desktop down to mobile, with scroll-reveal motion, a mobile nav, and an accessible toast helper.
LMS — Progress Ring
A self-contained set of progress meters for e-learning interfaces. The centerpiece is an animated SVG circular ring with a gradient stroke and a count-up percentage at its core, paired with quick-set buttons that re-draw the fill and update the lesson tally. Alongside it sit a linear XP and level meter that handles level-ups, plus a responsive grid of per-module cards combining mini progress rings, linear bars, completion pills, and a friendly toast helper.
LMS — Quiz / Assessment
A self-contained quiz runner for e-learning platforms that shows one question at a time with a live progress bar and countdown timer. It supports multiple-choice, multi-select, and true/false questions, plus flag-for-review, previous and next navigation, and a question navigator. Submitting reveals an animated score ring, pass or fail verdict, point totals, and a full per-question review with correct answers and plain-language explanations for every item answered.
LMS — Quiz Question Types
A complete set of six interactive quiz question components for an e-learning module: single-choice, multi-select, true/false, drag-to-match, fill-in-the-blank, and reorder-the-code. Each card grades independently with clear correct, incorrect, and missed states, plus a live progress bar, running score chip, and a decorative countdown timer. Keyboard-friendly throughout, calm light theme, vanilla JS only.
LMS — Streak / XP Badges
A friendly e-learning gamification panel bundling four widgets: a daily-streak card with an animated flame and a seven-dot weekly calendar, an XP and level-progress bar with a hexagon rank badge, a daily-goal progress ring, and an eight-tile achievement grid of locked and unlocked badges. Interactions are vanilla JS — check in to grow the streak, claim a badge with a confetti burst and pop animation, earn XP that can trigger a level-up, and toggle a calm dark study mode.
LMS — University Landing
A scholarly online-university landing page with a prestige serif hero, an intake progress card with an animated SVG ring, a filterable degree and certificate grid, faculty highlight profiles, an accreditation and statistics band with count-up numbers, student-outcome bars, alumni testimonials on a deep-blue panel, and a validated apply form. Deep blue, crimson and ivory with academic serif headlines, scroll-reveal motion, a sticky nav, mobile menu, and toast feedback.
Streaming — Account / Plan
A cinematic dark-mode account and membership screen for the fictional Lumora streaming service. A glowing current-plan card shows pricing, features and the next charge, with a change-plan modal that lets you pick Basic, Standard or Premium and confirm the switch. Billing history sits in a scrollable table, registered devices can be removed with a smooth sign-out animation, playback toggles flip with accessible switches, and a no-fee cancel flow updates the live status pill.
Streaming — Browse Home
A cinematic dark-first browse home for the fictional Nebula streaming service, built in HTML, CSS, and vanilla JS. A full-width hero billboard rotates featured titles with gradient-scrim poster art, match scores, quality badges, and Play and More Info actions. Below sit horizontally scrollable rows — Continue Watching with progress bars, a ranked Trending Top 10, New Releases, and genre rails — each with hover-scale posters that expand into a quick-action preview card. A top nav condenses on scroll and a toast confirms every illustrative click.
Streaming — Carousel Row
A reusable cinematic content carousel for streaming UIs. Landscape poster cards with quality badges, top-rank numbers, match scores and continue-watching progress bars scroll horizontally with snap, fading hover arrows, drag-to-scroll, lazy-loaded poster art, pagination dots that track position, and an explore-all end card. Built dark-first with pure vanilla JavaScript and CSS variables, fully keyboard navigable and responsive down to mobile widths.
Streaming — Content Dashboard
A cinematic dark admin dashboard for the fictional Nebula streaming studio, built in HTML, CSS, and vanilla JS. Four KPI cards track active viewers, watch hours, retention, and churn with inline sparklines and trend badges. A full SVG viewership chart redraws on timeframe toggle and metric tabs with hover tooltips, beside a regional heat list, a sortable-feel top titles table, and an episode retention curve. Tapping any title slides in a drill drawer with per-title stats and a mini chart. No libraries, fully responsive.
Streaming — Episode Picker
A cinematic, dark-first episode picker for a fictional original series. A compact billboard hero carries the show title, match score and quality badges, while a season dropdown and tabbed switcher swap a rich episode list rendered from data. Each row pairs a 16:9 thumbnail with a hover play affordance, duration chip and continue-watching progress bar against an episode number, title, air date, downloaded badge and an expandable synopsis. Now-playing rows are highlighted, and every interaction runs on dependency-free vanilla JS.
Streaming — General SVOD Landing
A blockbuster-grade marketing landing page for a fictional general SVOD service, built in pure HTML, CSS and vanilla JavaScript. It pairs a cinematic title-wall hero and email-to-start capture with value-prop cards, horizontally scrollable content showcase rows, ranked and continue-watching badges, three pricing tiers with a featured plan, an accessible single-open FAQ accordion, a full footer, a fading sticky nav, mobile menu, toast feedback and scroll-reveal animations.
Streaming — Hero Billboard
A cinematic, dark-first hero billboard for streaming platforms with a full-bleed backdrop, gradient scrim, title logo, match score and quality badges, synopsis, and play plus more-info buttons. An auto-rotating featured carousel cycles through fictional titles with progress-filled indicator dots, mute and replay controls, keyboard arrows, hover-to-pause, and a synced thumbnail row below the billboard.
Streaming — Kids Streaming Landing
A bright, playful marketing landing page for a fictional kids streaming service. Floating characters and a glowing screen ring anchor the hero, while age-tab tiles swap age-appropriate show cards with quality and edu badges. A live parental-controls panel offers a screen-time slider and PIN toggles, plus educational-value cards, a monthly/yearly pricing switch with three family plans, parent testimonials, an email-capture CTA, and a full footer. Bouncy micro-interactions, scroll reveals, toasts, and a mobile menu throughout.
Streaming — Live Sports Landing
A dark, electric live-sports streaming landing for the fictional Pitchside service, built in HTML, CSS, and vanilla JS. A cinematic hero pairs a condensed billboard headline with a featured live match card whose clock ticks and score updates in real time, above an endlessly scrolling fixtures ticker of live and upcoming games. Below sit a leagues grid with live pulses, game-day feature cards, a sport-filterable today schedule with set-a-reminder buttons, a monthly to annual passes grid, a closing CTA, and a multi-column footer with scroll-reveal motion and toasts throughout.
Streaming — Music Streaming Landing
A vibrant, dark-first marketing landing for a fictional music-streaming service. A gradient hero pairs an animated album wall with a live equalizer and play/pause control, backed by feature cards for offline downloads, Hi-Fi lossless, smart playlists and podcasts. A horizontally scrolling artist spotlight, a monthly/yearly pricing switch across Individual, Family and Student plans, app-store CTAs with an animated phone mock, and scroll-reveal motion round out the page. Built with vanilla HTML, CSS and JavaScript.
Streaming — Niche / Indie Landing
A moody, editorial landing page for a fictional indie cinema and anime streaming service. Charcoal canvas with amber and magenta accents, a Fraunces serif and Inter sans mix, and a cinephile tone. Features an editorial hero with stats, hand-curated collection cards with live tag filtering, a why-curated manifesto grid, a horizontally scrollable creator spotlight rail, a community signup with email validation, a monthly-yearly pricing toggle, scroll reveals and a toast helper.
Streaming — Player Control Bar
A cinematic dark-first player control bar for the fictional Nebula streaming service, built in HTML, CSS, and vanilla JS. A draggable scrubber shows buffered range and a hover thumbnail tooltip with timecode, beside play and pause, skip ten, previous and next episode, a slide-out volume slider, captions, a multi-level quality and speed settings menu, picture-in-picture, and fullscreen. The chrome auto-hides during playback, an up-next chip surfaces near the end, and full keyboard shortcuts drive every control.
Streaming — Poster Card
A reusable cinematic poster and landscape card for streaming UIs. Each tile shows quality-badged artwork that expands on hover into a rich preview popover with title, match score, rating, runtime, genre chips, and quick play, add-to-list, like, and mute controls. Continue-watching variants surface an inline progress bar, while trending tiles add rank markers. Ships as a horizontal-scroll row plus a responsive catalogue grid, fully keyboard and touch friendly with toast feedback.
Streaming — Profile Switcher
A cinematic who-is-watching profile-select screen for a fictional streaming service. A centered grid of gradient avatar tiles greets the viewer, each scaling up with a glowing ring on hover, kids profiles wearing a badge. A manage mode flips every tile into edit cards with rename prompts and remove buttons, while an add-profile dialog creates new viewers with a live avatar preview and a kids toggle. Selecting a profile plays a full-screen loading curtain before welcoming you in.
Streaming — Search / Category Grid
A cinematic dark-mode search and browse screen for the fictional Lumora streaming service. A pill search field surfaces live, keyboard-navigable suggestions for titles and genres with highlighted matches, while genre filter chips and a sort menu reshape a responsive poster grid in real time. Hovering a poster scales it and reveals a play button plus a match score, and graceful loading skeletons and an empty state keep the experience smooth on every query.
Streaming — Title Detail
A cinematic, dark-first streaming title-detail page for a fictional sci-fi series. A full-bleed backdrop hero carries the title, match score, rating and quality badges alongside play, my-list and like controls, plus an expandable synopsis. Below it, season tabs swap a rich episode list with hover previews and per-episode list toggles, an expandable cast grid reveals the full crew, and a scrollable more-like-this row surfaces poster recommendations. Built with semantic HTML, CSS variables and vanilla JS.
Streaming — Video Player
A full-screen cinematic video player UI for a fictional streaming service. Features a backdrop poster, center play, and a bottom control bar with a working scrubber showing buffered progress, time readout, hover volume, captions toggle, and a settings menu for quality, speed, and audio track. Controls auto-hide during playback, a skip-intro button appears over the intro, and a next-up card counts down near the end. Pure HTML, CSS, and vanilla JS.
Cookbook — Auto Shopping List (from selected recipes)
A meal-prep shopping list that builds itself. Toggle recipe chips and every ingredient folds into one categorized grocery list — Produce, Meat, Dairy, and Pantry — with duplicate quantities summed per unit, so three pinches of garlic across two dishes become a single tidy line. Check items off against a live progress bar, edit or remove a line inline, watch the X items by Y aisles summary update, and copy, print, or share the finished list. Warm editorial cookbook styling, fully responsive, and print-friendly.
Cookbook — Browse / Search (cuisine · diet filters)
An editorial cookbook browse and search page where readers sift a fictional library of about twelve dishes by cuisine, diet, meal, and maximum cook time. A live search box, a faceted filter sidebar that folds into a mobile drawer, removable active-filter chips, a popular and quick and newest sort control, and a responsive grid of gradient recipe cards with ratings and a save heart all work together, complete with a graceful empty state.
Cookbook — Cook Mode (full-screen step-by-step + timers)
A distraction-free, full-screen cook mode that walks you through a recipe one large serif step at a time, with a progress bar, step count, and big touch-friendly Prev and Next controls. Each step carries its own independent countdown timer that beeps and toasts at zero, arrow keys move between steps, and a slide-out drawer lets you peek at the ingredient list and tick off your mise en place while you cook.
Cookbook — Food Blog Dashboard (traffic · top recipes)
A warm, editorial admin dashboard for a food blog, built with plain HTML, CSS and vanilla JavaScript. A sidebar nav frames a KPI row for page views, unique visitors, average time on a recipe and saves, each with deltas and live sparklines. An inline-SVG traffic chart redraws on a seven, thirty or ninety day toggle, while a sortable top-recipes table and an approve-or-reject comment feed round out a cream-and-tomato kitchen interface.
Cookbook — Food Magazine (Bon Appétit-style) landing
A glossy, high-contrast food-magazine landing page with a full-bleed cover-story hero, issue tag and byline, a varied-tile featured-stories grid with category tab filters, a horizontally scrolling trending-recipes strip, and a bold subscribe band. Built with editorial serif and sans typography, CSS-gradient food photography and emoji accents, a sticky condensing header, scroll-reveal animations, and a validating subscribe form — all vanilla HTML, CSS, and JavaScript with no images or libraries.
Cookbook — Ingredient list + check-off
A warm, editorial ingredient checklist for recipe pages. Items are grouped under sub-headings like for the rye crust, each row pairing a checkbox with quantity, unit, name and an optional prep note. Ticking an item strikes it through, updates a live X of Y gathered progress bar and per-group counts, while check-all and clear controls plus localStorage keep your mise en place exactly where you left it between visits.
Cookbook — Modern Wellness / Clean Eating landing
An airy modern-wellness cookbook landing in a calm bone, matcha and terracotta palette, pairing a Fraunces serif headline with light Inter body type. A minimal hero with floating CSS-gradient food bowls leads into a values row, a balanced-recipe grid with nutrition highlights, a seven-day meal-plan teaser and serene testimonials. Vanilla JS adds gentle scroll-reveal, a diet-preference toggle that relabels featured recipes, smooth-scroll nav and toast-backed signup forms.
Cookbook — Numbered step timeline w/ inline timers
A vertical, numbered cooking timeline where every instruction is a node on a connecting rail, complete with optional sage tip callouts and appetizing CSS-gradient dish photos. Durations mentioned in a step (simmer 15 min, rest 3 min) spawn an inline countdown button that ticks down in real time and toasts when it hits zero. Marking a step done dims and checks it, the rail and a progress bar fill as you cook, and a finish card greets you at the last step.
Cookbook — Nutrition facts panel
A clean, label-style nutrition panel for cookbook recipes with big per-serving calories, inline CSS macro bars showing the carb, protein and fat split, and a detailed nutrient table with percent Daily Values for saturated fat, fiber, sugar, sodium and more. A per-serving versus per-100g toggle recomputes every value, while a servings stepper scales totals up or down. Built with accessible table semantics, aria-live updates, warm editorial styling and a print-friendly layout.
Cookbook — Prep/cook time · difficulty · diet badges
A copy-ready recipe meta badge row for cookbook layouts, built in warm cream-and-tomato colors with inline SVG icons and accessible labels. Pill badges cover prep, cook, and total time with a clock glyph, servings, and a color-coded difficulty chip for easy, medium, and hard. Diet tags handle vegetarian, vegan, gluten-free, and keto, each with its own icon and tint. Three styled variants show full and compact rows, and a small demo toggles diet tags on and off while updating a polite aria-live summary.
Cookbook — Printable Recipe Card
A compact, editorial recipe card built to print beautifully on real index stock. It pairs a serif title, a tiny meta row for time and servings, a warm gradient thumbnail, and a condensed two-column layout that splits ingredients from method. A size toggle switches between three-by-five, four-by-six, and full-page formats, while a dedicated print stylesheet strips the chrome to clean black-on-white that fits a single page. Recipe content is fictional and for layout demonstration only.
Cookbook — Recipe Collection / Cookbook index
An editorial cookbook index page that gathers fictional recipes into a book-like collection. A gradient cover with curator, recipe count and total time sits above chapter sections for Starters, Mains and Desserts, each holding appetizing CSS-gradient recipe cards with times, difficulty and servings. Sticky chapter jump-nav, a save-collection toggle, and a grid or list view switch make it feel like browsing a real seasonal cookbook, all in warm cream tones.
Cookbook — Recipe Editor (ingredients + steps builder)
A warm, editorial recipe-builder workspace where you compose a dish from scratch: title, description, and meta like prep, cook, servings, difficulty and diet, plus a reorderable ingredients table (quantity, unit, name) and numbered method steps you can drag, nudge or remove. A live preview pane renders a print-ready recipe card that scales quantities by servings as you type, with draft autosave to localStorage and a validated save flow.
Cookbook — Recipe Feature / Food Story (long-form)
A magazine-style long-form food story with a full-bleed gradient hero, editorial serif typography, a drop-cap intro, pull-quotes, captioned CSS food photos, and an embedded print-friendly recipe card. A reading-progress bar tracks scroll depth, a sticky byline follows the reader, and a jump-to-recipe button smooth-scrolls past the prose straight to the ingredients and method. Built with vanilla HTML, CSS, and JavaScript using only gradients and emoji for food imagery.
Cookbook — Recipe Page (ingredients · steps · notes)
A polished editorial recipe page for a cookbook library, pairing a serif headline with a warm cream layout. A gradient food-photo hero opens onto meta badges for prep, cook and total time, servings and diet tags, then a two-column body of check-off ingredients beside numbered method steps with inline tips and notes. A sticky action bar saves, prints and shares, and a live counter tracks how many ingredients you have gathered.
Cookbook — Recipe rating + reviews block
A warm, editorial recipe rating and reviews block with an aggregate star score, a five-to-one star distribution chart, an accessible interactive star input that optimistically updates the aggregate, and a sortable list of reader reviews complete with avatar initials, made-it badges, dates, and toggleable helpful counts. Built with semantic HTML, a cookbook palette, and dependency-free vanilla JavaScript.
Cookbook — Restaurant Chef / Fine Dining landing
A dramatic charcoal-and-gold fine-dining landing for a fictional chef, built with couture serif type and CSS-gradient food photography. It pairs a parallax-tinged hero and Michelin-style overline with a signature-dishes showcase, a chef philosophy strip, a nine-course tasting teaser, press quotes, and a reservation form. Scroll-reveal, a focus-trapped dish lightbox, and validated reserve flow make it feel like a real premium restaurant site.
Cookbook — Rustic / Farmhouse Cookbook landing
A cozy farmhouse cookbook landing page built with warm cream, sage, and clay tones, a serif-and-sans editorial pairing, and CSS-gradient food photography. It pairs a handwritten overline hero and pre-order CTA with featured recipe cards, a from-our-kitchen story strip, seasonal categories, and a validated newsletter sign-up. Vanilla JavaScript powers reveal-on-scroll animations, a recipe-of-the-day rotator, and toast feedback, all responsive from phone to desktop.
Cookbook — Serving scaler (½× · 2× quantities)
A live serving-size scaler for a printed-style recipe card. Pick ½×, 1×, 2×, or 3×, or nudge a servings stepper, and every ingredient quantity recomputes in place with a soft saffron flash. The math snaps to cook-friendly fractions like ½, ⅓, ¼, and ¾, handles ranges such as twelve to fourteen ounces of tomatoes, and leaves non-scalable items — basil to taste, a single pan — exactly where they are. The servings count is announced via aria-live, and the layout prints cleanly.
Cookbook — Video Recipe layout (steps synced)
An editorial cook-along page that pairs a large faux video player with a synced list of recipe steps. A simulated playhead advances a timecode, highlights the matching chapter in real time, and animates rising steam over a warm gradient poster. Click any step to seek the player to its timestamp, drag the scrubber across chapter markers, change playback speed, and watch completed steps mark themselves done as the braise progresses from spice to finish.
Cookbook — Vintage / Retro Recipes landing
A nostalgic 70s vintage-recipes landing page with a mustard-and-avocado hero, groovy display headline and scalloped retro borders. Browse a recipe-box grid of kitschy index cards that flip from a gradient food photo to a hand-typed recipe, soak up a rotating tip of the day, and sign up for a recipe-by-mail strip. Scroll-reveal animations, a playful retro toast and an aged-paper footer round out the period mood. Pure HTML, CSS and vanilla JS — no libraries, no images.
Cookbook — Weekly Meal Planner (drag recipes)
An editorial weekly meal planner where you drag recipe cards from a pantry tray into a 7-day grid of Breakfast, Lunch, and Dinner slots. Drop highlights, a fully keyboard-accessible pick-and-place alternative, per-day time and serving tallies, localStorage persistence, a clear-week reset, and a one-click shopping list that counts ingredients across the week. Warm cream surfaces, gradient food photos, and serif headings give it a real cookbook feel.
Museum — Artifact / Artwork Detail
A curatorial artwork detail page for a fictional museum, pairing a large matted-and-framed image with click-to-zoom and drag-to-pan, a tidy object metadata panel (artist, date, medium, dimensions, credit line, accession number), a vertical provenance timeline, a curatorial note, and a more-from-this-gallery strip. An add-to-tour toggle, share and copy-accession actions round out the calm, gallery-like reading experience.
Museum — Artifact Card
A curatorial artifact card for collection grids, shown across six fictional works and three display sizes. Each card frames a CSS-drawn image inside a soft mat, then sets the title in italic serif above artist, date, medium, a gold catalog-number chip, and an On view or In storage status pill. Hovering or focusing a card lifts it and reveals quick actions to favorite the piece or add it to a self-guided tour, with a live tour counter and confirmation toasts throughout.
Museum — Attendance & Ticketing Dashboard
A refined, gallery-toned operations dashboard for a fictional art museum that tracks visitor attendance and ticketing at a glance. Four KPI cards report today visitors, revenue, capacity used, and new members with up and down deltas; a CSS bar chart breaks admissions down by opening hour and flags the peak; a conic-gradient donut with a legend shows the ticket-type mix; and a table lists upcoming timed-entry slots with sold and capacity fill bars and status badges. A date-range selector rewrites every figure, with toasts confirming each change.
Museum — Audio-Guide Player
A curatorial audio-guide player for a fictional gallery, anchored by an oversized serif stop number, a framed artwork swatch, and the work's title, artist, date and catalog line. A simulated transport drives play and pause, a gold scrubber with elapsed and total times, a fifteen-second skip, cycling playback speed and a read-transcript toggle. An up-next list lets visitors jump between stops, and a numeric keypad enters a stop number directly, all keyboard friendly and calm.
Museum — Collection Browse
A curatorial collection-browse page for a fictional art museum. A masonry-style grid of artifact cards shows title, artist, date, medium, gallery, and catalog number, each framed like a hung work. A left filter rail refines by era, medium, gallery, and department with live result counts, while sort controls reorder by acquisition date or title. Clicking any object opens an accessible quick-view overlay with full tombstone details, all driven client-side over a seeded array of two dozen works.
Museum — Collection Catalog Manager
A registrar-facing admin tool for managing a fictional museum's permanent collection. A refined data table lists objects by accession number, title, artist, date, medium, location, and status, with live search, status and medium filters, sortable columns, and pagination. A slide-over form handles add and edit with validation, deletes go through a confirm dialog, and a bulk-select bar reassigns status across many objects at once. Summary stat cards track holdings, all driven client-side over seeded data.
Museum — Deep-Zoom Image Viewer
A refined deep-zoom study viewer for a fictional gigapixel scan of Eluned Varga's 1883 painting Cartography of a Quiet Sea. Explore a richly detailed SVG seascape with zoom in/out buttons, a precision slider, mouse-wheel and pinch zoom toward the cursor, click-drag panning, double-click to magnify, and a fullscreen toggle. A live percentage readout, a magnification meter, curated detail jumps, and a navigator minimap with a draggable viewport rectangle keep you oriented at every level of zoom.
Museum — Donation / Support Panel
A refined, gallery-toned donation panel for a fictional art museum. Visitors pick a preset amount chip or type a custom gift, switch between one-time and monthly support, optionally cover the processing fee, and direct their gift to general funds, acquisitions, education, or conservation. A live impact line rewrites itself as the amount and designation change, while a running ledger tallies the gift, fee, and total today and updates the donate button label in real time, with a toast confirming each step.
Museum — Events & Programs Calendar
A refined, gallery-toned events and programs calendar for a fictional art museum. A month grid marks each day with colored category dots, a chip filter narrows to talks, tours, workshops, family afternoons or members-only previews, and selecting a day reveals its programs in a sticky side panel. Each event card carries time, location, capacity, a live seat counter and an RSVP button, plus a calendar/list view toggle and month navigation — all self-contained vanilla JS.
Museum — Exhibition Builder
A curatorial studio screen for planning a gallery show: browse a searchable pool of collection objects on the left, then build an ordered exhibition sequence on the right. Add works, reorder them up or down across rooms, group them into named sections with editable wall text, and watch a live object count and estimated wall-space meter respond as you go. Save a draft and a toast confirms the room and object totals.
Museum — Exhibition Page
A refined, gallery-toned single-exhibition page with a full-bleed gradient hero, On view status badge, run dates and a live days-left countdown. Includes a curatorial statement, four thematic chapters, a filterable featured-works grid with framed artwork placeholders, a timed-entry ticket selector with running total, and related programs. Sticky mini-header reveals on scroll with scroll-spy anchor navigation, all in vanilla HTML, CSS, and JavaScript.
Museum — Fine Art Museum Landing
A stately marketing landing page for a fictional fine art museum, built in refined gallery-white, deep charcoal, and gold. It pairs a featured masterwork hero with a filterable current-and-upcoming exhibitions strip, savable collection highlights, an interactive admission ticket builder with live totals, visit hours, and tiered membership plans. Vanilla HTML, CSS, and JavaScript with a Cormorant Garamond serif display, accessible dialogs, toasts, and a fully responsive layout down to 360px.
Museum — Floor Map / Wayfinding
An interactive museum wayfinding map built from a hand-drawn SVG floor plan with labelled galleries, restrooms, a café, the shop and entrances. Floor tabs swap between Level 1, Level 2 and a lower level; clicking or keying into a room highlights it and opens a side panel showing its current exhibition with title, dates, medium, scope, attribution and curator. A type-ahead find field searches galleries and amenities, then pans to and pulses the matching room across floors.
Museum — Gallery Wall / Salon Hang
A curatorial salon-hang gallery wall where framed works on paper sit in a balanced, spanning CSS grid against quiet wall space. Hovering lifts a single frame and dims its neighbours; clicking opens a typeset museum label with catalogue number, medium, dimensions and credit line. A layout toggle swaps the dense salon massing for an eye-level single line hung to a common centre rail, with refined serif typography and soft gallery lighting.
Museum — Gift-Shop Product Card
A museum gift-shop product gallery of six fictional editions and objects — Vandermeer prints, a Goryeo celadon monograph, a Salviati map tote, an enamel pin and more. Each card frames a CSS-drawn artwork in a soft mat, then sets an italic serif title above its catalog number, star rating, list price and a gold member-price badge. Colour swatches recolour the art, a quantity stepper bounds the count, and add-to-bag increments a live masthead counter with confirmation toasts and a hover quick-view.
Museum — Historical Timeline
A curatorial historical timeline that walks five centuries of art movements as colour-coded era bands and dated milestone markers. A scrubber travels through the years and highlights the active era, while click-to-expand cards open a typeset museum label with artist, medium, dimensions, catalogue number and credit line. Era chips filter the track, arrow keys step between works, and the horizontal rail folds into a vertical timeline on mobile — refined serif display type, soft gallery shadows and inline plate imagery throughout.
Museum — History / Heritage Museum Landing
A scholarly, archival landing page for a fictional heritage museum, built around a narrative valley history. It pairs an engraved hero and a scrolling era marquee with a filterable grid of permanent galleries, a keyboard-accessible timeline that reveals short accounts for each turning point, and an oral-history feature with a live archive search across letters, ledgers and recorded voices. Parchment-and-sepia palette, engraved serif type, generous wall space.
Museum — Membership / Patron Tiers
A refined membership and patronage page for a fictional art museum, presenting four levels of support — Individual, Dual, Patron, and Benefactor — as gallery-cool cards over generous wall space. Each tier carries a price, a curated benefits list, and its own join button, with the Patron level marked as the most chosen. A monthly/annual toggle smoothly re-prices every card and updates the billing line, selecting a tier marks the card and raises a toast, and a quiet statistics band grounds the philanthropic tone.
Museum — Modern / Contemporary Art Landing
A stark, high-contrast marketing landing for a fictional modern and contemporary art museum. Built in black, white and a single acid-yellow accent with a grotesque display face, it pairs an oversized editorial hero and animated marquee with an asymmetric current-shows grid, filterable exhibition cards, a spotlight acquisition block, a hours-and-tickets visit panel with a live-total stepper, and a validated newsletter. An invert toggle flips to a dark gallery mode, with scroll-spy navigation and a toast helper, all in vanilla HTML, CSS and JavaScript.
Museum — Natural History Museum Landing
An earthy, exploratory marketing landing page for a fictional natural history museum, built with vanilla HTML, CSS and JavaScript. It opens on a fossil-cast hero, then walks visitors through eleven filterable collection halls, hands-on discovery exhibits, a sticky visit planner that tallies your time inside, dated family programs, and a ticket reservation card. Slab-serif headings, bone and forest-green tones and amber accents give it a museum-of-nature feel, with toasts, keyboard support and full responsiveness.
Museum — Object Label / Wall Plaque
A curatorial object-label gallery rendering the classic museum tombstone — artist, life dates, italicized title, date, medium, dimensions, credit line, and accession number — across three registers: standard, extended interpretive, and a warmer kids version. A pill style switcher swaps every label in place, a mat toggle frames or unframes each artwork, and copy-to-clipboard plus single-label print affordances make the plaques feel like real gallery production tools.
Museum — Plan Your Visit
A calm, curatorial plan-your-visit page for a fictional art museum. It shows today's hours with a live open or closed badge computed in JavaScript, a full weekly hours table, an admission price table with free Thursday evenings, getting-here details for transit, parking and bikes, accessibility notes, an inline SVG site map marking the entrance and metro, and an interactive before-you-go checklist with progress tracking and toast feedback.
Museum — Science / Discovery Center Landing
A bright, energetic marketing landing for a fictional science and discovery center. A playful hero pairs an animated orbiting solar system with bold calls to action and at-a-glance stats, followed by a filterable grid of hands-on exhibit zones, planetarium and IMAX showtimes with reservable seats and sold-out states, a school field-trip request form with a live cost estimator, and a visit panel with ticket pricing. Built in vanilla HTML, CSS, and JavaScript with a white, electric-blue, and lime palette.
Museum — Ticket Booking
A refined, gallery-toned timed-entry booking flow for a fictional art museum. Visitors pick a date on a mini calendar that closes Mondays and dims past days, choose an entry time slot showing remaining capacity, then add adult, senior, student, child, free-child, and member tickets with quantity steppers. A live order summary tallies subtotal, per-ticket service fee, and total while guarding slot capacity and the per-order limit, with toasts confirming each step and a validated continue-to-checkout button.
Museum — Virtual Tour / Gallery Walk
A refined, full-viewport virtual gallery walk for the fictional Meridian Museum. Step between five curated rooms with prev/next arrows or arrow keys, watch smooth crossfades carry you from one wing to the next, and read a live room caption and stop counter. Brass hotspots on each framed artwork open a curatorial popover with artist, date, medium, dimensions and accession number, while a thumbnail filmstrip jumps rooms and a per-stop audio-guide track label rounds out the experience.
Science — Academic Journal Landing
A flagship academic-journal homepage in the classic Nature/Science mold: a serif masthead with a thin signature-red rule and primary nav, a This Week featured-article hero with a generative dendrite cover figure, a filterable two-column Latest Research feed, a reviews list, an issue-cover sidebar with a Submit your research call to action, an animated metrics strip, newsletter signup with validation, and an authoritative footer. Built with semantic HTML, scholarly typography, and vanilla JavaScript.
Science — Academic Paper Layout
A full academic paper page in the style of a peer-reviewed journal, with a running header showing volume, issue and DOI, a superscript-affiliated author list, a structured abstract with keywords, a responsive two-column body with numbered sections, inline citation links that smooth-scroll to a numbered reference list, a captioned figure, a data table, a numbered equation block, footnotes, and a sticky mini table of contents that highlights the active section while you read.
Science — Author + Affiliation + ORCID
A scholarly author byline block in the institutional house style — names carry superscript affiliation numbers, equal-contribution daggers, a corresponding-author asterisk, and a green ORCID iD that opens orcid.org. Hovering or focusing any author lights up their matching numbered affiliations, and hovering an affiliation row highlights every author who belongs to it. The corresponding-author asterisk reveals a copyable email popover, and a segmented control switches between an expanded byline and a compact single-line variant.
Science — Conference Poster
A single-sheet academic conference poster on a fixed A0-proportioned canvas, scaled responsively. It pairs a bold gradient title band carrying authors and text-logo institutions with a three-column grid of accent-headed panels — Introduction, Methods, Results, Conclusion, References, and a Contact box — featuring a CSS bar-chart figure, a results table, an inline equation, a CSS-drawn QR code, and a fit-to-screen versus actual-size zoom toggle for print-poster review.
Science — Dataset Explorer
A client-side research dataset portal with a live search bar, faceted filter rail for domain, format, license, size and release year, plus a sortable, switchable grid and list of dataset cards. Each card carries a license badge, file count, size and citation count, and opens a detail drawer exposing the variable schema, a sample data preview, version history and ready-to-copy citation and DOI actions, all over a seeded in-script catalog of fictional records.
Science — Equation Block
A KaTeX-style display equation block rendered entirely in HTML and CSS with no math libraries. It typesets four numbered equations from a fictional two-box climate model — stacked fractions with a real rule, summation and integral glyphs with limits, Greek letters, subscripts and superscripts, and right-aligned equation numbers. Inline math sits inside the prose, hovering a reference button highlights its display block, and a per-equation copy action reveals and copies the LaTeX source. A calibrated-parameters table rounds out the article.
Science — Experiment / Methods Timeline
An ordered methods timeline that walks a fictional photothermal hydrogel drug-release assay from preparation through analysis. Steps are grouped into four colour-coded phases with status dots, wall-clock and hands-on durations, and per-step reagents and instruments. Each step expands to a recorded-parameters table with units and significant figures, a Play control sequentially highlights steps while a progress bar fills, phase chips filter the track, and a proportional phase-duration figure summarises the run.
Science — Figure + Numbered Caption
A reusable scientific figure-block primitive for journal-style web articles. Each block pairs an inline-SVG chart with a bold numbered label, a descriptive caption, and a source line; an on-hover toolbar lets readers expand the figure to a focus-trapped lightbox, copy a formatted citation, or download the underlying vector as standalone SVG. Ships three layout variants — full-width, half-width, and a labelled multi-panel grid — built with vanilla JS, no charting libraries, and tuned for AA contrast and 360px screens.
Science — Interactive Figure (toggle series)
A journal-grade interactive figure drawn entirely with inline SVG and vanilla JS — no charting library. It plots three abyssal monitoring stations as smoothed line-plus-marker series over sea-surface temperature, with gridlines, axis titles, units and bootstrap 95% confidence whiskers. A clickable legend toggles each station with smooth fades, a segmented control switches the y-axis between linear and log scale, and per-point hover tooltips read out temperature, NPP and CI. Seeded data renders identically offline.
Science — Interactive Periodic Table
A fully positioned periodic table of all 118 elements rendered in a CSS grid, with lanthanides and actinides broken into their own rows. Each cell shows atomic number, symbol, name, and atomic mass, and recolors live by chemical category, room-temperature state, or Pauling electronegativity. Hovering lifts a cell, clicking opens an element dossier with electron configuration, group and period, discovery year, and shell counts, and a search box spotlights matches by symbol, name, or number.
Science — Journal Issue Index
A polished academic journal issue table-of-contents page for a fictional computational biophysics journal. Features a double-rule masthead with ISSN and volume metadata, an issue selector, animated cover panel, and articles grouped into Editorial, Research, Reviews, and Letters sections. Each entry shows authors, affiliations, page ranges, open-access badges, expandable abstracts, PDF links, and copyable DOIs, with live access filtering and keyword search.
Science — Molecule / Structure Viewer Card
An interactive ball-and-stick molecule viewer card built with inline SVG and vanilla JavaScript. Drag to rotate a pseudo-3D structure, scroll or click to zoom, and toggle auto-spin while depth is faked through radius scaling and opacity. A structure selector switches between water, methane, benzene, and caffeine, each with a CPK element legend, formula, molar mass, atom and bond counts, and a fictional Helix Structural Database citation.
Science — Open Data / Dataset Portal Landing
A government open-data portal homepage rendered as a single self-contained static page. It pairs a prominent search hero advertising 4,217 open datasets with clickable example-query chips, category tiles for Climate, Genomics, Economics, and Astronomy, and a filterable featured-datasets table showing format, size, license, and update columns with download buttons. A developer access panel offers tabbed, copyable cURL, Python, and JavaScript snippets, and animated usage counters round out the technical, no-nonsense layout.
Science — Peer-Review / Open-Access Badges
A scholarly status-badge kit for journal articles, covering peer-reviewed, preprint, registered-report, gold/green/diamond open-access, data-available, code-available and reproduced states. Each badge pairs a CSS-SVG icon with an accessible label and a hover or focus tooltip that explains what it certifies. The demo assembles them into a realistic article meta strip, lays out a filterable legend gallery, and ships an interactive builder that composes a strip, copies its HTML, and charts badge uptake across a fictional journal issue.
Science — Popular-Science Article
A friendly, credible popular-science explainer page about deep-ocean mixing, built as a self-contained static demo. It pairs a serif reading column with a sticky glossary card, an animated SVG lead figure, an interactive CSS how-it-works stepper, a pull quote, a LaTeX-style equation block, save and share chips, a sepia reading mode, a live reading-progress bar, and a related-articles footer grid.
Science — Popular-Science Magazine Landing
A lively, trustworthy popular-science magazine homepage with a bold cover feature, a colorful topic chip row, a filterable grid of story cards with category color tags and read times, a horizontal Explainers scroller, a gradient newsletter band, and a ranked trending sidebar. Vanilla JS powers topic filtering, instant search, count-up stats, an animated starfield hero, and email validation with toast feedback. Fully responsive down to 360px and keyboard-accessible.
Science — Preprint / arXiv Article Page
An arXiv-style preprint landing page with a sticky left metadata rail holding the submission identifier, subject badges, a keyboard-accessible version dropdown, submission and revision dates, and license. The main column carries the title, author list with affiliations, a LaTeX-flavored abstract and display equation, an SVG figure with a numbered caption, a download panel that toasts on click, a Cite button revealing a copyable BibTeX block, and a references, cited-by, and comments tab strip.
Science — Publications List
A research-group publications index styled like an academic bibliography page, presenting a chronological list of fictional articles, conference papers, and preprints grouped by year. A sticky masthead and bibliometric summary sit above live filter controls for year, topic, author, and type, flag checkboxes for peer-reviewed, preprint, and award entries, plus a search box that highlights matches across titles, venues, and authors. Each entry bolds group members, carries colored badges, PDF, DOI, code, and BibTeX-copy links, citation counts, and an active-filter tag bar with a sortable order control.
Science — References + Inline Citations
A self-contained scholarly article layout with live inline citations and a full reference list. Hover or focus any bracketed marker to preview the source in a tooltip, click to smooth-scroll to its numbered entry, and switch the visible format between numeric, author-year, and superscript with one toggle. Each reference carries authors, title, venue, year, a resolvable DOI link, and per-entry Cite (copy BibTeX) and Copy buttons, plus a copy-all action. Built with semantic HTML and vanilla JavaScript.
Science — Research Lab / Group Landing
A polished, institutional landing page for a fictional university quantum-research group, featuring a hero with mission statement and principal investigator, animated lab statistics, a research-areas card grid, a year-filterable recent-publications list with copyable DOIs, a timeline news feed, a validated openings form, a funding-partner logo strip, and a contact footer. Built with semantic HTML, accessible controls, and vanilla JavaScript only.
Science — Researchers / Team Page
A polished, self-contained research-group people page for the fictional Computational Climate Dynamics Lab. Members are grouped by career stage — Principal Investigator, Postdocs, PhD Students, and Alumni — as CSS monogram avatar cards with research-interest chips and links to email, ORCID, Scholar, and a personal site. A live search and group filters narrow the roster, and each card flips to reveal a short bio with tenure and ORCID metadata. Built with vanilla JS, fully responsive and keyboard accessible.
Science — Review / Survey Layout
A long-form scientific review and survey layout for the web, styled like an open-access journal article on neural operators for PDE surrogate modeling. It pairs a sticky section navigator and reading-progress bar with a lead abstract, an interactive taxonomy figure that scrolls you to the family it represents, several themed sections each carrying a sortable comparison table with check, partial, and cross capability glyphs, pull-quote callouts, boxed key-takeaways summaries, LaTeX-flavored display equations with right-aligned numbers, and a collapsible reference list with linkable DOIs.
Science — Scientific Conference Landing
A dark, energetic homepage for the fictional NeuroCompute 2027 neural-computation conference. Features a neon hero with live countdown timer, key-info chips, a stat strip, monogram keynote-speaker cards, a keyboard-accessible tabbed Day 1/2/3 program preview, three registration pricing tiers with a highlighted Academic plan, an important-dates timeline with completed and active milestones, tiered sponsor logos, and a gradient call-to-action band. Built with semantic HTML, vanilla JS, scroll-spy, reveal-on-scroll, and a toast helper.
Science — Scientific Data Table
A publication-grade scientific results table built in vanilla HTML, CSS, and JavaScript. Column headers carry units, numeric values align on the decimal point with consistent significant figures, and measurements display as mean plus-or-minus standard deviation in monospace. Footnote markers, a highlighted best-result row, zebra striping, and a sticky header keep dense data legible. Click any header to sort ascending or descending, then export the current ordering with a one-click Download CSV button that builds a Blob in the browser.
Science — Structured Abstract Card
A polished, self-contained structured abstract card for a scientific article, with labelled Background, Methods, Results and Conclusions segments, a keyword chip row, article-type and open-access badges, a DOI line, and copy actions for the abstract and an APA citation. Includes an accent left rail, peer-review badge, a smooth reveal for the conclusions section, and a toast helper, built with vanilla HTML, CSS and JavaScript only.
Science — University Research Lab Landing
A polished, institutional landing page for a fictional university computational-biology research group. Built with semantic HTML, an Inter/Source Serif type system, and vanilla JavaScript, it features a full-bleed gridded hero with a CSS department crest, an alternating Focus Areas band with figure captions, count-up impact metrics, a featured project spotlight, an interactive team avatar strip with keyboard navigation, funding partner logos, and a contact footer with a validated form and a CSS map placeholder.
Chef's Daily Special Card
Rotating daily-special card with availability counter, countdown timer to end-of-service, allergen chips, and an 'add to order' CTA — swaps to a sold-out state when count hits zero.
Cocktail Builder
Interactive cocktail builder: pick a spirit base, choose mixers from a visual grid, add garnish — get the cocktail name, recipe steps, flavor profile radar, and a price estimate.
Dashboard — Analytics layout (filters + grid)
A full marketing-analytics shell for the fictional Northwind Labs, built with inline-SVG charts and no libraries. A sticky sidebar and topbar frame a filter bar with a date-range segmented control plus channel and region selectors, a four-up KPI stat row with deltas and sparklines, a large area chart of the primary metric, and a grid of secondary widgets — a channel bar chart, a device donut, and a ranked landing-pages table. Changing any filter recomputes every figure and redraws all charts from a synthetic dataset with a brief loading shimmer.
Dashboard — Bento-grid layout
A bento-style analytics dashboard built on a CSS grid of mixed-size tiles — a 2x2 hero area chart, four KPI cards with deltas and inline sparklines, a donut breakdown of traffic sources, a horizontal bar ranking, a live activity feed, and a goal gauge. A sticky topbar carries the brand, search and account. The refresh button re-rolls all fictional metrics with a smooth count-up animation, tiles lift on hover, headers drag to rearrange, and the grid reflows from four columns to one as the viewport narrows.
Dashboard — Finance (P&L · cashflow)
A finance dashboard for the fictional Northwind Beverage Co. built with plain HTML, CSS and JavaScript. A KPI row tracks revenue, expenses, net profit and cash balance with up or down deltas and tiny inline-SVG sparklines, while a profit-and-loss waterfall and a cashflow area chart are drawn entirely in SVG. A budget-versus-actual progress list flags overspend, a category-badged transactions table colors inflows and outflows, and a month, quarter or year selector recomputes every KPI, redraws both charts and refilters the table with formatted currency.
Dashboard — List + detail (master-detail)
A polished master-detail dashboard for a fictional SaaS CRM: a scrollable left list of customers with avatars, status badges and mini metrics, beside a rich right pane showing the selected account header, four KPI tiles with deltas and inline-SVG sparklines, an animated bar chart, a spend donut, and an activity timeline. Clicking or arrow-keying a row selects it; live search and status filters narrow the list; on mobile the detail slides in full-screen with a back button. Vanilla JS, no libraries.
Dashboard — Marketing (funnels · channels)
A marketing growth dashboard for the fictional Lumenpath, built with inline-SVG charts and zero libraries. A sticky sidebar and topbar frame a date-range and channel filter bar, a four-up KPI row with deltas and sparklines, an interactive Visitors to Paid conversion funnel with per-step rates and hover tooltips, a channel-performance widget pairing animated bars with a spend, CAC and ROAS table, and a sortable campaign list with live, paused and in-review statuses. Filters recompute every figure from a deterministic dataset.
Dashboard — Mobile-first layout
A mobile-first finance dashboard framed inside a centered phone shell — sticky greeting bar, a gradient hero balance card with delta chip and inline-SVG sparkline, a horizontally swipeable row of snap-scrolling KPI chips, and stacked widget cards holding a mini line chart, a transactions list, and a budget donut. A fixed bottom tab bar swaps Home, Stats, Activity, and Profile views, while a refresh button and pull-down gesture re-roll the data with animated count-ups. Pure HTML, CSS, and vanilla JavaScript.
Dashboard — Ops command center (live tiles)
A dark, real-time operations command center built with vanilla HTML, CSS and JavaScript. A wall of service status tiles tracks every node with colored health dots, KPI cards stream requests-per-second, p95 latency, error rate and fleet CPU with deltas and sparklines, and a scrolling inline-SVG throughput chart updates each second. An aria-live incident feed captures alerts as services flip to degraded or down, a region heat grid shows global load, and a pause control freezes the whole stream.
Dashboard — Real-time monitoring
A live infrastructure monitoring dashboard built with vanilla HTML, CSS and JavaScript. Streaming inline-SVG line charts for CPU, memory and requests scroll leftward as new points arrive every second, three live half-circle gauges sweep their needles, and KPI cards tick with up or down deltas and sparklines. A dashed threshold line flashes the chart and KPI tile red on breach, raising an aria-live alert and a timestamped error in the rolling event log. A pause control plus a speed selector and a live or reconnecting connection indicator round it out.
Dashboard — Single-KPI focus
A focused single-metric dashboard built around one dominant headline number — monthly recurring revenue for a fictional SaaS — with a delta versus the prior period, a large inline-SVG trend chart, and a 7d/30d/90d period selector that swaps the value, recolors the delta, and redraws the line. A row of supporting stats with sparklines, an animated count-up on every change, and a clean whitespace-heavy layout round it out. Pure HTML, CSS, and vanilla JavaScript with no chart libraries.
Dashboard — Tabbed / sectioned
A sectioned analytics dashboard that splits dense reporting into Overview, Traffic, Revenue, and Users tabs behind a persistent header and sidebar. Built on the WAI-ARIA tabs pattern with arrow-key roving focus, an animated underline that tracks the active tab, and a soft fade between panels. Each section lazy-renders its own widget set with a shimmer placeholder the first time, remembers the last tab, ticks live KPIs, filters by date range, and lets you drag KPI cards to rearrange.
Dish Nutrition Label
FDA-style nutrition facts panel for restaurant dishes: calories, macros bar chart, full nutrient table, allergen badges, and a serving-size adjuster that scales all values.
Form — Async availability check
A signup form that checks a username and work email for availability the moment you stop typing. Debounced input fires a simulated async lookup against a fictional taken-list, showing a spinner and then a clear result: a green check when the handle is free, or a red cross with a small set of available alternatives like name1 or name_2 when it isn't. Status flows through aria-busy and aria-live, and the submit button stays locked while any check runs or any field is taken.
Form — Autosave + saved indicator + restore
A Google Docs style note editor that quietly saves itself as you write. Edits are debounced, then persisted to localStorage while a status pill cycles from Unsaved changes to Saving to Saved a moment ago, announced through an aria-live region. A Save now button forces an immediate write, a live word and character count tracks length, and reopening the page offers to restore any unfinished draft. Validation gates Publish, which clears the saved draft from the device.
Form — Branching wizard (conditional steps)
A multi-step account wizard whose path forks on the answers you give. Pick Personal and you get three lean steps; pick Business and the wizard inserts extra company and VAT/tax steps, recomputing its step sequence on the fly. The progress count, breadcrumb rail and Back button always reflect the real branch length, every step validates inline with aria-invalid messaging, a nested VAT field reveals conditionally, and the run ends on a summary tailored to the chosen path.
Form — Card / payment input group
A polished credit-card payment field group with a live, flipping card preview. The number input formats into brand-correct groups as you type, detects Visa, Mastercard, Amex and Discover from the prefix, and runs a real Luhn checksum for inline validation. Expiry is masked to MM/YY with a past-date guard, the CVC adapts to 3 or 4 digits by brand and flips the card to its back on focus, and cardholder name plus billing postal code round out a fully keyboard-accessible, demo-only checkout.
Form — Conditional show/hide fields
A business-account form that grows with the answers it receives. Saying you have a company reveals company-name and team-size fields, unchecking same-as-billing slides open a shipping address, and picking Other on the referral question exposes a free-text note. Revealed blocks animate in, become required only while visible, and the validation pass skips anything hidden — so users never get blocked by fields they cannot see, with an accessible error summary on submit.
Form — Dependent / cascading selects
Two cascading dropdown chains built in vanilla JS over a fictional data set. A Country to State/Region to City rail repopulates and resets every descendant the moment a parent changes, keeps children disabled with clear placeholders until their parent is chosen, and shows a brief loading state as options arrive. A second Category to Subcategory pair mirrors the pattern. Real required validation focuses the first empty menu, and a confirmation panel summarizes the picks. Fully keyboard-operable with aria-live status.
Form — Inline edit / edit-in-place
A profile details panel where Name, Email, Role, and Bio each display a value beside a pencil button. Clicking Edit swaps the row into an inline input with Save and Cancel; Enter saves, Esc cancels, Save runs real validation and flashes a Saved check, Cancel restores the original. Only one row is editable at a time, focus moves into the field on edit, and an aria-live region announces every outcome. Built with vanilla JavaScript, accessible states, and a responsive layout.
Form — Long sectioned form (sticky nav)
A long single-page settings form split into five cards — Profile, Account, Notifications, Billing, and Security — with a sticky scroll-spy side nav that highlights the active section as you move through the page. Dirty-field tracking reveals a floating Save changes bar, real vanilla-JS validation surfaces inline errors and an accessible error summary on save, and a confirmation toast lands once everything is stored.
Form — Multi-step (progress + back/next)
A four-step signup wizard (Account, Profile, Plan, Review) with a numbered progress indicator and animated gradient bar. Each step validates its own fields before Next unlocks, Back preserves every value, and the Review screen summarizes all answers with per-row Edit jumps. Submit runs a real busy state into a success confirmation. Inline errors, aria-invalid, an aria-live error summary, password reveal, focus moved to the active step heading, and reduced-motion support throughout.
Form — Password strength + rules checklist
A set-password field that grades strength in real time with a color-coded four-segment meter while a live requirements checklist ticks off minimum length, uppercase, lowercase, number, and symbol as you type. A show/hide toggle reveals the value, a confirm-password field reports match state, and the submit button stays disabled until the password is strong and both entries agree. Strength is announced politely for screen readers.
Form — Real-time inline validation
A polished signup form that validates each field the moment it matters — on blur first, then live as you type, with debounced checks so messages never flicker. Specific error text, success checkmarks, an aria-invalid and aria-describedby wiring, a password strength meter with live rules, phone auto-formatting, and a submit button that stays disabled until every field is genuinely valid. Ends in an animated success state.
Form — Repeatable field rows (add/remove)
A variable-length team-invite form where each member is a repeatable row of name, work email, and role select. Add appends a fresh row with a smooth height transition, while each row carries its own trash button, per-field validation, aria-invalid error helpers, and success states. Rows renumber on removal, a minimum of one is always enforced, duplicate emails are flagged, and a live seat counter plus an empty-state placeholder keep the whole list keyboard accessible.
Form — Smart address input (autocomplete)
A typeahead address field built on the ARIA combobox pattern that filters a fictional address list as you type, highlights matched substrings, and is fully keyboard-driven with arrow, Enter, Home, End and Escape. Selecting a suggestion auto-fills structured street, city, postcode and country fields, while an Enter manually toggle reveals the full set with live validation, inline errors, an error summary, and a confirmation state.
Form — Submit success / confirmation states
A contact form that walks the whole submit lifecycle in front of you: idle, then a sending state with a button spinner and disabled fields, then either a confirmed receipt or a recoverable error. Success paints an animated SVG checkmark, a personalized confirmation, and a copyable reference number with a Submit-another reset. The failure path raises a role=alert banner with a retry button, and an aria-live region announces every outcome. Real inline validation, no fake submit.
Form — Top error summary + jump-to-field
An accessible GOV.UK-style form pattern that, on an invalid submit, renders a focused error-summary box at the top listing every invalid field as a clickable link. Each link scrolls to and focuses its field, while inline messages, aria-invalid, and aria-describedby keep the field-level state in sync. Fixing a field removes it from the summary live, and a clean submit swaps in a success confirmation panel — all in dependency-free vanilla JavaScript.
Form — Unsaved-changes leave guard
A profile-settings form that flips to a dirty state the moment any field diverges from its saved baseline, then guards every exit against losing that work. In-page route links and the Cancel button are intercepted while dirty and routed through a focus-trapped confirm modal offering Leave and discard or Stay, with Escape mapped to Stay. A native beforeunload handler covers tab close and refresh. Saving validates, re-baselines the form, and switches the guard off, all in dependency-free vanilla JavaScript.
Kitchen Prep Checklist
Pre-service mise en place checklist for kitchen staff: categorized tasks with checkboxes, assignee chips, time estimates, progress ring, and a service-ready sign-off.
Paywall — Blur-locked premium content
A Northwind Analytics weekly report where premium sections sit behind a CSS-blurred frosted veil and a centered lock card. Traffic stays visible while revenue, retention, and funnel cards render as legible-but-unreadable SVG bar charts and tables underneath the blur. An Unlock with Pro button smoothly removes the blur, swaps masked digits for the real figures, and confirms with a toast, while a Compare plans modal offers Starter, Pro, and Scale tiers with a monthly/annual billing toggle.
Paywall — Hard paywall (full block)
A self-contained hard paywall for the fictional Northwind Journal: an editorial article opens with a kicker, headline and byline, then after the first paragraph the entire remainder is replaced by a centered gate card on a soft brand backdrop. The card pairs a lock icon with a Subscribe to keep reading heading, two selectable plan cards (a Most popular Pro tier and a lighter Starter tier) with feature lists and live pricing, a Continue with plan button, and a sign-in link toggling an inline email form. No copy leaks below.
Paywall — Inline feature-locked gate (pro badge)
An inline feature-gate pattern for a fictional Northwind workspace, where premium controls in a settings panel and editor toolbar carry a PRO pill and a small lock icon. Clicking a locked row or tool opens a positioned popover that explains it is a Pro feature and offers an upgrade. A demo upgrade flips the plan badge, unlocks every gated row with a live toggle, clears the toolbar locks, and updates the side-by-side plan cards with an annual-billing price toggle.
Paywall — Soft / metered paywall
A self-contained metered paywall for the fictional Northwind Review. A long-read article reads freely while a sticky top bar tracks five free monthly reads on a shrinking progress ring with an aria-live counter. The article tail fades into a gradient veil, and a slide-up bar announces how many reads remain and invites a subscription. A Read another button decrements the meter live; at zero the veil hardens into a full block. A plans modal offers Starter, Pro, and Scale tiers with a monthly versus annual toggle that swaps prices live.
Portfolio — 3D / Interactive Portfolio
A full one-page designer portfolio in an immersive 3D, interactive style built with pure CSS 3D transforms and vanilla JavaScript, no WebGL or libraries. A dark neon stage with a perspective grid floor, drifting glows, a perpetually rotating hero cube ringed by orbiting bands, and tilt-on-hover project cards that compute rotateX and rotateY from the pointer with a moving glare and parallaxed depth layers. The hero is gyroscope-friendly on phones, and animated counters, skill bars, scroll reveals, and a validated contact form complete the experience.
Portfolio — About / Bio Block
A warm, personable about section for a single-person portfolio. Pairs a CSS-gradient avatar shape and a rotating currently line with a short narrative bio, a column of quick facts (location, focus, experience, availability badge), values and now lists, inline social links, and a download-CV button. Two columns on desktop, gracefully stacked on mobile, on a clean neutral base with working vanilla JS interactions.
Portfolio — Brutalist Portfolio
A full one-page brutalist portfolio for a fictional product designer, built on raw paper white, harsh black borders, and one clashing electric accent. Ships a scrolling marquee, count-up stats, filterable project grid, animated skill bars, a validated contact form, and a loud INVERT theme toggle. Mono and sans type mix, hard 3px borders, zero rounded corners, and snappy offset hovers throughout. Self-contained HTML, CSS, and vanilla JS — no frameworks, no external images.
Portfolio — Classic One-column CV
A restrained, print-ready single-column CV for a single-person portfolio. Stacks a name-and-title header with a contact row, a serif summary, a timeline-style experience list, selected projects, education, and pill skills with language levels — all on a clean neutral base with a typographic rhythm tuned for ATS-friendly resumes. A floating toolbar prints or saves to PDF via @media print, swaps the accent color, and toggles compact spacing, with the chrome hidden on paper.
Portfolio — Contact / Hire-me CTA + Form
A conversion-minded contact block for the foot of any portfolio. A bold Let’s work together headline sits beside a live availability badge, a copy-email button and a social row, paired with a compact hire-me form — name, email, project-type select and message — that validates inline on blur and submit. Vanilla JS shows friendly field errors, a character counter, a clipboard copy with toast, and an animated success state confirming a reply within 24h. Neutral Inter base, accessible, responsive.
Portfolio — Creative / Visual CV
A bold one-page creative resume for a fictional product designer, built with serif display type and a swappable accent color. It pairs a circular portrait orb and intro with a four-figure stats band whose numbers count up on load, honest skill bars that fill into view, an icon-led experience timeline, a selected-work grid, an about block, and a contact card. A print-friendly toggle strips color and animation for a clean, hireable printout.
Portfolio — Editorial / Typographic Portfolio
A full one-page designer portfolio dressed as an independent magazine — cream paper, oxblood accent and oversized Fraunces serif. A newspaper masthead, a drop-capped multi-column lede, numbered project articles with footnote captions, a justified two-column about with a pull quote, a dotted-leader skills index, a ruled CV and a centered contact page. Vanilla JS drives a discipline filter, copy-to-clipboard email, scroll-spy nav and a live issue dateline.
Portfolio — Experience / Résumé Timeline
A scannable vertical résumé timeline for a single-person portfolio, with role entries showing company, title, dates, achievement bullets, and stack chips. A segmented control swaps between Work and Education datasets, each entry expands and collapses to reveal details, an expand-all toggle opens or closes everything at once, and the current role is clearly marked with a live badge and a green connector dot.
Portfolio — Glassmorphism Portfolio
A full one-page personal portfolio rendered in a glassmorphism style: a colorful animated gradient backdrop with floating blurred orbs sits behind frosted, translucent glass cards that use backdrop-filter blur, luminous borders, and soft glow. It composes hero, selected work, about, experience, skills, and contact sections, with filterable projects, an accent-tint switcher, scroll-reveal animations, animated skill bars, copy-to-clipboard links, and an inline-validated contact form.
Portfolio — Hero / Intro Header Variants
Three drop-in portfolio hero headers for the same fictional designer, stacked so you can compare and copy the one you like. A centered name with role, one-liner and copy-email CTA; a split layout pairing intro text with an animated CSS avatar shape; and a big kinetic name with a self-typing role rotator. Vanilla JS powers the rotating titles, a cursor-follow gradient glow and a clipboard copy-email button with toast feedback. Neutral Inter base, accessible, responsive.
Portfolio — Minimal / Swiss Portfolio
A full one-page portfolio in a Minimal/Swiss style — white and ink with a single blue accent, a grotesque sans, and a strict baseline grid. It composes a hero, a filterable index-row work list with live counts and an accessible quick-look dialog, an about block with count-up stats, an experience timeline, and a validated contact form. Includes a light/dark toggle, copy-email, and toasts. Vanilla JS, no images, no dependencies.
Portfolio — Motion-Heavy Portfolio
A full one-page motion-heavy portfolio for a fictional product designer, built dark with gradient orbs and big display type. Everything reveals on scroll via IntersectionObserver, a custom cursor follows the pointer and goes magnetic over links, parallax orbs and a kinetic marquee drift as you scroll, counters and skill bars animate into view, and a validated contact form ships a toast. Reduced-motion is fully respected and the layout collapses gracefully to mobile.
Portfolio — Playful / Illustrated Portfolio
A full one-page designer portfolio dressed in a bright, hand-drawn illustrated style — sunshine and bubblegum palette, rounded Baloo display type and a friendly Nunito body. A waving SVG avatar, wobbly underlines, floating doodles, sticker-like tilted project cards, blobby shapes and dashed doodle dividers give it real character. Vanilla JS drives a project filter, bouncy card pokes, animated stat counters, a scroll-spy nav, copy-to-clipboard email and a validated contact form.
Portfolio — Project / Case-study Card
A portfolio-ready project card with a gradient SVG thumbnail, role, year, tag chips, and a one-line outcome. Ships three layouts in one grid — default, wide featured, and compact — that each lift on hover or keyboard focus and reveal a View case study link. Activating any card opens a lightweight, accessible detail modal with overview, role and impact metrics, plus a subtle pointer-tracked tilt.
Portfolio — Skills / Tools Display
A drop-in portfolio skills panel for a fictional product designer that lists eighteen capabilities grouped into Design, Code and Tools, each with a proficiency bar, a years-of-practice tag and an honest level label instead of fake percentages. Vanilla JS powers a category filter that dims the off-topic groups, a bars-versus-cloud view toggle, and a live readout that surfaces years, level and a short note as you hover, focus or tap a skill. Neutral Inter base, keyboard-friendly, fully responsive.
Portfolio — Terminal / Dev Portfolio
A full single-page portfolio reskinned as a hacker CLI: black screen, phosphor-green and amber monospace, blinking caret, ASCII banner and CRT scanlines. A typed boot sequence loads the page, then every section renders as command output — whoami, ls projects, cat about, git log experience, a skills report and a contact form. A working mini command processor parses real input, with clickable command chips, history, project case files and an alias map.
Portfolio — Testimonial / Recommendation Block
A polished portfolio testimonial section for a fictional product designer: a featured quote card with a CSS-gradient avatar, name, role and company, a small inline-SVG company logo and a star rating, wrapped in a carousel of four recommendations. Vanilla JS drives a pausable auto-advancing slider with arrow, dot and keyboard navigation, swipe support, hover and focus pausing, and smooth slide transitions. Neutral Inter and Newsreader base, accessible with live regions and visible focus rings, fully responsive.
Portfolio — Two-column CV
A recruiter-friendly two-column resume with a dark sidebar holding avatar, contact details, animated skill bars, language proficiency dots and links, paired with a spacious right column for summary, a connected experience timeline, education cards and project tiles. A floating toolbar swaps five accent themes, toggles comfortable or compact density and prints to clean PDF, with print CSS preserving the two columns on paper.
Portfolio — Work Grid + Filter
A filterable portfolio work grid with category chips (All, Product, Web, Branding, Motion), a Recent/A–Z sort, and live result counts. Tiles use CSS-gradient thumbnails, titles, years, and craft tags, and reflow with a FLIP-style animation as you filter and sort. Each tile opens an accessible quick-look dialog with project detail, and an empty state appears when a category has no matches. Vanilla JS, no images, no dependencies.
POS — Void & Refund Manager
Manager screen for voiding items or full tickets, issuing refunds, and logging comp reasons — searchable ticket list, line-item selection, approval PIN, and audit trail.
Post-Meal Feedback Form
Post-meal NPS and experience form: star ratings per dimension (food, service, ambiance), an emoji mood scale, a free-text comment, and a thank-you confirmation screen.
Pricing — Classic 3-tier table
Classic three-column SaaS pricing layout for the fictional Northwind Cloud, with Starter, Pro, and Scale plans shown side by side. Each card carries a price, a short tagline, a feature checklist with check and cross SVG icons, and a call-to-action button. The middle Pro plan is visually elevated with a brand border, a subtle lift, and a Most popular ribbon. Cards raise on hover and selecting any plan flashes an accessible toast confirmation.
Pricing — Feature comparison matrix
A full feature-comparison matrix for a fictional SaaS, Northwind, with four plan columns (Starter, Pro, Scale, Enterprise) and fifteen features grouped into Core, Collaboration, Security and Support sections. Cells render inline check and cross SVG marks or specific values like 10 GB and Unlimited. A sticky header keeps plan names, prices and CTAs in view, a monthly to annual switch retunes every price, you can highlight one plan to dim the rest, collapse any feature group, and the first column stays pinned during horizontal scroll on mobile.
Pricing — Monthly/annual toggle
A self-contained three-tier pricing page for the fictional Northwind Cloud, art-directed in a neutral product-UI palette with Inter type and soft shadows. Starter, Pro and Scale cards sit under a pill-shaped Monthly versus Annual segmented toggle that carries a Save 20 percent badge. Choosing a period slides the active pill, count-up animates every headline price between figures, and the per-seat billing note swaps accordingly. The choice persists via aria-pressed and localStorage, the toggle is fully keyboard operable, and a small toast confirms each switch.
Pricing — Single-plan / one-price layout
A centered single-plan pricing hero for a fictional SaaS, Northwind. One bold seat price with a monthly/yearly toggle that animates the figure and reveals the annual total, an Everything included ribbon, two columns of feature checkmarks, a 30-day money-back guarantee line, and one prominent gradient call-to-action. A four-item FAQ accordion sits below with keyboard and Escape support. Pure HTML, CSS, and vanilla JS, responsive to 360px.
Pricing — Tiers + Contact-sales enterprise card
A four-card SaaS pricing layout for the fictional brand Northwind with three priced tiers (Starter, Pro, Scale) and a distinct dark Enterprise card that shows Custom instead of a number. The Enterprise CTA opens an inline contact-sales lead form capturing name, work email, and company size, with live validation and an animated success state. A monthly/yearly billing switch flips prices, and a most-popular badge marks the Pro plan.
Pricing — Usage slider (price scales)
A usage-based pricing card with a range slider for monthly API calls that recomputes the bill in real time using tiered, stepped pricing. Dragging the slider names the current tier (Starter, Pro, Scale, Enterprise), shows included quota and per-call overage rate, and renders a base-plus-usage breakdown. A filled track with boundary tick marks, an aria-live price announcement, and a side-by-side tier reference round it out, all in vanilla JS.
Reservation Timeline
Gantt-style reservation timeline: tables as rows, time as columns, bookings as colored blocks with guest name and party size — hover for details, click to edit status.
Retention — Cancellation / downgrade flow
A three-step cancellation and retention flow for a fictional Northwind SaaS subscription. Step one collects a cancel reason from a radio list, step two surfaces a tailored save offer that adapts to that reason — a 40 percent discount, a downgrade to Starter, a pause with selectable duration, or a specialist handoff — and step three confirms the cancellation with a feedback field and a clear warning. Accepting an offer routes to a saved screen, while confirming routes to a goodbye screen with a reference code.
SaaS — AI Product Landing
A sleek, futuristic landing page for a fictional AI workspace product on a black canvas with an iridescent purple-teal-pink gradient. Features a glowing aurora hero, a live prompt-to-result demo that streams a canned answer token by token with a blinking cursor, capability tiles, a model-quality comparison band, animated stat counters, customer social proof, a working theme toggle, and an email try-it CTA. Respects reduced-motion.
SaaS — Analytics / Data Platform Landing
A dark, insight-forward marketing landing for a fictional real-time analytics and data platform. The hero pairs confident copy with a rich inline-SVG dashboard mockup featuring count-up KPIs, gradient area and bar charts, and a conversion funnel you can tab between. Below it run a live-updating metric ticker, a customer logo cloud, pipeline and query feature sections, a large team-dashboard with finance, growth and ops views, and a gradient demo call-to-action with email validation.
SaaS — API Keys & Webhooks
A developer-grade API keys and webhooks manager built in vanilla HTML, CSS, and JavaScript. The keys table shows masked secrets with reveal and copy, scopes, created date, and last used, while creation generates a fresh secret revealed only once and revoke asks for confirmation. A webhooks section lists endpoint URLs, subscribed events, and delivery status, lets you add new endpoints, and fires a test send that returns a simulated 200 OK, all with a working light and dark theme.
SaaS — App Dashboard / Home
A polished in-app SaaS dashboard home built with vanilla HTML, CSS, and JavaScript. It pairs a time-aware greeting and quick-actions row with four KPI cards that carry deltas and inline SVG sparklines, a primary revenue trend chart with hover tooltips, a dismissable onboarding nudge, a checkable tasks widget, and a recent-activity feed. Switching the date range recomputes every metric and redraws the charts live, and a working light and dark theme toggle keeps the whole shell on-brand.
SaaS — App Shell
A polished, fully responsive SaaS application shell with a collapsible left sidebar, workspace switcher, and a topbar carrying search, notifications, theme toggle, and an avatar menu. Built in vanilla HTML, CSS, and JavaScript, it ships persisted sidebar collapse, a working light and dark theme, mobile off-canvas navigation, dropdown menus, and a Command-K palette stub over a sample dashboard with breadcrumb, stat cards, an inline SVG chart, and task list.
SaaS — Billing & Subscription
A finance-grade SaaS billing and subscription page for a fictional analytics product. It pairs a current-plan card showing price, seats, and renewal date with a live usage summary of animated meter bars, a Visa payment-method card, and a downloadable invoice history table. A change-plan dialog reproduces the proration upgrade pattern, an update-payment form validates and reformats card input, and download actions fire contextual toasts. Includes a working light and dark theme toggle, accessible focus traps, and a responsive layout.
SaaS — Changelog / What's New
A polished product changelog and what's-new page built as a vertical release timeline. Each entry shows version, date, colored New / Improved / Fixed tags, a summary, and expandable details. Visitors can filter by update type, search across releases, copy a deep link per entry, and see a new-since-your-last-visit marker driven by localStorage. Includes a subscribe and RSS call to action, a working light and dark theme toggle, and a fully responsive layout.
SaaS — Customers / Accounts Admin
An internal customers and accounts admin built as a dense, clean data-table. Browse fictional company accounts with plan badges, MRR, seat counts, status, and health indicators, then refine with live search and plan and status filters and sortable columns. Click any row to open a detail drawer with overview, plan, usage meters, activity feed, and billing history. Includes row selection with bulk export, CSV download, pagination, and a working light and dark theme toggle.
SaaS — Developer Tool Landing
A dark, terminal-flavored landing page for a fictional developer platform, pairing a clean sans interface with monospace accents. It features a copy-able install command, a self-typing terminal that replays a live deploy, feature tiles aimed at engineers, a curl/JavaScript/Python code-sample tab switcher with one-click copy, animated GitHub-stars social proof with a working star toggle, and a docs call to action — all self-contained vanilla HTML, CSS, and JavaScript.
SaaS — Features / Product Tour
A benefit-led SaaS features and product-tour page with alternating copy plus inline-SVG product mockups, a sticky scrollspy sub-nav that tracks the active feature, an accessible tab control that swaps an automation rule-builder preview, a before-and-after comparison band, a working light and dark theme toggle, and an email-validated call-to-action — all self-contained vanilla HTML, CSS, and JavaScript with no images, frameworks, or backend.
SaaS — Fintech SaaS Landing
A trustworthy fintech SaaS landing page in navy, mint, and white with a precise Inter type system. It pairs a finance dashboard mockup built in pure SVG with fictional SOC 2, PCI, ISO, and GDPR compliance badges, payments and reporting feature tiles, and a navy stats band. Vanilla JS drives intersection-triggered animated counters, a live cross-border savings and fee calculator, and an email-validated book-a-demo form.
SaaS — First-run / Empty States
A polished set of first-run and empty states for a fictional SaaS project area, covering no projects yet, no search results, no data connected, an error with retry, plus loading skeletons and a populated grid. A state switcher and cycle control preview each scene, while an inline create form, source connect, and retry flows transition into a freshly populated dashboard with realistic but clearly fictional data.
SaaS — Global Command Bar (⌘K)
A polished, accessible global command bar overlay for SaaS apps, opened with Cmd-K or Ctrl-K. It pairs a search input with grouped results for Navigation, Actions, Recent, and Settings, plus fuzzy matching with highlighted hits, full keyboard navigation via arrows, Enter and Esc, a focus trap, action icons and shortcut hints, a working dark-theme toggle, and a recent-commands list that updates as you go. Built with vanilla JS, no libraries.
SaaS — Integrations Directory
A polished integrations directory for a fictional SaaS product, featuring a live search field, category filter chips with running counts, and a responsive grid of integration cards with SVG logo marks and one-click connect toggles. A slide-in detail drawer explains what each integration does, lists the permissions it requests, and surfaces usage and rating stats. Empty states, toast feedback, and a working light and dark theme toggle round out a clean catalog experience.
SaaS — Onboarding Wizard
A welcoming, momentum-building onboarding wizard for a fictional SaaS product. A four-step flow guides new users from creating a workspace, to inviting teammates, connecting a data source, and customizing their accent and theme. A live progress ring tracks overall completion, every step validates and persists to localStorage, skip-for-now keeps things moving, and a celebratory confetti finish wraps it up. Built with semantic HTML, CSS, and vanilla JavaScript, with light and dark parity.
SaaS — Pricing Page
A conversion-ready SaaS pricing page with a monthly to annual billing toggle that reveals a 20 percent savings, four plan cards including a highlighted most-popular tier, and a per-seat slider that recalculates the Team price live. Includes a scrollable feature-comparison table, an expandable FAQ accordion, a contact-sales band, and a working light and dark theme toggle. Built with semantic, accessible, responsive vanilla HTML, CSS, and JavaScript.
SaaS — Productivity / Collaboration Landing
A calm, organized landing page for a fictional productivity and collaboration SaaS. It pairs a soft product mockup with use-case tabs that live-swap between a Kanban board, task list, timeline, and docs view, then layers in a collaboration feature band, an integrations strip, a delightful five-star testimonial, and a free-to-start CTA. Built with semantic landmarks, scroll-reveal motion, validated email capture, and a fully responsive layout that collapses gracefully on mobile.
SaaS — SaaS Landing
A crisp, trustworthy SaaS marketing home for a fictional team-planning tool. Includes a sticky nav with mobile menu, a hero with primary and secondary calls to action, an interactive product preview that swaps between board, timeline, and insights views, a logo cloud, a feature trio with icons, an animated count-up metrics band, a customer testimonial, a three-tier pricing teaser, a gradient final CTA, and a multi-column footer. Ships with a persisted light and dark theme toggle plus scroll-reveal.
SaaS — SaaS Metrics (MRR · Churn · LTV)
An investor-grade SaaS metrics dashboard built with vanilla HTML, CSS, and JavaScript. Headline cards surface MRR, ARR, churn, LTV, and net revenue retention with colored delta pills, beside an MRR-movement bar chart that stacks new, expansion, and churned revenue. A growth area chart, a cohort-retention heatmap, and a plan-mix donut complete the view. A 30d, 90d, and 12m period switch recomputes every figure and redraws all charts live, with hover tooltips, theme toggle, and keyboard support.
SaaS — Settings Page
A thorough SaaS account settings page with a vertical settings nav covering Profile, Workspace, Notifications, Appearance, and Security. Grouped form fields, accessible toggles, a per-channel notification matrix, a working theme and accent picker, and a guarded danger zone. Edits track a real dirty state with a save and discard action bar, toggles and theme choices persist to local storage, and an unsaved-changes guard protects you before leaving.
SaaS — Team Members & Roles
A polished access-management page for a fictional SaaS workspace: a searchable, filterable members table with avatars, inline role selects, status badges and last-active times, plus an invite-by-email form with validation, a live pending-invites list with resend and revoke, a role-permissions summary, a seats-used meter, and a confirm-to-remove dialog. Ships with a working light and dark theme toggle and toast feedback on every action.
SaaS — Upgrade / Plan-compare Modal
A centered upgrade dialog that compares the current plan against higher tiers with feature deltas highlighted as gains, a monthly/annual billing toggle, a seat stepper, and a live order summary with a proration note. Opening from a CTA traps focus and supports Esc to dismiss; billing and seat changes recompute totals in real time, and confirming reveals a polished success state listing exactly what the team just unlocked.
SaaS — Usage / Quota Meter
A compact, scannable usage and quota meter set for SaaS dashboards. Each metered resource (API calls, object storage, team seats, CI builds) shows used versus limit with a progress bar that shifts from brand to warn to danger as it nears the cap, plus a projected-overage note and a billing period reset countdown. A simulate-usage control ticks values upward, a smart upgrade prompt surfaces when thresholds are crossed, and a monthly/yearly toggle reframes every quota.
Shop — Account
A customer account hub for a fictional storefront, with a sticky sidebar that switches between Orders, Addresses, Payment, Returns, and Profile. The orders list carries colour-coded status badges plus reorder and track actions, a slide-out order-detail drawer shows a delivery timeline and line items, the address manager supports add, edit, remove, and set-default, and the profile form validates and saves with a confirmation toast.
Shop — Brand Story / About
A warm, premium brand-story page for an e-commerce shop. A full-bleed hero carries the mission statement, then a four-step milestone timeline with an animated progress bar, three values cards, and a dark materials section where stat counters tick up on scroll. A founder note closes with a handwritten signature, followed by a press-logo strip and a shop call-to-action with a working newsletter sign-up and scroll-reveal animation throughout.
Shop — Cart / Bag
A polished e-commerce cart and bag page with line items showing product silhouette thumbnails, variant, quantity steppers, and per-line pricing. A promo-code field with live validation, an order summary breaking down subtotal, discount, shipping, and estimated tax, plus a free-shipping progress bar and a sticky secure-checkout panel with trust signals. Quantity edits recompute every total, removing an item offers an undo toast, and an empty-bag state ships built in.
Shop — Category / PLP
A flagship e-commerce category and product-listing page with a faceted filter rail (category, price range, color swatches, fit, rating, in-stock), a sort dropdown, removable active-filter chips, and a responsive product grid. Every facet filters the grid live and instantly, updating the result count and chip row, while sort reorders and clear-all resets state. Includes working add-to-cart, wishlist, price slider, and a mobile filter drawer. Vanilla JS, no libraries.
Shop — Checkout
A trustworthy multi-step storefront checkout that walks shoppers from contact to shipping, payment, and a final review with a progress indicator and per-step validation. It auto-formats card number, expiry, CVC, phone, and ZIP, offers priced shipping methods with delivery estimates, applies a promo code, and keeps a live order-summary sidebar in sync before a simulated place-order success state with order number and arrival date.
Shop — Collection / Lookbook
A magazine-meets-shop collection page for a fictional coastal label. An editorial gradient hero opens onto a styled lookbook of large CSS scenes with pulsing shoppable hotspots that pop a product card with a swatch gallery, rating, stock chip, and add-to-bag. Below sit a six-piece product grid and a shop-the-look capsule that bundles three signature items at a calculated discount. A slide-out bag with quantity steppers and live subtotal ties it all together.
Shop — Discounts / Promo Codes
A back-office discounts manager for a storefront. A table lists each promo code with its type chip (percent, fixed amount or free shipping), value, a live usage progress bar against its limit, schedule window and a derived status of Active, Scheduled, Paused or Expired. Status filter tabs and live search narrow the view. Every row offers an activate toggle, copy-to-clipboard, edit and delete, and a slide-out editor with a code generator, segmented type control, validation and a live preview creates or updates codes in place.
Shop — Electronics / Tech Store Landing
A dark, electric-blue electronics storefront landing built with vanilla HTML, CSS, and JS. It pairs a floating SVG flagship headset hero with key specs, a lightning-deals row with a live countdown, three comparison tiers you can select by click or keyboard, spec-highlight tiles with counters that animate into view, and a working slide-in cart with quantity controls plus an email-capture form. Techy glow accents, a crisp grid, and fully responsive layout.
Shop — Faceted Filter Sidebar
A reusable product-listing filter rail with collapsible facet groups: category checkboxes with live counts, a true dual-handle price range slider, a color swatch grid, size chips that disable when empty, a star-rating filter, a searchable brand list with match highlighting, and an in-stock toggle. Every control updates a live result count and a removable active-filters chip row, with clear-all reset and a slide-in mobile drawer. Built with vanilla JS and no libraries.
Shop — Fashion / Apparel Store Landing
A high-fashion apparel store landing for the fictional house Méridian, built in vanilla HTML, CSS and JS. White-and-black gravitas meets a single editorial vermilion, couture serif headlines and clean sans body. A full-bleed lookbook hero with a CSS-gradient figure, a scrolling house statement, an atelier editorial band, four shoppable product cards with star ratings and hover add-to-bag, three category tiles, an Instagram-style journal grid, and a slide-out bag with working quantity steppers, live subtotal, wishlist toggles and a validated signup.
Shop — Grocery / Essentials Landing
A bright, fresh landing page for FreshCart, a fictional grocery delivery service, built entirely from CSS gradients, inline SVG and emoji instead of images. A hero pairs a 30-minute delivery promise with a working ZIP-code checker, backed by a category grid, a today's-deals row with live add-to-basket, a three-step how-it-works strip and an app sign-up call-to-action. Vanilla JS drives the cart counter, postcode lookup, toasts and smooth scroll.
Shop — Luxury Boutique Landing
A cinematic luxury boutique landing for a fictional Paris haute-joaillerie house, built in black, champagne and ivory with a refined serif. Features a restrained hero, a single signature piece with metal and size selectors and live pricing, an editorial collection grid, an atelier section with animated craft counters, a private-salon cart drawer, an appointment form, and slow elegant scroll reveals — all pure HTML, CSS and vanilla JavaScript.
Shop — Mini-cart Flyout
A polished e-commerce mini-cart drawer that flies in from the right when you add a product. It packs slide-in line items with thumbnails, quantity steppers, and per-line totals, a live free-shipping progress bar, a running subtotal, and view-cart plus secure-checkout actions. Built with vanilla JS, it features a focus trap, Escape and overlay dismissal, an animated badge, recompute-on-change totals, and a friendly empty state.
Shop — Multi-vendor Marketplace Landing
A dense, deal-driven landing page for a fictional multi-vendor marketplace, built entirely with CSS gradients, inline SVG and emoji instead of images. A search-forward hero with quick-search chips leads into a twelve-tile category mega-grid, a flash-deals rail with a live countdown, a scrollable top-sellers carousel, vendor spotlight cards and a trust strip. A working slide-in cart drawer tracks quantities, totals and favorites, all in vanilla JS.
Shop — Order Confirmation
A reassuring e-commerce order confirmation page with an animated success check and a celebratory confetti burst on load. It pairs a copy-to-clipboard order number with an estimated-delivery card and a four-stage step tracker (Confirmed, Packed, Shipped, Delivered), an expandable itemized summary with totals and payment method, a shipping address block with a CSS map illustration, and clear track-order and continue-shopping calls to action. Fully responsive, keyboard friendly, and built with vanilla JavaScript.
Shop — Orders Manager
An operational orders console for a storefront back office. A sortable orders table lists ID, customer, total, payment and fulfillment status chips and date, with filter tabs for All, Unfulfilled, Paid and Refunded plus live search. Selecting a row slides out a detail panel showing line items, the customer block and a timeline. Fulfill, refund and print actions update the status badges and confirm with a toast, and a checkbox column drives bulk-fulfill across the visible selection.
Shop — Price + Discount Display
A precise money UI primitive for storefronts that renders every pricing variant: a bold current price, compare-at strikethrough with an auto-calculated percent-off badge, per-unit math, interest-free installments, member pricing, and low-stock or price-drop notes. Four product cards demonstrate regular, on-sale, sold-out, and pre-order states. A currency switcher reformats and re-rounds every figure live, a member-price toggle swaps rates, and a flash-sale button flips a card between sale and regular pricing.
Shop — Product Card
A reusable e-commerce product card shown as a four-up grid of fictional storefront items. Each card pairs a CSS-gradient and inline-SVG product silhouette with a wishlist heart, a Sale or New badge, brand and title, a star rating with review count, colour swatch dots, and a sale price with compare-at strikethrough. Hover reveals a Quick add flyout with a size picker; swatches preview the image tint, the heart toggles, and a sold-out variant shows a Notify me state. Pure vanilla JS, no images or external libraries.
Shop — Product Detail (PDP)
A complete e-commerce product detail page with a gradient and SVG image gallery, thumbnail switching, color swatches and capacity chips that drive price, image, and stock state, a quantity stepper, working add-to-cart and wishlist toasts, expandable shipping and returns accordions, a rating breakdown with verified reviews, and a horizontal you-may-also-like rail with quick-add buttons.
Shop — Product Manager
A polished e-commerce admin product manager built in vanilla JS. Browse a products data-table with thumbnails, SKUs, prices, stock, and status, then search, filter by status, and sort any column. Select rows for bulk publish, archive, or delete, edit inventory inline, and create or update items in a slide-in drawer with title, price, stock, variants, and status. Includes pagination, live summary stats, and toast feedback.
Shop — Promo / Countdown Banner
A self-contained e-commerce urgency kit built with vanilla HTML, CSS, and JavaScript. It pairs a dismissible sticky announcement bar that copies a promo code and remembers being closed, a bold hero sale banner with a live days-hours-minutes-seconds countdown, and a compact flash-deal card whose animated stock meter and add-to-cart button decrement real, working stock. On-palette, accessible, and responsive down to small phones.
Shop — Reviews + Rating Breakdown
A credible storefront reviews block pairing an average-rating summary with a clickable 5-star distribution breakdown, star and recency filters, four sort modes, and individual review cards carrying avatars, verified badges, dates, and helpful votes. A star-input form lets shoppers publish a new review that updates the average, the bars, and the list in real time, with load-more paging and accessible keyboard controls throughout for trustworthy social proof.
Shop — Sale / Deals Landing
A high-energy sale and deals landing page for a fictional tech store, built with plain HTML, CSS, and vanilla JavaScript. It pairs a bold dark hero and a live sale countdown with deal-category tiles, a horizontal doorbusters rail, and a responsive grid of discount cards showing percent-off, original and sale prices, star ratings, and stock chips. Interactions include a sort-by-discount toggle, copy-coupon button, and add-to-cart toasts that update a cart badge.
Shop — Search Results
A fast-feeling storefront search results page with a live autocomplete dropdown that blends recent searches, popular queries, and matching products as you type. Keyboard-navigable suggestions, a result count, filterable facet chips, sort control, and product cards with ratings, prices, sale and stock chips. Includes a did-you-mean spelling correction and a friendly no-results state with popular search shortcuts. Built with semantic HTML, an accessible combobox, and zero dependencies.
Shop — Store Dashboard
A merchant store dashboard for the fictional Lumen Goods shop, built as a single self-contained page. Four KPI cards show net sales, orders, average order value and conversion with up or down deltas and inline SVG sparklines. An animated revenue area chart with a previous-period overlay sits beside an orders-by-status donut, a sortable top-products table, a low-stock reorder list and a live recent-orders feed. A period switcher recomputes every metric and redraws all charts.
Shop — Storefront Home
A conversion-focused e-commerce storefront home page with a sticky header, live cart count, hero banner, featured collection tiles, a horizontally scrolling trending product grid, and a flash-sale strip with a ticking countdown. Add-to-cart updates the header badge, fires a toast, and fills a slide-out cart drawer with working quantity steppers and a live subtotal. Includes search filtering, wishlist toggles, trust badges, a newsletter signup, and a tidy footer.
Shop — Variant Selector
An e-commerce variant selector primitive with named color swatches that cross out sold-out shades, a material picker that adjusts the price, and size chips whose availability is computed per color and material so disabled combinations are clearly shown. Choosing a color or material filters the available sizes, while a live summary, per-variant price, compare-at savings, and stock chip stay in sync. Includes a size-guide dialog, keyboard-roving radio groups, and validation before add to cart.
Shop — Wishlist / Saved Items
A polished e-commerce wishlist component rendering saved products as a responsive grid of cards, each with a gradient product tile, inline-SVG silhouette, brand, title, star rating with review count, prominent price, and a colour-coded stock chip. Per-item heart-remove and move-to-cart buttons, a select-all plus bulk move and remove bar, undo toasts, price-drop badges, a live cart counter, and a built-in empty state. Selections and saved items persist to localStorage.
Staff Clock-In Terminal
Touch-friendly staff clock-in/out terminal: employee grid, PIN entry, active shift display, break tracking, and an end-of-shift hours summary.
Storybook — Alphabet Flashcard Set
A bright, tactile A-to-Z flashcard deck for early readers, built with rounded everything and a friendly storybook palette. Each card shows a giant letter, a bouncing emoji object, and the matching word; tap to flip it with a 3D card spin and read a fun fact on the back. Prev and next buttons hop through the deck, a shuffle remixes it, progress dots and an alphabet jump strip track where you are, and a Say it button speaks the letter aloud with an animated mouth. Includes an easy-read font toggle.
Storybook — Animated Mascot Guide
A friendly storybook mascot named Pip, a glowing inline-SVG fox-sprite that lives in a rounded scene and idles forever with blinking eyes and a gentle bob. Tapping Pip makes it wave, jump, and giggle with a speech bubble of helpful tips, while a mood selector swaps between happy, curious, and sleepy expressions, each with its own animation and palette. A Guide me button runs a tiny tooltip tour around the controls, every motion respects reduced-motion, and an easy-read toggle loosens the type.
Storybook — Bookshelf Browse
A cozy children's library where colorful storybooks line wooden shelves drawn entirely in CSS. Every cover is an inline-SVG illustration — foxes, whales, comets, and cloud-ships — and hovering pulls a book forward off its plank. Category tabs sort the shelves into Animals, Bedtime, and Adventure, a live search filters by title or author, and tapping a cover opens a friendly detail card with the blurb, recommended ages, read time, star rating, a Read button, and favorites. An easy-read font toggle makes the whole page more legible.
Storybook — Classic Fairytale Landing
A cream-and-gold fairytale storybook landing with an illustrated castle-and-forest SVG hero, a glowing once-upon-a-time headline, and featured tale covers you can queue for bedtime. A working read-aloud strip highlights each word as a cosy narrator plays, with adjustable speed and selectable voices, plus an Easy-Read accessibility toggle, parent testimonials, ornamental gold dividers, gentle float animations, and a validated trial-signup call to action.
Storybook — Coloring / Paint Canvas
A friendly coloring activity for a children's storybook app, built entirely from inline SVG and vanilla JavaScript. A chunky crayon palette drives a flood-fill canvas where tapping or dragging across a hand-drawn fox scene paints each region with the active color, complete with a gentle pop animation. It ships with a ten-crayon box, a rainbow mode that cycles hues on every fill, undo and clear controls, an active-crayon readout, and a save-to-PNG export rendered through a canvas — all keyboard friendly and reduced-motion aware.
Storybook — Drag-to-match Activity
A cheerful drag-to-match activity for early readers in the Critter Cottages storybook style. A column of inline-SVG animal friends faces a column of cozy homes, and the player drags each friend onto the right place. Correct drops snap shut with a happy pop and a gold star, while wrong ones bounce back with a gentle shake. Pointer-based dragging is mirrored by a full tap and keyboard fallback, with a running score, an all-matched confetti finale, an easy-read font switch, and a one-tap reset.
Storybook — Educational / EdTech Landing
A bright, primary-color landing page for a fictional kids EdTech app, Sparkleton, guided by Sparky the fox mascot. It pairs a friendly SVG hero with three switchable subject tiles for Reading, Math and Science that swap a live daily-lesson list, a guided curriculum map with an interactive weekly progress strip where tapping stars flies a rocket to the finish, a parent-trust section on safe ad-free screens, family pricing with a monthly-yearly toggle, and an easy-read font switch.
Storybook — Kid Profile + Avatar Picker
A cheerful kid profile setup where children build a reading buddy from chunky option swatches. A live inline-SVG avatar updates instantly as you change skin tone, hair color and style, eye expression, accessory, and background, all drawn in pure CSS and SVG with no external images. A friendly name input and a tappable age picker round out the profile, a Surprise me button rolls a random look, and Save pops a confetti confirmation showing the finished avatar. Everything persists to localStorage, with an easy-read font toggle for accessibility.
Storybook — Modern Flat Landing
A bright, modern flat-illustration landing page for a fictional kids' reading app called Tinytales, built in plain HTML, CSS and JavaScript. A bold inline-SVG hero scene pairs with app-store style download buttons, crisp flat feature cards with custom icons, a three-step how-it-works, and a filterable stories shelf where mood chips swap a grid of rated cover cards. A pricing card, validated newsletter form and colorful gradient footer round out a snappy, geometric, solid-color design.
Storybook — Nursery / Baby Landing
A tender nursery and baby brand landing for the fictional Lulla and Moon, built in soft pastels and cream with ultra-rounded cards and gentle shadows. An airy hero pairs a slowly drifting SVG crib mobile of a moon, cloud and sleepy star with twinkling dots and floating zzz. Bedtime feature cards, a working lullaby player with soft Web Audio chimes, a calm parent testimonial, an easy-read toggle and a quiet email call to action complete the soothing, minimal-motion experience.
Storybook — Parent Dashboard
A calm, trustworthy parent dashboard for a kids' storybook app, built on the same soft rounded palette with grown-up accent tones. A per-child switcher swaps every figure live: an inline-SVG weekly reading-time bar chart that highlights the peak day, books-finished against a goal, and a current reading streak. A daily time-limit panel pairs a big pill slider with an enforce toggle and a plain-language status line, age-range content filters update a summary, and an easy-read font toggle keeps it accessible.
Storybook — Picture-Book Reader
A friendly picture-book reader that turns illustrated two-page spreads of a bedtime tale, each drawn entirely in inline SVG with a sentence of story text. Big rounded prev and next buttons flip the pages with a gentle curl-and-tilt animation, a spread indicator and progress bar track your place, and a thumbnail strip jumps anywhere. Arrow keys turn pages, the final spread bursts into a The End confetti celebration, scene characters wiggle on tap, and an easy-read font toggle helps young readers.
Storybook — Pop-Up Book Landing
A tactile pop-up-book landing for the fictional childrens title The Whirlwood Pop-Up Storybook, built in HTML, CSS and vanilla JS. A paper hero scene unfolds layer by layer with stand-up hills, a waving paper fox and pointer parallax. Feature spreads lift from the gutter on scroll with offset shadows and fold lines via IntersectionObserver, an interactive forest tilts to separate its layers, and a springy pre-order CTA card validates an email. Easy-read font toggle, sparkle bursts and reduced-motion support included.
Storybook — Read-Along
A cozy karaoke-style read-along for the fictional bedtime tale The Moon's Lost Mitten, where each word of a CSS-illustrated picture book lights up in sequence as a friendly narrator speaks. A big Read-to-me button, restart, voice mute, and a 0.5x to 1.8x speed slider drive the pacing, while the highlight auto-scrolls and the scene caption updates per page. Tapping any word jumps the narration there, and an easy-read toggle swaps a dyslexia-friendly font with looser spacing. Web Speech API when available, timer fallback otherwise.
Storybook — Star-reward Quiz
A gentle children's quiz built in the storybook style, with one picture question at a time and four big tappable answer cards drawn entirely as inline SVG. Tapping the right card sends a star flying into a five-slot meter, pops a confetti burst, and cheers the reader on; a wrong tap simply wobbles and offers a kind try-again, never a harsh fail. A progress bar tracks all five questions and a final score screen shows the earned stars with a play-again button, plus easy-read and sound toggles for friendly motion and accessibility.
Storybook — Sticker Reward Board
A playful storybook sticker reward board where a grid of dashed empty slots fills with collectible inline-SVG stickers as a child checks off tasks from a Tasks Today list. Each completed chore flies an emoji into the next slot and pops a hand-drawn sticker on with a bouncy spring. A progress bar tracks the way to the next reward chest, and filling it triggers a confetti celebration that awards a special golden trophy sticker. Earned stickers, checked tasks, and unlocked chests persist to localStorage.
Storybook — Tap-to-animate Scene
A cheerful tap-to-play picture-book scene built entirely from inline SVG, where children explore Sunny Meadow by waking five friendly characters. Tap the sun, a drifting cloud, a hopping bird, a tail-wagging puppy, or the cottage door and each one pops with its own keyframe animation, a sound-word speech bubble, sparkle particles, and a soft chime. A find-all-5 counter, progress pips, story log, easy-read font toggle, celebration overlay, full keyboard support, and reduced-motion respect round it out.
Storybook — Two-page Illustrated Spread
A polished two-page storybook spread for the fictional picture book Maple and the Moon-Boat, built entirely in HTML, CSS and vanilla JS. The left page is a full inline-SVG night-river scene with a paper boat, glowing moon, swaying lantern and drifting fireflies; the right page carries a large decorative drop-cap story column with a spot firefly-jar illustration. Ornamental vine page frames, page folios, gentle pointer and tilt parallax, a sparkle Read-it-again button, an easy-read font toggle, and a layout that stacks to one column on phones.
Takeout Pickup Board
Staff-facing takeout order board: three columns (In Prep / Ready / Picked Up), drag-style status advancement, auto-timer per order, and an audio-alert simulation when orders go ready.
Takeout Pickup Status
Customer-facing takeout order status widget: order number lookup, animated step tracker (received → preparing → ready → picked up), and an estimated time countdown.
Travel — "Top 10 Places" Listicle
A scannable, shareable travel listicle that ranks ten fictional beaches from one to ten. Each numbered entry leads with a full-bleed CSS gradient hero, an oversized rank badge, a vivid blurb, and a row of quick facts — best for, when to go, and a price tier — plus a mini CSS map chip with coordinates. A sticky ranked nav scroll-jumps between picks and scroll-spies the active one, an add-to-trip heart saves favourites, and a surprise-me button drops you on a random shore.
Travel — Backpacker / Budget Landing
A high-energy backpacker and budget-travel landing page for a fictional brand, built entirely with CSS gradients and inline SVG instead of photos. A sunset-and-denim hero pairs a layered horizon scene, a dotted route motif and a flying plane with a working trip search and count-up stats. Below it sit a scrolling deals marquee, filterable route cards with mini SVG maps, rated hostel cards, a tilted community photo wall, and a save-to-trip drawer with running totals. Sticker tape accents and playful tilt keep the mood fun and affordable.
Travel — Best-time / Weather Widget
A friendly best-time-to-visit weather widget for a fictional fjord destination, drawn entirely in CSS and inline SVG. A twelve-month strip pairs an averaged temperature curve with rainfall bars and a highlighted best-months band, so the ideal window reads at a glance. A current-conditions card shows the weather icon, temperature, hi/lo, feels-like and daylight, and a five-day mini forecast sits alongside. Click any month to learn why it shines or not, and flip the whole panel between Celsius and Fahrenheit.
Travel — City Guide
A warm, walkable city guide for the fictional coastal town of Porto Lumera, organised by neighbourhood. A full-bleed CSS-and-SVG hero opens onto a neighbourhood chip selector and a category filter that together narrow a list of point-of-interest cards — each with a gradient photo, star rating, price tier and best-time badge. A stylised SVG map repositions and highlights its pins to match the active neighbourhood, while a live top-five rail and a heart-driven trip planner keep the whole guide practical and editorial.
Travel — Classic Guidebook Landing
A warm, trustworthy landing page for Meridian, a fictional Lonely-Planet-style guidebook publisher, built entirely from CSS and inline SVG. A layered ridge-and-sky hero carries a stamped field-tested passport badge, a live destination search with keyboard-navigable suggestions, and count-up coverage stats. Below it sit filterable featured guidebook cards with save and add-to-trip controls, a resident-expert grid, a reader-community band, and a boarding-pass newsletter ticket with inline validation.
Travel — Day-by-day Itinerary
An editorial day-by-day trip itinerary for a fictional five-day Amalfi Coast loop. A horizontal day selector swaps a vertical timeline of stops — each a POI card with time, rating, price tier, best-time badge and travel leg between them. Switching days redraws an inline SVG route map with numbered pins. Check off completed stops, watch the day progress ring fill, collapse or expand notes, and save or print the whole plan.
Travel — Destination Guide
A magazine-grade destination guide for the fictional island of Isla Verde, opening on a full-bleed gradient hero with the title and key facts — best time, currency, language, and flight time. A sticky section nav scrollspies across Overview, See, Eat, Stay, Map, and Tips while rich POI cards carry ratings, price tiers, and add-to-trip hearts. A CSS and SVG island map links interactive pins to a synced legend, a horizontal photo gallery band scrolls beneath, and a save-guide action toggles with a confirming toast.
Travel — Destination Photo Gallery
An editorial destination photo gallery for the fictional Wanderfolio magazine, where every frame is a layered CSS-and-SVG landscape rather than a real image. A justified masonry grid reveals caption and location overlays on hover, mood chips filter and reflow the wall instantly, and clicking any frame opens a focus-trapped lightbox with previous and next controls, keyboard navigation, a running counter, a best-time badge, a price tier and a save-to-trip affordance that keeps a live tally.
Travel — Explore Destinations
A discovery-first explore page for the fictional Wanderlist travel magazine, opening on a full-bleed CSS-and-SVG sunset horizon and a rounded hero search. Filter chips for region, vibe, budget and best month combine with live keyword search to narrow a responsive grid of gradient destination cards, each carrying a star rating, from-price, price tier and best-time badge. A live result count, four sort orders, an empty state and a heart-driven saved-trip drawer keep the whole page warm, editorial and genuinely interactive.
Travel — Guide Editor
A CMS-lite travel guide editor with three working panes. A left outline lists every section with a draggable handle to reorder, plus add and delete controls. The center canvas holds an editable cover (title, mood scene, best-time badge) and a stream of insertable blocks — POI cards with save-to-trip, a CSS map block with routed pins, and tip callouts. The right inspector edits section settings, a publish toggle, and a live SEO preview, while a reader preview modal renders only the published sections.
Travel — Itinerary Timeline
A time-anchored itinerary primitive for a single travel day, rendered as a vertical timeline of stops along a coloured rail. Each stop pairs an emoji icon, an auto-computed clock time, a duration and a travel-time connector to the next, colour-keyed by type for sightseeing, food, transport and hotel. Drag a handle to reorder and every time recalculates instantly; add or remove stops, step durations up and down, collapse details, and watch a running total of stops, active hours, travel minutes and a wrap-up time stay in sync.
Travel — Luxury / Bespoke Travel Landing
A bespoke private-travel landing for the fictional house Méridien Atlas, dressed in ivory, bronze, and deep green with an elegant Cormorant Garamond display face. A cinematic gradient hero with layered SVG ridges and a rising sun gives way to slow, unhurried scroll reveals, animated house figures, four signature destinations with elegant hover and save-to-atlas hearts, an interactive concierge readout, a hand-composed atelier process, and a discreet validated enquiry form with toast confirmations.
Travel — Map + Content Split
A showcase-grade Airbnb-style split layout for the fictional coast of Cala Verdana — a scrollable column of point-of-interest cards on the left and a sticky, fly-to SVG map on the right. Hovering or selecting a card highlights its numbered pin and the map pans and zooms to centre it; selecting a pin scrolls the matching card into view and floats a preview popover. A category chip bar, price slider, search field and saved filter narrow both panes in sync, with a heart-driven trip planner and a mobile list-or-map toggle.
Travel — National-Geographic-style Landing
A documentary travel landing styled after a National-Geographic cover: black, signature yellow and white, bold Playfair serif headlines, and the iconic yellow-border framing motif. A full-bleed CSS-and-SVG horizon hero opens onto feature dispatches with strong captions and save-to-reading-list hearts, an interactive expedition map with keyboard-reachable waypoint pins, a count-up stat band, and an austere bordered call-to-action. High contrast, restrained, epic in mood and fully self-contained.
Travel — Point-of-interest Card
A reusable point-of-interest card for travel guides, built with pure CSS and inline SVG scenes instead of photos. Each card shows a category chip, title, partial-fill star rating with review count, a one-line description, price or entry tier, distance and a view-on-map link. A heart toggle saves places to a trip and persists in localStorage, while a filter bar and a small stylised pin map tie four variants together. Warm editorial palette, hover lift and keyboard-friendly controls throughout.
Travel — Saved Trips / Wishlist
A warm, editorial saved-trips shelf where draft itineraries and pinned places share one tidy library. Each card carries a gradient landscape cover, destination, dates or a no-dates hint, a saved-stops count and a progress bar for trips, or a star rating and price tier for places. Filter by All, Trips or Places, duplicate a route to remix, open it in the planner, or remove with a five-second undo. State reads and writes the same localStorage the explore and planner views use, with a friendly empty state inviting more wandering.
Travel — Travel Agency Landing
A bright, conversion-focused landing for the fictional tour operator Voyala, dressed in sky blue, warm sand, and orange with a clean Work Sans body and Fraunces display face. A gradient horizon hero pairs layered SVG hills and a rising sun with a real booking widget — destination autocomplete, validated dates, and a traveler stepper — that runs a friendly searching-to-results teaser. Below sit six priced tour packages with save-to-trip hearts, trust badges, animated stats, testimonials, and a validated lead-capture call to action.
Travel — Travel Site Dashboard
An editorial analytics dashboard for a fictional travel publication, where a reporting-period switch recomputes everything in vanilla JS. Four KPI cards report visitors, top-destination views, guide views and average read time with coloured deltas and inline SVG sparklines, a seasonality area-and-line chart plots monthly interest against bookings with a hover readout, a sortable top-guides table tracks views, saves and trend, and a destinations-by-region bar shows each area share of guide views.
Travel — Travel Story / Photo Essay
A cinematic long-form travel photo essay with a full-bleed gradient cover, byline, and read time, then alternating large CSS-and-SVG photo panels, serif prose, pull-quotes, an inline stylised route map, and a parallax coastal band. Vanilla JS drives a top reading-progress bar, scroll-reveal of every panel, layered parallax on the cover and mid-band, a sticky masthead that appears past the fold, a save-to-reading-list toggle, and interactive map pins. Immersive, editorial, lots of air.
Travel — Trip Budget Indicator
A trip budget planner that turns numbers into a clear money picture for a fictional Kyoto and Inland Sea journey. Set a total budget, then split it across flights, stay, food, activities and transport with paired sliders and currency-formatted inputs. A single stacked bar shows each category as a coloured segment, a live summary reports allocated, remaining, per-day and per-person figures, and the bar plus remaining value flip to a striped red over-budget state with a toast whenever spending tips past the limit.
Travel — Trip Planner
A flagship interactive trip planner for the fictional Adriatic and Alps route, built in vanilla HTML, CSS, and JavaScript. Search a catalogue of sights, nature, food, and stays, then add spots that flow into a day-by-day itinerary you can drag and reorder across days. A live header tracks total days, stops, estimated budget, and cost per day, an SVG route map draws numbered pins in your day order, and a category budget breakdown updates in real time. Trips auto-save to localStorage with save and clear controls.
Upsell — Add-on / cross-sell at checkout
A self-contained checkout summary for the fictional Northwind Cloud Pro plan, art-directed in a neutral product-UI palette with Inter type and soft shadows. Optional add-on cards — extra seats with a stepper, a Recommended priority-support tier, extra storage and advanced analytics — toggle on and off as accent-tinted cards. Each change live-updates an order summary, count-up animating the subtotal, tax and sticky total, while a toast confirms every selection. Fully keyboard operable and responsive down to 360px.
Upsell — Trial countdown banner
A self-contained top-of-app upsell banner for the fictional Northwind SaaS, art-directed in a neutral product-UI palette with Inter type and soft shadows. It announces how long the Pro trial has left with a live-ish countdown that ticks from a fixed end timestamp, a usage progress bar, an Add billing call to action and a dismiss control. When the window runs out the banner flips to a red Trial ended variant, dismiss collapses it smoothly, and demo buttons fast-forward the timeline. Vanilla JS, aria-live polite, keyboard and Esc friendly.
Upsell — Upgrade modal (plan compare)
A self-contained upsell flow for the fictional Northwind SaaS. A billing settings card shows the current Starter plan with usage bars nudging against their caps, and an Upgrade button opens an accessible modal dialog that places Starter beside the recommended Pro tier. Newly unlocked features are highlighted, a monthly versus annual toggle swaps every price live, and a price-delta bar tallies the extra cost and new total. The confirm button runs a processing then success state before the dialog gracefully closes.
Upsell — Usage-limit reached prompt
A self-contained usage-limit prompt for the fictional Northwind AI workspace, shown the moment a Starter plan exhausts its 1,000 monthly credits. A full red progress bar, the reset date, and an add-on balance line frame two CTAs — Upgrade plan and Buy add-on credits. The add-on panel carries a quantity stepper that recomputes credits and price live; purchasing adds credits back, shrinks the bar away from 100 percent, and surfaces a success card. An Upgrade modal lists Starter, Pro, and Scale tiers with a monthly versus annual toggle.
Upsell — Win-back / discount offer modal
A self-contained exit-intent win-back modal for the fictional Northwind Cloud. As a user abandons checkout, a celebratory dialog offers 30 percent off their first three months — a spinning starburst discount badge, a strikethrough comparison of the standard versus discounted monthly price, and a copyable promo code field with a copied toast. A live urgency countdown ticks toward expiry, while Claim offer and No thanks actions, a focus trap, and Escape-to-close keep it fully keyboard accessible.
Widget — Add-widget / customize panel
A self-contained Plotline Insights dashboard with an Add-widget flow — a button slides open a focus-trapped customize panel that lists every available widget as a card with an icon, description and an on/off toggle. Search and category chips filter the catalog, toggling a widget drops it straight into the live 12-column grid, and a remove control pulls it back out with a tidy empty state when nothing is left. Widgets carry KPI sparklines, an inline SVG line chart, bars, a donut, a ranked table and a live-ticking activity feed.
Widget — Drag-rearrange widget grid
A polished analytics dashboard whose widget cards reorder by dragging a handle, with a live insertion placeholder, smooth reflow, and order persisted to localStorage. A full keyboard alternative moves any focused card with the arrow keys and announces each change through an aria-live region, while a Reset layout button restores the defaults. Cards carry KPI sparklines, an inline SVG bar chart, a revenue line chart, a donut, a top-pages list, and a live-ticking traffic tile.
Widget — Empty / loading widget states
A single dashboard widget shown through its full lifecycle for the fictional Meridian Ops workspace — a shimmering skeleton while data loads, a no-data-yet empty state with an inline-SVG illustration and connect-a-source CTA, an error state with a retry button and request details, and a loaded state with a real inline-SVG bar chart, KPI value, delta chip and sparkline. A segmented control cycles all four, while Simulate load runs a true loading-to-loaded sequence and the loaded chart ticks live. Pure vanilla, no chart libraries.
Widget — Global filter + date-range bar
A sticky global filter bar for analytics dashboards, built for the fictional Northwind Pulse commerce workspace. It pairs a Today/7d/30d/Custom date-range control with multi-select dropdowns for channel, region and status, plus a debounced search box. Every choice renders as a removable colour-coded chip with a live active-filters count and clear-all. Applying filters re-renders four KPI cards with deltas and inline-SVG sparklines, an animated orders-by-day bar chart and a results table — all vanilla JS, no libraries.
Widget — KPI / stat row (with trends)
A copy-paste KPI strip of five stat cards for a fictional SaaS — new sign-ups, revenue, active users, churn and NPS — each pairing a big tabular value with a coloured delta chip, an up or down arrow, a vs-last-period caption and a tiny inline-SVG sparkline that tracks the trend. A Today / Week / Month toggle swaps every value, delta and sparkline with an ease-out count-up, a live toggle nudges the figures every few seconds, and a channel-mix bar gives the row a data-dense companion. Pure HTML, CSS and vanilla JavaScript, no chart libraries.
Widget — Resizable widget card frame
A reusable dashboard widget card frame for a fictional ops workspace — each card carries a title, subtitle, an S/M/L size toggle that smoothly re-spans the grid, a body slot with an inline-SVG chart (area line, channel bars, or plan-mix donut), a KPI headline with an up/down delta chip, and a synced-status footer. A keyboard-friendly overflow menu opens a popover with Refresh, Expand, and Remove; refresh swaps in fresh data behind a spinner, expand lifts the chart into a modal, and cards drag to rearrange. Pure vanilla, no chart libraries.
Empty States — All-done / inbox-zero state
A task list that rewards finishing the job: tick the final item and the list animates away into a celebratory inbox-zero empty state with a drawn checkmark badge, a confetti micro-animation, and a friendly all-caught-up headline. A live segmented switcher toggles between a celebratory treatment with confetti and a next-action CTA, and a calm, minimal variant that simply settles. An Undo control (and the Escape key) restores the cleared items, an aria-live counter tracks how many tasks remain, and a toast confirms every action.
Empty States — First-use empty state
A polished first-use empty state for a Projects list, built to turn a blank screen into an inviting first step. It centers an inline SVG illustration under the headline No projects yet, supportive subtext, a primary Create your first project button and a secondary Import link. The primary action reveals an inline create form with a name field and accent swatches, then drops a freshly built project card onto the page with a confirming toast. A segmented switcher previews the illustration, icon and minimal styles in both inline-card and full-page layouts.
Empty States — No-access / permission-required state
A polished permission-required empty state for pages a member can't open yet. It pairs a lock illustration with a clear headline, a plain-language explanation, and a requester-to-owner approval chain showing who must approve. A primary Request access button opens a confirm dialog and fires a Request sent toast, while a secondary Switch account action lets people retry under a different identity. A segmented switcher flips live between no-access, upgrade-required, and request-pending so you can preview every state.
Empty States — No-search-results state
A live product-search panel that handles the moment a query returns nothing, turning a dead end into a recovery path. As you type, results filter in real time against a small in-memory catalog; when nothing matches, a calm empty state takes over with an animated magnifier illustration, a precise no-results headline echoing the query, spelling and keyword tips, a Clear-search action, and clickable suggested queries that refill the input. A segmented switcher demos three flavors: full suggestions, minimal, and active-filter chips you can clear.
Empty States — Skeleton + spinner + progressive load set
A side-by-side gallery of loading-state primitives for product UIs — shimmering skeletons for list rows, profile cards and table data, an inline spinner button with a pending-to-resolved cycle, a determinate upload progress bar with live percentage, and a staggered progressive content reveal. A segmented switcher highlights and replays each variant, while a single Reload button replays the whole loading-to-loaded sequence with an accessible status line and toast feedback.
Empty States — Something-went-wrong state
A polished, self-contained error state for failed data loads, built with vanilla HTML, CSS, and JavaScript. It shows a warning illustration, a clear headline, an explanatory line and a copyable faux error code, plus a primary Try-again action that spins and resolves into a success state with a mini recovery chart. A segmented control swaps between server, network, and not-found framings as well as inline-card and full-page layouts.
Game — AAA Cinematic Landing (Souls/God-of-War style)
A dark, premium AAA cinematic game landing in the Souls and God-of-War mold, built with pure HTML, CSS and vanilla JavaScript. A full-bleed moody hero renders a CSS-drawn brooding warrior against ember-lit ruins, layered over a parallax ember particle canvas, film grain and a heavy vignette. Below it sit a vertical chapter teaser timeline, a horizontal bosses showcase strip with animated threat bars, a three-tier editions band, and a heavy footer, plus a scripted reveal-trailer lightbox and hover ignite cards.
Game — Achievement / Trophy Unlock Toast
Console-style achievement unlock toast system: a slide-in notification with glowing trophy badge, rarity tier, achievement name, and gamerscore reward, finished with a shine sweep, sound-pulse ring, and auto-dismiss timer bar. Toasts queue and play one at a time across five rarities from common to platinum, while an achievements list flips locked rows to unlocked with animated progress bars and a count-up gamerscore counter. Vanilla JS with a WebAudio chime and reduced-motion support.
Game — Character / Hero Roster (select grid)
A neon-dark hero roster page for a fictional shooter, Hollow Reign by Nullforge. Browse eleven heroes as rarity-ringed portrait cards, filter by Tank, DPS, or Support role chips, search by name, and toggle a rarity sort. Selecting a hero drives a featured panel with splash art, lore, difficulty pips, and animated stat bars, plus an ability strip with hover tooltips. Pure HTML, CSS, and vanilla JS with no build step or dependencies.
Game — Character / Loadout Select Screen
A hero-shooter style character and loadout select screen with a neon sci-fi HUD aesthetic: a roster grid of selectable tiles with CSS gradient portraits, role icons, and locked states; a featured panel showing the hovered or selected Vanguard with epithet, difficulty pips, ability list, and animated skewed stat bars; a three-slot loadout strip with cycling weapons and perks; plus a Lock In button with cancellable countdown, party status dots, and a pulsing phase timer that auto-locks on expiry.
Game — Character Detail (stats · lore · abilities)
A dark, neon-lit single-character detail page for a fictional action game: hero banner with CSS-built splash art, faction and rarity badges, animated HP/ATK/DEF/SPD/CRIT stat bars with count-up values, an expandable abilities list with icons and cooldowns, a lore section with read-more, a skins selector that retints the whole page accent theme, synergy picks, and an add-to-team CTA with toast feedback — all in Orbitron-styled HUD chrome with clipped corners and glow states.
Game — Devlog / Update Post Layout
A dark neon devlog and update-post layout for a fictional action game: version badge, author meta and read time, CSS-art hero block, rich body sections with captioned in-game screenshots, an animated stat-bar panel, a glowing patch-highlights callout, an embedded changelog with copy button, sticky scroll-spy table of contents with read progress, prev and next post cards, emoji reactions with live counts, and a back-to-top button — all in Orbitron and Inter with vanilla JS.
Game — Dialogue Box (typewriter · choices)
A visual-novel and RPG style game dialogue box with a CSS-drawn speaker portrait, angled neon nameplate, and a typewriter-animated line you can fast-forward by click or Space. A scripted conversation tree drives branching choice buttons that route to different nodes, swap the portrait and name per speaker, and resolve into two distinct endings. Includes a blinking continue indicator, Slow-Normal-Fast text-speed control, auto-advance toggle, scene restart, toast feedback, and a rain-soaked sci-fi backdrop — all vanilla HTML, CSS, and JS.
Game — Editions / Bundle Compare Table
A dark neon editions comparison table for a fictional AAA release with Standard, Deluxe, and Ultimate columns: edition art headers, strike-through pricing with savings badges, a feature matrix using check, cross, and partial marks, and a glowing best-value Ultimate column. Vanilla JS powers a one-time versus 4-payment plan toggle, USD/EUR/GBP currency switching, hover column highlighting, collapsible what-is-included row groups, and toast feedback on every Buy CTA.
Game — Fantasy RPG Landing
An epic fantasy RPG landing page for the fictional Ashen Vanguard by studio Nullforge, built in HTML, CSS, and vanilla JavaScript with an illuminated-manuscript feel. A parchment-and-gold hero frames a CSS-drawn vista of mountains and a ruined castle under an ember sky, with a Cinzel title and lore tagline. Below it sit a classes-and-bloodlines showcase with crests and animated stat bars, an unfurling lore-scroll accordion, a factions band, and an ornate gold-filigree footer. Scroll-reveal gold shimmer and a wishlist toggle bring it to life.
Game — Features Showcase (mechanics scroll)
A scrolling game features showcase for a fictional co-op action RPG: alternating left/right mechanic blocks for combat, exploration, crafting, and co-op, each pairing CSS-drawn neon illustrations with headline copy and feature bullets. A sticky side rail tracks scroll progress and highlights the active section, while IntersectionObserver drives staggered reveals, animated stat bars, and count-up numbers in a stats band, all closing with glowing wishlist CTAs and toast feedback.
Game — Game Landing (trailer · wishlist CTA)
AAA game landing page for the fictional title Hollow Reign by Nullforge Studios: a full-bleed hero with a CSS-drawn key-art scene (moon, ridgelines, citadel, glowing warden, rising embers), Orbitron display title, trailer lightbox with focus trap, synced wishlist toggle with live count, platform badges, a four-pillar features grid, an auto-advancing screenshot carousel with dots and arrows, a three-tier editions band, and a newsletter signup — all neon-glow dark UI in HTML, CSS, and vanilla JS.
Game — Game Roadmap / Early Access Timeline
A dark neon early-access roadmap page for a fictional game, Hollow Reign by Nullforge Studio. A glowing vertical timeline tracks five milestones from launch stabilization to the 1.0 release, each card carrying a status pill, date window, feature bullets, and per-milestone progress bars. Includes a Phase 2 of 5 progress header, status filter chips with live counts, an animated spine that fills to the current marker, expandable cards, a timeline/list view toggle, and toast feedback.
Game — Health / Mana / XP Bar Variants
A neon sci-fi HUD showcase of six game stat-bar variants: a segmented ten-cell health bar, a gradient health bar with a delayed damage-chip trail, a shield-over-health stack that absorbs hits first, a self-regenerating mana bar, an XP bar with level-up overflow flash, and a centered boss banner with phase ticks. Combat-sim buttons deal damage, heal, cast spells and grant XP, driving fill animations, color thresholds, bar shake, toasts and a pulsing low-health red vignette.
Game — HUD Overlay (health · ammo · minimap)
A full in-game HUD overlay rendered over a CSS-drawn neon battlefield: segmented health and shield bars with low-HP pulse, ability icons with radial cooldown sweeps, a bottom-center ammo counter with reload bar and weapon name, a rotating radar minimap with hostile and ally blips, a crosshair with fire kick, an objective banner with live score, and an animated kill feed. A simulate-combat loop drives damage, burst fire, ability cooldowns, and kill-feed entries — all in vanilla HTML, CSS, and JS.
Game — Indie Pixel-Art Landing
A cozy indie pixel-art game landing page built entirely with HTML, CSS and vanilla JS. It features a CSS-drawn pixel campfire scene with an animated fox sprite, a Press Start 2P title under a CRT scanline overlay, a blinking press-start prompt, a wishlist toggle synced across three buttons, a pixel feature trio with hover bounce, a frame-swap animated screenshot strip you can pause, and a chiptune soundtrack teaser with a spinning disc and equalizer.
Game — Interactive World / Level Map
A neon sci-fi HUD world atlas for the fictional RPG Ashen Vanguard, built in pure HTML, CSS, and vanilla JS. A CSS-drawn map of clipped region zones carries clustered location pins — settlements, dungeons, bosses, merchants, quests, and fast-travel waypoints — each with discovered, locked, and fogged states. Clicking a pin opens a HUD popover with type, level range, lore, and fast travel. A side panel toggles layers, tracks four region progress meters, and a Cartographer's Lens reveals uncharted pins, plus zoom, pan, and a scrollable wheel.
Game — Inventory Grid (drag · tooltips)
An RPG inventory screen with a 6x4 slot grid of CSS-drawn item icons, rarity-colored borders from common to legendary, stack counts, an equipment paper-doll (head, chest, weapon, ring), a carry-weight bar and a gold counter. Native HTML5 drag-and-drop moves, swaps and stack-merges items, drops gear into matching equipment slots with valid/invalid highlights, rich hover tooltips show name, rarity and stats, and right-click instantly uses or equips. Includes sort-by-rarity, loot and repair actions with neon-glow toasts.
Game — Leaderboard / Rankings Page
A competitive game leaderboard page with a glowing top-3 podium, a ranked stat table (tier badges from Bronze to Master, score, win-rate bars, 24h trend arrows), season selector, and Global, Friends, and Region scope tabs. Vanilla JS powers tab and region switching that re-scopes and re-sorts the ladder, sortable score and win-rate columns, search-to-jump with a flash highlight, a pinned highlighted you row, animated rank-change indicators, and load-more pagination.
Game — Loading Screen (tips + progress)
A full-screen game loading screen with a layered CSS-drawn key-art backdrop — violet moon, silhouetted citadel spires with flickering windows, rising embers, and fog — over a dark neon HUD. Includes a zone lore panel with stat chips, a rotating gameplay TIP line, an animated spinner glyph, and a determinate progress bar with percentage and stage labels. Vanilla JS simulates a variable-speed load with random hitches, then reveals a pulsing press-any-key prompt; a replay button restarts the sequence.
Game — Main Menu (Play · Options · Quit)
A cinematic in-game main menu for the fictional title Ashen Vanguard by studio Nullforge, built in plain HTML, CSS, and vanilla JS. An animated Orbitron logo and selector-chevron menu (Continue, New Game, Load, Options, Credits, Quit) sit over a parallax mountain scene with drifting embers, scanlines, and a vignette. Arrow keys and Enter mirror mouse hover, a sliding Options panel offers volume sliders and a difficulty selector, and a confirm-quit modal guards the exit, all with neon glow and toast feedback.
Game — Mobile Casual / Puzzle Landing
A bright, bouncy landing page for a fictional mobile match-3 puzzle game. Features a glossy hero with a CSS-drawn phone mockup showing animated candy gameplay, chunky App Store and Google Play download buttons, a star-rating and animated download count-up, a playful feature trio with bouncing icons, an adventure-map progress teaser with a filling bar, a daily-bonus rewards streak, and a swappable phone-screen demo. Friendly candy palette with squishy button micro-interactions.
Game — Patch Notes / Changelog Layout
A dark, HUD-styled patch-notes and changelog layout for a fictional live-service title. A version rail lets players jump between major updates, hotfixes, and quality-of-life patches, while the notes pane groups each build into Added, Changed, Fixed, and Balance sections with colored accent tags and scoped bullet entries. A pinned highlights block surfaces the headline changes, and a live keyword search, category filter chips, and collapsible sections keep long changelogs readable down to mobile widths.
Game — Pause / Settings Overlay
An in-game pause overlay with a sci-fi HUD frame: a dimmed, blurred frozen game scene sits behind a clipped neon panel offering Resume, Settings, Restart Checkpoint, and Quit to Menu. A Graphics / Audio / Controls tab group packs sliders with live value labels, glowing toggles, dropdowns, and a working key-rebind capture row with conflict swapping. Esc resumes the game, toasts confirm every action, and the layout collapses cleanly down to 360px.
Game — Press Kit (presskit() style)
A presskit()-style press page for a fictional action roguelike: neon HUD header with studio logo and review-copy CTA, a structured factsheet table, description and features panels, a filterable downloadable-assets grid with copy-link buttons and simulated single and bulk downloads, an awards and press-quotes band, plus press contact emails with one-click copy and a validated request-review-copy form — all dark sci-fi panels, clipped corners, and cyan glow built with vanilla HTML, CSS, and JS.
Game — Quest Log / Objectives Tracker
A dark sci-fi RPG quest log with Main, Side, and Completed tabs, neon-accented quest cards showing type icons and animated progress bars, and a rich detail pane with lore description, clickable objective checklist, XP/gold/item reward chips, and a pulsing Track toggle. A compact on-screen HUD tracker widget mirrors the tracked quest in real time, and finishing every objective auto-completes the quest with a glowing success toast. Built with Orbitron/Inter typography, clipped-corner panels, vanilla JS, full keyboard support, and a responsive layout down to 360px.
Game — Retro Arcade / Neon Landing
A loud 80s retro-arcade neon landing page with a glowing Tron-style perspective grid floor, a flickering neon title, a CRT scanline and vignette overlay, an INSERT COIN call to action, an animated high-score ticker, a swipeable arcade-cabinet game lineup carousel with hype bars, and a synthwave soundtrack teaser with a live bar visualizer. Built in vanilla HTML, CSS, and JavaScript with no frameworks, accessible focus states, and a fully responsive layout down to 360px wide.
Game — Skill / Tech Tree (nodes + links)
An interactive in-game skill and tech tree for a fictional action title, Ashen Vanguard. CSS-drawn hex nodes spread across four tiers, wired together with animated SVG link lines that light up as prerequisites resolve. A live skill-points budget tracks every choice, while locked, available, and unlocked states gate progression. Spend points to unlock branches, hover for effect tooltips, confirm a build, or hit respec to refund everything and start the loadout over.
Game — Store Page (Steam-style: media · specs · buy)
A Steam-style game store page in a neon dark gaming UI: a media column with gradient screenshot viewer and keyboard-navigable thumbnail strip, a purchase column with capsule art, discount pricing, live deal countdown, add-to-cart and wishlist toggles with cart badge, an animated review sentiment bar, genre tag chips, an expandable about section, minimum and recommended system requirement tabs, and an editions and DLC rail — all vanilla HTML, CSS, and JS with toast feedback.
Game — Wishlist / Beta Signup Gate
A neon-soaked closed-beta signup gate for a fictional dark-fantasy extraction RPG: a clipped-corner HUD card floats over a CSS-only key-art backdrop with animated glow orbs, scanlines, and a jagged skyline silhouette. Hunters get a perks list, email and platform fields with inline validation, a consent checkbox, and a glowing Request Beta Access CTA. Submitting reveals a success state with a fake invite code, copy-to-clipboard button, queue position, and a live signup counter that keeps ticking up.
Onboarding — Contextual hint tooltips / beacons
A self-contained onboarding layer that scatters pulsing beacon dots over a realistic product workspace — search, new-task, notifications, invite, and home. Tapping a beacon opens a positioned popover with a step counter, a short tip, and a Got it action that dismisses just that beacon, while a live aria-live counter tracks how many hints have been seen. A segmented switcher toggles beacon style between pulsing dots and static question-mark badges and flips open behaviour between click and hover, and a Reset hints button restores every beacon.
Onboarding — Getting-started checklist (progress)
A dismissible getting-started widget that walks new users through five setup tasks — complete a profile, invite teammates, connect a data source, create a project, and tune notifications. Each row carries helper text and an action button, and checking one animates an overall progress indicator and percentage. Completed items collapse with a strike-through, an expand toggle minimizes the card, and a dismiss control hides it entirely. Two live variant switchers swap a progress ring for a bar and the expanded card for a floating progress pill.
Onboarding — Multi-step setup wizard
A full-page, four-step setup wizard that walks a new user from Account to Workspace to Invite team to a Review-and-finish screen. A progress stepper tracks position, Back and Continue buttons gate forward motion behind per-step validation, and every field persists when you navigate back so nothing is lost. The review step summarises all entries with inline edit links, and launching the workspace fires a canvas confetti celebration. Live variant switchers toggle a horizontal stepper against a vertical sidebar and a percentage bar against a step counter.
Onboarding — Profile/setup completion nudge bar
A slim profile-completion nudge that keeps new users moving through setup by pairing a live progress bar with the single next best action. It announces how complete the profile is, suggests the next step like adding a photo or inviting a teammate, and advances the percentage as each step is finished. When everything is done the bar flips to a celebratory success state that can be cleared away. The demo ships three live variants — top banner versus sidebar card, avatar preview versus text-only, and dismissible versus persistent — switchable from a segmented control.
Onboarding — Role / intent picker
A polished onboarding step that asks new users what brings them to the product and tailors the workspace around the answer. A grid of selectable cards — Founder, Developer, Designer, Marketer, Operations, Just exploring — each pairs an inline SVG icon with a label and a one-line outcome, with a popular badge on the lead choice. The Continue button stays disabled until a pick is made, then fires a role-specific next-step toast. A segmented switcher flips between single and multi-select and between a card grid and a compact list, all keyboard-navigable.
Onboarding — Sample-data / try with demo prompt
A first-run onboarding pattern that turns an empty workspace into something you can actually click. A Start with sample data prompt offers two choice cards — load a faux CRM pipeline of example deals, or start from scratch and stay empty. Picking the demo shows a brief shimmering skeleton before the populated table animates in, with a toast confirming the count and a Clear demo data button to revert. Toggle between a modal prompt and an inline banner, and between preview-thumbnail and text-only cards.
Onboarding — Spotlight product tour (coachmarks)
A guided spotlight product tour layered over a faux Northwind workspace, where a dimmed overlay punches a cut-out highlight around the current target while a coachmark bubble carries a title, body copy, a 2 of 5 step counter, progress dots, and Back, Next, and Skip controls. The bubble auto-places toward whichever viewport edge has room, the highlight recomputes on resize and scroll, the final step clears everything, and live switches toggle spotlight cut-out versus a bordered ring and auto versus bottom placement.
Onboarding — Welcome / first-run modal
A polished first-run welcome modal for product onboarding, built as an accessible dialog with role=dialog, aria-modal, a focus trap, and Escape or backdrop dismissal. It greets a returning user by name, pairs a gradient illustration header with two or three icon-led highlight bullets, and offers a primary Get started action alongside a low-key Skip for now link. A page button replays it, dismissal is remembered for the session, and live variant switches toggle single-screen versus a two-step carousel and an illustration versus compact header.
Web3 — Address Chip (truncate · copy · ENS)
A reusable wallet identity chip for Web3 interfaces, rendered across every variant you actually ship: a middle-truncated monospace address, an ENS-resolved name with a gradient blockie avatar derived from the address bytes, a copy-on-click chip with clipboard write and a checkmark flip, and a chip that links out to a block explorer. It ships in small, medium, and large densities with online, idle, and offline status dots, plus a hero account card that toggles between raw and resolved display.
Web3 — Connect Wallet Button + Modal
A polished Web3 connect-wallet flow built with vanilla JS. A glowing neon Connect Wallet button opens a glassy modal listing MetaMask, Coinbase Wallet, WalletConnect, Rabby and Ledger, each with an icon plus an Installed, Popular or Hardware badge. Picking one shows a simulated connecting spinner, then swaps the button for a live address chip with a NOVA balance, green status dot and a dropdown to copy the address, open the explorer or disconnect.
Web3 — Crypto Exchange (CEX) Landing
A data-dense, trustworthy landing page for a fictional crypto exchange, Vaultex, built with HTML, CSS and vanilla JavaScript. It pairs a conversion-focused hero and email capture with a live markets widget — an animated ticker tape, a sortable top-pairs table with sparklines and live-ish price jitter, and count-up stats. Sections cover a Spot, Futures and Earn feature trio, a security and regulation trust band with an insurance fund, a fees comparison strip, a supported-assets logo wall, and an app download CTA with an animated phone mockup.
Web3 — DAO Governance (proposals · vote)
A dark, glassy DAO governance page for the fictional Lumen Collective: a gradient-bordered hero shows your voting power (held plus delegated vNOVA), treasury value, and active-proposal count, above a filterable proposals list with status pills, proposer chips, For/Against/Abstain vote bars, quorum progress, and live countdowns. Selecting a proposal opens a sticky detail panel with description, on-chain action, current results, and vote buttons that record your ballot, update the tallies, and fire a signed-receipt toast — plus a create-proposal modal with a bond warning.
Web3 — DeFi Protocol Landing
A futuristic DeFi protocol landing page for the fictional Luminal liquidity layer. Features a glowing animated mesh-gradient hero, count-up protocol stats revealed on scroll, a live token-price ticker, and an interactive markets table with drifting supply and borrow APRs. Includes a how-it-works flow with glowing connectors, an audited security band, an ecosystem grid, a governance teaser, and a risk-gated launch confirmation modal. Glassy surfaces, neon accents, monospace numerics throughout.
Web3 — Gas / Network Fee Selector
A glassy, dark-mode gas and network-fee selector for an EIP-1559 style chain, built as a pure UI simulation. Three speed presets — Slow, Normal, Fast — render as selectable cards showing live gwei, estimated confirm time and fiat cost, while a Custom tab exposes max base fee and priority fee inputs with a computed total. A current base-fee ticker drifts every couple of seconds, recomputing every preset, the running summary and the signed-fee figure with smoothly animated monospace numbers.
Web3 — L1 / L2 Blockchain Landing
A futuristic marketing landing page for a fictional modular L1/L2 blockchain. Features a deep-space hero with an animated canvas starfield and grid, a visionary headline, count-up network metrics (throughput, finality, fees, validators), scroll-triggered performance comparison bars against rival chains, a glowing CSS architecture diagram, an ecosystem dApps grid, a developer band with a tabbed code-snippet card and copy-to-clipboard, a validators decentralization band, and a footer. UI-only simulation with mock data.
Web3 — Liquidity Pool / Provide LP
A DeFi provide-liquidity component for an ETH/USDC pair with ratio-linked deposit inputs that auto-fill from the mock pool price, wallet balances with MAX buttons, a fee-tier selector (0.05/0.3/1%) that re-animates TVL, volume, and fee-APR stats, plus live pool-share and LP-token estimates. Includes Add and Remove tabs with a percent slider, a position summary card, and a sign-pending-success confirmation modal with an impermanent-loss warning and toast feedback.
Web3 — Network / Chain Switcher
A glassy Web3 network switcher with a current-chain pill that opens a searchable menu of fictional chains — Ethereum, Arbitrum, Base, Optimism, Polygon and Lumen Chain — each with a colored icon, online or degraded status dot, and a collapsible testnet section. Selecting a chain triggers a simulated Switching network state, then updates the pill, the hero card with animated block count, monospace gas and RPC values, and retints the whole page accent to match the active network.
Web3 — NFT Detail (traits · history · buy)
A glassy, dark-mode NFT detail page for a fictional marketplace: a CSS-drawn generative artwork with fullscreen zoom, favorite and share actions, a verified collection link, owner chip, and a gradient-bordered price panel with Buy now, Make offer, and a live auction countdown. Includes a traits grid with rarity bars and hover tooltips, plus Properties, Offers, and Activity tabs with an animated price-history chart, sales table, and a confirm sheet with fee breakdown and signing risk warning.
Web3 — NFT Marketplace (grid · filters · bid)
A glassy, dark-mode NFT marketplace browse page for a fictional Lumen Chain collection. A gradient-bordered hero shows floor price, volume, items, and owners with animated counters, above a sticky toolbar of Buy Now / On Auction toggles, an ETH price range, trait chips, a sort dropdown, and a grid density switch. A responsive grid renders pure-CSS generative art, rarity badges, ETH plus fiat prices, last-sale, a favorite heart with live count, and a hover Buy or Bid button that opens a confirm modal with a fee breakdown and signing risk warning.
Web3 — NFT Project / Collection Landing
A hype, glow-heavy landing page for a fictional generative PFP drop called VOIDLINGS. Features a glitching hero, an animated marquee of CSS-drawn generative avatars, and a full mint panel with a live countdown, minted-versus-total progress bar, a quantity stepper, and a simulated mint flow with confirm and success states. Rounds out with lore, a hover-to-reveal rarity and traits grid, a roadmap timeline, a team grid, an accordion FAQ, and a community CTA. Vanilla JS, no libraries.
Web3 — Portfolio Value Chart (PnL)
A wallet portfolio value card built around a hand-rolled SVG chart: a large animated count-up total in JetBrains Mono, absolute and percentage PnL that recolors green or red per range, and a smooth Catmull-Rom line with a gradient glow stroke over a fading area fill. Range tabs (1H / 1D / 1W / 1M / 1Y / ALL) regenerate a seeded mock series and replay a draw-in animation, while a crosshair tooltip tracks the pointer with the exact value and timestamp. An allocation bar and legend round out the card. No chart libraries — pure vanilla JS.
Web3 — Send / Receive (address · QR · confirm)
A glassy two-tab wallet panel for sending and receiving fictional tokens on a mock chain. Send combines recipient validation with .nova name resolution, a token picker with live balances, amount-to-fiat sync with MAX, a network fee summary, and a review-confirm-sign flow that ends with a copyable transaction hash. Receive renders a CSS-grid QR block seeded from your address, network and optional request amount, plus one-tap copy and payment-link sharing.
Web3 — Staking / Yield (APR · stake · claim)
A dark, glassy DeFi staking page for the fictional NOVA token on Lumen Chain: a gradient-bordered hero with big APR, TVL, and a pending-rewards counter that ticks up live in monospace; a stake/unstake card with MAX button, lock-period selector (Flexible to 1 year) driving an APR multiplier and projected-earnings calculator; a confirm-sign-success modal with risk warnings; a claim animation; and a selectable list of five other pools — all vanilla JS, UI-only simulation.
Web3 — Token Balance Row (price · 24h · value)
A glassy Web3 wallet portfolio list where each token row pairs a gradient logo, monospace balance and unit price with a green or red 24h change, a sign-aware SVG sparkline and a right-aligned fiat value. A portfolio total header shows a weighted 24h delta, while controls let you sort by value or 24h change, toggle hide-small-balances, and watch every figure count up on load with hover-elevated rows. Mock data, fictional tokens, no on-chain calls.
Web3 — Token Swap (from/to · slippage · route)
A glassy DEX swap card for the fictional NovaSwap aggregator on Lumen Chain, built in HTML, CSS, and vanilla JS. From and To panels each carry a monospace amount input, live fiat estimate, balance with a MAX button, and a searchable token-select modal across eight made-up assets. A flip button reverses direction, while a live rate, animated price-impact, minimum-received, and a slippage popover update as you type. The big Swap action opens a confirm step with risk callouts, a mock signing and submitted flow, a fake tx hash, and toast feedback.
Web3 — Transaction Confirm / Signing Sheet
A glassy, wallet-style signing request sheet that slides up to confirm a swap, send, or token approval. Shows from/to addresses, a network badge, an animated swap visual, a fee and estimated-total breakdown, and an expandable panel revealing raw calldata, nonce and gas. Risk warnings flag dangerous approvals. Confirm spins through signing into a success state with a mock tx hash and explorer link; reject, Esc, and overlay clicks dismiss it with a full focus trap.
Web3 — Transaction History (status · explorer link)
A glassy, dark-first Web3 transaction history list grouped by date, with type icons for send, receive, swap, approve and mint, monospace truncated counterparty addresses, plus or minus colored amounts, a per-row explorer link, and live status badges. Filter chips switch between all, sent, received and swaps, instant search matches hashes and addresses, rows expand for hash, block, fee and nonce, a pending swap flips to confirmed after a few seconds, and copy-hash fires a toast. Pure vanilla, no libraries.
Web3 — Wallet App Landing
A warm, consumer-grade landing page for Lumen Wallet, a fictional self-custody crypto wallet. Features an animated phone mockup that cycles between home balance, swap, and buy-with-card screens, app-store download CTAs, a count-up downloads stat, a feature trio with soft-glow cards, a non-custodial trust band, a supported-chains chip row, a three-step onboarding flow, and an auto-advancing testimonial slider. Dark, rounded, friendly, and accessible — built with vanilla HTML, CSS, and JavaScript.
Web3 — Wallet Dashboard (balances · tokens · NFTs)
A premium, dark-first Web3 wallet dashboard with a glassy address chip, network switcher, and a gradient-bordered hero card showing an animated total balance and 24h PnL. Send, Receive, Swap, and Buy actions sit beside a portfolio allocation donut, while Tokens, NFTs, and Activity tabs reveal token rows with live prices, CSS-drawn NFT thumbnails, and a transaction feed. Includes a hide-balances eye toggle, a guarded swap modal with risk confirmation, and toasts. All mock data, fictional tokens.
Backpacker Hostel Landing
A playful, energetic single-page landing for a backpacker hostel featuring dorm and private room options, a social events section, and an interactive reservation widget with nights calculator, bed-type selector, and form validation toast feedback.
Beach Resort Landing
A sun-soaked single-page landing for a beach resort — teal, sand, and coral palette with Poppins typography. Features a panoramic hero with reservation widget, rooms/experiences section, story block, and hours/location with a CSS map. Interactive nights calculator, sticky nav on scroll, and form validation toast.
Bed & Breakfast Inn Landing
A warm, rustic single-page landing for a countryside Bed & Breakfast featuring cozy room cards, a breakfast menu section, a host story block, and an interactive reservation widget with nights calculator, room picker, breakfast toggle, and form toast feedback.
Boutique Hotel Landing
An editorial single-page landing for a boutique city hotel — charcoal, brass, and ivory palette with Cormorant Garamond headlines. Features a hero with reservation widget, curated rooms section, story block, and hours/location. Interactive nights calculator, sticky nav, and form validation toast.
Business Hotel Landing
A crisp, grid-driven single-page landing for a business and conference hotel featuring room tiers, meeting room specs, business amenities, and an interactive reservation widget with room-type switching, nights calculation, and toast feedback.
Clinic — Appointment Booking
A guided three-step appointment wizard — pick a specialty, choose a doctor with ratings and next-availability, then select a day and time slot — with a live summary, validation-gated navigation, and a final confirmation panel carrying a booking reference.
Clinic — Billing & Claims Dashboard
A revenue-cycle dashboard for clinic administrators, leading with KPI cards for billed, collected, outstanding and denial rate plus small trend deltas, a pure-CSS bar chart of the last six months of collections, and an A/R aging bar split across 0-30, 31-60, 61-90 and 90-plus buckets. A claims table carries status pills, status filter tabs with live counts, a search box and a one-tap resubmit action on denied rows.
Clinic — Clinic Landing
A marketing landing page for a fictional family practice with a translucent sticky nav, anchor links and a Book appointment CTA. The hero pairs a headline and dual call-to-action buttons with three count-up trust stats and a next-available appointment card, followed by a services grid, a why-choose-us feature row, a doctors strip, a patient testimonial and a footer carrying hours and contact. Smooth scroll, scroll-spy, reveal-on-scroll and a mobile menu round it out.
Clinic — Clinician Dashboard
A clinician's today-panel: a top app bar and live clock, four KPI stat cards, a schedule timeline whose rows advance patients Waiting → In room → Completed while keeping counts in sync, filter chips, plus a tasks-and-alerts queue and a messages preview.
Clinic — Dental Clinic Landing
A smile-forward landing page for a fictional dental studio in a clean mint-and-soft-blue palette, with a sticky blurred nav, a hero whose trust stats count up on view, a six-card services grid, a draggable before-and-after smile comparison slider, a free-consult offer band, a four-dentist team strip, an accordion FAQ beside an opening-hours card, reveal-on-scroll sections, a mobile menu and an accessible booking dialog with a focus trap and toast feedback.
Clinic — Doctor / Room Schedule Admin
A dashboard-grade scheduling grid for clinic front-desk staff. Rows are providers or treatment rooms via a toggle, columns are 30-minute time blocks from 8 to 5, and appointment blocks span their duration colored by visit type — new, follow-up, procedure or telehealth. Clicking a block slides out a detail panel with patient, time, room and reason, while a Day/Week toggle, doctor filter and live booked-versus-open utilization summary update on every change.
Clinic — Doctors / Team Page
A responsive doctors and care-team directory for a clinic site. Each card pairs a gradient initials avatar with the physician name, specialty, credentials, language chips and an availability badge marking whether they are accepting new patients or running a waitlist. A specialty dropdown and a live name-search input filter the grid in real time with a running result count, a graceful empty state, and book or join-waitlist actions that confirm with a toast.
Clinic — E-Prescription Pad
A clinician e-prescription pad with type-ahead drug autocomplete, dose / route / frequency / duration / quantity / refills fields, a live ℞ Rx preview that assembles the sig line as you type, and a running prescription list ready to send to pharmacy.
Clinic — General Practice Landing
A warm, community-feel landing page for a family general practice. A sticky nav with a mobile menu sits above a friendly hero with a live same-day slot card, a services grid spanning family medicine, pediatrics, women's health, chronic care and vaccines, a teal same-day-appointments feature band with animated stats, a doctors strip, today-aware hours with a map and location CTA, a quick booking form, and reveal-on-scroll throughout.
Clinic — In-clinic Dispense Counter
A single-patient pharmacy dispensing screen that pairs a selected Rx detail card — patient, drug, dose, sig and prescriber — with a dispense form for quantity, lot and expiry plus a barcode-scan field that simulates a scanner and auto-fills a verified lot. A live pharmacy label preview updates as you type, a counseling checklist gates release, and Dispense and print label validates everything before showing a calm dispensed done-state with toast feedback.
Clinic — In-clinic Dispense Queue
An in-clinic dispensing queue for handing medications to patients at the visit. Each prescription row shows the patient, drug and strength, quantity, prescriber and a status pill that advances To verify to Ready to Dispensed. Filter tabs carry live counts, a search box filters rows instantly by patient, drug or prescriber, and every primary action moves a row forward while recounting tabs and confirming with a calm toast.
Clinic — Insurance & Pricing
A reassuring insurance and pricing page for a fictional clinic. A searchable accepted-insurers grid renders ten payers as colored initial chips, a self-pay pricing table lists common services with durations and a Standard / Care Member toggle that recalculates prices live at minus fifteen percent, a single-open FAQ accordion answers billing questions, and a Check your coverage card validates a plan and member ID before a simulated submit. Vanilla JS, calm clinical copy.
Clinic — Insurance Card & Coverage
A digital member insurance card that flips in 3D on click or the Flip button. The front carries the payer logo, member name, Member ID, group and plan, plus a PCP / Specialist / ER / Rx copay grid; the back shows customer service lines, the claims mailing address, website and fine print. Below the card, animated progress bars track deductible met and out-of-pocket max, with status chips and a one-tap copy-member-ID action.
Clinic — Lab Order Sheet
A clinician lab-order sheet pairing a searchable, category-grouped test catalog with a live order panel. Typing filters Hematology, Chemistry, Endocrine and Micro tests in real time; checking a test adds a removable chip to the selected list and updates the running count. A Routine/STAT priority toggle, an auto-deriving fasting flag, specimen notes and an ICD-10 reason feed an order summary, and Sign and send validates the selection before showing a signed confirmation state.
Clinic — Lab Results Viewer
A patient lab results viewer that groups analytes into collapsible CBC, lipid and metabolic panels. Every row pairs a value and unit with its reference interval, a colored Normal, High or Low status flag and a thin range bar whose marker shows exactly where the result sits within bounds. An out-of-range-only toggle filters live with a flagged count, per-panel badges stay truthful, and Download and Share fire calm confirmation toasts.
Clinic — Locations & Hours
A locations and hours page with three site cards, each pairing a stylized CSS map, full address, on-site service tags and a phone number with a Monday-to-Sunday hours table. Vanilla JS highlights today's row, reads the device clock and computes a live Open now, Closes soon or Closed badge from each day's real opening times, plus Get directions and Call buttons that surface a toast.
Clinic — Medication Info Sheet
A calm, patient-facing medication leaflet for a single prescribed drug, leading with a name and dose header, then plain-language sections for what it treats, how to take it and common side effects. A prominent coral warnings callout flags allergic-reaction symptoms, Do and Don't chips give quick guidance, and a missed-dose note reassures. An A / A+ / A++ text-size toggle scales the whole sheet and a Print button opens the browser dialog, each confirmed with a toast.
Clinic — Mental Health / Therapy Landing
A calm, full-page landing for a mental-health and therapy practice, built around a serif hero (Support, when you need it), reassuring subcopy and a Book a session CTA. It carries a four-way services grid for individual, couples, teletherapy and group care, a three-step How it works row, a values band on our approach, a soft client testimonial, a crisis-resources note and footer — with reveal-on-scroll, a sticky bar and a mobile nav, all vanilla JS.
Clinic — My Appointments
A patient appointments panel with a segmented Upcoming/Past tab control, status-badged appointment cards showing date, doctor, time and in-person/video modality, plus inline-confirm cancel, reschedule and view-summary actions that update live counts.
Clinic — Patient Chart
A clinician-side patient chart with a demographics header, a prominent allergy alert banner, and tabbed panels for summary, history, medications, allergies, and recent vitals with inline trend arrows.
Clinic — Patient Intake / Triage Form
A single-page patient intake and triage form with sectioned cards for personal details, reason for visit and health history, a sticky four-step progress indicator that tracks as you scroll, a live colour-coded symptom-severity slider, add-and-remove medication and allergy chips driven by Enter, an accessible consent checkbox, inline validation that glows the required fields on an invalid submit, and a review summary card plus success toast on completion.
Clinic — Patient Portal Dashboard
Patient portal home: a warm greeting header, a next-appointment hero card with a live countdown and check-in / join-video actions, a quick-actions grid, recent lab-result tiles with status badges, an active-prescriptions list with one-tap refills, and a care-team strip.
Clinic — Pediatric Clinic Landing
A playful, child-friendly landing page for a fictional pediatric clinic, built with CSS shapes and emoji mascots instead of images. A bouncy hero leads into a tappable services grid that builds a live visit checklist, a reassuring band for parents, count-up stats with trust badges, a friendly pediatricians strip, and a warm booking call-to-action. Pastel gradients, gentle float animations, reveal-on-scroll and a mobile nav round it out.
Clinic — Pharmacy Delivery Tracker
A pharmacy prescription delivery tracker card with a four-stage status stepper, a live ETA panel, an out-for-delivery courier card, and an order-items list with delivery address — all driven by a small vanilla-JS state machine.
Clinic — Prescriptions & Refills
An active-prescriptions panel showing drug, dose, schedule, prescriber, remaining refills and next-due date, with one-tap per-item refill requests, a filter bar (active / needs refill / all), and a refill-all shortcut — all with live state and toast feedback.
Clinic — Referral / Consult Request
A referral and consult request form for sending a patient to a specialist. A read-only patient chip anchors the request, a specialty select and segmented Routine / Urgent / Emergent urgency control set its scope, and twin textareas capture the reason and relevant history. An Attach results checklist toggles Labs, Imaging and Notes while a live preview card mirrors every field, then submit validates required fields and flips to a confirmation state with a generated reference number and toast.
Clinic — Secure Chat with Doctor
A secure patient-doctor chat: an encrypted header with the doctor's avatar and online status, message bubbles with timestamps and delivery ticks, quick-reply chips, an attachment button, and a typing indicator with a simulated doctor reply.
Clinic — Services / Specialties
A calm services and specialties page for a fictional clinic, leading with a warm hero and category filter chips that live-filter a responsive grid of specialty cards. Each card pairs a soft gradient icon, a category tag, a short blurb and Learn more plus Book actions, lifting gently on hover. Chip counts update from the markup, a live result line and empty state keep things clear, and a footer CTA band invites booking. Vanilla JS only.
Clinic — Specialist / Surgery Center Landing
Premium specialist and surgery center landing in a deep-blue, silver and restrained-gold palette with modern serif headings. Sticky nav with mobile menu, a gradient hero with a live consultation desk, a six-card specialties grid, an animated outcomes band, text-based accreditation seals, a featured-surgeon spotlight, and a validated consultation request form. Reveal-on-scroll, scroll-spy nav, counting stats, and toast feedback throughout.
Clinic — Supplies Inventory
A medical supplies inventory screen for clinic staff, with a sortable-feeling table of items, SKUs, on-hand counts and par levels. Inline plus and minus steppers adjust stock and recompute each item's OK, Low or Out status pill and row highlight in real time. Filter tabs with live counts, a name-and-SKU search box, summary cards and per-row reorder actions round out a realistic stockroom admin view.
Clinic — Symptom Checker Wizard
A friendly multi-step symptom checker: pick a body area, select symptoms, set duration and severity, then see an illustrative triage result with a colored level banner, recommendation, next steps, and a clear non-diagnostic disclaimer.
Clinic — Video Consult Room
A telemedicine video consult room with a full-bleed main stage, a draggable-feel self-view PiP, circular call controls, side chat / notes / info tabs, a live call timer, and a graceful end-call flow.
Clinic — Visit Notes Editor (SOAP)
A SOAP-format visit-notes editor with quick-insert template chips for each section, a debounced autosave indicator, live word counts, and a sign-and-lock flow that freezes the note and stamps the signing clinician.
Clinic — Vitals Input Panel
A triage vitals capture panel for nursing workflows, with paired blood-pressure inputs plus heart rate, temperature, SpO2, respiratory rate, weight and height. Each field carries its unit and a normal-range hint, and flags itself in warning or critical color in real time as values fall outside range. Height and weight auto-compute a BMI badge with category, and a Save action summarizes every captured reading, timestamps it and toasts confirmation.
Clinic — Waiting Room Queue Board
A big-screen waiting room queue board split into Waiting, In room and Ready for provider columns. Patient tickets carry a token number, initials avatar, masked name, an assigned room badge and a live wait timer that ticks every second. A prominent Now serving banner highlights the current patient, per-column counts stay in sync, a demo loop auto-advances patients between columns, and a Call next button manually pulls the front of the Waiting line.
Comics — Browse / Discover (genre grid)
A discover page for the fictional Inkwell comics platform, art-directed in bold ink-and-halftone comic style. A featured carousel banner cycles hero series with auto-play, manual arrows, dot tabs, and keyboard support, pausing on hover or focus. Multi-select genre chips filter a responsive grid of series cards — CSS-gradient cover art, halftone SFX lettering, title, author, genre tag, star rating, and NEW or HOT badges — while a sort dropdown reorders by Trending, New, or Top rated. Cards lift on hover and every action confirms through a toast.
Comics — Chapter / Episode Index
A comic-styled chapter and episode index for webcomics and manga readers. Each row shows the chapter number, halftone thumbnail, title, release date, page count, a free or locked badge, and a read-state dot. The header packs a live search and filter input plus a newest or oldest sort toggle, while a tap marks a chapter read and highlights it with a pop animation, thick ink borders, and Ben-Day dot accents throughout.
Comics — Character Bio / Cast Page
A comic-book character bio and cast page with a featured profile panel — CSS-drawn portrait, name, alias, hero or villain role, affiliation, first-appearance issue and animated power stat bars — paired with a scrollable roster of selectable avatars. Clicking a cast member swaps the featured dossier with a comic SFX swap animation, recolors the halftone portrait panel, and re-animates every stat bar and counter. Pure HTML, CSS and vanilla JS with thick ink borders and Ben-Day dot texture.
Comics — Classic Panel Grid Page
A print-style single comic page for the fictional series Neon Ronin, art-directed in the classic panel-grid tradition — a full-width establishing splash, two half-panels, and a three-up action strip, all set in thick ink borders with gutters and Ben-Day halftone fills. Speech, narration, and shout balloons carry tails, while bold Bangers SFX letter the action. A preset switcher reflows the grid between Classic, Splash, Strip, and Mosaic, and a reading-order toggle numbers every panel and walks a guided highlight from one through N with live toast feedback.
Comics — Creator Dashboard (views · subs · revenue)
A webcomic creator dashboard for the fictional studio Inkwell, built on a comic-ink design system in Bangers and Inter. Four KPI stat cards animate a count-up for total views, subscribers, monthly revenue, and average rating, each with a trend delta. A hand-drawn SVG line chart of views over time flips between 7-day, 30-day, and 90-day ranges, a sortable top-episodes table ranks by views, likes, or revenue, and a recent-activity feed and toast helper round out a fully interactive vanilla-JS admin view.
Comics — Episode Upload / Panel Sequencer
A comic-creator episode-upload and panel-sequencer studio for the fictional series Neon Ronin, built with inked borders, halftone texture, and bold Bangers lettering. A dashed drop-zone simulates panel uploads, a reorderable vertical list of panel thumbnails supports drag-to-reorder plus up, down, and delete fallbacks, and each row carries its own caption and alt-text fields. Episode title, number, series, and visibility inputs drive a live reading-preview pane that mirrors the current order, while a publish button validates required fields and reports success or problems through a comic-styled toast.
Comics — Graphic Novel Landing
A cinematic landing page for the fictional graphic novel The Ashfall Letters, built in HTML, CSS, and vanilla JS. A full-bleed CSS-drawn moody hero with falling ash, grain, and a duotone overlay sets a restrained, painterly tone. Literary serif headings carry a rotating pull-quote of press blurbs, a sticky synopsis with drop cap and edition facts, an inside-the-book spread preview with crossfade and gentle parallax, an awards band, an author note, and a buy-the-hardcover CTA with a 3D cover and cart and wishlist toasts.
Comics — Guided View (panel-by-panel transitions)
A Marvel-style guided-view comic reader for the fictional series Neon Ronin, presenting one panel at a time full-bleed. A virtual page canvas holds ink-bordered panels with halftone texture, speech balloons, and bold SFX lettering; JavaScript computes a fit-to-viewport transform per panel and smoothly pans and zooms the camera between them. Progress dots track panels on the current page, a page label and issue scrub show position, and an autoplay toggle auto-advances every few seconds. Keyboard arrows, edge hotzones, and tappable dots all drive navigation.
Comics — Halftone / Ben-Day Dot Backgrounds
A comic-book halftone toolkit built entirely from CSS radial-gradients. Six live swatches show flat Ben-Day dots, a density gradient ramp for shading, a radial impact burst, diagonal speed-lines, and a two-color duotone screen, all framed in thick ink borders on halftone paper. A large preview panel carries a speech balloon and bold SFX while range sliders for dot size, spacing, and angle plus dot and paper color pickers update CSS variables in real time, and a copy CSS button drops the generated background-image rule onto the clipboard with a toast.
Comics — Indie Zine / Webcomic Landing
A raw DIY landing page for the fictional webcomic Smudge & Staple, built in HTML, CSS, and vanilla JS. A collage hero stacks taped photocopy snapshots, hand-lettered scrawl, and cut-paper stickers over an off-white riso texture in two spot inks, orange and blue. Below sit a scrappy latest-strips grid with a new-only toggle, a tip-jar with amount tiers, a screen-print merch band, a hand-drawn about blurb, and a dashed cut-out mailing-list form. JS adds random card jitter, tape-peel hovers, and toast feedback.
Comics — Issue Cover Page
A bold comic-book issue cover for the fictional Neon Ronin #42, built entirely in HTML and CSS. A 3D outlined Bangers logo, publisher line, and accent tagline sit over a halftone sky with conic speed lines and a CSS-drawn caped hero scene, while a rotated issue badge, cover-artist credit, price block, and a striped barcode finish the trade dress. A variant switcher flips between Standard, Midnight Foil, and Gold incentive editions, swapping accent color, tagline, and treatment, plus a save-to-collection toggle with toast feedback.
Comics — Manga Landing
A black-and-white screentone manga series landing with a single red accent. Features a kinetic right-to-left hero built from a pure-CSS ronin character, halftone shading and converging speed lines, a vertical Japanese-style title accent, a volume cover grid that intensifies its screentone on hover, a newest-first chapter strip that reveals on scroll, a synopsis told through a comic speech balloon, and a high-contrast read-now call to action. Vanilla JS handles parallax, reveals, and toasts.
Comics — Narration Caption Box
A letterer's toolkit for comic narration captions, built in the classic sequential-art tradition with thick ink borders, halftone dot textures, and signature tilts. It pairs a live sample panel with an editor that lets you type caption copy and pick a style — the yellow Meanwhile box, a location and time stamp, a first-person narration plate, or a chapter-title banner — then pin it to any corner of the panel. A reference strip shows all four variants, and a copy-HTML action and surprise-me presets round out the demo.
Comics — Paged Comic Reader (page flip · zoom)
A full-screen immersive comic reader for the fictional series Neon Ronin, with a dark chrome and CSS-drawn pages built from inked panels, halftone texture, speech balloons, and bold Bangers SFX lettering. Big prev/next arrows drive a 3D page-flip transition past a 7 of 24 counter, while a page-jump dropdown and a collapsible thumbnail strip let readers leap anywhere. A fit-width versus fit-height toggle reframes the spread, a zoom slider plus double-click-to-point magnifies the art, and arrow keys turn pages with toast feedback.
Comics — Panel Frame + Gutter System
A reusable comic-page layout kit for the fictional series Neon Ronin, built entirely with CSS grid, hard ink borders, and Ben-Day halftone fills. Four preset arrangements — a 2x2 grid, a splash panel over a three-beat strip, skewed diagonal panels, and a floating inset panel — swap with a smooth transition from a comic-styled button bar. Every panel carries a duotone gradient, an uppercase SFX or tailed speech balloon, and a yellow caption box. A live gutter slider drives a CSS variable, retuning the white space between panels in real time with toast feedback.
Comics — Series Page (synopsis · chapters list)
A comic-book series detail page for the fictional Neon Ronin, art-directed with thick ink borders, halftone texture, and Bangers display lettering. A hero banner pairs gradient cover art and a SLASH SFX with status, rating, age and genre badges, a clamped synopsis with a read-more toggle, and a stats row for chapters, views, likes and read progress. Start-reading and add-to-library CTAs sit above a chapter list with halftone thumbnails, dates and a read/unread state; sorting flips newest or oldest and marking chapters read fills a live progress bar.
Comics — Sound-Effect (SFX) Lettering
Bold comic-book sound-effect lettering set in Bangers with hard ink strokes, layered 3D drop-shadows, skew, and accent fills, each word sitting over a spinning halftone burst. A grid of preset blasts — BOOM, POW, ZAP, CRASH, WHOOSH, KA-POW — replays its scale-rotate-settle pop-in on click, while a maker stage renders any typed word in the same SFX style with a randomly picked burst and fill color. Vanilla JS only, with a shuffle control, toast feedback, keyboard support, and a reduced-motion fallback.
Comics — Speech / Thought / Shout Balloon Set
A comic-book lettering kit of five CSS-drawn balloons set on inked, halftone panels for the fictional Neon Ronin series. A pointed speech balloon, a scalloped thought bubble with a trailing dot chain, a jagged Bangers-lettered shout burst, a dashed whisper, and a boxed narration caption each sit over gradient panel art. Segmented controls swap the active style while a live lettering field retypes the words, and clicking any balloon cycles its tail between left, right, and down with toast feedback and full keyboard support.
Comics — Vertical-Scroll Webtoon Reader
A mobile-first vertical-scroll webtoon reader for the fictional series Neon Ronin, built on a comic-ink design system in Bangers and Inter. A continuous gutterless strip stacks tall, CSS-drawn scenes — a dusk skyline, a close eye shot, a spinning static burst, a rooftop standoff — laced with speech balloons, bold SFX lettering, and Ben-Day halftone texture. A thin top bar fills as you scroll, the episode header auto-hides on the way down, and a like button, comment count, next-episode card, and scroll-to-top control round out a fully interactive vanilla-JS read.
Comics — Webtoon Platform Landing
A bright, mobile-first webtoon platform landing built with vanilla HTML, CSS and JavaScript. It pairs a flat-design hero and a phone mockup running a looping vertical-scroll comic with app-store download buttons, a draggable auto-cruising trending scroller of rated cover cards, interactive genre chips, a creator feature trio and a footer. Friendly green and coral accents, rounded ink borders and subtle halftone textures give it a playful, app-store feel.
Comics — Western Superhero Comic Landing
A bold western superhero comic universe landing page with an explosive Bangers hero title, a CSS-drawn caped figure over a halftone sky with speed lines and a city skyline, a Read Issue #1 call to action, an interactive featured-heroes strip, a sliding issues-and-arcs carousel with dot navigation, a creators bullpen band, and a validated newsletter subscribe footer. Hard ink borders, Ben-Day dot textures, gold and hero-red accents, animated entrance, and a sticky comic-styled nav.
Gym — Big-Box Chain Gym Landing
A bright, mass-market big-box chain gym landing page with a friendly hero, a clear join-for-19-a-month call to action and a find-a-club-near-you search. It includes an amenities grid, a three-tier membership row, a filterable locations strip, member testimonials and an FAQ accordion. Built with accessible semantic HTML, a clean red-and-steel light theme and dependency-free vanilla JavaScript for the navigation, location filtering, plan selection and accordion interactions.
Gym — Boutique Cycling / HIIT Landing
A club-energy landing page for a boutique cycling and HIIT studio, built in vanilla HTML, CSS and JS. Features a neon-glow hero with a free-ride CTA, a live class-time rotator with dynamic spot counts, vivid signature-class cards, an instructor and DJ-energy crew row, an experience grid, a packs pricing teaser, rider testimonials and a validated claim form. Deep-purple palette with neon-pink gradients, reactive lighting vibes, scroll reveals and toast feedback.
Gym — Class Booking Flow
A bold, athletic four-step class booking flow for a performance gym. Members swipe a horizontal date strip, choose from real-feeling sessions with spots-left counters and intensity badges, claim a position on a small floor map of bikes or stations, then confirm and pay with class credits or a saved card. A persistent summary rail tracks every choice, validation gates each step, and confirming reveals a success panel with a generated booking code.
Gym — Class Detail
A bold, athletic class detail card for a single gym session. Shows a hero strip with the class name and intensity badge, trainer avatar and rating, schedule, studio, an estimated calorie burn, a difficulty meter, a what-to-bring checklist, a live spots progress bar with a roster preview of attendees, and a prominent Book CTA. Booking updates the bar and roster, while a full class flips the button into a waitlist flow with toast feedback.
Gym — Class Leaderboard
A live spin/HIIT class leaderboard built on the dark performance-gym theme with zero libraries. Ranked rows pair member avatars with an animated metric bar, a color-coded HR zone pill from Z1 to Z5 and a live effort percentage, while the top three earn dedicated podium cards. A segmented toggle re-ranks the field by calories, total output or Z4-plus zone minutes, and a simulated live tick nudges every rider and re-sorts rows with a smooth FLIP reorder animation, club-screen style.
Gym — Class Management
A high-energy gym admin for managing the weekly class schedule as a full CRUD. A live stats strip tracks totals, active classes, weekly capacity and trainers above a sortable table listing each class with its type, trainer, day and time, room, a capacity progress bar and a status badge. An Add class button opens a validated modal form, rows edit in place via the same pre-filled dialog, deletes use an inline confirm, and a search box plus type and trainer filters narrow the list instantly.
Gym — Class Roster
A high-energy gym class roster with live attendance check-in. A neon-accented header shows the class name, time, coach and a capacity bar, while a searchable member list pairs gradient avatars and tier badges with Check-in and No-show toggles. Toggling animates each row between present, no-show and waitlist-promoted states as present, expected, no-show and waitlist counters update in real time. Includes a pending-only filter, a check-in-all action and a walk-in add row.
Gym — Class Schedule
A bold, dark-themed weekly class schedule for a performance gym. A scrollable seven-day grid with sticky day and time headers shows color-coded class blocks for HIIT, Vinyasa, Spin and more, each with trainer, room, intensity tag and live spots-left. Filter chips dim non-matching types, the current day column is highlighted, and a week navigator steps between weeks. Tapping any block opens a slide-in detail panel with a Book button that decrements spots and toggles to Booked.
Gym — Classes Overview
A bold, dark-themed marketing page for a performance gym timetable, featuring a high-energy hero, a featured-class spotlight banner, category filter tabs across Strength, Cardio, Cycle, Yoga, HIIT and Mobility, and a responsive grid of class cards with gradient headers, intensity meters, trainer credits and schedule links. Filtering smoothly fades and staggers cards, and a free-trial CTA closes the page. Built with vanilla HTML, CSS and JavaScript — no frameworks or build step.
Gym — Client Progress View
A trainer-facing progress dashboard for a single gym client, with an avatar header, goal and since-date, and an animated SVG adherence ring. A metric tab switcher re-renders self-drawn line charts for body weight, bench and squat over twelve weeks, alongside a KPI strip, a measurements table with chest, waist and arm deltas, a session-attendance heat strip and a coaching-notes timeline. A Send-program button and an inline note composer append entries live, all in dependency-free vanilla JS.
Gym — CrossFit Box Landing
A raw, industrial landing page for a fictional CrossFit box in a near-black, safety-yellow and concrete palette, with caution-stripe accents, a heavy condensed hero and a free intro-WOD call to action, a whiteboard WOD-of-the-day block with RX and scaling options plus a working stopwatch and AMRAP box timer, a four-program grid, a coaches row, a results section whose stats count up on view, a class schedule teaser, a sticky blurred nav with a mobile menu, scroll reveals, and an accessible booking dialog with a focus trap and toast feedback.
Gym — Digital Membership Card
A tappable digital gym membership card that flips in 3D to reveal a door check-in code. The front shows the IRONPULSE brand, member name, tier, member ID, join date and a live Active status pill, while the back renders a canvas-drawn QR matrix and barcode for scanning at the gate. A pulsing show-at-front-desk mode and a one-tap brightness boost maximize contrast for readers, and quick chips switch the membership tier and regenerate the codes live.
Gym — Equipment Status
A live equipment status board for a performance gym floor. Items are grouped by category — treadmills, squat racks, benches, rowers and cable machines — each with a status pill for free, in use or out of order. In-use units show who has them, elapsed time and an ETA progress bar. Summary counters, a status filter and instant search keep the floor scannable, while a report-issue dialog flips any unit out of order with a reason.
Gym — Gym Floor Map
A top-down interactive gym floor map laid out on a CSS grid, with six labeled zones — Free Weights, Machines, Cardio, Functional Rig, Studio A and Locker Rooms — each color-coded by live occupancy and showing its station count. Clicking a zone opens a detail panel listing equipment with free, in-use and service status, while a circular capacity gauge and a one-tap busy-hour simulation bring the whole floor to life on a dark, athletic theme.
Gym — Landing Page
A high-energy, dark-themed gym landing page built with plain HTML, CSS and vanilla JavaScript. It features a full-bleed hero with a neon CTA, an animated counting stats strip, a featured-classes grid, a trainers preview row, a three-tier membership teaser, a rotating testimonials carousel and a final free-trial band with inline email validation. A sticky header, mobile nav toggle, scroll-reveal animations and a lightweight toast helper round out the experience.
Gym — Martial Arts / Boxing Landing
A disciplined martial arts and boxing gym landing page on a charcoal-and-crimson theme with slab-serif headings. Features a strong hero with a free trial CTA and a live intro-class card, a filterable disciplines grid for Boxing, Muay Thai, BJJ and Kickboxing, a ranked coaches row with credentials, a belt-style progression path, a weekly schedule teaser, member stories, and a CTA band with an inline trial-booking form. Vanilla JS drives the mobile nav, scroll reveals, animated stat counters and filter.
Gym — Member Check-in Kiosk
A full-screen front-desk check-in kiosk for a performance gym, built in a bold neon-on-charcoal theme. A pulsing scan zone and a large numeric member-ID keypad drive the idle state; a simulated scan or entry flips to a kiosk-scale success card showing the member photo, name, membership status, today's booked class, and an auto-reset countdown back to idle. A live checked-in-today counter and a recent check-ins ticker keep the front desk informed.
Gym — Member Dashboard
A high-energy member home for a performance gym on a dark neon-lime theme. A greeting header with avatar and tier sits above a quick-action bar, then a live next-class countdown with an animating check-in, a fiery streak widget with a seven-day dots row, weekly activity stat cards, an interactive goals ring that fills as you toggle targets, an achievements badge row, and a cancellable upcoming-bookings list. Vanilla JS, responsive to 360px.
Gym — Members Admin
A high-energy members admin console for a performance gym. A KPI header tracks active members, new signups, churn and MRR with mini sparklines, above a searchable, filterable and fully sortable members table with status pills, tier labels and lifetime value. Bulk-select rows to freeze, message or cancel in batch, page through results, and click any row to slide open a detail drawer with the member profile, plan and contact info. All vanilla JS.
Gym — Membership Pricing
A high-energy gym membership pricing page with a monthly versus annual billing toggle that animates every price and reveals the yearly savings live. Four tier cards (Basic, Plus, Unlimited, Black) carry feature checklists and a highlighted most-popular plan, backed by a stackable class-pack add-on row, a sticky-header comparison table covering every feature, and a single-open FAQ accordion. Built with vanilla JS for the toggle, accordion and CTA toasts.
Gym — Nutrition / Macro Log
A daily nutrition tracker for athletes with a calorie ring showing remaining kcal and animated Protein, Carbs and Fat goal bars up top. Meal sections for Breakfast, Lunch, Dinner and Snacks list food entries with calories and per-macro tags plus a remove button, an inline Add-food form appends entries and live-updates every ring and total, and a tappable row of water glasses logs hydration. Bold athletic dark UI in vanilla JS.
Gym — Progress Stats
An athletic member progress panel built on the dark gym theme with hand-drawn SVG charts and zero libraries. A Strength / Cardio / Body tab switcher swaps a self-rendered bodyweight line chart, a weekly volume bar chart and a personal-records list for squat, bench, deadlift and 5k bests, each carrying up or down trend deltas and dates. A 4w / 12w / 1y range toggle re-renders the data, headline stat cards update, and hover or focus reveals neon point tooltips.
Gym — Public Schedule Page
A bold, public-facing weekly class schedule for a performance gym. Members and prospects pick a location, scan day tabs with a live today highlight, and filter classes by type or trainer. Every row shows time, class name, trainer, room and an intensity tag, plus live spot counts and an in-session marker. A Reserve button opens a free-trial sign-up modal, and a one-tap print layout produces a clean handout. Built with vanilla JavaScript only.
Gym — Revenue & Retention Dashboard
An admin analytics dashboard for a performance gym, pairing KPI cards for MRR, ARPU, churn and lifetime value with trend deltas and inline sparklines, a hand-drawn SVG revenue-over-time area chart with hover tooltips, a membership-mix donut, a cohort-retention heat grid showing months against joining cohorts by color intensity, and a top-classes-by-revenue bar list. A 30d / 90d / 12m range toggle re-renders the metrics and charts. Every chart is drawn in vanilla JS with no libraries.
Gym — Trainer Dashboard
A high-energy daily console for personal trainers built in vanilla JS. KPI cards summarise sessions, active clients, attendance and weekly revenue; a back-to-back session timeline expands to reveal focus, location, goal and notes with mark-complete and message actions; a searchable client roster shows avatars, next session and colour-coded adherence bars; and a follow-up action list toggles programs and check-ins done with live due counts and toast feedback.
Gym — Trainers Page
A high-energy gym coaches page on a dark athletic theme — a bold neon hero with headline stats, specialty filter chips for Strength, Mobility, Boxing, Yoga and Nutrition, and a responsive grid of trainer cards showing avatar, name, specialty tags, bio, certifications and a Book session call to action. Clicking any card animates open a detail modal with full bio, achievements and selectable availability slots, while filtering smoothly fades and rescales the grid. All vanilla JS.
Gym — Workout Plan Builder
A drag-and-drop workout programming tool for coaches and lifters, built with vanilla JavaScript and native HTML5 drag events. A searchable exercise library grouped by muscle feeds into reorderable day blocks like Push, Pull and Legs. Each placed exercise exposes editable sets, reps and rest fields, while live per-day summaries estimate total sets and session duration. Add or remove days, reorder movements within a session, and watch the program stats update in real time.
Gym — Workout Tracker
A high-energy active workout tracker for the gym floor — an ordered list of exercises like Back Squat, Bench Press and Deadlift, each with editable weight-by-reps set rows, a one-tap check-off, an add-set button and per-exercise rest. A big neon rest timer counts down with start, pause and reset plus a beep-free flash at zero, while live totals track volume, sets done and elapsed workout time. Finishing surfaces a summary toast. All state in vanilla JS.
Gym — Yoga / Pilates Studio Landing
A serene, light-filled landing page for a fictional yoga and Pilates studio, built in a bone-and-sage wellness palette with a serif-paired type system. It opens on a calm gradient hero with floating orbs and a book-a-class call to action, then flows through class-style cards, an instructors row, a weekly schedule teaser, three membership packs, a rotating testimonial and a newsletter footer — all stitched together with gentle scroll reveals and soft micro-interactions in vanilla JavaScript.
Hotel Amenities & Services Page
A full marketing amenities page for Aurelia Hotels featuring filterable service cards, an opening-hours accordion, and a request-info contact form with validation and toast feedback.
Hotel Amenity Booking
A widget to book a hotel amenity — Spa treatment, Gym slot, or Restaurant table — with a segmented control that restyles the options, a date picker, available time-slot grid, party-size stepper, and a confirmation state with booking reference and toast.
Hotel Booking — Checkout
Booking checkout page: guest details, arrival time and requests, a card payment form with live number / expiry formatting and inline validation, plus a sticky order summary and a success confirmation state.
Hotel Booking — Confirmation
Full-page post-booking confirmation screen with a generated reference number, stay summary, what's-next checklist, hotel address, and action CTAs. Interactive copy-to-clipboard, add-to-calendar toggle, and expandable cancellation policy.
Hotel Booking — Room Detail
Room detail page with a switchable image gallery, amenities grid and selectable rate plans (flexible / non-refundable / bed & breakfast) feeding a sticky booking summary that recalculates the stay total live.
Hotel Booking — Room Results
Room results grid with a sticky stay summary bar, a filter sidebar (price range, room type, bed, amenities) and a sort control — all reacting live in vanilla JS to narrow and reorder the room cards.
Hotel Booking — Search
Guest-facing booking search hero: destination, check-in / check-out date pickers, and a guests & rooms stepper popover with live nights calculation, validation and a search summary.
Hotel Channel Manager
An OTA channel-sync status screen for Aurelia Hotels showing Booking.com, Expedia, Airbnb, Direct, and Google channels with connection status, last-sync time, mapped rooms, rate-parity state, and pending changes. Sync single channels or all at once with an animated syncing sequence, toggle connections, and resolve parity warnings — all with a live overall health summary.
Hotel Concierge Request Board
A full-screen ops board for the concierge team showing guest requests in Kanban-style lanes (New · In Progress · Done). Interactive: advance requests through statuses, assign to self, filter by priority, and track live lane counts.
Hotel Contact & Location
A full contact and location page for Aurelia Hotels featuring a two-column layout with a CSS map placeholder, address/hours panel, a validated contact form with success state, a copy-address button, and an FAQ accordion.
Hotel Digital Key Card
A mobile-phone-framed digital room key for Aurelia Hotels — shows hotel branding, room number, guest name, and validity dates. Tap the large 'Hold to unlock' button to trigger a locked → unlocking → unlocked animation sequence with an NFC pulse ring, then auto-relocks after a brief confirmation. Includes share key and room info quick actions.
Hotel Gallery & Virtual Tour
A filterable photo gallery and virtual tour page for Aurelia Hotels, using CSS-gradient tiles by category (Rooms, Dining, Spa, Views, Events), with a full lightbox offering prev/next navigation, captions, and keyboard support.
Hotel Guest Portal
Logged-in guest dashboard with three tabs — My Stay, Folio, and Requests. Guests can view their room and check-out countdown, browse current charges, and submit live service requests that appear in a status-tracked list.
Hotel Housekeeping Status Grid
A full-screen floors-by-rooms grid of room tiles colour-coded by housekeeping status (Clean · Dirty · In Progress · Inspected · Out of Order). Click a tile to cycle its status, filter by status type, and watch live tallies update in the summary bar.
Hotel In-Room Tablet
A dark, landscape in-room smart-tablet home screen for Aurelia Hotels — displays a personalised greeting, room number, live clock, and weather, alongside a grid of service tiles. Clicking a tile opens a panel: Room Service shows a small menu with an order builder and running total; Lights & Climate shows toggles and a temperature stepper. All panels close with a back button.
Hotel Inventory & Allotment
An inventory and allotment grid for Aurelia Hotels showing room types × dates with available/sold room counts, stop-sell flags, and low-availability colour warnings. Adjust allotment per cell with steppers, toggle stop-sell, filter by room type, and watch the summary bar update in real time.
Hotel Landing Page
A full marketing landing page for Aurelia Hotels featuring a sticky nav, full-bleed hero with booking mini-search, featured rooms row, amenities band, a guest quote, and a footer with newsletter signup — all interactive with scroll effects, nights calculation, and form validation.
Hotel Loyalty Tier Card
A membership loyalty card widget for Aurelia Hotels — displays member name, current tier (Silver/Gold/Platinum), member number, and points balance on a premium gradient card. Below it a progress bar shows nights and points needed for the next tier, alongside a benefits list and recent points activity. A tier switcher reskins the card and a 'Simulate a stay' button adds points, animates the progress bar, and auto-promotes to the next tier when the threshold is crossed.
Hotel Maintenance Tickets
A centered maintenance ticket queue widget listing open issues by room, type (AC, plumbing, TV, lock), priority, age, assignee, and status. Interactive: submit a new ticket via a mini-form, cycle status through Open → In Progress → Resolved, filter by priority, and watch the open-count badge update live.
Hotel PMS — Guest Folio
Itemized guest bill widget showing posted charges, running totals, and balance due. Staff can add new charge lines, void existing ones, and settle the folio with a paid stamp.
Hotel Rate Management
An interactive rate-management grid for Aurelia Hotels, showing room types × date columns with editable nightly rates, per-cell occupancy hints, demand-based colour coding, bulk adjustment by % or fixed amount, min-stay and closed-cell toggles, and a live save bar tracking changed cells.
Hotel Reports & Forecasting
A full-screen hotel operations reporting suite with occupancy forecasting, pickup, pace, and source-mix report types. Interactive date-horizon selector, animated CSS bar/line charts showing actuals vs forecast, a live KPI summary band, and an export-to-CSV/PDF action toast.
Hotel Revenue / RevPAR Dashboard
A full-screen manager revenue dashboard with KPI band (Occupancy, ADR, RevPAR, Total Revenue), a CSS-only animated bar chart of daily revenue across the week, a revenue-by-segment table, top room-types table, and a date-range / property selector that recalculates all figures.
Hotel Rooms & Suites Page
A full marketing page listing Aurelia Hotels' room categories with filterable cards, view toggle, amenity badges, and from-price CTAs. Visitors can filter by category (All / Rooms / Suites / Family), switch between grid and list layouts, and click Book to receive toast confirmation.
Hotel Shuttle Schedule
An airport and city shuttle timetable widget with a direction toggle (Hotel→Airport / Airport→Hotel), a live countdown to the next departure, per-departure seat counts, and a reserve-seat button with toast feedback.
Hotel Special Offers & Packages
A full marketing page showcasing Aurelia Hotels' special offers and packages — filterable by category (Stays, Spa, Dining, Seasonal), with discount badges, conditions, from-prices, a promo-code validator, and CTA toast feedback.
Music — Album Page (tracklist · credits)
A dark, album-art-driven detail page for a fictional record. A large CSS-drawn cover glows its theme accent across the header beside the album title, artist, year, track count and a computed total runtime. A numbered tracklist shows featured artists, play counts, per-track like toggles and an animated equalizer on the active row. Simulated playback drives a glassy now-playing bar with a draggable, keyboard-seekable scrubber, plus credits, a producer notes block and a More by this artist album row.
Music — Animated Equalizer Bars
A self-contained music audio-visualizer built with pure CSS keyframes and vanilla JS. Four equalizer styles — classic bars, dot matrix, mirrored center-out, and a circular radial burst — bounce in staggered sync to simulate a live signal. A morphing play/pause button starts and settles the animation, while sliders retune the band count and tempo and a swatch row recolors every bar from a themed accent palette.
Music — Artist Dashboard (streams · listeners · revenue)
A dark, for-artists analytics dashboard for the fictional act Neon Tides, built in plain HTML, CSS, and vanilla JS. Animated count-up KPI cards track total streams, monthly listeners, followers, and estimated revenue with trend deltas and sparklines. A smooth SVG area chart of streams over time toggles across 7d, 28d, and 12mo ranges with a hover tooltip, while a sortable top-tracks table, top-locations bar meters, and a milestones feed round it out, all backed by a simulated now-playing preview bar with a keyboard-accessible scrubber.
Music — Artist Page (hero · top tracks · about)
A dark, immersive streaming-style artist profile for the fictional act Neon Tides, built in plain HTML, CSS, and vanilla JS. A full-bleed hero with a CSS-drawn animated banner pulls its accent from the artist color, framing a verified name, monthly-listener count, and a Play, Follow, shuffle, and more actions row. A Popular top-tracks list shows rank, cover, play counts, and durations with hover-play and a live equalizer on the active track, backed by a discography strip, an About card, a Fans also like row, and a now-playing bar with a working scrubber.
Music — Browse / Genres / New Releases
A dark, cover-rich music discovery home for a fictional streaming app. A time-aware greeting sits above a New Releases scroller of CSS-drawn album cards with hover-play overlays, a vibrant gradient grid of genre and mood tiles, a Made for you mixes row, and a Top 50 charts preview with movement arrows, play counts and durations. Scrollers support drag and arrow navigation, a Music or Podcasts tab swaps the entire feed, and simulated playback drives a glassy now-playing bar with an animated equalizer and a draggable, keyboard-seekable scrubber.
Music — Classical / Orchestra Landing
An elegant landing page for the fictional Aurelian Symphony's 2026 concert season, built in ivory, deep navy, and gold with serif display headings. A refined hero sets a CSS concert-hall scene with a gilded dome, twinkling chandelier, and drifting motes, alongside a stately tagline and a subtle waveform sampler. Below it sit a filterable season calendar with expandable programme notes, a conductor spotlight, three subscription packages, a venue section, and a timeless footer.
Music — Discography Grid (albums · singles)
A dark, cover-forward discography page for the fictional artist Neon Tides. A glowing header pairs the artist name with monthly listeners, a shuffle-play button and a follow toggle, then release-type tabs (All, Albums, Singles & EPs, Compilations) sit beside a Newest/Oldest/Most-played sort and a grid/list view switch. A responsive grid of fully CSS-drawn covers shows title, year, type badge, runtime and play counts, with a hover play overlay that themes each card to its cover accent and animates an equalizer on the active release. Playback is fully simulated.
Music — Full-Screen Now Playing
A full-screen now-playing music view with a huge CSS-drawn vinyl cover, ambient color glow pulled from the artwork, and a blurred cover-art backdrop. Features a waveform progress scrubber you can drag or seek by keyboard, big transport controls for shuffle, prev, play-pause, next and repeat, plus like, add-to-playlist, share and queue actions. A sliding drawer toggles between synced lyrics and an up-next queue, all driven by simulated playback that spins the cover and recolors the glow per track.
Music — Hip-Hop / Club Landing
A loud, street-styled hip-hop and club-night landing built with vanilla HTML, CSS and JavaScript. A high-contrast hero pairs a chrome-metallic condensed title with an acid-lime accent, a CSS-drawn boombox and spinning cassette, a thumping equalizer and a looping track marquee. Below sit a latest-drop album showcase with a shared simulated player and working scrubber, per-track play and like toggles, a tour-dates list with sold-out states, a hover-reactive merch grid, a visualizer block and a sticky stream CTA.
Music — Listener Profile (top artists · stats)
A celebratory, data-rich listener profile and year-in-review page for the fictional listener River Halcyon, built in plain HTML, CSS, and vanilla JS. A CSS-drawn gradient banner with an animated conic avatar ring frames a display name, follower and following counts, and a follow toggle that nudges the count live. A 4 weeks, 6 months, and all-time range toggle re-renders the top-artists rank list, animated genre bars, count-up listening stats, and a top-tracks list with hover-play and a live equalizer, all wrapped up by a scrollable public-playlists strip.
Music — Music Festival Landing
A loud, poster-styled music festival landing built with vanilla HTML, CSS and JavaScript. A sunset-gradient hero stacks an Anton lineup-poster title over dates, location and a live countdown to gates, backed by a glowing CSS sun and grain. Below it sit a tiered headliner poster sized by billing, a day-tabbed stages schedule, a GA / VIP / Camping ticket band with live selection, a seamless scrolling artist marquee, an accordion FAQ and a sticky tickets bar.
Music — Playlist Page (cover · tracks · share)
A dark, album-art-driven playlist detail page for a fictional collection called Neon Hours. A CSS-drawn four-tile mosaic cover themes the glassy header beside the title, curator, description and a live track-count, total runtime and likes line. A play, shuffle, like, share and overflow row sits above a searchable, sortable track table with per-row covers, play counts, like toggles and an active-row equalizer. Simulated playback drives a now-playing bar with a draggable, keyboard-seekable scrubber, a share popover with copy-link, and an inline-editable title.
Music — Release Upload (tracks · art · metadata)
A dark, album-art-driven release-upload form for distributing music. Pick a generated gradient cover that themes the whole UI, fill in title, artist, label, genre, date and an explicit toggle, then build a reorderable tracklist where each row carries featured artists, an ISRC, a tiny waveform and a simulated audio-uploaded state. A three-step Details → Tracks → Review stepper validates as you go, while a sticky live preview card mirrors every field with a working scrubber, equalizer and simulated playback.
Music — Search (artists · albums · tracks)
A tactile, Spotify-style music search built in vanilla JS. A prominent rounded input with an animated search icon drives debounced live filtering over a fictional catalog of artists, albums, songs and playlists. Results group into a themed Top result card plus Songs, Artists, Albums and Playlists sections, with a category chip row to narrow scope. Matched substrings highlight in the accent color, recent searches persist with clear-all, and arrow-key navigation plus Enter triggers simulated playback with animated equalizers, play counts and durations.
Music — Sticky Bottom Player Bar
A polished, sticky bottom now-playing player bar with a CSS-drawn album cover, animated equalizer, and a morphing play/pause button. Transport controls cover shuffle, previous, next, and repeat, while a click-and-drag scrubber advances current and total time during simulated playback. The right side adds a volume slider with mute, a queue toggle, and full-screen expand — all keyboard-accessible with ARIA slider and pressed states.
Music — Streaming / Modern Pop Landing
A sleek, glossy landing page for the fictional Pulsewave streaming service, built in HTML, CSS, and vanilla JS. A dynamic hero pairs animated gradient glow blobs with a floating phone mockup whose now-playing screen cycles tracks behind a live equalizer and progress scrubber. Below sit glassy feature cards for offline, lossless, and personalized listening, a count-up catalog stat band, a Free, Premium, and Family pricing grid with a monthly to annual toggle, plus scroll-reveal motion and toasts throughout.
Music — Tour / Live Dates (list + tickets)
A dark, music-styled tour and live-dates component for the fictional act Neon Tides, in plain HTML, CSS, and vanilla JS. A themed header pairs a CSS-drawn cover and animated map pin with a live show count and a Get notified toggle, above a region filter (All, North America, Europe, Asia). Twelve show rows carry a date block, city, venue, country flag, an On sale, Few left, Sold out, or Just announced badge, and a status-aware Tickets or Notify me button. Rows expand for doors, set time, support act, and pricing.
Music — Track + Synced Lyrics View
A dark, karaoke-style track page where simulated playback drives time-synced lyrics. The header pairs a large CSS-drawn album cover and animated equalizer with the title, artist and a waveform scrubber that supports click, drag and keyboard seeking. The main panel auto-scrolls a vertical lyric list so the current line enlarges and gradient-highlights at centre while past lines dim and upcoming lines stay muted. Clicking any line seeks to its timestamp, and font-size and timestamp toggles round out the controls.
Music — Track List Row
A dense, Spotify-style tracklist component built in vanilla JS. Each row swaps its index number for a play button on hover and an animated equalizer while playing, with the active track highlighted in its cover-pulled accent. Rows carry CSS-drawn album art, artist and album names, like-heart toggles, live play counts, duration timestamps, a more menu, and drag-to-reorder handles. Simulated playback, toasts, and keyboard support included.
Music — Up-Next Queue Panel
A polished up-next queue side panel for a music player. The header pins the now-playing track with an animated equalizer, a play and pause morph button, and a draggable scrubber that shows live duration timestamps. Below it, the next-in-queue list shows cover art, title, artist, and length per row, each reorderable by drag-and-drop or up and down buttons, removable with an x, plus a clear-queue action, a playlist source label, and themed accents pulled from each cover.
Music — Vinyl / Analog Retro Landing
A warm, grainy landing page for a vinyl reissue label and record shop. A CSS-drawn turntable with a spinning record, swinging tonearm and crackle equalizer anchors a vintage serif hero, backed by a featured-pressings grid whose sleeve discs spin on hover, a genre tab filter, a why-analog feature trio, a turntable equipment band and a paper cut-out newsletter. Vanilla JS simulates playback with timers, like toggles, cart and form validation.
Music — Waveform / Progress Scrubber
A SoundCloud-style waveform progress scrubber built from CSS-drawn vertical bars. The played portion fills with the accent color while the rest stays muted, and a glowing draggable playhead tracks position with a time tooltip. Hover shows a preview line, click or drag seeks instantly, and a playback-speed selector changes how fast the bars fill. Includes a compact reusable variant inside a now-playing queue, all simulated with timers and no audio.
News — Article Editor
A newsroom article editor built as a two-pane CMS surface: an editing column with an inline headline, italic standfirst, byline and a formatting toolbar that runs bold, italic, subheads, pull quotes, links and captioned press figures, beside a publishing sidebar for section, tags, Draft to Published status, SEO slug, cover treatment and live word count plus read time. A reader-style preview renders the finished article in justified editorial columns with a drop cap.
News — Byline · Dateline · Read-time Meta
A self-contained editorial byline and meta component set for the fictional Meridian Standard, art-directed in a warm newsprint palette with Playfair Display headlines and Inter meta. It collects four byline layouts — simple author and date, author with portrait and role, multi-author, and agency credit — each carrying a dateline, published and updated timestamps, an estimated read-time, and a share and save icon row. A reading-time calculator estimates duration from a word count or pasted copy. Vanilla JS computes read time live, toggles the save state, and fires share toasts.
News — Classic Broadsheet Landing
A dense, authoritative broadsheet front page in the classic tradition: a grand centered nameplate with Latin motto and edition flags, a towering serif lead headline with drop cap and pull quote, stacked secondary stories divided by hairline rules, an opinion rail, a closing-bell markets strip, and an inside-today sections footer. Built with Playfair Display, a Times-like body feel, an ink-and-oxblood newsprint palette, captioned duotone press photos, a live dateline clock, A-/A+ text sizing, and section-jump navigation.
News — Front Page
A full newspaper front page with a Playfair Display nameplate, dateline, edition and price strip framed by hairline rules, then a strict multi-column lead grid. One dominant lead story carries a deck, drop-cap lede, captioned duotone hero figure and an oversized pull quote, flanked by secondary stories with column rules, a More-on-the-front sidebar, a five-day outlook, and a four-up briefs strip. Vanilla JS drives a live dateline clock, an A-/A+ body-type control, and a scroll-spy section-jump nav.
News — Front-page Layout Builder
A newsroom-style front-page builder for a fictional broadsheet, pairing a left story queue of draggable cards with a right canvas of slot zones — Lead, two Secondary wells, an analysis Sidebar and an auto-composing Briefs strip. Drop a story into any slot and it renders live as editorial copy, with headline size, drop caps and pull quotes scaling to the slot; a desktop, tablet and mobile width toggle reflows the grid, and a Publish action confirms the edition with a toast. Vanilla JS, no libraries.
News — Glossy Lifestyle Magazine Landing
An airy, premium landing page for Maison, a fictional glossy lifestyle magazine. A high-contrast Playfair Display masthead sits above a fashion-editorial hero with a coverline and large cover image, a refined featured-stories switcher, a four-up story grid with a drop cap and a dark pull quote, a This Issue contents strip, a contributors row, and a black subscribe block with plan selection. Vanilla JS powers a tabbed story switcher, gentle scroll parallax, and a validated subscribe form.
News — High-Fashion Editorial Landing
An avant-garde high-fashion editorial landing for a fictional monochrome journal, built in vanilla HTML, CSS and JS. Oversized Playfair display type and sparse couture sans set against dramatic negative space, with a single neon accent used once. A cursor-follow accent dot eases across the page, duotone press-style fashion plates reveal slowly on scroll, an asymmetric off-grid gallery anchors the layout, and an image index lights each plate on hover, beside a tracked-caps manifesto and credits block.
News — Inline Newsletter Signup
An editorial inline newsletter signup module styled like a real broadsheet, set inside a fictional harbor-town front page. A red-ruled brief block carries a let-spaced kicker, a serif headline, a one-line value prop, an email field with live validation, Daily and Weekly frequency chips, a privacy note and a live subscriber count. A dark compact sidebar variant mirrors it. Vanilla JS handles validation, frequency selection, a success state, a toast and an incrementing reader tally.
News — Literary Journal / Review Landing
A quiet, text-first landing page for The Marginalia Review, a fictional quarterly of letters, built in a bone-and-ink palette with a muted teal accent and book-serif display type. A restrained masthead gives way to a lead essay with a drop cap, a justified two-column body that expands and collapses on a smooth height transition, and a pull quote between the columns. A genre-filtered contents list, a contributor spotlight, and a dark subscribe-and-submit colophon round it out, all in vanilla JS.
News — Live Blog / Breaking News
A breaking-news live blog for the fictional Meridian Dispatch, art-directed in a warm newsprint palette with Playfair Display mastheads and Inter meta. A pulsing red LIVE badge tops a serif headline, summary and byline, while a reverse-chronological timeline carries timestamped updates with rail dots, key-update flags, duotone captioned press photos and an oversized pull quote. A sticky What you need to know box and a helpline card sit alongside. Vanilla JS prepends fresh entries with a live timestamp and flash, refreshes relative times, and fires toasts.
News — Long-form Feature
An immersive editorial long-read for the fictional Meridian Review, opening on a full-bleed cinematic cover with an oversized Playfair masthead, byline and reading time, then a chaptered scroll body set in a strict column with hairline rules, a drop cap, captioned duotone press photos, full-bleed pull-quote breaks and a parallax night scene. A sticky chapter rail highlights the active section, a top progress bar tracks reading, and a slim masthead reveals on scroll, all driven by IntersectionObserver and vanilla JS.
News — Magazine Cover
A glossy newsstand cover for the fictional monthly Meridian, built in vanilla HTML, CSS and JavaScript. A full-bleed duotone press photo sits behind a giant Playfair masthead, with cover lines arranged left and right around the subject, an oversized display coverline and deck, an issue-date-price flag and a real barcode strip. A pointer-driven gloss and parallax tilt give it newsstand sheen, and an issue switcher swaps the cover art, headlines and metadata between three fully art-directed editions.
News — Magazine Table of Contents
A print-grade magazine table of contents for an editorial issue, built with strict column grids and hairline rules. An issue masthead carries the logo, number, and date above a featured on-the-cover hero with a duotone press photo, drop cap, and pull quote. Categorized listings for Features, Departments, and Columns pair page numbers, deks, and contributors, while category tabs, a live title search, and a floating hover thumbnail make the page feel alive.
News — Masthead / Nameplate Variants
A nameplate variant gallery for a fictional daily, built on an editorial newsprint design system in Playfair Display and Inter. Five distinct mastheads — a classic centered broadsheet with a Latin motto and flanking date and price, a lean left-aligned modern wordmark, a condensed all-caps tabloid over a red banner, a heavy gothic plate with small-caps strips, and an airy tracked magazine treatment — each frame a live front-page preview with hairline rules, edition lines, and a dateline. Vanilla JS switches variants and edits the paper name live.
News — Multi-column Flow Grid
A newsprint-style article layout where real editorial copy flows continuously across one to four CSS columns. Live controls reflow the text instantly — set the column count, drag the gap wider or tighter, toggle hairline column rules, and switch between justified-and-hyphenated or ragged-right. Built with a spanning headline, drop-capped lead, captioned duotone press photos rendered purely in CSS, an inline pull quote, and a responsive collapse to a single column on narrow screens.
News — Newsroom Dashboard
A late-city newsroom CMS dashboard for the fictional Meridian Ledger, set in a cream newsprint palette with Playfair Display mastheads and a single accent red. A five-tile KPI strip counts up on view, a filterable publishing queue lists headlines with author, desk, status pills and schedule slots, a needs-attention rail surfaces breaking and awaiting-review items beside a duotone press photo, and an activity feed logs every move. Advancing a story through draft to published animates the queue, the counters and the feed.
News — Obituary / In Memoriam
A print-style obituary and In Memoriam component rendered as a bordered editorial card with a duotone portrait gradient, full name, life years, a serif tribute headline, dateline, and a drop-cap remembrance passage. Includes a survived-by and service details meta block, an interactive light-a-candle condolence counter, a share toast, and a compact column of secondary notices — all set on warm newsprint with hairline rules, justified columns, and a single restrained editorial red.
News — Opinion / Editorial Column
A self-contained editorial opinion column page in classic newsprint style, with a red OPINION kicker, serif headline and italic deck, a prominent columnist byline card built from a CSS portrait gradient, and a single elegant reading column featuring a drop cap, justified body type, and oversized serif pull quotes. Captioned duotone press-photo figures, an editor's note footer, and a more-from-this-columnist list complete the layout, while vanilla JavaScript powers a clap/recommend counter, native share with copy-link fallback, and a small toast helper.
News — Paywall / Subscribe Gate
A self-contained editorial paywall for the fictional Harbor Review, set in a warm newsprint palette with Playfair Display headlines and Inter meter copy. A waterfront investigation reads freely until its lower paragraphs fade into a gradient veil, where a subscribe gate card takes over — a free-article counter with pip indicator, a Monthly versus Annual billing toggle with a savings badge and live price, a benefits checklist, a sign-in link, and a red subscribe CTA. Vanilla JS tracks the free counter, swaps prices, and a subscribe toast unlocks the rest of the story.
News — Photo Essay / Visual Story
A full-bleed editorial photo essay from a fictional coastal paper, opening on a serif title spread and moving through twelve scroll-snapping plates of duotone press photography, each with an italic caption and credit line, interleaved with two-column text passages and an oversized pull quote. A sticky masthead frame counter tracks 01 of 12 with a thin red progress rule, keyboard and button navigation jump between plates, captions fade in on view, and clicking any frame opens a focus-trapped lightbox zoom — all in vanilla JS.
News — Pull Quote & Drop Cap Set
A self-contained editorial typographic specimen in classic newsprint style, pairing a justified reading column with a live compositor's panel that swaps four drop-cap treatments — raised, dropped three lines deep, a decorative red initial, and a boxed cap — against five pull-quote variants, from a centred rule-bracketed aside to a left-border accent, an oversized hanging quotation mark, a full-width ink banner, and an inset card. A reference plate grid, captioned duotone press photo, and vanilla JavaScript drive live style switching, keyboard-arrow controls, a one-click copy-snippet, and a small toast helper.
News — Q&A / Interview Layout
A magazine Q&A spread for the fictional Meridian Review, opening on a duotone subject portrait, an oversized Playfair headline, an italic standfirst and a drop-cap intro, then the conversation set as styled Q/A pairs — bold red interviewer prompts against serif answers — broken by a full-width pull quote and a duotone harbour figure. A sticky reader bar offers a text-size stepper and a jump-to-question mini-nav, while a sidebar fact box carries the subject's bio, a side pull quote and a key-facts list. Pure vanilla JS, no frameworks.
News — Section Index
An editorial section-index page for The Meridian Standard's World desk, built in the newsprint tradition — a double-rule masthead, a red section header, and a justified lead story with drop cap, pull quote, and captioned press photo. A two-column teaser grid pairs CSS-gradient imagery with kickers, deks, and datelined bylines, while a numbered Most Read sidebar, Editor's Picks, and a briefing signup sit alongside. Sub-section tabs filter the grid by region and a load-more control reveals further dispatches, all with toast feedback and keyboard support.
News — Standard Article
A self-contained editorial article page for the fictional Meridian Ledger, set in a warm newsprint palette with Playfair Display headlines and Inter meta. It pairs a red kicker, an oversized serif headline and italic deck with a byline row of author, dateline, read-time and share controls, a duotone captioned hero, justified multi-column body with a red drop cap, a floated related-coverage box, an oversized pull quote, and a three-card More in Climate row. Vanilla JS drives a reading-progress bar, share toasts and a text-size control.
News — Sticky Article TOC + Progress
A long-read editorial layout for the fictional Harbor Dispatch that pairs a justified, multi-column feature with a sticky table-of-contents rail. The TOC lists every section with a numbered index, highlights the active section as you scroll via IntersectionObserver, and carries its own reading meter and minutes-left note. A thin red progress bar tracks the whole page, TOC clicks smooth-scroll and move focus for accessibility, and a back-to-top button appears once you are well into the story. Built with Playfair Display, Inter and vanilla JS only.
News — Tabloid / Popular Daily Landing
A loud, high-contrast tabloid front page for the fictional Daily Blast in black, bold red and screaming yellow. A sticky breaking-news ticker rotates headlines, a half-screen all-caps splash sits over a duotone press photo with a red EXCLUSIVE flash, and a yellow DON'T MISS strip carries a paged teaser carousel. Below sit a sensational secondary-story row, a showbiz and back-page sport rail with live scores, and a bold WIN giveaway box with email validation, drop caps, pull quotes and captioned figures throughout.
News — Two-page Spread
A fictional long-read magazine feature laid out as a true two-page spread: an oversized Playfair Display headline crosses the center gutter, a duotone full-bleed press photo anchors one page while a multi-column body carries a red drop cap and an oversized serif pull quote on the other. Running folios, a kicker, byline with dateline and read-time, and a newsprint fact box complete the art direction. Flip between spreads and toggle a column-grid overlay, all in vanilla JS.
Real Estate — Affordability Estimator
An editorial home-affordability estimator that turns annual income, monthly debts, down payment, interest rate, loan term and a debt-to-income target into a recommended purchase-price range. A live semicircular gauge tracks the maximum price, while result cards break out the estimated monthly housing payment, loan amount, required income and down-payment share. Matching sample listings flag whether each fictional home fits the buyer's band, with a per-home monthly payment preview.
Real Estate — Agent Dashboard
An editorial real-estate agent dashboard with animated KPI cards for active listings, new leads, pending deals, and monthly GCI, plus a leads pipeline summary, a filterable list of active listings showing status and view counts, a today's follow-ups checklist, and a recent-activity feed. A serif-led, brass-accented sidebar layout simulates premium listing photography with CSS gradients. Built with plain HTML, CSS, and vanilla JavaScript — no frameworks, no build step, fully responsive.
Real Estate — Agent Profile
An editorial personal-brand page for fictional broker Marguerite Alcott of Halford and Vane. A portrait hero pairs name, title and brokerage with call, email and share actions, followed by count-up career stats, a bio with areas served, and a tabbed listings grid that switches between active and sold homes. A self-advancing reviews carousel and a validated contact form round it out, with toast feedback on tour requests and submissions.
Real Estate — Brokerage Dashboard
An editorial brokerage admin dashboard that opens with a four-metric KPI row for total volume, gross commission, units closed, and average days on market, each carrying a period delta and inline sparkline. A brass-toned SVG area chart traces closed sales volume, a status donut splits the active book, a top-agents leaderboard ranks producers by volume with share bars, and a recent-closings feed lists settled deals. A date-range toggle re-renders every figure with animated count-ups and a redrawn chart.
Real Estate — Brokerage Landing
An editorial marketing landing page for the fictional Harbor & Vale brokerage, pairing a serif hero and listing-search bar with an animated stats strip, a swipeable featured-listings carousel, a why-us feature trio, an agent spotlight grid, client testimonials, and a valuation CTA. Vanilla JS drives the carousel, save-to-shortlist toggles, count-up stat counters, and toast feedback for searches, contact, and CTA submissions across a fully responsive layout.
Real Estate — CMA / Comp Report
A print-style Comparative Market Analysis laid out like an editorial brokerage report. A subject-property masthead pairs simulated listing photography with beds, baths, square footage and the preparing broker, then a table of fictional comparable sales lists sold price, dollars per square foot, beds and baths, sold date, distance and a signed dollar adjustment. Toggling any comp in or out instantly recomputes the adjusted average, the suggested low, target and high list range, the range slider and a price-distribution bar chart.
Real Estate — Commercial / Industrial Landing
An authoritative B2B landing page for a fictional commercial and industrial real-estate brokerage, built with vanilla HTML, CSS, and JavaScript. A steel-and-navy hero with animated deal counters fronts a featured sale-leaseback asset, while asset-class tabs switch a sortable listings table showing cap rate, NOI, price per square foot, and for-sale or for-lease badges. An investment-highlights strip, a six-card brokerage-services grid, and a validated request-an-offering-memorandum form round out the structured, no-nonsense layout.
Real Estate — Compliance / Document Tracker
An editorial real-estate compliance tracker that follows required documents across every open transaction — listing agreement, seller disclosures, inspection report, appraisal, and closing statement — each with a colour-coded status of Missing, Pending Review, Approved, or Expired, a due date, and contextual upload or review actions. A per-transaction progress ring recomputes as statuses change, and an incomplete-only filter surfaces deals still needing attention. Plain HTML, CSS, and vanilla JavaScript, fully responsive.
Real Estate — Lead Card
An editorial buyer-lead card for a real-estate CRM pipeline, with initials avatar, phone and email contacts, a source tag, budget and desired-area chips, a colour-coded status pill that cycles through New, Contacted, Touring and Offer, a star priority toggle, last-activity timestamp, and quick call, email and inline-note actions. Built with semantic HTML, a warm ivory-and-brass palette, faux listing photography rendered in pure CSS, and dependency-free vanilla JavaScript.
Real Estate — Listing Card
An editorial real-estate listing card built with vanilla HTML, CSS, and JavaScript. Each card pairs a gradient property photo with a carousel dot row, a persistent favorite-heart toggle, and a status ribbon for new, for-sale, or pending homes. A serif price headline sits above a beds, baths, and square-footage stat row, an address line, and an agent and brokerage footer. Shown as a responsive four-card grid with hover lift, smooth micro-interactions, and accessible keyboard controls.
Real Estate — Listing Detail
A polished, editorial property detail page for a fictional luxury listing. It pairs a swappable hero gallery with thumbnails and a keyboard-friendly lightbox, a price and key-facts header, a description with read-more, a features grid, a stylized neighborhood map, rated nearby schools, an interactive monthly-payment estimator, and an agent contact card with a request-a-tour form. Built with semantic HTML, layered CSS, and vanilla JavaScript — no frameworks, no network.
Real Estate — Listing Editor
An editorial listing editor for a fictional residential brokerage, built in vanilla HTML, CSS and JavaScript. Compose a property from a drag-to-reorder photo grid with an automatic cover badge, address, list price, beds, baths, square footage, property type, year built and a character-counted description, then tick a features checklist. A sticky preview card rebuilds live as you type — simulated architectural photography, price and status badges, a spec row, feature chips and a listing agent. Save and publish run inline validation and a confirmation toast.
Real Estate — Luxury Estates Landing
A cinematic luxury-estate landing page with a full-bleed gradient hero, a refined inquiry bar, and an auto-rotating featured-estate switcher. A curated collection of premium listings reveals price on hover, filters by residence type, and animates in on scroll. A private-services desk, a bespoke advisor block with lifetime statistics, and an understated viewing-request form round out an editorial, invitation-only experience built in vanilla HTML, CSS and JavaScript.
Real Estate — Mortgage Calculator
An editorial real-estate mortgage calculator that estimates the true monthly cost of ownership for a fictional luxury listing. Adjust home price, down payment by amount or percent, loan term, interest rate, property tax, insurance and HOA dues, and watch an amortized payment recompute live. A segmented donut chart and tabular legend break the payment into principal and interest, taxes, insurance and association fees, alongside the loan amount, total interest over the life of the loan and the grand total of all payments.
Real Estate — Neighborhood Guide
An editorial neighborhood guide page for the fictional Maplewood Heights, pairing a serif display hero and lifestyle vibe tags with a four-stat market snapshot covering median price, price per square foot, days-on-market trend, and sale-to-list ratio. Animated walk, transit, and bike score dials fill on scroll, a filterable amenities list groups schools, parks, dining, and shops, and three featured listing cards offer save-to-favorites with toast feedback.
Real Estate — Offer Tracker
An editorial offer-management board for a single listing, pairing a photographic property header with a live stack of buyer offers. Each row shows the buyer, agent, bid amount with over- or under-ask delta, cash or financed badge, contingency terms, status pill, and timestamp. A counter-offer composer logs the seller's response, while accept, reject, and reopen actions recompute the highest and leading offer, summary stats, and the spread against list price in real time.
Real Estate — Saved Searches / Alerts
An editorial saved-searches and alerts panel for a private-client real-estate brand. Buyers create named alerts from area, property type, minimum beds and a price ceiling, then tune each one to instant, daily, or weekly notice. Every saved row shows criteria chips, a faux listing photo, a live new-match badge, and quick controls to clear matches, mute, or delete. Vanilla JS handles creation, frequency toggles, badge clearing, and a small toast on save.
Real Estate — Schedule Tour / Open House
An editorial schedule-a-tour widget for a property listing, pairing a brass-accented serif header with a polished booking panel. Visitors switch between in-person and video showings, scan a seven-day date strip, and select from available time-slot chips while booked times are disabled. Contact fields gate a live summary and confirm button, and a separate open-house list lets guests RSVP. Built with semantic markup, ARIA roles, and vanilla JavaScript — no frameworks or network required.
Real Estate — Search Listings
An editorial real-estate search page for the fictional Verdant Estates. A sticky filter bar drives price range, beds, baths, home type and a more-filters panel with status chips; results render as refined gradient-photo listing cards showing price, beds, baths, sqft, address and a status badge. A simulated map panel on the right shows clickable price pins that highlight and scroll to the matching card, while a sort dropdown, live results count and save-search button keep everything synced in memory.
Real Estate — Suburban Family Homes Landing
A warm, family-friendly suburban real-estate landing for the fictional Maple & Meadow brokerage, pairing a golden-hour hero rendered in pure CSS gradients with a neighborhood-and-beds search bar, a ranch/colonial/craftsman home-style chooser, and a featured-homes grid where every listing carries price, status, bed-bath-sqft specs, save-to-shortlist hearts, and a color-coded school-rating badge. Vanilla JS filters listings by style and a school-rating slider, with a community-life section, friendly tour CTA, and toast feedback throughout a fully responsive layout.
Real Estate — Team / Agent Roster
An editorial brokerage admin for managing a sales team — a responsive roster of agent cards showing avatar, role, team, active listings, YTD volume and active or inactive status. Search by name, role or region, filter with team chips and a status segmented control, fire per-row profile, message and overflow actions, and invite a new agent through an accessible modal that validates input and adds a pending desk to the roster with a confirmation toast.
Real Estate — Transaction Pipeline
An editorial real-estate deal board built with vanilla HTML, CSS, and JavaScript. Six stages run from New Lead through Showing, Offer, Under Contract, Closing, and Closed, each holding deal cards with a gradient property thumbnail, address, price pill, client avatar, days-in-stage badge, and a closing-checklist progress bar. Drag a card between columns and the per-stage counts and dollar volume recompute live, while keyboard and tap-to-move controls advance deals without a mouse. Self-contained, responsive, and accessible.
Real Estate — Urban Condo Tower Landing
A sleek, dark urban condo-tower landing page for the fictional Meridian Heights development. A glassy chrome-and-blue hero frames a gradient tower silhouette and a live floor-availability ticker, followed by a residences grid spanning studio to penthouse with mini floorplans and from-prices, an amenities strip of icon tiles, and an interactive floor selector that reveals remaining units per floor band with status badges. A validating register-interest form closes the page with toast feedback.
Real Estate — Vacation / Short-term Rental Landing
A bright, breezy single-page landing for a fictional vacation-rental brand in a sand, teal, and coral palette. Features an airy escape hero with a destination and dates search, a guests stepper popover, a filterable getaways grid with gradient property photos, nightly prices, ratings and sleeps badges, a scrollable destinations carousel, a host CTA with a live earnings estimator, and trust highlights — all vanilla HTML, CSS, and JS with toast feedback.
Real Estate — Virtual Tour Viewer
An editorial 360-style virtual tour viewer for the fictional Maison Laurel listing. A large stage renders each room as warm CSS-gradient photography with pulsing hotspots, drag-to-pan and keyboard panning, a play-autotour mode that gently sweeps and advances, and a fullscreen toggle. A thumbnail rail and a synced floor-plan mini-map with a you-are-here marker let visitors jump between the Living Room, Kitchen, Primary Suite, and Spa Bath, with a per-room detail panel and agent booking card.
Salon — Appointment Detail Card
A luxe, editorial appointment detail card for boutique salons: client avatar with VIP badge and phone, itemised service plus add-ons with line prices, stylist, date, time and duration, and a colour-coded status pill. One primary button advances the booking from Confirmed to Checked-in to In service to Done, while Reschedule and Message fire elegant toasts. A live subtotal, member discount and grand total complete the footer.
Salon — Classic Barbershop Landing
A heritage barbershop marketing landing for the fictional Iron and Oak Barber Co., cut from an oxblood, walnut, and cream palette with a strong Roboto Slab display over an Inter UI. It pairs a sticky nav with an animated CSS barber-pole, a bold slab-serif hero, count-up stats, a filterable services board with a live ticket builder and running total, tappable barber cards that pre-fill the booking form, a dark heritage band, a validating appointment request with an open-or-closed indicator, and tasteful toast confirmations.
Salon — Client Notes
A luxe client-notes panel for a boutique salon stylist. A profile header pairs an initialed avatar with name, VIP status and live visit count, while a red-flagged callout keeps allergies and sensitivities impossible to miss. Removable preference chips capture quick cues, a product-history list tracks formulas and home care, and a timestamped notes timeline prepends each new entry newest-first. Everything updates in memory with live counts and a gold toast on every save.
Salon — Client Portal
A luxe client account portal for a boutique salon. A warm greeting header pairs with a Lumière Rewards loyalty pill and a live account summary. Tabbed sections move between upcoming appointments with reschedule and inline-confirm cancel, a searchable past-visit history with one-tap rebook, and saved favorite services and stylists with toggleable hearts. A your-stylist-recommends rail and live counts keep everything feeling personal, current, and quietly premium.
Salon — Color Formula Tracker
A per-client hair-color formula tracker for a boutique color bar, pairing a client header with a live formula builder where shade rows carry tinted swatches, parts and developer volume, plus and minus controls, and a gilded ratio bar that recomputes total color, mix ratio and estimated weight on every keystroke. Technique and process-time fields sit beside a save action, while a history rail lists past formulas with swatches and result notes you can load straight back into the builder. Editorial serif, soft toasts.
Salon — Day Spa Landing
A serene, full marketing landing for Verdé Day Spa, dressed in a soft sage, sand, and bronze wellness palette with airy whitespace and Cormorant Garamond display type over Inter. It pairs a translucent sticky nav and active-link scroll spy with a calm serif hero, count-up stats, a six-ritual services menu, a dark how-a-visit-flows three-step band, a tranquil mosaic gallery, an interactive gift-card builder with live totals and validation, a live open or closed hours indicator, and gentle reveal-on-scroll throughout.
Salon — Gift Card Purchase / Redeem
A luxe, editorial gift-card experience for a boutique salon. The Buy tab renders a rose-gold card that updates live as you set an amount preset or custom value, recipient name, personal note and delivery date, then totals the purchase with add-to-cart and checkout toasts. The Redeem tab validates a code, shakes on errors, and reveals the balance with an animated count-up plus issue details. Vanilla HTML, CSS and JS — fully responsive and keyboard accessible.
Salon — Loyalty & Referral Card
A boutique salon loyalty and referral panel with a gold-accented points progress bar climbing toward the next reward tier, badge milestones from Petal to Lumiere, a punch-style visit stamp card, a list of redeemable perks whose Redeem buttons deduct points live, and a referral block with a copy-to-clipboard code plus running invites-sent and joined counts. Editorial serif display, clean sans body, soft toasts.
Salon — Med-Spa / Aesthetic Landing
A physician-led med-spa marketing landing for Maison Lumière Aesthetics, dressed in a pearl, champagne and soft-pink palette with clinical Cormorant Garamond display type over Inter. It pairs a translucent sticky nav and a luminous hero with a live consultation card, a filterable twelve-card treatment menu, a dark animated outcomes band, a medical safety charter, a featured provider spotlight, and a validating consultation request form with elegant toast confirmations — all reveal-on-scroll and responsive to 360px.
Salon — Modern Hair Salon Landing
A luxe, editorial landing page for a modern hair salon, built in vanilla HTML, CSS and JavaScript. It pairs a Cormorant serif display with clean Inter UI across a sticky nav, a striking serif hero with a Book CTA, a signature services menu, a stylists strip, an interactive before and after slider with a lookbook, a rotating testimonials carousel, live hours with an open or closed indicator, and a working appointment request form with a live plan total and toasts.
Salon — Nail Bar / Studio Landing
A trendy, Instagrammable marketing landing for the fictional Polish and Petals nail studio, dressed in a blush, lavender, and chrome palette with a friendly rounded Poppins type system. It pairs a blurred sticky nav and accessible mobile menu with a bubbly hero of floating blob shapes, count-up stats, and an inline quick-booking card whose total updates live. Below sit a tappable services grid, a filterable gradient nail-art gallery with likeable tiles, a copyable offers band, a stylist strip, and playful toast confirmations.
Salon — Portfolio / Gallery
An image-forward portfolio page for Maison Lumière Salon that presents fifteen recent looks as a masonry-style grid of gradient work tiles, each revealing the stylist and service on hover. Category chips with live counts filter cuts, color, updos and nails in place, while a running result line stays in sync. Clicking any tile opens an elegant lightbox with previous and next navigation, the full caption, and a Book this look action that fires a refined toast confirmation.
Salon — POS Checkout
A luxe, editorial point-of-sale checkout for a boutique salon. Tab between Services and Retail, tap to add items, and adjust quantities with inline steppers while an itemized ticket tallies live. Set an adjustable tip from percent presets or a custom amount, apply a promo code, and pick a payment method — Card, Cash, or Gift card. The Charge button confirms with an approval overlay, change due for cash, and a toast. Vanilla HTML, CSS and JS, fully responsive and keyboard accessible.
Salon — Retail Inventory
A back-office retail inventory screen for a boutique salon. Four summary cards track active SKUs, low and out-of-stock counts and total retail value, while a sortable table lists every shampoo, color tube and styling tool with brand, SKU, par level, supplier and shelf price. Inline plus-minus steppers adjust on-hand counts and recompute each status pill and row highlight live, filter tabs and a search box narrow the shelf, and a Reorder action fires on anything running low.
Salon — Revenue per Stylist + Service Mix
An owner-grade salon analytics dashboard with KPI cards for revenue, bookings, average ticket and retail share, each carrying trend deltas against the prior period. A pure-CSS bar chart ranks revenue per stylist, a conic donut breaks down the Hair, Color, Nails and Spa service mix, and a top-performers list sits beside a recent-transactions table. A Today, Week and Month segmented control swaps precomputed datasets with animated counters, all wrapped in a luxe rose-gold and cream editorial aesthetic.
Salon — Salon Landing
A complete boutique-salon marketing landing for Maison Lumière, dressed in a rose-gold and matte-black editorial palette. It pairs a translucent sticky nav and smooth-scrolling anchor links with a serif hero, animated stat counters, a six-card services menu, a dark signature-treatments band, tappable stylist cards that pre-fill the booking form, a pull-quote, a CSS gallery row, a live open or closed indicator, and a validating appointment request form with elegant toast confirmations.
Salon — Service + Stylist + Time Booking
A luxe three-step booking flow for a boutique salon. Guests browse a categorized service menu with durations and starting prices, choose a stylist from rated artist cards or opt for the next available, then lock in a day and slot from a scrollable date strip and live availability grid. A sticky summary rail tracks the running selection, total duration and price, gating each step until it is valid and flipping to an elegant confirmation card with a reference number and toast.
Salon — Service Catalog
An editorial service menu for Maison Lumière Salon presenting fourteen hair, color, nail, spa, and brow rituals in a refined typographic card grid. Pill-style category chips with live counts filter the list, a search box narrows treatments by name in real time, and a result tally stays in sync. Each entry carries a short description, duration, dotted-leader price line with optional from pricing, and a Book button that fires an elegant toast confirmation.
Salon — Services & Prices
An editorial services and prices page for Maison Lumière Salon, presented like a printed atelier menu. Five grouped sections span hair, colour, treatments, nails and spa across roughly twenty realistic services, each set with a serif heading, duration, dotted leader line and optional from pricing. A sticky section nav scroll-spies as you read, tapping any row adds it to a live running estimate, and a luxe booking band plus gold-flecked toasts complete the boutique feel.
Salon — Stylist Day Calendar
A single-stylist day calendar for a boutique salon, rendered as a scrollable vertical time axis from nine to six. Appointment blocks are sized by duration and colour-coded by service, with break slots and tappable open gaps. A swipeable date strip switches days while a live summary tracks booked hours, revenue and chair utilisation. Selecting a block reveals client, service, price and stylist notes in an editorial detail panel.
Salon — Stylist Profile
An editorial stylist profile card for boutique salons and barbershops, pairing a gradient initials avatar with name, role, star rating and specialty chips. A short bio, animated stats row for years, clients and rebook rate, and a portfolio gallery of gradient tiles that enlarge in a keyboard-friendly lightbox. A gold Book with Aria call to action and a Follow toggle fire elegant toasts, all in a self-contained vanilla HTML, CSS and JavaScript snippet.
Salon — Team / Stylists
An editorial team page for boutique salons and barbershops, presenting a responsive grid of stylist cards with gradient initials avatars, role, star rating, specialty chips and an italic tagline. A live specialty filter and name search narrow the studio in real time, each card carries a gold Book action that fires an elegant toast, and a dark closing band invites new artists to apply. Built as one self-contained vanilla HTML, CSS and JavaScript snippet.
Salon — Tip & Commission Split
A trustworthy, editorial tip and commission calculator for a boutique salon. Enter a service total, set gratuity by percent or flat amount, and slide a commission rate to see the stylist commission, gratuity, salon share and take-home resolve instantly in a tidy ledger with a stacked-bar visualization. A pooled-tip mode splits a shared gratuity across the team by worked hours or evenly, with add and remove stylist rows and live per-person payouts. Vanilla HTML, CSS and JS — responsive and keyboard accessible.
Wiki — API Reference (endpoints · params)
A Stripe-style REST API reference page for the fictional Aurora DB service, with a persistent left nav of resources and endpoints, a readable main column, and a sticky dark code panel. Each endpoint block pairs an HTTP method badge and path with a parameters table and a responses section of status badges. The panel offers cURL, JavaScript and Python tabs, copy buttons, and a collapsible JSON response tree. JS adds an endpoint filter, a required-only param toggle, deep-link anchors and TOC scrollspy.
Wiki — Article Editor (markdown + preview)
A genuinely working markdown article editor in a clean knowledge-base aesthetic. A formatting toolbar wraps or inserts markdown at the selection, a split pane pairs a mono source textarea with a live serif preview rendered by a small from-scratch markdown engine, and a metadata bar carries the title, edit summary, and tags. Synced scrolling links the panes, write/split/preview modes reflow the layout, keyboard shortcuts drive the toolbar, and a footer tracks word count with save-draft and publish actions plus an unsaved-changes indicator.
Wiki — Breadcrumb + Related Links
A docs-style wayfinding cluster for a deep reference page. A breadcrumb trail (Home › Guides › Security › Authentication › OAuth 2.0) links every intermediate level, marks the current page, collapses its middle into an expandable ellipsis when space runs out, and exposes a keyboard-accessible sibling switcher on the current crumb. Below sits a related-articles card grid and a previous/next pager with real titles, plus a scroll-spy table of contents — all self-contained vanilla JS.
Wiki — Callout / Admonition Blocks
A complete set of documentation callout blocks for a knowledge base, set in a clean white Aurora DB handbook shell with a left nav, a centered serif article column, and a right-rail table of contents. Five semantic variants — Note, Tip, Info, Warning, and Danger — each carry a left accent border, a tinted background, an inline SVG icon, a bold title, and rich body content with inline code and lists. A foldable details admonition collapses long supplementary content, a code-bearing Tip ships a copy button, and a live builder lets you pick a type and type a title and body to preview the exact markup.
Wiki — Category / Portal Page
A dense, library-catalog category portal for a fictional distributed-systems wiki, built in a clean white knowledge-base palette. A header carries the category name, a serif description and live article counts, followed by a sticky A–Z jump bar, encyclopedic pages grouped under multi-column letter headings, a subcategory tile grid and a featured-article highlight card. The A–Z bar smooth-scrolls to letter groups, a search box live-filters every list, and a list/grid density toggle reflows the catalog. Inter, Source Serif 4, JetBrains Mono and vanilla JS only.
Wiki — Collapsible Doc Tree Nav
A dev-docs style collapsible documentation tree sidebar with nested sections, expand and collapse chevrons, indented child links, and a current-page highlight. A sticky filter box live-searches the tree, auto-expands matching branches, and highlights matched text. Keyboard arrows move between visible rows and Enter opens a page. On small screens the sidebar becomes a slide-in drawer beside a readable serif article column.
Wiki — Command-K Instant Search Overlay
A Command-K instant-search palette for the fictional Aurora DB knowledge base. Pressing the keyboard shortcut or the search trigger opens a centered modal with a search field, live fuzzy-filtered results grouped into Pages, API, Recent and Actions, each with an icon, subtitle and type badge. The active row tracks the keyboard, arrows wrap top to bottom, enter opens with a toast, recent searches persist for the session, and a focus trap plus footer keyboard hints round it out. Inter, Source Serif 4 and vanilla JS only, fully responsive.
Wiki — Developer Docs Landing
A polished developer-documentation home for the fictional Aurora SDK, in the Stripe / Vercel / Tailwind docs mold: a grid-lit hero with product name, tagline, a big search-docs trigger and a copyable install block with package-manager tabs, a grid of popular guides and reference topic cards with drawn icons, a language-tabbed code sample showcase, a strip of CSS-drawn SDK logos, and a footer. A header light/dark toggle persists the real page theme, copy buttons work, and a Cmd+K command palette searches a fictional doc index.
Wiki — Docs Page (dev-docs layout + code)
A polished developer-docs page in the Stripe and Tailwind docs vein, built as a self-contained three-column shell for a fictional Aurora DB knowledge base. A collapsible doc-tree sidebar sits left, the readable serif article column runs down the center with breadcrumbs, callouts, tables, and syntax-highlighted-looking code blocks, and a scrollspy table of contents tracks the right rail. Code blocks carry a copy button and a curl/JavaScript/Python tab switcher, and a header light or dark toggle persists across reloads.
Wiki — Encyclopedia Landing (Wikipedia-style)
A Wikipedia-style main page for the fictional Compendia encyclopedia, built in HTML, CSS, and vanilla JS. A welcome banner with an animated article-count stat, a central search bar with a live preview dropdown, a two-column Featured article plus Did you know and In the news layout, an On this day list, a CSS-drawn featured picture, a colour-coded portals grid, sister-project tiles, and a languages footer band. Shuffle buttons rotate the featured article and facts, with toasts and a slash keyboard shortcut.
Wiki — Fandom / Game Wiki Landing
An immersive Fandom-style landing page for the fictional Verdant Empire game universe, with a dramatic CSS-drawn parallax key-art hero, a big lore search bar that live-previews matching characters, factions, locations, and relics, an animated wiki-stats bar, featured-lore category panels with hover-glow, an auto-rotating featured-character spotlight, a trending-pages ranking, a self-updating recent-activity feed, and a Discord community band — built entirely in semantic HTML, CSS, and vanilla JavaScript.
Wiki — Footnotes / Citations Block
A knowledge-base article body with inline citation superscripts that link down to a numbered references section. Hovering or focusing a superscript opens a small popover previewing the author, title, source, and year, with a jump action and a copy-citation button. Clicking smooth-scrolls to the matching reference and highlights it, while caret back-links return you to the exact spot in the prose. References render as formatted entries with external-link icons and per-entry copy buttons, all over a clean white wiki layout with sidebar nav and a sticky table of contents.
Wiki — Infobox / Fact Sidebar Card
A Wikipedia-style infobox: a right-floated fact card that summarises an article at a glance. A header, a CSS-drawn emblem, and label/value rows grouped into Overview, Technical details, and Links sections with subtle dividers and footnote superscripts. Vanilla JS adds collapse/expand toggles per section, a show-more-fields expander, a copy-permalink button on the article title, plus a responsive sidebar drawer. Clean ink-on-white with link-blue values and accessible, keyboard-friendly controls.
Wiki — Internal Company Handbook Landing
A friendly internal company-handbook home in the Notion and GitLab-handbook spirit, built with plain HTML, CSS and vanilla JavaScript. It pairs a warm welcome hero, a live search preview with keyboard navigation, and a time-of-day greeting with collapsible quick-link cards for Onboarding, Policies, Benefits, Engineering and People Ops, plus new-this-week updates, most-viewed pages and a who-to-ask contacts strip using CSS-drawn avatars.
Wiki — KB Dashboard (top articles · stale flags)
A polished knowledge-base admin dashboard with animated count-up KPI cards for total articles, monthly views, average helpfulness, and stale flags, each with trend deltas. An interactive CSS and SVG chart plots views and searches over time with a 7d, 30d, and 90d range toggle. Below sit a sortable top-articles table, a needs-attention panel that flags stale, low-rated, and broken-link pages with resolve or dismiss actions, and a live recent-edits activity feed. Built with clean white docs styling, semantic landmarks, and a responsive drawer sidebar.
Wiki — Knowledge-Base Home / Portal
A welcoming knowledge-base home and help-center portal with a big central search bar that live-previews matching articles in a dropdown, popular-search chips that run demo queries, a responsive grid of topic cards with article counts and hover-lift, a ranked popular-articles list, a four-step getting-started path, and a support footer band — built in clean semantic HTML, CSS, and vanilla JavaScript with full keyboard navigation.
Wiki — Revision History / Diff View
A MediaWiki-style revision history and diff viewer built with plain HTML, CSS, and vanilla JavaScript. Each revision row shows a timestamp, editor avatar, edit summary, byte delta, and tags like minor, revert, or bot. Radio selectors pick an older and newer revision, and the comparison panel renders a live line-by-line diff with word-level highlighting. Toggle between inline and side-by-side layouts, restore any version with a toast confirmation, and filter out minor or bot edits.
Wiki — Search Results (faceted)
A faceted knowledge-base search results page for the fictional Aurora KB. A sticky search bar echoes the active query and live result count, a left facet rail filters by result type (Article, Doc, API, Tutorial), section, and last-updated window with per-option counts, and a sorted list of result cards shows highlighted title and snippet matches, a breadcrumb path, a colour-coded type badge, and a relative last-updated stamp. Checkboxes filter the list live, an active-filters chip row supports one-click removal and clear-all, sort toggles Relevance or Newest, and an empty state appears when nothing matches.
Wiki — Sticky TOC + Scrollspy
A clean knowledge-base article layout for the fictional Aurora DB storage engine, pairing a readable serif body column with a sticky right-rail table of contents. The TOC is generated from the article headings, nests h3 anchors under their h2 sections, and highlights the section you are reading via an IntersectionObserver, auto-scrolling to keep the active entry in view. A top reading bar and a TOC meter track scroll depth, clicks smooth-scroll and move focus, and the rail collapses on narrow screens. Built with Inter, Source Serif 4 and vanilla JS only.
Wiki — Support / Help Center Landing
A reassuring, searchable help-center landing in the Zendesk / Intercom mold, built with vanilla HTML, CSS and JavaScript. A hero with a large how-can-we-help search bar live-filters an article preview dropdown, trending chips run demo searches, a category grid links topics with article counts, popular articles and an accessible FAQ accordion answer common questions, a was-this-helpful widget collects feedback, and a contact row offers chat, email and a status page. Calm teal accent, soft shadows, fully responsive.
Wiki — Tutorial / Guide (step sections)
A polished knowledge-base tutorial page that walks through deploying the fictional Project Nimbus storefront to the Verdant Edge network on Aurora DB. It pairs a persistent docs sidebar and a serif body column with a vertical numbered step list — each step carrying prose, a copy-able code block, a mark-complete checkbox, and a collapsible show-solution panel. A sticky progress sidebar tracks completion with a live progress ring, clickable smooth-scroll step links, scrollspy highlighting, and a next-guide call to action.
Wiki — Version / Language Switcher
A self-contained docs header cluster pairing an accessible version dropdown (v3.2 latest, v3.1, v3.0, v2.x with latest and EOL badges) and a language dropdown (English, Español, 日本語, Deutsch, Português). Selecting an older release raises a dismissible outdated-version banner with a one-click jump to latest, while picking a language swaps a localized last-updated string. Both menus open with click or keyboard, support arrow, Home, End, Enter and Escape navigation, manage focus correctly, and close on outside click.
Wiki — Wiki Article (sidebar · TOC · body)
A full encyclopedia-style article page in a clean, dense knowledge-base aesthetic. A persistent left sidebar carries the logo, a live nav filter, section links, and a language list; the centered serif body opens with a lead paragraph and a right-floated, collapsible infobox, then runs through layered sections with inline links, a CSS-drawn Raft-quorum figure, syntax-tinted code blocks, note and caution callouts, a comparison table, references, and category chips. A sticky right-rail table of contents tracks the reader with scrollspy.
Hotel PMS — Check-in Flow
Three-step check-in wizard: lookup the reservation, verify guest identity and assign room/keys, settle deposit and print the folio.
Hotel PMS — Check-out & Folio Settlement
Front-desk check-out screen — itemised folio (room, F&B, mini-bar, spa, city tax), split / transfer charges, settle balance with multiple methods, generate invoice and release the room.
Hotel PMS — Front Desk Dashboard
Property Management System dashboard for the front desk: today's arrivals · in-house · departures with occupancy KPI band, live activity feed and quick-action sidebar.
Hotel PMS — Night Audit Report
End-of-day audit screen showing occupancy, revenue by department, no-shows, posting summary and discrepancies — with a Run audit pipeline that posts room charges and rolls business date.
Hotel PMS — Reservation Edit
Modal/dialog widget for editing an existing reservation: dates · room category · rate plan · guests · special requests, with live price recalculation.
Hotel PMS — Room Rack / Tape Chart
Classic hotel tape chart — rooms on the Y axis, 14 days on the X axis. Coloured stays render as blocks across nights, with status (confirmed · in-house · checkout · maintenance) and click-to-inspect.
Hotel PMS — Walk-in Booking Sheet
Compact sheet for a guest who walks up to the front desk: single-screen form for nights, room category, guests, basic details, with available-room pills and instant rate quote.
Admin — Inventory Tracker
Restaurant inventory: searchable stock table with par-level bars, low-stock alerts, supplier column, last-delivery dates, inline reorder action and bulk export.
Admin — Menu Editor
Menu CRUD: category sidebar with item counts, drag-orderable item list, right-side edit panel with price, description, allergens, modifier groups and visibility toggle.
Admin — Reservations Manager
Reservation manager — list / calendar / waitlist tabs, today's bookings with seating status, party-size filter, walk-in & no-show buttons and an enquiry/waitlist sidebar.
Admin — Sales & KPI Dashboard
Restaurant manager dashboard — covers, average check, turn time, 7-day revenue SVG line chart, top items list, hourly heatmap, today's reservations preview.
Admin — Staff & Shift Roster
Weekly staff schedule grid — 12 staff across 7 days · 3 service blocks · color-coded by role · drag-to-add hint · per-staff weekly hours total · role filter.
Allergy & Diet Filter
Multi-select allergen filter with avoid/prefer chips, live count of safe dishes, and an inline result list that explains why each dish was hidden.
Bar Display System
Single-column KDS for the bar — drink tickets stack with live age timer, ice/garnish flags, and a Bump action. Compact for a narrow under-counter screen.
Call Waiter · Service Request
Tableside service request panel — six common requests (water, bread, menu, allergy, bill, photo), live status pill, cancel before staff confirm, and a short note field.
Customer Checkout
Three-step restaurant checkout — pickup vs delivery, time slot picker, contact + payment with tip presets — and a confirmation success screen.
Digital Menu Board (TV Signage)
TV-resolution restaurant menu board — three rotating panels (Today's specials · Tacos & bowls · Drinks & sweets) with timed crossfade, live clock, and a marquee bottom strip.
End-of-Shift Report
Printable X/Z shift report: net sales, tax, tips, voids, payment-method breakdown, cash drawer count, server-by-server tally. Print-ready with `@media print`.
Farm-to-Table Landing — Sage & Stone
Earthy farm-to-table landing — sage + bone + clay palette, Fraunces display + Inter Tight body, organic curves, weekly garden harvest tally, and a no-menu tasting reveal.
Italian Trattoria Landing — Trattoria del Forno
Rustic trattoria landing — cream + tomato + olive, Playfair Display + Dancing Script handwritten accents, checkered tablecloth divider, Italian menu copy.
Kitchen Display System (KDS)
Restaurant Kitchen Display — four-column ticket flow (New · Cooking · Ready · Served) with age-coloured cards, line check-off, advance / recall actions, and a live timer.
Location & Hours
Restaurant Find Us page — SVG map placeholder with pin, hours table with current-day highlight, transit + parking cards, contact form, and a print-friendly directions card.
Loyalty / Rewards Card
Customer loyalty card with 10-visit progress, animated stamps, 3-tier rewards ladder, faux barcode and member meta. Tap a stamp to flip — earn the reward at 10.
Menu Item Detail
Restaurant dish detail card with image area, allergen chips, modifier picker (size, doneness, extras), quantity stepper and add-to-order CTA with live total.
Mexican Cantina Landing — La Catrina
Vibrant cantina landing — terracotta + cobalt + mustard, Fraunces display, CSS papel picado strip, taco menu, mezcal flight and Spanish-language copy.
Modifier Sheet (Bottom Drawer)
Standalone modifier picker bottom sheet — required single-select, multi-select with caps, +/− with per-modifier deltas, special instructions and live total.
Order Status Tracker
Customer-facing order tracker — Sent → Cooking → Ready → Out for delivery → Delivered stepper with live ETA, courier card, simulated tick-through, and item summary.
POS — Order Entry Terminal
Full restaurant POS terminal with category sidebar, menu grid, live ticket panel, modifier sheet, course splitter, and Send / Hold / Print / Pay actions.
POS — Payment Terminal
Restaurant payment terminal: cash / card / split tabs, tip presets, on-screen amount keypad, change calculator, and a confirmed-payment view.
POS Quick Order Pad
Staff-facing POS quick pad: category tabs, tap-to-add menu grid, running ticket panel with line items, qty steppers, modifiers and total. Built for touch.
Printable Receipt
Thermal-style restaurant receipt — header, line items with modifiers, subtotal/tax/tip/total, payment line, QR barcode placeholder and @media print styles for actual printing.
Private Events & Catering
Private dining and catering page — three package cards with capacity, sample menu, capacity table, FAQ accordion and an enquiry form with availability hint.
QR Mobile Menu
Mobile-first restaurant menu opened from a table QR code — sticky scroll-spy category bar, single-column dish list with chips, and a floating cart pill that opens a bottom-sheet order summary.
Reservation Booking Form
Restaurant reservation widget — date scroller, party-size stepper, time-slot pills with availability, occasion picker, contact form, and confirmation card.
Restaurant About / Our Story
Editorial About page — chef portrait, founding story, 4-step timeline, team grid, values and a press wall — in the shared warm restaurant palette.
Restaurant Cart / Order Summary
Customer order summary widget — line items with modifiers, quantity steppers, subtotal/tax/tip/total, gratuity presets and a send-to-kitchen CTA.
Restaurant Floor Plan
Responsive SVG restaurant floor plan — tables in real coordinates, status badges, side inspection, and an edit mode for adding, moving, resizing, reshaping, duplicating, or removing tables.
Restaurant Gallery / Chef's Specials
Photo gallery with category filter chips, masonry-style grid of CSS-gradient placeholders, hover overlays, and a click-to-open lightbox with prev/next + keyboard navigation.
Restaurant Landing Page
Generic restaurant landing — sticky nav, editorial hero, signature dishes, chef story, hours strip, and a reserve CTA in the shared warm Casa Olivar palette.
Restaurant Menu — Carta
Browseable restaurant menu (carta) with sticky category nav, search filter, allergen chips, and section anchors. Shared warm restaurant palette.
Restaurant Menu Page (Editorial)
Editorial, printable two-column menu page — dotted-leader prices, course separators, wine pairings sidebar, allergen legend, and @media print styles for an A4 PDF.
Reviews Feed
Customer review feed: aggregated score with 5-star breakdown bars, filter chips (all · recent · 5★ · with photos), tag pills, helpful counter and owner replies.
Self-Ordering Kiosk
Customer self-ordering kiosk — vertical layout, 72px touch targets, language switcher, animated welcome → category → item-detail → cart → pay flow.
Steakhouse Landing — Vault & Ember
Premium steakhouse single-page landing — dark charcoal + leather + gold, Cormorant Garamond display, smoke textures, dry-age tally and cellar drawer.
Sushi / Omakase Landing — Kuro
Sushi & omakase landing — zen minimalism in bone + ink + vermillion, Noto Serif JP display, ink-wash divider, seat counter, and a 13-course omakase progression.
Tableside Tablet Ordering
Landscape tableside tablet: table header with party + server, category strip, menu grid, live ticket, call-server pill and a 'how it's going' progress bar.
Tip & Split Calculator
Standalone tip calculator with N-way split, tip presets + custom %, pre-tax / post-tax tip basis toggle, and round-up to a friendly number.
Wine Pairing Recommender
Pair-by-dish widget — pick a dish from the carta, get three sommelier-curated wine matches with a confidence pip, tasting notes, glass/bottle price and an 'add to order' CTA.
3D Face Cursor Tracker
A 3D cartoon face built from Three.js primitives — the pupils track the cursor position and the head rotates subtly to follow, with an automatic blinking animation.
3D Floating Geometric Shapes
Ten distinct Three.js geometric shapes floating in space with sine-wave drift, self-rotation, and a mouse parallax camera effect.
Magnetic 3D Orbs
A field of 280 glowing orbs with spring physics — each orb is attracted to the cursor's 3D position and drifts back to its home when the cursor is still.
Action Dropdown Menu
A three-dot floating menu with grouped action items, copy-to-clipboard, keyboard support, and snackbar feedback.
Code Tabs Viewer
Multi-target tabbed code viewer with a scrollable tab row, syntax-highlighted pre block, and copy-to-clipboard button.
CodePen Embed
Lazy-loaded CodePen iframe that defers creation until the user clicks a placeholder, keeping page load fast.
Collection Carousel
Auto-scrolling horizontal carousel with snap points, arrow navigation, pause on hover, and a collection selector.
Filter Search Bar
Inline search input with scrollable category pill filters, active state, result counter, and keyboard shortcut hint.
Hero Code Space Background
Immersive 3D perspective background with floating code panels, scroll-driven depth animation, and responsive depth culling.
Navigation Header
Sticky header with logo, desktop nav links, GitHub icon, and a slide-in mobile drawer menu with backdrop blur.
Resource Card
Grid card for code resources with tech badges, difficulty label, target framework pills, and a save-to-favorites toggle.
Showcase Preview Card
Live-preview card with an embedded iframe, difficulty badge, save-to-favorites, and Lab / View Code action buttons.
Site Footer
Minimal dark-themed footer with navigation link groups, brand tagline, and MIT license attribution.
Tech Stack Icon
SVG icon pill for technology names — maps strings like "react", "tailwind", or "astro" to their brand SVG paths with consistent sizing.
Accessible Color Token System
Design token system with semantic color variables that guarantee WCAG contrast compliance across all token combinations.
Accessible Dark/Light Toggle
Dark and light mode toggle that maintains WCAG AA contrast ratio in both themes with smooth transition.
Accessible Media Captions
Video player with synchronized captions and subtitles, caption customization controls and keyboard-accessible media controls.
Accessible Palette Generator
Generates color palettes that automatically meet WCAG 2.1 contrast ratio requirements for text and UI elements.
ARIA Carousel
Accessible carousel with play/pause controls, slide announcements and full keyboard navigation following ARIA carousel pattern.
ARIA Combobox
Accessible combobox autocomplete implementing ARIA 1.2 combobox pattern with keyboard navigation and screen reader support.
ARIA Live Regions
Patterns for ARIA live regions demonstrating polite, assertive and status announcements for dynamic content updates.
ARIA Modal Pattern
Accessible modal dialog with focus trap, escape-to-close and screen reader announcements following WAI-ARIA dialog pattern.
ARIA Tabs Pattern
Fully accessible tab interface implementing WAI-ARIA tabs pattern with keyboard navigation and proper role attributes.
ARIA Tree View
Accessible tree view component with full keyboard navigation and ARIA tree roles for hierarchical data display.
Astro + Tailwind Starter
Astro starter with Tailwind CSS integration, content collections, island architecture, and zero-JS-by-default static site generation.
Astro Project Architecture
Astro project structure with content collections, island architecture, file-based routing, and integration patterns.
Bun + Hono API Starter
Lightweight API starter with Bun runtime and Hono framework — blazing fast HTTP, TypeScript-first, with middleware, routing, and zero config.
CI/CD Pipeline Architecture (GitHub Actions)
GitHub Actions pipeline structure with reusable workflows, matrix strategies, environment protection rules, and multi-stage deployment.
Cognitive Load Reducer
Simplified mode that reduces animations, decorative elements, color complexity and information density for users with cognitive disabilities.
Color Blind Modes
Color vision deficiency simulation with toggleable modes for protanopia, deuteranopia and tritanopia using SVG filters.
Color Contrast Checker
Real-time WCAG contrast ratio checker that evaluates color pairs against AA and AAA standards with live preview.
Dyslexia Friendly Mode
Dyslexia-friendly reading mode with OpenDyslexic font, increased spacing, adjusted line height and muted background colors.
Event Sourcing + CQRS Architecture
Event sourcing pattern with append-only event store, aggregate roots, projections, CQRS read/write separation, and event replay for state reconstruction.
Focus Management
Focus management patterns for single-page applications handling route changes, dynamic content insertion and focus restoration.
GraphQL Schema Architecture
GraphQL API structure comparing schema-first vs code-first approaches with domain-based module organization and resolver patterns.
High Contrast Theme
Theme system with high contrast mode compatible with Windows High Contrast and CSS forced-colors media query.
Keyboard Navigable Menu
Menu component fully navigable by keyboard using arrow keys, Home, End and type-ahead search following WAI-ARIA menu pattern.
Keyboard Shortcuts Overlay
GitHub-style keyboard shortcuts cheat sheet overlay triggered by pressing the question mark key with categorized shortcut listings.
Micro-Frontend Architecture (Module Federation)
Micro-frontend pattern using Webpack Module Federation with independent host/remote applications sharing dependencies at runtime.
Next.js + Prisma + PostgreSQL Starter
Full-stack Next.js starter with Prisma ORM, PostgreSQL database, typed API routes, and migration workflow. Deploy-ready with Vercel Postgres.
Next.js + TypeScript Starter
Official Next.js starter with App Router, TypeScript, Tailwind CSS, ESLint, and Turbopack. Production-ready with server components out of the box.
Next.js Admin Dashboard Starter
Next.js admin dashboard with App Router, shadcn/ui, server components, route groups for auth/dashboard layouts, and Vercel-ready deployment.
Next.js App Router Architecture
Complete Next.js App Router project structure with nested layouts, server/client components, route handlers, and middleware patterns.
Nx Monorepo Architecture
Nx monorepo with project graph, affected commands, computation caching, and the 80/20 apps-to-libs split pattern.
PostgreSQL Schema Patterns
PostgreSQL schema design patterns including multi-schema organization, migration workflows, indexing strategies, and schema-as-code with Drizzle/Prisma.
Prisma Schema Architecture
Prisma schema structure with models, relations, multi-file schemas, migration workflow, and the Prisma Client generation pipeline.
PWA Starter (Vite + Workbox)
Progressive Web App starter with Vite PWA plugin, Workbox service worker, web manifest, offline support, and install prompts.
React + TypeScript + Vite Starter
Production-ready React starter with Vite, TypeScript, ESM dev server, and Rollup production builds. Includes path aliases and optimal defaults.
React + Vite Architecture
Modern React + Vite project structure with feature-based organization, path aliases, and optimal dev/build configuration.
React Admin Dashboard Starter
Admin dashboard boilerplate with React, shadcn/ui, data tables, charts, sidebar navigation, and dark/light mode. Multiple framework options compared.
Reading Guide
Reading guide line that follows the cursor or scroll position to help users track their reading position across lines of text.
REST API — Clean Architecture (Node.js)
Node.js REST API structure following Clean Architecture with separated domain, application, infrastructure, and interface layers.
Roving Tabindex
Roving tabindex pattern implementation for toolbar and list components enabling single Tab stop with arrow key navigation.
RTL Card Grid
Responsive card grid that automatically flips layout between LTR and RTL using CSS logical properties with no JavaScript required.
RTL Data Table
Data table with RTL-aware columns, sorting indicators and pagination that properly mirrors for right-to-left languages.
RTL Form
Bidirectional form with validation and labels that properly aligns for both LTR and RTL languages using CSS logical properties.
RTL Layout
Complete right-to-left layout with sidebar, navigation and content area using CSS logical properties for seamless LTR/RTL switching.
RTL Mixed Text
Demonstrates proper handling of bidirectional text mixing Arabic and English content using Unicode BiDi algorithm and CSS properties.
RTL Navigation
Navigation bar and breadcrumb with full bidirectional support, properly mirroring icons and layout for RTL languages.
Screen Reader Only Utilities
CSS utility classes and patterns for visually hidden content that remains accessible to screen readers and assistive technology.
Semantic Landmarks
Demonstration of HTML5 semantic landmarks (header, nav, main, aside, footer) with proper ARIA labeling for screen reader navigation.
T3 Stack Architecture
Full-stack T3 architecture with end-to-end type safety — Next.js App Router, tRPC, Prisma/Drizzle, NextAuth, and type-safe environment variables.
T3 Stack Starter (Next.js + tRPC + Prisma)
The T3 Stack — fully type-safe full-stack starter with Next.js, tRPC, Prisma/Drizzle, NextAuth, Tailwind, and validated environment variables.
Text Spacing Control
Adjustable controls for letter-spacing, word-spacing and line-height to meet WCAG 1.4.12 text spacing requirements.
Touch Target Demo
Interactive demonstration of WCAG 2.5.5 minimum touch target sizes (44x44px) with visual guides and common violation examples.
Turborepo Monorepo Architecture
Turborepo monorepo structure with shared packages, task pipelines, remote caching, and parallel execution for multi-app projects.
TWA — Trusted Web Activity (PWA to Play Store)
Wrap any PWA as a native Android app using Trusted Web Activities and Bubblewrap CLI. Publish to Google Play Store without writing Java/Kotlin.
Vue 3 + Vite Starter
Official Vue 3 starter with Vite, TypeScript, Vue Router, Pinia state management, and Composition API. Interactive CLI with optional features.
Animate Presence
Elements that animate in AND out of the DOM with smooth enter/exit transitions. Add and remove list items with fade+slide animations that play before DOM removal.
Animated Beam
SVG animated beam/line connecting two elements with a flowing dash animation, perfect for flow diagrams and connection visualizations.
Animated Gradient Text
Text with animated gradient colors flowing through it using background-clip text and CSS keyframe animation.
Animated Grid Pattern
An SVG grid pattern with randomly highlighted cells that pulse and glow, perfect for dark hero sections and backgrounds.
Animated List
A list component where items animate in with staggered entrance effects — slide and fade from alternating directions for a dynamic reveal.
Animated Shiny Text
Text with a shining shimmer highlight that sweeps across periodically using an animated linear gradient.
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.
Arc Timeline
A timeline displayed along a curved semicircle arc. Events are positioned radially with connecting dots, creating a unique non-linear timeline visualization.
Aspect Ratio
A container component that maintains a specific aspect ratio regardless of content or viewport size. Uses the modern CSS aspect-ratio property with a padding-bottom fallback.
Aurora Text
Text with aurora borealis colors (green, purple, blue) flowing through it with animated gradient layers and optional blur glow.
Bento Grid
Responsive bento-style grid layout with varied cell sizes, some spanning multiple columns or rows, for modern dashboard and showcase designs.
Blur Fade
Elements that fade in from blurred to sharp as they enter the viewport on scroll, creating a smooth reveal effect.
Border Beam
A card with an animated beam of light that travels continuously around its border using conic-gradient and CSS keyframes.
Box Reveal
Content revealed by a colored box that slides across then exits, creating a dramatic wipe-reveal effect.
Button Group
Group of buttons joined together in a segmented control style with shared borders, active state toggling, and rounded end caps.
Code Comparison
Side-by-side code diff viewer with syntax-highlighted added and removed lines. Green for additions, red for removals, with line numbers and a dark editor theme.
Collapsible
A smooth expanding/collapsing content section with animated height transitions. Uses the CSS grid-template-rows trick for true 0-to-auto height animation.
Combobox
Searchable dropdown select with real-time filtering, keyboard navigation (arrow keys, enter, escape), and accessible ARIA attributes.
Confetti Explosion
Canvas-based confetti explosion triggered by button click with colorful particles, gravity, rotation, and fade-out effects.
Cool Mode
Fun particle burst of emojis and shapes that explode from every click point with physics-based motion and fadeout.
Cursor Trail
Trail of dots that follow the cursor with decreasing opacity and size. Each point follows the previous with lerp interpolation, creating a smooth trailing effect.
Dot Pattern
A repeating dot pattern background using radial-gradient, fully customizable via CSS custom properties for spacing, radius, and color.
Flickering Grid
A canvas-based animated grid where cells randomly flicker and pulse their opacity, creating a living, breathing background texture.
Flip Text
Words that flip and rotate vertically to cycle through different words with smooth CSS perspective transitions.
Gesture Animations
Collection of gesture-based animations including hover scale, tap shrink, drag with constraints, and focus glow. Each gesture type demonstrates a different interaction pattern.
Grid Pattern
An SVG-based grid pattern background with customizable size, color, and stroke width via CSS custom properties. Perfect for dark-themed hero sections and landing pages.
Hero Video Dialog
A click-to-play video modal for hero sections. Displays a thumbnail with a centered play button that opens a fullscreen video overlay with smooth transitions.
Hyper Text
Text that scrambles through random characters before settling on the final text, creating a decode or matrix-style reveal effect. Triggers on hover.
Icon Cloud
A 3D tag cloud of technology icons orbiting in space using Fibonacci sphere positioning and smooth rotation animation.
Input Group
Input fields with addon elements — icon prefix, button suffix, or text prepend like "$" — all with seamless shared borders.
Interactive 3D Globe
Interactive 3D globe rendered on canvas with dot-matrix sphere, auto-rotation, and drag-to-rotate interaction — no Three.js required.
Interactive Grid Pattern
A canvas-based grid pattern that reacts to mouse movement, illuminating cells near the cursor with distance-based brightness falloff.
Interactive Hover Button
A button with creative multi-layered hover effects including background fill, text color inversion, and border animation.
Layout Animation
Elements smoothly animate their layout position when reordered or resized using the FLIP (First, Last, Invert, Play) technique. Shuffle and filter grid items with fluid transitions.
Lens Effect
Magnifying glass lens effect that follows the cursor, showing a zoomed circular area over content with smooth tracking and customizable zoom level.
Level Layout
Horizontal alignment layout that evenly spaces items or pushes them to edges with left, center, and right slots, stacking responsively on mobile.
Light Rays
Atmospheric light rays emanating from a point, like sunlight through clouds, using CSS gradients and animated opacity.
Line Shadow Text
Large heading with an animated shadow made of repeated lines offset below. Multiple text-shadows create a striking striped shadow effect with a smooth animated offset.
macOS Dock
A macOS-style dock with smooth icon magnification on hover. Icons scale up based on proximity to the cursor, creating a fluid fisheye effect.
Magic Card
Card with a radial gradient spotlight that follows the mouse cursor, creating an interactive lighting effect.
Media Object
Social media style layout with avatar on the left and content (name, text, meta) on the right, supporting nested replies.
Message Block
Colored message blocks with optional header, body, and dismiss button in info, success, warning, and danger variants with fade-out animation.
Meteors
Animated shooting stars and meteors falling diagonally across the screen with glowing trails, random positions, and staggered animation delays.
Morphing Text
Text that smoothly morphs between different words using an SVG filter blur technique for seamless transitions.
Neon Gradient Card
Card with an animated neon glow border that shifts through vivid colors using keyframe animations and box-shadow.
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.
Number Ticker
An animated number display that counts up to a target value using independently sliding digit columns, creating a smooth slot-machine effect with easing.
Orbiting Circles
Multiple circles orbiting around a central element at different speeds and radiuses using pure CSS animation.
Particles System
Interactive canvas particle system with connected lines between nearby particles and mouse-driven attraction and repulsion.
Pixel Image
Image that assembles from scattered pixels or reveals pixel-by-pixel on click, using canvas for dynamic pixel manipulation.
Progressive Blur
A gradient blur effect where content gets progressively more blurry at the edges, like a fade-to-blur overlay.
Pulsating Button
A call-to-action button with a pulsing glow ring animation that draws attention and encourages clicks.
Rainbow Button
A vibrant button with an animated rainbow gradient border that continuously cycles through the color spectrum.
Reorder List
Draggable list where items can be reordered by dragging. Items animate to new positions smoothly using the FLIP technique for fluid layout transitions.
Retro Grid
A perspective grid background with vanishing-point effect, inspired by retro 80s aesthetics. CSS transforms create converging grid lines with a glowing horizon.
Ripple Button
A Material Design inspired button that shows a ripple wave effect expanding from the exact click point.
Ripple Effect
Expanding concentric ripple circles emanating from the click point on any surface, inspired by Material Design.
Scratch to Reveal
Interactive scratch card effect where users drag to erase an overlay and reveal hidden content underneath.
Scroll Velocity Text
Horizontal scrolling text marquee that speeds up or slows down based on the user's scroll velocity.
Shimmer Button
A button with a shimmering light sweep effect that glides across periodically, creating an elegant loading or attention animation.
Shine Border
Container with a glowing, shining animated border using a rotating gradient that creates a polished metallic edge effect.
Shiny Button
A button with a glossy reflection effect that glides across on hover, creating a polished premium feel.
Smooth Cursor
Custom cursor with a dot and ring that smoothly follow the actual cursor with a spring-like lag effect.
Sparkles Text
Text with floating sparkle particles that animate around it, creating a magical glittering effect using positioned elements.
Spinner
Multiple spinner and loading animations — circular, dots, bars, and pulse — in various sizes and colors with pure CSS keyframes.
Spinning Text
Text arranged in a circle that rotates continuously using CSS transforms. Characters are positioned radially and the whole assembly spins with a smooth animation.
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.
Spring Physics
Interactive spring physics simulation where you drag an element and it springs back with configurable stiffness and damping. Uses Hooke's law (F = -kx - cv) with requestAnimationFrame.
Striped Pattern
Beautiful diagonal or horizontal repeating stripes using CSS gradients with customizable colors, angle, and size via CSS custom properties.
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.
Text Highlighter
Text where words get highlighted one-by-one with a colored background sweep animation. Each word receives a sequential highlight effect from left to right.
Tweet Card
Styled card resembling an embedded tweet/X post with avatar, display name, handle, text, and engagement metrics.
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.
Video Text
Text that acts as a mask showing video or animated gradients through the letter shapes using mix-blend-mode and background-clip techniques.
Warp Background
A canvas-based warped grid mesh background with flowing sine-wave distortions that animate over time, creating an organic warped-space effect.
Clausic — Chill Pieces
4 original chill MIDI compositions with piano-roll visualizer — Chillwave (A minor 76 BPM), Lo-fi (C minor 85 BPM), Ambient (E minor 50 BPM), Acoustic (G major 72 BPM).
Clausic — Free Compositions
10 original MIDI compositions across diverse moods and genres — Open Road, Emerald Canopy, Hollow Peak, Harbor Dawn, Starboard Waltz, Phantom Bells, Golden Savanna, Ember Coast, Iron Summit, Marble Hall.
Clausic — Pokemon Collection
MIDI pieces across 6 Pokemon generations with piano-roll visualizer — Kanto, Johto, Hoenn, Sinnoh, Unova, Kalos with region-specific instruments and scales.
Clausic — Rock · Pop · Ambient
6 original MIDI compositions across 3 genres — Rock (Neon City Riff, Desert Storm), Pop (Summer Signal, Midnight Drive), Ambient (Glass Forest, Ocean Drift) with piano-roll visualizer.
Vaporwave Synth
Generative vaporwave synthesizer with 10 tracks — Web Audio API step sequencer with supersaw pads, bass, lead, and drums. Click play and browse.
Analytics Page
A data-driven analytics dashboard with date range picker, area/funnel charts, heatmap, metric comparisons, and exportable data table. No libraries.
Blog Listing Page
A blog index page with featured post hero, category filter tabs, search bar, post grid cards, and pagination. No external libraries.
Changelog Page
A version-based changelog page with timeline, version badges, categorized changes (added, changed, fixed, removed), and filter by type. No libraries.
Dashboard Page
A complete admin dashboard with KPI cards, line/bar/donut charts, recent activity feed, and data table. Pure vanilla JS and CSS — no libraries.
FAQ Page
A FAQ / help center page with categorized accordion sections, search with instant filtering, and a contact support CTA. No external libraries.
File Manager Page
A file manager / document browser page with folder tree sidebar, file grid/list views, breadcrumb navigation, upload area, and context menu. No libraries.
Invoice Page
An invoice history page with list of invoices, status filters, detail modal, and downloadable invoice view. No external libraries.
Notifications Page
A full notification center page with tabs for All/Unread/Mentions, grouped by date, mark-as-read actions, and notification type icons. No libraries.
Onboarding Page
A multi-step onboarding / welcome flow with progress indicator, profile setup, preferences selection, team invite, and completion celebration. No libraries.
Search Results Page
A search results page with query input, filter sidebar, result cards with highlighted matches, sorting options, and pagination. No libraries.
Settings Page
A tabbed settings page with profile editing, notification preferences, security options, and appearance controls. Pure vanilla JS and CSS.
Shop Category Page
An e-commerce category page with product grid, sidebar filters (price range, brand, rating), sort dropdown, and pagination. No libraries.
Status Page
A system status page with service health indicators, uptime bars, incident timeline, and overall status banner. No external libraries.
Team Page
A team / people page with department filters, profile cards with avatar, role, bio, and social links. Hover effects and responsive grid.
Wishlist Page
An e-commerce wishlist / saved items page with product cards, move-to-cart action, remove button, share wishlist, and empty state. No libraries.
3D Design
Depth-rich interfaces with CSS 3D transforms, perspective effects, layered cards, and dynamic shadows for an immersive spatial feel.
AR / VR Interface
Futuristic augmented and virtual reality UI with holographic elements, translucent panels, and HUD-style overlays.
Aurora / Gradient Mesh
Smooth, flowing gradient meshes and aurora borealis color washes — organic, ethereal, and visually mesmerizing.
Bauhaus
The 1919 German art school's aesthetic — primary colors, geometric forms, asymmetric composition, and modernist typography.
Bento UI
Grid-based bento box layouts with asymmetric cards, rounded corners, and clean modular sections — inspired by Apple's product pages.
Brutalism
Raw, confrontational web design with exposed structure, heavy borders, clashing colors, and intentionally broken conventions.
Card Navigation
Mobile card-grid navigation with icon tiles laid out in a 2×3 grid. Tap a card to open its content screen with animated transition.
Claymorphism
Puffy, inflated 3D clay shapes with thick outlines, pastel colors, and a playful soft-plastic feel — like children's clay toys.
Dark Blue
A deep navy and midnight-blue palette — professional, trustworthy, and atmospheric, perfect for SaaS products and dashboards.
Dark Mode
A refined dark interface with dark surfaces, subtle borders, and muted accents — comfortable for extended use and developer-friendly.
Donut Chart — Product Categories
A donut chart showing product category distribution with icon header, colored segments, animated arcs, and a clean legend. Ideal for shipping, inventory, or sales dashboards.
Drawer Navigation
Mobile side-drawer navigation with slide-in panel, backdrop overlay, close button, and stacked nav links.
FAB Navigation
Floating action button with expandable speed-dial actions. Tap the FAB to reveal stacked action buttons with staggered animation.
Flat Design
Bold, solid colors with zero shadows or depth — crisp geometry and strong iconography-driven interfaces.
Geographic Distribution Chart
A geographic distribution chart with a country map and horizontal region bars. Features configurable regions, animated bars, color-coded map areas, and a responsive layout for dashboard analytics.
Glass Dark
Dark glassmorphism — frosted glass panels layered over deep dark backgrounds for a sleek, premium night-mode feel.
Glassmorphism
Frosted glass panels floating over colorful gradients — translucency, blur, and subtle borders define this aesthetic.
Illustration-First
Whimsical hand-drawn SVG illustrations take center stage — characters, doodles, and organic shapes define the UI.
Isometric 3D
Flat 3D perspective using isometric projection — geometric depth without real 3D rendering.
Material Design
Google's design language — elevation through shadows, bold color, responsive animations, and a structured 8px grid.
Minimalist UI
A stripped-back aesthetic built on generous whitespace, neutral palettes, and typographic hierarchy — nothing decorative, everything functional.
Miro / Whiteboard
Infinite canvas aesthetics — sticky notes, hand-drawn connectors, collaborative markers, and the feeling of a shared whiteboard.
Motion / Kinetic
Animation-first design where transitions, micro-interactions, and movement ARE the design — nothing sits still.
NES Retro / Pixel
Chunky pixel fonts, limited 4-color palettes, and scanline overlays — interface design inspired by 8-bit Nintendo consoles.
Netflix Cinematic
Dark cinematic design with bold red accents, dramatic hero typography, and large imagery — perfect for media and entertainment.
Neumorphism
Soft UI that extrudes from a monochromatic surface using dual shadows — giving elements a pillowy, physical feel.
Newspaper / Editorial
Classic print journalism layout with serif type, column grids, ink-paper contrast, and editorial authority.
Purple Space
Deep cosmic backgrounds with neon purple and violet accents — futuristic, electric, and otherworldly.
Rectangular Navigation
Compact vertical icon sidebar for mobile apps. Always-visible narrow rail with icon buttons and active indicator.
Rudder Navigation
Bottom navigation with a raised central FAB button. Combines standard tab items with a prominent primary action.
Sheet Navigation
Mobile bottom sheet with drag handle, slide-up animation, and action list. Swipe or tap to dismiss.
Skeuomorphism
Real-world textures, depth, and physical metaphors — interfaces that look like objects you can touch.
Stacked Bar Chart
A stacked bar chart comparing year-over-year data by month. Features animated bars, legend, responsive layout, and configurable datasets with a clean corporate dashboard aesthetic.
Terminal / CLI
Monochrome command-line aesthetic with green phosphor text, blinking cursors, and raw functional beauty.
Three Dots Menu
Mobile overflow menu triggered by a three-dots (kebab) button. Dropdown appears with action items and smooth fade-in animation.
Vaporwave
80s nostalgia meets internet surrealism — pastel pink/cyan palettes, retrowave grids, glitch effects, and neon glow.
Add to Cart Effect
Animated add-to-cart feedback with badge bump and flying item — satisfying shopping interaction.
Drawer Slide Effect
Slide-in/out drawer panel from any edge — smooth gesture-friendly panel transition for menus and sheets.
Nintendo UHD Console Showcase Page
An ultra-high-definition console showcase inspired by Nintendo's playful design language. Features vibrant colors, bouncy animations, parallax scroll, and joyful micro-interactions using GSAP.
Skeleton Loading Effect
Animated skeleton placeholder with shimmer pulse — smooth loading state for cards and content blocks.
Vercel UHD Developer Platform Page
An ultra-high-definition developer platform showcase inspired by Vercel's landing page. Features bold typography, grid-based layout, terminal-style code reveals, and subtle gradient animations with GSAP.
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.
Button Press Effect
Scale and shadow on press with optional success checkmark — satisfying click feedback for buttons and controls.
Code Block (React)
Syntax-highlighted code block with copy button, line numbers, and highlighted lines. React + Tailwind.
Diff Viewer (React)
Side-by-side and unified code diff viewer with split toggle. React + Tailwind. Dark theme.
Modal Enter Effect
Fade and scale enter/exit for modals and overlays — smooth open/close transition.
Nav Underline Effect
Animated underline on active nav link — smooth indicator for tabs and breadcrumbs.
404 Not Found Page
An animated 404 error page with a glitch text effect, floating illustration, and navigation links back to safety. Zero dependencies.
500 Server Error Page
A clean, professional 500 internal server error page with status badge, retry button, and support contact link. Pure CSS.
About Page
A team about page with company story, values grid, team member cards with hover flip effect, and a timeline of milestones. Pure CSS.
Action Sheet
An iOS-style action sheet that slides up from the bottom with a list of actions and a separate cancel button. No libraries.
AI Chat Interface
AI chat UI with message bubbles, streaming text simulation, typing indicator, and auto-scroll. No libraries.
AI Response Card
AI-generated result card with model badge, response text area, copy/thumbs-up/thumbs-down actions, and regenerate button.
AI Thinking Loader
Collection of 'Thinking…' animated loaders for AI interfaces: pulse dots, shimmer bar, orbit ring, and wave variants.
Announcement Banner
Full-width dismissable announcement banner with icon, message, optional CTA link, and localStorage persistence. No libraries.
API Status Board
Service status dashboard with operational/degraded/outage indicators, incident timeline, and uptime percentage. Vanilla JS.
Attachment List
File attachment list with type icons, file size, download link, remove button, and upload drop zone. CSS-first.
Blog Post Page
A full article page with sticky table-of-contents sidebar, reading progress bar, estimated read time, author card, and related posts. No libraries.
Bottom Sheet
A slide-up bottom sheet modal with drag-to-dismiss, backdrop, and two variants — an info sheet and an actions sheet. No libraries.
Certificate of Completion
Award or completion certificate with decorative border, seal, signature line, and course/recipient details. Pure CSS.
Checkout Page
A multi-step checkout flow: cart review → shipping → payment → confirmation. Client-side validation and step indicator. No libraries.
Citation Tooltip
Inline citation markers with hover tooltip showing source title, URL, and snippet. Used in AI-generated content. No libraries.
Code Block
Syntax-highlighted code block with copy button, language badge, line numbers, and line-highlight support. No libraries.
Code Diff Viewer
Side-by-side code diff viewer with added/removed line highlighting, line numbers, and unified/split toggle. No libraries.
Contact Page
A contact page with a validated multi-field form, map placeholder, office address cards, and social links. No libraries.
Custom Focus Ring
Custom visible focus ring system using CSS :focus-visible — high-contrast, brand-colored, and offset variants. WCAG compliant.
Directions Card
Step-by-step directions card with numbered steps, turn icons, distance/time per step, and total journey summary. Pure CSS.
Distance Badge
Distance indicator badges for maps and listings — km/mi, walking/driving/transit icons, and ETA variants. Pure CSS.
Document Preview Card
PDF/document preview card with page thumbnail placeholder, file metadata, download and open buttons. Pure CSS.
Email Verification / OTP Code
Email verification template with large OTP code display, expiry notice, and security footer. Minimal and focused design.
File Tree
Collapsible file explorer tree with folder/file icons, expand/collapse all, active file highlight, and right-click context menu.
Floating Action Button
A FAB that expands into a speed-dial of sub-actions on click. Supports icon rotation, backdrop, and individual sub-action labels. No libraries.
Font Size Control
Accessible font size adjuster with decrease/reset/increase buttons, live preview, and localStorage persistence. Vanilla JS.
Gesture Carousel
A touch-enabled carousel with momentum, snap-to-slide, and dot indicators. Swipe with velocity to advance multiple slides. No libraries.
Hamburger Menu
An animated hamburger icon that morphs to an X and opens a fullscreen navigation overlay with staggered link reveals. No libraries.
High Contrast Toggle
Accessibility toolbar with high contrast mode, dyslexia-friendly font, and large text toggle. Persists to localStorage.
Image Gallery Grid
Masonry photo gallery with CSS columns, hover zoom, and a lightbox with keyboard navigation and swipe support.
Inline Alert
Inline alert component with info, success, warning, and error variants. Supports icon, title, description, and dismiss button.
Invoice / Receipt Email
Invoice email with line-item table, subtotal/tax/total breakdown, and payment details. Email-safe table layout.
JSON Viewer
Collapsible JSON tree viewer with syntax coloring, expand/collapse nodes, copy path, and search highlighting. No libraries.
Keyboard Shortcut Sheet
Keyboard shortcut cheat sheet with grouped categories, KBD key styling, and searchable filter. Pure CSS and minimal JS.
Location Pin Card
Location card with map placeholder, animated pin drop, address details, distance badge, and directions button. Pure CSS.
Log Viewer
Scrollable log output panel with level filters (info/warn/error/debug), search, auto-scroll toggle, and color-coded lines.
Long Press Menu
A context menu triggered by a long press (500ms hold) on mobile, and right-click on desktop. Dismisses on outside tap or Escape. No libraries.
Maintenance Page
A scheduled maintenance page with a countdown timer, progress bar, and email notification signup. No libraries.
Map Embed Card
Map embed card with OpenStreetMap iframe, location pin overlay, address text, and directions CTA. No API key needed.
Mobile Bottom Navigation
A fixed bottom navigation bar for mobile apps with icon + label tabs, active state, notification badges, and a center create button. Zero dependencies.
Mobile Stepper
A dot/step indicator for onboarding flows with animated transitions between steps. Includes skip and next/get-started buttons. No libraries.
Model Selector
LLM model picker dropdown with provider logos, context window size, capability tags, and active model indicator.
Newsletter Email Template
Newsletter email with header, featured article card, secondary article list, and footer unsubscribe link. Table-based layout.
Notification Badge
Animated badge counter on icons with pulse ring, count overflow (99+), and CSS-only variants. Zero JavaScript.
Notification Center
Dropdown notification panel with unread badge, mark-all-read, grouped notifications, and infinite-scroll loading. No libraries.
Offline Page
A PWA offline fallback page with network detection, automatic reconnect polling, and a cached content list. Pure CSS + minimal JS.
Order Confirmation Email
E-commerce order confirmation email with order number, product summary, shipping address, and delivery estimate. Table-based.
Order Confirmation Page
An order success page with animated checkmark, order summary, delivery timeline, and continue shopping CTA. Pure CSS.
Password Reset Email
Clean password reset email with expiry notice, security warning, and action button. Table-based, email-safe HTML.
Pinch Zoom
Pinch-to-zoom and pan image viewer. Two-finger spread zooms in; single-finger drag pans when zoomed. Double-tap resets. No libraries.
Portfolio Case Study Page
A single project case study page with hero, overview stats, problem/solution sections, image gallery, and results metrics. Pure CSS.
Pricing Page
A full pricing page with monthly/annual toggle, three-tier plan cards, feature comparison table, and FAQ accordion. No libraries.
Print-Ready Invoice
Print-ready invoice layout with @print media query — hides UI chrome, formats tables correctly, and adds page break rules.
Print-Ready Resume / CV
One-page resume/CV layout that prints cleanly on A4/Letter with @print styles — no headers, correct margins, and break-avoid rules.
Product Detail Page
A full e-commerce product page with image gallery, variant picker, quantity selector, add-to-cart, and a reviews section. No libraries.
Prompt Input
Enhanced prompt textarea with live token counter, character limit bar, attach file button, and submit shortcut. No libraries.
Pull to Refresh
Pull-down-to-refresh indicator for mobile lists. Shows a spinner when the user pulls past the threshold, then resets the list. No libraries.
Reduced Motion Demo
Showcase of CSS prefers-reduced-motion patterns — before/after animations that respect the OS motion preference. Pure CSS.
Report Cover Page
Document or report cover page with title, subtitle, branding, date, and department details. Professional print-ready layout.
Schema Diagram
Visual ER / database schema diagram built with SVG — tables, columns, data types, and relationship arrows. No libraries.
Screen Reader Announcer
ARIA live region announcer that broadcasts status messages to screen readers without visual disruption. Vanilla JS utility.
Skip Navigation
Accessible skip-to-content link that appears on keyboard focus, letting screen reader and keyboard users bypass repeated navigation.
Snackbar / Bottom Toast
Material-style snackbar that slides up from the bottom with optional action button, auto-dismiss, and queue support. No libraries.
Store Locator
Store list with map placeholder, search/filter by city, distance sorting, and clickable store cards. No libraries.
Streaming Text Effect
LLM-style streaming text output that renders characters progressively with a blinking cursor. Configurable speed and delay.
Swipe Action
iOS-style swipe-to-reveal action buttons on list items. Swipe left to expose Archive and Delete actions. No libraries.
Swipe Tabs
Horizontally swipeable tab panels with a sliding indicator. Supports touch swipe gestures and tap navigation. No libraries.
Team Invite Email
Team invitation email with sender avatar, workspace name, role badge, and accept/decline CTA buttons. Table-based HTML.
Terminal UI
Terminal / CLI output display with typed command animation, colored output lines, and macOS window chrome. Pure CSS + JS.
Token Counter
Real-time token count indicator that estimates tokens as you type, with a visual limit bar and warning state. No libraries.
Upload Progress
Multi-file upload with individual progress bars, file type icons, cancel button, retry on error, and overall summary. No libraries.
Video Thumbnail Grid
Video thumbnail grid with play overlay, duration badge, hover preview shimmer, and category filter tabs. Pure CSS.
Welcome Email Template
Table-based welcome/onboarding email with hero, feature highlights, and CTA button. Email-safe HTML with inline styles.
Booking Reservations Schema
Relational schema for reservations with resources, availability slots, bookings, and payment records.
CMS Blog Schema
Relational schema for content management with authors, posts, tags, publishing workflow, and media.
CRM Sales Schema
Relational schema for CRM sales pipelines with leads, accounts, contacts, deals, and activities.
Ecommerce Core Schema
Core relational schema for ecommerce with users, catalog, inventory, orders, and payments.
LMS Education Schema
Relational schema for learning platforms with courses, lessons, enrollments, and progress tracking.
Marketplace Schema
Relational schema for a two-sided marketplace with buyers, sellers, listings, transactions, and payouts.
SaaS Multi Tenant Schema
Multi-tenant SaaS relational schema with organizations, members, roles, subscriptions, and billing.
Support Helpdesk Schema
Relational schema for support ticketing with SLA policies, comments, assignments, and status history.
Animated Like Button
A micro-interaction focused like button with smooth heart animations and popping effects.
Audio Player
A stylish audio player with playlist support, album art display, and smooth progress tracking.
Calculator
A clean, functional calculator with support for basic arithmetic operations and keyboard support.
Countdown Timer
A customizable countdown timer for events and deadlines. Features a sleek circular progress indicator and automatic cleanup.
Currency Converter
A practical currency conversion tool with support for major global currencies and live exchange rate fetching.
Custom Video Player
A fully customizable HTML5 video player with sleek bespoke controls, progress scrubbing, and volume management.
Digital Clock
A sleek, modern digital clock with date and seconds display. Uses CSS glassmorphism and real-time updates.
Follow/Subscribe Toggle
A sleek, state-aware button for follow or subscribe actions, featuring smooth label transitions and color shifting.
Image Comparison Slider
A smooth, interactive before-and-after image comparison slider. Perfect for showcasing edits, redesigns, or transformations.
Image Zoom / Magnifier
A high-performance image zooming component with a magnifier lens effect. Ideal for product galleries and photography showcases.
Interactive Comment Box
A clean, expandable comment input component with user avatar, character limits, and smooth focus states.
Live Clock (Analog + Digital)
A comprehensive real-time clock component featuring both a classic analog face and a modern digital readout.
Live Search with Debounce
A real-time search interface that filters results as you type, optimized with debouncing to minimize performance overhead.
Memory Card Game
A matching card game with smooth 3D flip animations, move counting, and a win-state celebration.
Podcast Player
A specialized player optimized for longer spoken-word content. Includes skip forward/back buttons and variable playback speed.
Poll / Voting Widget
A clean voting interface with real-time percentage visualizations and satisfying result animations.
Quiz Widget
An interactive quiz component with real-time scoring, progress tracking, and result summaries.
Retro Snake Game
A classic browser-based Snake game built using the HTML5 Canvas API. Features score tracking, speed increments, and a sleek dark mode aesthetic.
Smart Share Button
A high-utility share button that uses the Web Share API when available, with a tailored fallback menu for desktop browsers.
Social Media Feed Card
A pixel-perfect social media feed card inspired by modern platforms. Includes support for images, metrics, and nested comments.
Stock Ticker
A scrolling stock and crypto ticker with real-time price simulations and trend indicators.
Stopwatch
A precision stopwatch with lap tracking, start/split/reset controls, and smooth animations.
Typing Indicator
A smooth, rhythmic "user is typing" animation for chat interfaces and real-time collaboration tools.
Unit Converter
A comprehensive unit conversion tool for length, weight, and temperature. Featuring a clean, tabbed interface.
Word Counter
A real-time word and character counter with added features like reading time estimation and sentence counting.
Area Chart
A smooth area chart with gradient fill under the curve, multi-series stacking, animated draw-in, and interactive crosshair tooltip. Built with vanilla JS and SVG.
Bar Chart
A vertical and horizontal bar chart built with SVG. Features animated bars, value labels on hover, grouped/stacked modes, and a responsive layout that redraws on resize.
Breadcrumb Nav
Accessible breadcrumb navigation with structured data, truncation for deep paths, and home icon. Pure CSS + minimal JS.
Bulk Actions
Multi-select grid pattern with a sticky bulk action bar for archive, tag, and delete flows.
Calendar Heatmap
A GitHub-style contribution calendar heatmap. Renders a full year of daily data cells with color intensity levels, week/month labels, and an interactive tooltip showing date and value on hover.
Chat Widget
Floating chat widget with bubble toggle, message thread, typing indicator, emoji picker, and auto-scroll. No dependencies.
Comment Thread
Nested comment thread with replies, likes, collapse/expand, relative timestamps, and inline reply form. No dependencies.
Copy to Clipboard
Multi-target copy pattern for code, URLs, and form fields with success and fallback feedback.
CRUD Table
Full CRUD table pattern with create, inline edit, delete actions, sorting, pagination, and form validation.
Debounced Search
Search input pattern with debounce timing, loading state, and stale-request result protection.
Footer Links
Multi-column site footer with logo, link groups, newsletter subscribe input, social icons, and legal row. Pure CSS responsive layout.
Forgot Password
Forgot password flow with email input, animated success state, resend countdown timer, and back-to-login link. No dependencies.
Funnel Chart
A conversion funnel chart that visualizes step-by-step drop-off rates. Features animated trapezoid stages, percentage labels, drop-off callouts, and a horizontal comparison mode.
Gauge Meter
A half-circle SVG gauge meter with animated needle, color zones (green/yellow/red), tick marks, a value label, and configurable min/max range. Ideal for dashboards showing a single KPI.
Infinite Scroll
Infinite list loading pattern driven by an IntersectionObserver sentinel and batch rendering.
KPI Card
A compact Key Performance Indicator card with animated counter, trend arrow (up/down), sparkline background, period selector, and color-coded status. Perfect for dashboards and analytics pages.
Lazy Load
Image lazy-loading pattern with placeholders and progressive reveal using IntersectionObserver.
Leaderboard
A ranked leaderboard component with score bars, animated rank changes, medal icons for top 3, avatar initials, and a live-update simulation mode. Ideal for gamification and analytics dashboards.
Line Chart
A fully responsive SVG line chart with animated paths, multi-series support, smooth bezier curves, grid lines, axis labels, and interactive tooltips. Built with vanilla JS and inline SVG — no dependencies.
Loading Skeleton
Page-level skeleton state pattern with a controlled transition into real content.
Login Page
Clean, modern login page with email/password fields, remember me, forgot password link, OAuth social buttons, and form validation. Pure HTML/CSS/JS.
Menubar App
Desktop-style application menubar (File, Edit, View…) with nested submenus, keyboard shortcuts display, and full keyboard navigation.
Metric Comparison
A before/after metric comparison widget that highlights the difference between two values with an animated transition bar, percentage change label, and color-coded improvement/regression indicators.
Notification Bell
Notification bell icon with unread badge, dropdown notification feed, mark-as-read, mark-all-read, and grouping by Today/Earlier. No dependencies.
Optimistic UI
Optimistic mutation pattern for list add and remove actions with rollback on simulated failures.
Pie / Donut Chart
An animated SVG pie and donut chart with legend, interactive slice highlighting on hover, and smooth arc transitions. Toggle between pie and donut mode with a button click.
Pricing Table
Pricing table with monthly/yearly toggle (20% discount), 3-tier cards, feature comparison list, popular badge, and CTA buttons. Pure CSS + JS.
Product Card
E-commerce product card with image, quick-add to cart, wishlist toggle, discount badge, color swatch picker, and rating stars. Pure CSS + JS.
Progress Ring
A circular SVG progress indicator with animated stroke-dashoffset, percentage label, configurable size/stroke, and support for multiple simultaneous rings with distinct colors and labels.
Radar Chart
A multi-axis spider/radar chart rendered in SVG. Supports multiple data series, a shaded polygon overlay, axis labels, concentric grid rings, and hover tooltips per axis.
Register Page
Sign-up page with name, email, password, and confirm password fields, real-time strength meter, terms checkbox, and validation. No dependencies.
Scatter Plot
An interactive scatter plot with hover labels, optional bubble sizing, color-coded groups, animated point entrance, zoom-to-region, and regression line overlay.
Search Filter
Lightweight search plus sidebar filter pattern with URL query synchronization and live result updates.
Shopping Cart
Slide-out shopping cart drawer with item list, quantity controls, remove items, coupon code input, order summary, and checkout CTA. No dependencies.
Sidebar Admin
Collapsible admin sidebar with icon-only mode, grouped navigation sections, active state, and mobile overlay. No dependencies.
Sortable Table
Sort plus column-resize table pattern with no selection or pagination complexity.
Sparkline
A compact inline SVG sparkline chart for embedding in tables, cards, or dashboards. Supports line and bar variants, trend coloring (up/green, down/red), and an optional last-value dot.
Tabs Vertical
Vertical and horizontal tab panels with animated sliding indicator, keyboard navigation, and lazy panel rendering. No dependencies.
Theme Toggle
Theme preference pattern for light, dark, and system mode with persistence and no-flash boot logic.
Treemap
A proportional treemap that visualizes hierarchical data as nested rectangles. Implements a squarified layout algorithm, color-coded groups, hover tooltips, and animated entrance.
Verify Email
Email verification page with 6-digit OTP input, auto-advance focus, paste support, resend countdown, and success animation. No dependencies.
Virtual List
Windowed list rendering pattern for very large datasets using fixed-row virtualization.
Admin Layout
A complete admin dashboard shell layout with collapsible sidebar, top navbar, and main content area. Mobile-responsive with hamburger toggle.
Advanced Filters
An advanced filter panel for data tables with multiple filter types — text search, multi-select, date range, number range, and boolean toggles. Supports saving filter presets.
Availability Calendar
A Calendly-style availability picker for scheduling meetings. Shows available time slots across a monthly calendar with time zone support and booking confirmation flow.
Calendar View
A full-featured monthly calendar with event creation, editing, and deletion. Supports multiple event categories and drag-to-create on day cells.
Dashboard Widget
A draggable, resizable dashboard widget system. Widgets can be minimized, refreshed, and rearranged to customize the dashboard layout.
Data List
A feature-rich data list component with search, column sorting, bulk selection, and inline status management. Designed for SaaS user/content management views.
Date Range Picker
A dual-calendar date range picker with hover preview, preset ranges, and keyboard navigation. Used for booking, analytics date filters, and reporting.
Employee Schedule
A detailed employee scheduling view with week/day views, shift assignment, conflict detection, and total hours calculation per employee.
Kanban Board
A full Kanban board with drag-and-drop cards between columns, inline card creation, priority labels, and assignee avatars.
Multi-Step Form
A multi-step onboarding form with animated step transitions, progress indicator, validation, and a final review screen.
Scheduler Timeline
A Gantt-style project scheduler timeline with draggable tasks, milestones, and dependency arrows. Shows task progress and team assignments.
Search Autocomplete
A rich search autocomplete input with categorized results, keyboard navigation, recent searches, and command shortcuts. Similar to Notion or Linear's search.
Settings Panel
A slide-in settings panel (sheet/drawer) with tabbed sections for profile, notifications, appearance, and security settings.
Shift Grid
A weekly shift schedule grid for employee management. Shows assigned shifts per employee per day with color-coded shift types and edit/delete controls.
Stats Card Grid
A grid of metric stat cards showing KPIs with trend indicators. Dark SaaS-style design with up/down trend badges and icon accents.
Time Range Picker
A time range picker with draggable start/end handles on a 24-hour timeline. Ideal for scheduling availability, meeting room booking, or shift planning.
Time-Off Request Widget
A time-off request form widget for HR/employee management. Includes leave type selector, date range, reason field, and a running list of pending/approved requests.
User Profile Card
A SaaS-style user profile card with avatar, cover image, name, role, stats, and action buttons.
Alert Banner
Contextual alert banners in four semantic variants — info, success, warning, and error — with optional dismiss button and leading icon.
Alert Dialog
Confirmation modal with destructive/cancel actions, focus trap, backdrop click to close, and keyboard Escape support.
Anchor Navigation
Sticky in-page navigation that highlights the active section as you scroll, with smooth scroll-to-section on click.
Architecture Firm
A premium architecture firm website with full-bleed project photography, an editorial horizontal scroll gallery, awards section, and a minimal contact form.
Autocomplete
Text input with a filtered dropdown suggestion list. Keyboard navigation (↑↓ Enter Escape), highlight match, clear button.
Avatar Group
Stacked overlapping avatars with a "+N more" overflow indicator — supports image avatars, initials fallback, size variants, and name tooltip on hover.
Back to Top
Floating back-to-top button that appears after scrolling down, with smooth scroll animation and fade in/out.
Badge
Compact status badges and tags in multiple color variants, sizes, and styles — solid, outline, and with dot or remove button.
Bottom Navigation
Mobile-style bottom navigation bar with icon + label, active state, badge counter, and slide-up indicator.
Breadcrumb
Navigation breadcrumb trail with separator variants — slash, chevron, and dot — plus a collapsible version that truncates middle items.
Browser Mockup
Realistic browser window frame with address bar, tab, navigation buttons, and inner content area for screenshots or demos.
Carousel
Content carousel with auto-play, dot indicators, previous/next arrows, touch swipe support, and a multi-card visible variant.
Chat Bubble
Chat message bubbles with sender/receiver variants, avatar, timestamp, status indicators (sent/delivered/read), and grouping.
Checkbox Group
Styled checkbox inputs with label, indeterminate state, checkbox card variant, and a grouped fieldset with select-all functionality.
Clipboard Copy
Copy-to-clipboard button with success feedback animation — icon changes to checkmark, reverts after 2s. Works on any text.
Color Picker
HSL color picker with canvas gradient, hue slider, hex/rgb output, and opacity slider.
Coming Soon + Waitlist
A minimal coming soon page with an animated countdown, email waitlist capture form, and a background particle field. Clean, focused, converts well.
Context Menu
Right-click context menu with nested sub-menus, keyboard navigation, icons, dividers, and disabled items.
Custom Select
Fully custom select dropdown with search/filter, option groups, multi-select with tags, and clearable single selection.
Dark SaaS Dashboard Preview
A dark SaaS dashboard preview landing page — the app UI IS the hero. Includes a sidebar, metric cards, a revenue chart (CSS-drawn), a data table, and an activity feed.
Data Table
Feature-rich data table with column sorting, row selection via checkboxes, search filter, column visibility toggle, and pagination.
Date Picker
Calendar date picker with month navigation, range selection, disabled dates, and an input trigger — keyboard accessible.
Diff Slider
Before/after image comparison slider — drag the handle to reveal the difference. Touch support included.
Divider Label
Horizontal divider line with centered or left-aligned text label — used for section separators like "or continue with".
Dropdown Menu
Accessible dropdown menu with keyboard navigation, icons, dividers, destructive item variant, and a user account menu demo.
Empty State
Illustrated empty state placeholders for no data, no results, no notifications, and no files found — with optional action button.
Event / Conference Landing
A high-energy conference landing page with a live countdown timer, speaker grid, schedule timeline, sponsor logos marquee, and ticket CTA.
FAB Speed Dial
Floating action button that expands into a speed dial with labeled sub-actions on click, with backdrop and close-on-outside-click.
File Upload Dropzone
Drag-and-drop file upload zone with file list, type/size validation, progress simulation, and remove button.
Health & Wellness App Landing
A soft, calming health and wellness app landing page with a feature scroll, app screenshots, testimonials carousel, and a gentle color palette far from the usual dark demos.
Hover Card
A rich popover card that appears on hover over a trigger — shows user profile, link preview, or product info with a small entry delay to prevent flicker.
Image Lightbox
Click-to-open image lightbox with overlay, zoom, keyboard navigation (←→ Escape), and swipe support on mobile.
Indicator
DaisyUI-style badge indicator — overlays a colored dot/badge on any element (button, avatar, card) for unread counts or status.
Input Variants
A complete set of text input styles — default, with prefix/suffix icons, floating label, input group with helper text, and validation states.
Keyboard Display
Keyboard shortcut display component with individual key caps — single keys, combinations (⌘K), and a shortcut list table.
Legal / Law Firm
A professional law firm website with serif typography, trust signals, practice area cards, attorney profiles, and a consultation booking CTA. Clean, authoritative, confident.
Loading Variants
Six CSS-only loading animations — spinner, dots, bar, pulse, bounce, and ring — in multiple sizes.
Masonry Grid
Pinterest-style masonry layout using CSS columns — items fill vertically with no gaps, responsive breakpoints.
Mega Menu
Full-width multi-column dropdown navigation menu with categories, links, icons, and a featured section.
Minimal Typographic Portfolio
A text-only portfolio where typography IS the design. Kinetic type animations, a work list with hover image previews, and zero imagery in the hero — just letters.
Modal Dialog
Accessible modal dialog with backdrop blur, multiple sizes, confirmation variant, and smooth open/close animations. Closes on Escape and backdrop click.
Navigation Menu
Horizontal navigation bar with mega-menu dropdowns, animated indicator underline, mobile hamburger collapse, and keyboard accessibility.
NFT / Digital Art Marketplace
A dark, high-contrast NFT marketplace landing page with a hero auction card, glowing grid of featured drops, artist profiles, and a live bid counter.
Number Input
Numeric input with increment/decrement stepper buttons, min/max/step support, and keyboard navigation.
OTP / PIN Input
One-time password input with individual digit boxes, auto-advance on type, paste support, backspace to go back, and length variants (4 and 6 digits).
Pagination
Page navigation controls with first/prev/next/last, ellipsis for large page counts, page size selector, and a simple mini variant.
Password Field
Password input with show/hide toggle, strength indicator meter, and accessible label.
Phone Mockup
Mobile phone frame (iOS-style notch) to showcase app screenshots or UI demos.
Podcast Platform
A podcast platform landing page featuring a sticky audio player UI, episode card grid, host bio section, and category filter — styled like Spotify meets editorial.
Popover
Floating popover panels that position themselves relative to a trigger — supports top, bottom, left, right placement with arrow pointer.
Progress Bar
Linear progress indicators — determinate with label, indeterminate animated, stepped segments, and multi-color stacked bars.
QR Code
In-browser QR code generator — type a URL or text and get an instant scannable QR code with a download button.
Radio Group
Custom-styled radio button groups with label, radio card variant, and a segmented button-group toggle.
Range Slider
Custom-styled range sliders — single value with floating tooltip, dual-handle range, stepped with tick marks, and color variants.
Rating Stars
Interactive star rating component — hover preview, click to set, half-star display support, readonly mode.
Resizable Panels
Draggable split panels — horizontal and vertical resize, with min/max constraints, collapse/expand, and a multi-panel layout.
Result Page
Full-page result feedback for success, error, warning, and info states — with icon, message, and CTA actions.
Scroll Area
Custom-styled scrollable container with thin styled scrollbar, auto-hide on idle, and horizontal + vertical variants.
Segmented Control
iOS-style segmented control (pill-style toggle group) — single selection, animated background slide, keyboard support.
Separator
Horizontal and vertical dividers with text label variants — plain line, centered text, gradient fade, dashed, dotted, and decorative diamond.
Sheet / Drawer
Slide-in sheet panels from all four edges — bottom sheet (mobile-first), right sidebar drawer, left nav drawer, and top notification drawer.
Stack Cards
Overlapping card stack UI — hover fans out the cards, click rotates through them. Used for layered content previews.
Startup Pitch Deck
A slides-style scrolljack pitch deck for startups. Each section snaps into view like a presentation slide, with animated stats, investor CTAs, and a problem/solution narrative arc.
Stat Card
Metric stat cards with KPI value, trend badge (up/down %), supporting label, and optional sparkline bar.
Status Indicator
Online/offline/idle/busy status dots with pulse animation, badge variants, and text labels.
Steps Progress
Multi-step progress indicator with completed, active, and upcoming states — horizontal and vertical orientations.
Swap
DaisyUI-style swap component — toggle between two states (icon/text) with flip, rotate, or fade animations. CSS-only, no JavaScript.
Tag Input
Multi-value tag input — type and press Enter or comma to add tags, click ✕ to remove. Keyboard navigation supported.
Text Rotate
Animated text that cycles through a list of words with smooth enter/exit transitions — fade, slide, or typewriter style.
Timeline
Vertical timeline with date markers, icons, content cards, and alternating left/right layout variant.
Toggle Group
Group of toggle buttons for single or multi-selection — like a toolbar or filter chip group. Keyboard navigation with arrow keys.
Tour Spotlight
Product tour component — highlights UI elements with a spotlight overlay, shows tooltip with prev/next navigation.
Watermark
Canvas-based watermark overlay generator — text or image watermark, configurable opacity, angle, repeat pattern.
Animated Gradient Mesh BG
An organic animated gradient mesh background using Canvas 2D. Multiple color orbs drift and blend in real-time — no WebGL required.
Animated Tab Bar
A tab bar with a smooth sliding active indicator. Clicking tabs animates the indicator to the new position using CSS transitions driven by JS measurements.
Clip-path Reveal on Scroll
Images and sections that wipe into view using animated clip-path on scroll. Scrubbed by GSAP ScrollTrigger for frame-perfect control.
Command Palette (⌘K)
A keyboard-driven command palette modal triggered by ⌘K / Ctrl+K, with fuzzy search, keyboard navigation, and smooth open/close animation.
CSS-only Typewriter
A typewriter animation using only CSS steps() timing function — no JavaScript, no libraries.
Drag & Drop List
A drag-and-drop sortable list using the native HTML5 Drag and Drop API. Items animate to their new positions with smooth CSS transitions. Zero dependencies.
Flip Card 3D
A CSS 3D flip card that reveals a back face on hover. Built with CSS perspective, transform-style preserve-3d, and backface-visibility. Zero JavaScript.
Infinite Marquee (GSAP)
A butter-smooth infinite marquee powered by GSAP ticker. Dynamically fills the viewport width with cloned items and reverses direction on hover.
Infinite Marquee / Ticker
A smooth infinite scrolling marquee/ticker built with CSS animation. Content is duplicated to create a seamless loop. Pauses on hover, respects reduced-motion.
iOS-style Toggle Switch
A smooth iOS-inspired toggle switch built with CSS. Supports checked state, disabled state, label association, and a custom color accent. Zero JavaScript.
Mouse Trail Particles
Canvas particles that spawn at the cursor position and fade out, creating a glowing trail effect. Pure vanilla JS.
Skeleton Loader
CSS-only shimmer skeleton loading placeholders for cards and content blocks. Zero JavaScript — pure CSS keyframe animation with a traveling shimmer highlight.
Smooth Number Counter
Stats that count up when they scroll into view. Powered by GSAP ScrollTrigger with eased number interpolation.
Spring Accordion
An accordion component with a spring-like open/close animation. Uses CSS grid-template-rows trick for smooth height transitions — no max-height hacks.
Stagger Fade-in on Scroll
Grid of cards that fade and slide in with a stagger when they enter the viewport. GSAP ScrollTrigger batch.
SVG Path Drawing
SVG paths that draw themselves on scroll using stroke-dashoffset animated by GSAP ScrollTrigger.
Text Scramble / Matrix Decode
Text that scrambles through random characters before resolving to the final string — the classic hacker/matrix decode effect. Zero dependencies.
Toast Notification Stack
A lightweight toast notification system with success, error, warning, and info variants. Toasts stack, auto-dismiss, and support manual close.
Tooltip with Arrow Variants
CSS-only tooltips with four directional arrow variants (top, right, bottom, left). Triggered on hover and focus, with smooth fade-in and accessible markup.
Card Carousel
Auto-transitioning stacked image cards with GSAP-powered depth, tilt, and a timing meter.
Diagonal Wipe Cards
Auto-advancing cards where each image wipes across a diagonal mask using GSAP clip-path animation.
Lenis + GSAP Scroll Cards
Scroll-driven card stack with Lenis smooth scroll and GSAP ScrollTrigger; cards pin and transition as you scroll.
Liquid Cards (Gel Flow)
Auto-advancing image cards with a liquid/gel overlay effect — blur transition and animated blobs on the active card.
Metric Cards
Dashboard-style metric cards with hover lift, chip badges (positive/negative/neutral), and count-up animation for the main value.
Slice Reveal Cards
Auto-advancing cards that break into vertical slices and reassemble using GSAP timelines for a stylized transition.
Split Slide Cards
Auto-advancing cards where each image is split into left/right halves that slide apart and back together for the transition.
3D Product Showcase
Interactive 3D product viewer with PBR materials, three-point lighting, and orbit controls.
3D Product Spotlight
Scroll-driven camera orbits a 3D product on rails, revealing feature cards at each angle.
AI Engineer Portfolio
Terminal-aesthetic portfolio with typing animations, neural network canvas visualization, and scroll-driven project reveals.
AI Engineer Portfolio
Futuristic AI research engineer portfolio with Three.js neural network particle simulation, live training loss curve canvas animation, confusion matrix heatmap, and terminal-style tech stack reveal.
Art Gallery — Atelier Blanc
White museum-aesthetic art gallery with Cormorant Garamond serif and DM Mono. Full clip-path lightbox expand for artwork detail view, masonry grid with hover reveals, timeline history section, and keyboard navigation.
Backlog - MIDI Audio Reactive Lab
MIDI plus microphone-reactive visual bars experiment.
Backlog - Multiplayer Shared Cursor
Shared cursor presence experiment across multiple tabs.
Backlog - Shader Playground UI
Interactive parameter editor for shader-like visual tuning.
Backlog - Webcam Reactive Experiment
Webcam brightness reactive overlay experiment with live camera input.
Backlog - WebGPU Branch Experiment
WebGPU capability probe with fallback branch visualization.
Blog Magazine
Modern blog layout with dark/light theme transitions, animated typography, and reading-view article cards.
Bokeh Hero Base
Ambient glowing field inspired by cinematic landing pages.
Bokeh Particle Hero
Ambient glowing bokeh particle field with mouse-reactive parallax and depth-of-field blur.
Card Automatic Transition
An animated card stack that automatically transitions between cards with smooth scroll-triggered animations, blur effects, and diagonal wipe reveals.
Card Grid Transition
Shared-element transition from a card grid to a detail page using the View Transitions API.
Card Stack Cascade
Stacked cards fan out and rearrange into a grid as you scroll, driven by GSAP ScrollTrigger scrub.
Card Stack Choreography
Looping card stack transforms for staged reveal sequences.
Ciber Portfolio
A cyberpunk-inspired portfolio website featuring neon city grid background with Three.js, scroll-velocity reactive effects, and immersive cyberpunk aesthetics with neon colors and motion systems.
Clip-Path Lightbox Expand
Gallery lightbox that expands from the clicked card's exact position using GSAP clip-path animation. Computes inset() coordinates from getBoundingClientRect, animates to fullscreen and back. Full keyboard navigation.
CoffeeService — Coffee & Bakery Studio
A warm, light-themed coffee and bakery studio website featuring Three.js bean field background, smooth scroll animations with Lenis, GSAP transitions, e-commerce cart functionality, and artisan-focused content.
Concept A - High-Energy Game Launch
Original high-energy launch concept with arena-style motion and feature blocks.
Concept B - Premium Tech Reveal
Original premium product reveal concept with restrained motion and spec staging.
Concept C - Creative Studio Portfolio
Original creative studio concept using collage cards and editorial hierarchy.
Concept D - Music Release Microsite
Original release-night microsite concept with disc motif and animated equalizer bars.
Concept E - Futuristic Dashboard Intro
Original futuristic dashboard intro with telemetry modules and animated counters.
Data Dashboard
Startup metrics dashboard with scroll-linked number counters, gradient text hue-shift hero, animated Canvas 2D bar/donut/area charts, a milestone timeline, and team grid.
Documentary Film — Terra Incognita
Cinematic documentary film site with deep charcoal/rust palette, Libre Baskerville serif, animated Canvas grain overlay, clip-path word reveal for hero title, chapter timeline, CSS film stills with scratch marks, credits reveal, and festival badges.
E-commerce Shop
Mini e-commerce experience with filterable product grid, FLIP animations, cart interactions, and View Transition detail pages.
E-Learning Platform — Meridian
Full e-learning platform UI with indigo/violet palette, Outfit font, Canvas skill tree with bezier node connections, animated course progress bars, scroll-linked stat counters, floating skill badges, and GSAP FAQ accordion.
Esports Tournament — NEXUS
Dark cyberpunk esports platform with black/lime/orange palette, Rajdhani bold display font, Canvas particle field with grid lines, scroll-driven prize counter ($0→$2.1M), angled clip-path buttons, and tournament bracket grid.
Fine Dining Restaurant
Warm editorial restaurant page with cream/terracotta palette, Playfair Display serif typography, SplitText char-by-char hero entrance, menu section with parallax images, and a vintage story section.
Fitness Brand
High-impact brutalist fitness brand with pure black/yellow palette, 14vw condensed headings, scrolling ticker, stat counters with yellow border, and programs grid with zero-gap dividers.
FREQ — Music & Podcast Platform
Neon cyberpunk music platform with magenta/cyan palette, Space Mono monospace typography, animated Canvas 2D waveform background, scrolling artist marquee, chart bars with glitch hover, and typing terminal CTA.
Game Developer Portfolio
Retro pixel art game developer portfolio with CRT scanlines, canvas starfield + animated pixel character, HUD-style stat bars, game cartridge cards, and inventory skill items.
Game Portfolio
A retro GameBoy-inspired portfolio website featuring a live 3D GameBoy model rendered in Three.js with animated pixel-accurate screen, game-themed UI elements, and nostalgic design.
Gradient Text Hue Shift
Text with animated gradient background that shifts hue and saturation as you scroll. Uses CSS Custom Properties updated in real-time by GSAP ScrollTrigger.
GSAP Accordion
Three accordion variants (exclusive, multi-open, minimal) using GSAP height:'auto' animation. Demonstrates smooth open/close without CSS max-height artifacts, arrow rotation spring ease, and aria attributes.
GSAP Hero Intro
Headline and CTA entrance timeline with ambient motion layers.
Horizontal Pinned Gallery
Pinned section with horizontal gallery movement tied to scroll progress.
Horizontal Scroll Gallery
Vertical scroll drives a horizontal gallery with pinned container and panel entrance animations.
Image Gallery Transitions
Thumbnail strip with hero image swap animated by View Transitions crossfade and scale.
Interaction Systems Lab
Phase 6 integration lab for reusable cursor, spotlight, orchestrator, debugger, and sound-reactive hooks.
Interactive 3D Mouse Scene
Grid of 400 spheres with mouse-reactive repulsion physics, spring return, and distance-based color.
Interactive Case Study
Digital agency case study page integrating parallax depth hero cards, scroll-driven SVG workflow diagram, animated result counters, and staggered testimonial reveals.
Kinetic Typography
Word-level animated text entrance pattern for energetic headlines.
Lenis + GSAP Scroll Story
Smooth-scrolling narrative sections with timeline triggers.
Liquid Gradient + Three.js
An immersive portfolio website featuring liquid gradient backgrounds powered by Three.js shaders, interactive mouse tracking, custom cursor, and dynamic color scheme switching.
Luxury Hotel — Grand Résidence
Forest green/champagne luxury hotel site using CSS scroll-snap-type:y mandatory for 5 full-height panels. IntersectionObserver fires per-panel entrance animations, nav adapts color on light panels, Playfair Display SC typography.
Magnetic Cursor
Custom cursor with spring-based following and magnetic attraction to interactive elements.
Morphing Blobs
Three approaches to organic shape animation: CSS border-radius, SVG path morphing, and Canvas bezier curves.
Mouse Light + Magnetic Button
Cursor spotlight and magnetic button hover interactions.
Multimedia Engineer Portfolio
Bold creative technologist portfolio with Canvas 2D particle waveform reacting to mouse, GSAP FLIP grid/list gallery toggle, discipline pills ticker, audio waveform visualizer, and glitch-hover name effect.
Noise & Grain Overlay
Four composited overlay effects: SVG noise filter, canvas grain, CSS scanlines, and radial vignette.
Nova Portfolio
A dark-themed portfolio website with smooth scroll animations, Three.js particle background, expandable project cards, and GSAP-powered transitions.
Page Routing Transitions
SPA-style page routing with directional slide transitions using the View Transitions API.
PageService — Growth & Product Studio
A modern growth and product studio portfolio website featuring Three.js halo field background, smooth scroll animations with Lenis, GSAP-powered transitions, and a data-driven service showcase.
Parallax Depth Card Grid
Cards positioned at different Z-depth layers reveal with staggered 3D entrance animations. Hover lifts cards forward. Depth-based scroll parallax creates cinematic feel.
Particle Tunnel
Cinematic depth-heavy particle tunnel with custom shaders and bloom post-processing.
Photography Portfolio — Dark Film
Dark film-aesthetic photography portfolio with warm black/gold palette, grain overlay, EB Garamond serif italic typography, masonry photo grid with parallax hover, and series list with staggered reveals.
Pinned Scroll Sections
Sections pin in place while multi-step timelines play, driven entirely by scroll position.
Premium Velocity Experience
Three-layer rendering showcase: Three.js wireframe hero reacting to scroll, Canvas 2D radial speed lines intensifying with scroll velocity, and gradient text hue-shift — all synchronized.
Product Landing Page
Apple-style wireless earbuds product page with 3D hero, scroll-pinned feature reveals, and cinematic text choreography.
Real Estate — Light Minimal
Light-mode architectural property site with warm grey palette, Fraunces italic display and Inter body fonts, split hero with parallax image stack, listings grid with filter bar, and dark contact section.
Red Portfolio
A high-velocity portfolio website featuring Three.js speed field background, scroll-reactive speed lines, and motion-first design with red and blue accents for fast-paced product teams.
Redline Portfolio
A minimal dark portfolio with high-contrast red and black design, smooth animations, and a focus on UI systems and capabilities.
SaaS Landing Page
Professional SaaS product page with CSS device mockups, pinned feature sections, pricing cards, and testimonial animations.
Scroll Camera Narrative
Scroll through story chapters as the camera flies between 3D scene waypoints with cinematic transitions.
Scroll Progress Indicators
Three simultaneous scroll indicators: top bar, circular SVG progress, and section dot navigator.
Scroll Trigger Story
Section-by-section storytelling using viewport-triggered reveals.
Scroll-Linked Number Counters
Numeric metrics animate from 0 to target as you scroll. Counter speed is directly linked to scroll position using GSAP ScrollTrigger scrub.
Shader Background
Full-screen GLSL fragment shader with layered simplex noise creating flowing aurora bands.
Smooth Scroll Story
Parallax sections with Lenis smooth scrolling and GSAP ScrollTrigger choreography.
Software Engineer Portfolio
Dark brutalist software engineer portfolio with bold typography, scroll-driven section reveals, skill bars, and project showcases.
Split Screen Reveal
Two-panel layout where right scene reveals progressively on scroll.
Spotlight Reveal
Mouse-driven spotlight that reveals colorful hidden content through a dark overlay using CSS masks.
Staggered Grid Entrance
Grid items animate in with position-based stagger delays. Multiple animation styles: fade, scale, slide, flip.
SVG Workflow Animation
SVG connector paths draw themselves as you scroll using stroke-dasharray/dashoffset technique. Workflow nodes and labels appear in sequence with scroll-triggered reveals.
Tech Lead Portfolio
Corporate tech lead portfolio with Three.js wireframe hero, vertical career timeline, expertise grid, and open source repo showcase.
Text Reveal on Scroll
Per-character and per-line text animations triggered on scroll with GSAP SplitText.
Theme Transition
Dark/light theme toggle with circular clip-path wipe powered by the View Transitions API.
Three.js Distorted Plane Shader
Fullscreen shader background with procedural distortion and glow.
Three.js Instanced Mesh Field
High-count object field using GPU instancing for performance.
Three.js Morphing Geometry
Point cloud morph transition between cubic and spherical volumes.
Three.js Orbit + Bloom
Orbiting object field rendered with bloom compositing.
Three.js Particle Tunnel
Depth-heavy cinematic scene with post-processing glow.
Three.js Product Spotlight
Product spotlight with scroll-driven camera rail movement.
Three.js Scroll Camera Narrative
Narrative scene where scroll progress drives camera chapter rails.
Transition Card
Scroll-triggered card transitions with smooth fade, blur, and scale effects. Cards smoothly transition as you scroll through the sequence.
Travel Editorial
Immersive travel editorial with horizontal photo scrolling, FLIP layout transitions, and warm typographic design.
Travel Experience
Immersive travel booking experience with a scroll-driven 3D airplane flight path and animated destination reveals.
UX/UI Designer Portfolio
Warm editorial UX/UI designer portfolio with GSAP SplitText hero, rotating role words, View Transitions case study overlay, and scroll-driven section reveals.
Velocity-Aware Scroll + Speed Lines
Canvas speed lines radiate from center and intensify based on how fast you scroll. Lenis velocity data drives line count, length, and opacity in real-time.
Video Scroll Scrub
Scroll-driven video frame scrubbing using Canvas 2D procedural scenes. Demonstrates the currentTime scrub pattern with interpolated hue/gradient scenes, film grain, vignette, and lens flare.
View Transition App Shell
Primary and nested navigation transitions in a stable shell layout.
View Transition Card Detail
Shared-element transition from card grid to detail page.
View Transition Grid Filter Identity
Filterable grid that preserves card identity while items reorder.
View Transition Hybrid CSS + JS
Shared-element state swaps coordinated with JavaScript panel choreography.
View Transition Theme Mode
Theme/mode switch demo with shared title and CTA continuity.
CSS Dot Loader
A smooth three-dot loading animation built entirely with CSS — no JavaScript, no SVG.
Glassmorphism Card
A frosted-glass card effect using CSS backdrop-filter, subtle borders, and layered transparency.
Hero CTA Section
A full-width hero section with gradient headline, eyebrow badge, two CTA buttons, and radial glow background. Pure CSS — no JS required.
Hero Parallax
A multi-layer parallax hero section driven by scroll position, creating depth through independent layer speeds.
Launch Hero Page
A clean product landing hero with nav, CTA buttons, and a three-point feature grid.
Magnetic Button
A button that magnetically attracts toward the cursor when nearby, creating a satisfying interactive pull effect.
Scroll Fade In
Smooth fade-in animation triggered by Intersection Observer as elements enter the viewport on scroll.
Sankey Chart
A complex flow diagram (Sankey) built with D3.js. Features splitting and merging flows, automatic node positioning, and interactive link highlighting. Perfect for visualizing income statements or resource allocations.