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 — 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 — 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.
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 — 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 — 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 — 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, 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 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.