Library

AI Product — Chat Assistant Landing

A dark, premium one-page marketing site for Lumio, a fictional conversational AI assistant. It pairs a violet-to-cyan glow aesthetic with an animated hero chat mockup that types a prompt and streams a reply, plus trust logos, a memory and tools feature grid, a three-step how-it-works flow, a genuinely interactive try-a-prompt playground, testimonials, a monthly and yearly pricing toggle, an accordion FAQ, and a waitlist call to action. Built with semantic HTML, responsive CSS, and dependency-free vanilla JavaScript.

Case Study Highlight (Remotion)

A cinematic 15-second Remotion composition presenting a four-act B2B case study for TechCorp Inc — company intro with logo spring, challenge statement, a staggered solution reveal for Launchpad's three key features, animated metric cards counting up to +340% ROI, 2x faster deploys, and -60% support tickets, then a closing CTA with a pulsing button.

Changelog Video (Remotion)

Animated SaaS changelog video built with Remotion. Reveals a product logo, version badge, and release date, then sequences three changelog entries — New Feature, Improvement, and Bug Fix — with spring-driven slide-in cards and color-coded category pills. Closes with a branded CTA link. Ready to drop into any release workflow or marketing loop.

Feature Announcement (Remotion)

A punchy 10-second Remotion composition that announces a new SaaS feature with a full-screen radial glow burst, a glowing NEW pill badge, a bold feature name flying in from the left, a staggered 3-up highlight section, and a branded closing CTA — all driven by spring physics and pure inline styles on the dark indigo palette.

Integration Showcase (Remotion)

A cinematic 10-second Remotion composition that places a product logo at the center of the screen with a pulsing glow ring, then flies eight integration cards — Slack, GitHub, Salesforce, Stripe, Notion, Jira, Figma, and Zapier — in from the edges one by one, each settling into a circular orbit. Connection lines draw outward from the logo to every card, finishing with a count-up to 500+ and an Explore integrations CTA.

Pricing Reveal Animation (Remotion)

Three staggered pricing cards (Starter, Pro, Enterprise) spring up from below with bounce physics, each revealing plan name, price, feature checklist, and CTA button in a sequenced cascade. The highlighted Pro card carries a pulsing Most Popular badge, a branded indigo glow, and a subtle scale-pop after all cards settle. Closes with a 14-day free trial tagline fade. Built with pure Remotion — no external animation libraries.

Remotion — Product Demo Walkthrough

A product demo walkthrough video built with Remotion that simulates navigating through a SaaS dashboard — highlighted UI regions appear in sequence with pulsing rings and annotation callouts. Each feature is spotlighted for a few seconds with a bold label and description while the rest of the interface dims. Great for product launch videos, onboarding, and sales demos.

Product Tour Video (Remotion)

A 15-second Remotion composition that walks viewers through three screens of a dark SaaS app — a live dashboard with a drawing revenue chart and KPI cards, a settings panel with an animated automation toggle, and a reports view with a growing quarterly bar chart and staggered table rows — with fade-zoom transitions and a persistent progress indicator.

Product Review Video (Remotion)

An 8-second animated product review card for SaaS marketing — a large avatar springs in, reviewer name and title fade up, five gold stars fill left-to-right, a quote block expands with word-by-word text reveal, then a company logo pill and verified-customer badge slide in from the bottom.

Animated Rating Stars (Remotion)

A focused 6-second Remotion composition where five gold stars spring in one by one with a glowing halo, a score counter eases from 0.0 to 4.9, a review count ticks up, and a five-row breakdown bar chart draws left to right — ready to embed in product showcases, app-store promos, or SaaS landing videos.

Release Notes Reel (Remotion)

A scrolling 12-second Remotion reel that presents three product release blocks on dark document-style cards. Each version block slides up with spring physics, reveals its version badge and date, then staggers in four bullet items tagged as new, improved, or fixed. A thin gradient progress bar tracks elapsed time across the full duration.

Roadmap Teaser Reel (Remotion)

An animated SaaS product roadmap teaser built with Remotion — a timeline line draws itself left to right, four quarter markers drop in with spring bounce, feature cards slide up beneath each marker with status pills, the current quarter glows with a cyan pulse, and a branded CTA closes the reel.

Testimonial Wall Video (Remotion)

Animated social-proof wall built with Remotion. Six testimonial cards in a 2×3 grid spring onto a dark SaaS canvas with staggered scale entrances, then a sequential highlight sweep pulses each card with a glowing brand border. Closes with a 4.9/5 star rating and review count animating up. Perfect for landing pages, product launch reels, and social ads.

UI Showcase Reel (Remotion)

A fast-paced design-system highlight reel rendered with Remotion. Six UI panels — modal dialog, data table, bar chart, kanban board, notification feed, and settings form — each slide in from the right, hold for two seconds, then exit left. A persistent bottom filmstrip tracks all panels with the active one highlighted.

SaaS — Customers / Accounts Admin

An internal customers and accounts admin built as a dense, clean data-table. Browse fictional company accounts with plan badges, MRR, seat counts, status, and health indicators, then refine with live search and plan and status filters and sortable columns. Click any row to open a detail drawer with overview, plan, usage meters, activity feed, and billing history. Includes row selection with bulk export, CSV download, pagination, and a working light and dark theme toggle.

SaaS — SaaS Metrics (MRR · Churn · LTV)

An investor-grade SaaS metrics dashboard built with vanilla HTML, CSS, and JavaScript. Headline cards surface MRR, ARR, churn, LTV, and net revenue retention with colored delta pills, beside an MRR-movement bar chart that stacks new, expansion, and churned revenue. A growth area chart, a cohort-retention heatmap, and a plan-mix donut complete the view. A 30d, 90d, and 12m period switch recomputes every figure and redraws all charts live, with hover tooltips, theme toggle, and keyboard support.

SaaS — API Keys & Webhooks

A developer-grade API keys and webhooks manager built in vanilla HTML, CSS, and JavaScript. The keys table shows masked secrets with reveal and copy, scopes, created date, and last used, while creation generates a fresh secret revealed only once and revoke asks for confirmation. A webhooks section lists endpoint URLs, subscribed events, and delivery status, lets you add new endpoints, and fires a test send that returns a simulated 200 OK, all with a working light and dark theme.

SaaS — Billing & Subscription

A finance-grade SaaS billing and subscription page for a fictional analytics product. It pairs a current-plan card showing price, seats, and renewal date with a live usage summary of animated meter bars, a Visa payment-method card, and a downloadable invoice history table. A change-plan dialog reproduces the proration upgrade pattern, an update-payment form validates and reformats card input, and download actions fire contextual toasts. Includes a working light and dark theme toggle, accessible focus traps, and a responsive layout.

Collection Carousel

Auto-scrolling horizontal carousel with snap points, arrow navigation, pause on hover, and a collection selector.

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.

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.

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.

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.

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.

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.

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.

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.

Smooth Number Counter

Stats that count up when they scroll into view. Powered by GSAP ScrollTrigger with eased number interpolation.

CSS-only Typewriter

A typewriter animation using only CSS steps() timing function — no JavaScript, no libraries.

SVG Path Drawing

SVG paths that draw themselves on scroll using stroke-dashoffset animated by GSAP ScrollTrigger.

Stagger Fade-in on Scroll

Grid of cards that fade and slide in with a stagger when they enter the viewport. GSAP ScrollTrigger batch.

Mouse Trail Particles

Canvas particles that spawn at the cursor position and fade out, creating a glowing trail effect. Pure vanilla JS.

Text Scramble / Matrix Decode

Text that scrambles through random characters before resolving to the final string — the classic hacker/matrix decode effect. Zero dependencies.

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.

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.

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.

Streaming — Hero Billboard

A cinematic, dark-first hero billboard for streaming platforms with a full-bleed backdrop, gradient scrim, title logo, match score and quality badges, synopsis, and play plus more-info buttons. An auto-rotating featured carousel cycles through fictional titles with progress-filled indicator dots, mute and replay controls, keyboard arrows, hover-to-pause, and a synced thumbnail row below the billboard.

Museum — Exhibition Page

A refined, gallery-toned single-exhibition page with a full-bleed gradient hero, On view status badge, run dates and a live days-left countdown. Includes a curatorial statement, four thematic chapters, a filterable featured-works grid with framed artwork placeholders, a timed-entry ticket selector with running total, and related programs. Sticky mini-header reveals on scroll with scroll-spy anchor navigation, all in vanilla HTML, CSS, and JavaScript.

Portfolio — Hero / Intro Header Variants

Three drop-in portfolio hero headers for the same fictional designer, stacked so you can compare and copy the one you like. A centered name with role, one-liner and copy-email CTA; a split layout pairing intro text with an animated CSS avatar shape; and a big kinetic name with a self-typing role rotator. Vanilla JS powers the rotating titles, a cursor-follow gradient glow and a clipboard copy-email button with toast feedback. Neutral Inter base, accessible, responsive.

Game — Character / Hero Roster (select grid)

A neon-dark hero roster page for a fictional shooter, Hollow Reign by Nullforge. Browse eleven heroes as rarity-ringed portrait cards, filter by Tank, DPS, or Support role chips, search by name, and toggle a rarity sort. Selecting a hero drives a featured panel with splash art, lore, difficulty pips, and animated stat bars, plus an ability strip with hover tooltips. Pure HTML, CSS, and vanilla JS with no build step or dependencies.

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

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

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.

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.

Hero Code Space Background

Immersive 3D perspective background with floating code panels, scroll-driven depth animation, and responsive depth culling.

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.

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.

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.

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.

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.

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.

Airline — Frequent Flyer Card

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

Coworking — Mobile Access Card

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

Job Board — Job Listing Card

A reusable, scannable job listing card for a careers board or ATS. Each row pairs a colored company logo with the role title, company, location and a green salary chip, plus status badges for new, urgent and remote roles. A bookmark toggle tracks saved jobs in a live header counter, quick-apply turns into an applied confirmation, and chip filters and search narrow the list. Clean, accessible, responsive vanilla HTML, CSS and JavaScript with no dependencies.

Nonprofit — Pledge / Sponsorship Card

A warm set of four nonprofit sponsorship cards for sponsor-a-child and sponsor-a-cause programs, each with a photo placeholder, name, story snippet, monthly amount and a progress thermometer. Cards flip to reveal the impact details, facts and donor recognition, while a sponsor toggle adds each pledge to a running monthly total with animated counters and friendly toasts. Built with semantic HTML, responsive CSS and vanilla JavaScript, accessible and keyboard-friendly down to small screens.

Ticketing — Event Card

A reusable event ticketing card pattern rendered as a responsive grid of six distinctive variants. Each card pairs a photographic gradient hero with a floating date badge, category tag, venue line, and a prominent price-from figure. Interactive states cover a save heart toggle with a satisfying pop, hover lift, low-stock and sold-out badges, plus disabled checkout for unavailable shows. Keyboard friendly with a lightweight toast helper and full WCAG-minded contrast.

Banking — Balance Card

A trust-first fintech balance card you can drop into any banking dashboard. Shows account name and type, a masked card number, and a balance set in tabular figures with a mini sparkline trend. A per-card and global hide/show toggle blurs sensitive numbers, status pills flag activity and due dates, and quick actions sit one tap away. Ships as three real-feeling variants — checking, high-yield savings, and a credit card with a utilisation bar — in a responsive grid, vanilla JS only.

Banking — Virtual Card Visual

A polished, 3D flippable virtual bank card component built in the trust-first fintech style with Inter typography and tabular figures. The brand face shows a metallic chip, contactless glyph, masked PAN, holder and expiry, then flips in 3D to reveal the CVV on a magnetic-stripe back. Tap to flip, reveal or hide the number, and copy it to the clipboard, and switch live between three designs — metal black, aurora gradient and minimal white — all in vanilla JavaScript with a small toast helper.

Banking — Card Detail

A trust-first card management screen for a fintech app, featuring an animated 3D card that flips to reveal its security code, a one-tap freeze and unfreeze control, a live monthly spending-limit slider with usage tracking, copy-to-clipboard card number, virtual card creation, granular controls for online, contactless, ATM and international use, and a card transaction feed with credit and debit amounts plus cleared, pending and failed status pills.

LMS — Course Card

A reusable e-learning course card rendered as a responsive grid of six real-feeling variants — free, paid, in-progress and completed. Each card pairs a gradient thumbnail with a level pill, course title, instructor avatar, half-step star rating, duration and lesson counts, and either a price block or an animated progress bar. Cards lift on hover, quick-enroll inline, filter by type, and a study mode swaps the calm light theme for a focused dark palette.

Streaming — Poster Card

A reusable cinematic poster and landscape card for streaming UIs. Each tile shows quality-badged artwork that expands on hover into a rich preview popover with title, match score, rating, runtime, genre chips, and quick play, add-to-list, like, and mute controls. Continue-watching variants surface an inline progress bar, while trending tiles add rank markers. Ships as a horizontal-scroll row plus a responsive catalogue grid, fully keyboard and touch friendly with toast feedback.

Museum — Artifact Card

A curatorial artifact card for collection grids, shown across six fictional works and three display sizes. Each card frames a CSS-drawn image inside a soft mat, then sets the title in italic serif above artist, date, medium, a gold catalog-number chip, and an On view or In storage status pill. Hovering or focusing a card lifts it and reveals quick actions to favorite the piece or add it to a self-guided tour, with a live tour counter and confirmation toasts throughout.

Museum — Gift-Shop Product Card

A museum gift-shop product gallery of six fictional editions and objects — Vandermeer prints, a Goryeo celadon monograph, a Salviati map tote, an enamel pin and more. Each card frames a CSS-drawn artwork in a soft mat, then sets an italic serif title above its catalog number, star rating, list price and a gold member-price badge. Colour swatches recolour the art, a quantity stepper bounds the count, and add-to-bag increments a live masthead counter with confirmation toasts and a hover quick-view.

Cookbook — Printable Recipe Card

A compact, editorial recipe card built to print beautifully on real index stock. It pairs a serif title, a tiny meta row for time and servings, a warm gradient thumbnail, and a condensed two-column layout that splits ingredients from method. A size toggle switches between three-by-five, four-by-six, and full-page formats, while a dedicated print stylesheet strips the chrome to clean black-on-white that fits a single page. Recipe content is fictional and for layout demonstration only.

Science — Structured Abstract Card

A polished, self-contained structured abstract card for a scientific article, with labelled Background, Methods, Results and Conclusions segments, a keyword chip row, article-type and open-access badges, a DOI line, and copy actions for the abstract and an APA citation. Includes an accent left rail, peer-review badge, a smooth reveal for the conclusions section, and a toast helper, built with vanilla HTML, CSS and JavaScript only.

Science — Molecule / Structure Viewer Card

An interactive ball-and-stick molecule viewer card built with inline SVG and vanilla JavaScript. Drag to rotate a pseudo-3D structure, scroll or click to zoom, and toggle auto-spin while depth is faked through radius scaling and opacity. A structure selector switches between water, methane, benzene, and caffeine, each with a CPK element legend, formula, molar mass, atom and bond counts, and a fictional Helix Structural Database citation.

Widget — Resizable widget card frame

A reusable dashboard widget card frame for a fictional ops workspace — each card carries a title, subtitle, an S/M/L size toggle that smoothly re-spans the grid, a body slot with an inline-SVG chart (area line, channel bars, or plan-mix donut), a KPI headline with an up/down delta chip, and a synced-status footer. A keyboard-friendly overflow menu opens a popover with Refresh, Expand, and Remove; refresh swaps in fresh data behind a spinner, expand lifts the chart into a modal, and cards drag to rearrange. Pure vanilla, no chart libraries.

Form — Card / payment input group

A polished credit-card payment field group with a live, flipping card preview. The number input formats into brand-correct groups as you type, detects Visa, Mastercard, Amex and Discover from the prefix, and runs a real Luhn checksum for inline validation. Expiry is masked to MM/YY with a past-date guard, the CVC adapts to 3 or 4 digits by brand and flips the card to its back on focus, and cardholder name plus billing postal code round out a fully keyboard-accessible, demo-only checkout.

Storybook — Alphabet Flashcard Set

A bright, tactile A-to-Z flashcard deck for early readers, built with rounded everything and a friendly storybook palette. Each card shows a giant letter, a bouncing emoji object, and the matching word; tap to flip it with a 3D card spin and read a fun fact on the back. Prev and next buttons hop through the deck, a shuffle remixes it, progress dots and an alphabet jump strip track where you are, and a Say it button speaks the letter aloud with an animated mouth. Includes an easy-read font toggle.

Airline — Load Factor Report

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

Airline — Ops Control Center

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

Auto — Technician Productivity

A service-bay technician productivity report for an auto repair shop. Shows a sortable scorecard of billed versus available hours, efficiency percentages, jobs closed and labor revenue per tech, plus an efficiency leaderboard and a billed-vs-available hours bar chart. Day, week and month timeframe toggles recompute every metric, and clicking any technician opens a drill-in drawer with an efficiency ring, open work orders and certifications. Pure HTML, CSS and vanilla JavaScript with no dependencies.

Auto — Shop Dashboard

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

Auto — Customer & Vehicle Database

An admin customer and vehicle database for a repair shop, built as one self-contained page. A searchable table matches across names, plates, VINs and phone numbers with quick filters for VIP, open repair orders and overdue service. Clicking a row slides open a customer record showing lifetime spend, visit count, vehicle cards with VIN and odometer, a service-history timeline with diagnostic codes, and an inline note composer that writes back instantly.

Coworking — Billing & Subscriptions

A warm-industrial billing and subscriptions console for a fictional coworking space, built with plain HTML, CSS and vanilla JavaScript. It pairs an animated revenue rollup — MRR, active members, outstanding balance, collected — with a filterable members table showing plan, status, MRR and next invoice, plus dunning flags on past-due accounts. A recent-invoices list opens a sliding detail drawer with line items and tax, where you can mark paid or send reminders, change a member plan, and run a dunning sweep.

Coworking — Occupancy Dashboard

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

Coworking — Member Dashboard

A warm industrial member dashboard for a fictional coworking space, built with plain HTML, CSS and vanilla JavaScript. It surfaces today's bookings, an animated credits-and-hours meter, quick-book tiles with live free or occupied status, upcoming community events with RSVP, member shoutouts you can cheer, and an access card with check-in and a decorative door QR. Every control works: cancel a booking and the hours refund, top up, switch tabs, and watch the ring fill.

Job Board — Candidate Detail

A recruiter-facing candidate detail page for an applicant tracking system, built with vanilla HTML, CSS, and JavaScript. It pairs a profile header showing name, role, stage pill, and star rating with tabbed sections for resume, scorecard, activity, and notes. Interview criteria sliders feed a live average back into the overall rating, while a sticky action bar advances, rejects, or schedules the candidate with toast confirmations and a self-updating activity feed.

Job Board — Job Posting Editor

A polished applicant-tracking job posting editor with a split-pane layout: edit title, department, location, employment type, salary range and a mock rich-text description on the left, build add/remove screening questions with required toggles, and watch a candidate-facing job card update live on the right. Toggle remote-friendly, save as draft or publish, and see status pills, salary and location chips, a bookmark toggle, and friendly toasts confirming every action.

Job Board — Candidate Pipeline

A recruiter-side ATS pipeline that turns a hiring funnel into a scannable kanban board. Five color-coded stages — applied, screening, interview, offer, and hired — carry candidate cards with generated avatars, star ratings, location and salary chips, remote badges, and skill tags. Drag candidates between columns or nudge them with arrow buttons, watch live column counts update, open a quick-view drawer for full context, and filter the whole board by role, minimum rating, or free-text search. Built with semantic HTML, CSS variables, and vanilla JavaScript.

Job Board — Applications Tracker

A polished seeker dashboard for tracking the whole job hunt in one scannable view. Pipeline rows show each application with company logo, location and salary chips, remote badges, and color-coded status pills for applied, in review, interview, offer, and rejected. Filter by status, withdraw or re-apply, resume saved jobs into the pipeline, bookmark recommended roles, and watch a profile-completeness meter climb as you act on nudges. Built with semantic HTML, CSS variables, and vanilla JavaScript.

Nonprofit — Campaign Manager

A warm, polished back-office campaign manager for a fictional charity, showing fundraising drives as cards or a sortable table with status badges, animated progress bars, goal-versus-raised totals, and date ranges. Staff filter by status, search by name, toggle the card and table views, and pause or activate drives in one click. A slide-in drawer creates or edits a campaign with goal, dates, status, a short story, and repeatable giving tiers, while impact numbers and a registered-charity badge reinforce transparency.

Nonprofit — Donations Dashboard

A warm, human nonprofit admin dashboard for tracking fundraising. It surfaces four headline KPIs (total raised, recurring revenue, average gift, new donors), a redrawable donations-over-time area chart with hover tooltips, a recurring-versus-one-time donut split with live impact numbers, ranked top campaigns with drill-in filtering, a goal thermometer with leadership donor recognition, and a searchable recent-donations table that exports to CSV — all self-contained vanilla HTML, CSS, and JavaScript.

Nonprofit — Volunteer Manager

A warm, human nonprofit admin screen for managing a volunteer roster and shift roster in one view. It pairs a searchable, filterable volunteers table — name, role, logged hours and status — with a Saturday shift grid showing live fill thermometers and open slots. Coordinators can approve pending applicants, log hours, select a volunteer and assign them to an open shift, while impact stats roll up total hours, active helpers and estimated meals served.

Ticketing — Door Check-in Scanner

A bold door check-in console for festival gate staff. A mock camera viewport with an animated targeting frame and sweeping laser feeds a color-coded result card that turns green for valid passes, amber for already-used tickets, and red for invalid codes. A live counter tracks admitted guests against capacity with a scan-rate readout, while a manual lookup searches by name or ticket code and a recent-scans feed logs every decision. Vanilla HTML, CSS, and JavaScript only.

Ticketing — Event Setup

A bold event setup wizard for organizers. A four-step flow covers event details, a live ticket-tier builder with per-tier color, price and quantity, a seating-mode switch between general admission and reserved sections, and publish toggles. Every edit drives a live ticket-style preview with color-coded tiers, sold-out flags and running capacity and gross-potential totals. Inline validation blocks publishing until the name, venue and a future date are set. Vanilla JS only.

Ticketing — Organizer Dashboard

A bold, high-contrast organizer dashboard for the fictional Neon Pulse Festival. Four KPI cards track tickets sold, revenue, capacity and gate scans with trend chips and a low-stock badge. A timeframe toggle redraws an SVG sales chart across 7, 30 and 90 days, an interactive donut breaks sales down by ticket tier, a check-in progress ring shows pre-event readiness, and a recent-orders table drills into a ticket-stub drawer. Vanilla JS only.

Remotion — Album Release Promo

A cinematic 6-second album-release promo rendered at 1920x1080 with three distinct acts: a letter-by-letter title reveal with purple glow, an animated album-cover artwork flanked by a slowly rotating vinyl record and a staggered eight-track tracklist, and a gold OUT NOW finale with spring-bounce scale and streaming platform callout — all driven by Remotion spring and interpolate, no audio file needed.

Anchor Intro Card (Remotion)

A broadcast-quality TV anchor introduction card rendered in Remotion at 1280x720 30fps. Features a sweeping red horizontal line at 40% screen height, a spring-driven charcoal anchor card with a red left accent strip, animated name and title reveals, location and established-year badges, and a subtitle text fade below the card — all wired to frame-accurate spring and interpolate animations across four distinct broadcast scenes.

Appointment Reminder Clip (Remotion)

A 6-second vertical story-format reminder clip rendered at 1080x1920 30fps — deep clinic dark palette with teal accents, ambient glow orbs and floating particles, a spring-bounced calendar icon with a pulsing coral notification dot, a patient name greeting fade-in, a staggered appointment card revealing Doctor, Specialty, Date and Time, and Location fields sequentially every 12 frames, and a shimmering Confirm Appointment CTA button that fades in at the bottom.

Remotion — Audiogram Waveform Clip

A cinematic podcast audiogram rendered with Remotion at 1920x1080 30fps — 80 vertical waveform bars pulse rhythmically using stacked sine waves to simulate natural speech energy, flanked by a gradient-ringed avatar, bold episode title, guest byline, and a live-updating progress bar with playhead dot that fills from 0 to 100 percent over a six-second clip.

Anniversary Video (Remotion)

A 5-second warm anniversary video rendered at 1280×720 30fps — soft amber and dusty-rose palette, gently oscillating particles, a serif headline sweeping in from the left, a spring-bounce year badge, a pair of name placeholders flanking an SVG heart, a sequential Past/Present/Future timeline with animated connector line, and an orbiting hearts burst finale.

Remotion — Beat-Synced Animation

A six-second abstract Remotion animation locked to 120 BPM, firing a ripple ring, background flash, and particle sparks on every beat at 15-frame intervals, while rotating gradient-bordered squares breathe with sine-driven scale, a center circle kicks with a spring impulse on impact, and four color-cycling 16th-note indicator dots at the bottom track the rhythmic pulse through purple, cyan, pink, and gold accents.

Birthday Greeting Video (Remotion)

A cheerful 4-second birthday animation built with Remotion — 80 colorful confetti particles burst from the center using launch-angle physics, staggered balloons float upward with sine-wave wobble, letter-by-letter rainbow text bounces in with spring, a name slides in from the left, and an age badge counts up before a warm wishes ribbon fades in at the bottom.

Breaking News Bumper (Remotion)

A cinematic TV-style breaking news bumper for NNX News Network rendered in Remotion at 1280x720 30fps. Features a bold diagonal red band wipe, spring-driven headline card with thick left border, scrolling bottom chyron with a pulsing LIVE badge, and a clean NNX logo stamp outro — all driven by frame-accurate spring and interpolate animations across four distinct broadcast scenes.

Byline / Credit Animation (Remotion)

A broadcast-quality Remotion composition that cycles through three professional credit styles at 1280x720 30fps. Scene 1 springs a reporter byline with a red pill badge onto the bottom-left via a stiff spring. Scene 2 fades a minimal photographer overlay into the top-right corner with a scrim card. Scene 3 slides up a full-width production credit band with letter-by-letter text reveals and a network logo stamp — all across 120 frames of frame-accurate animation.

Karaoke Caption Clip (Remotion)

A karaoke-style caption animation that highlights each word in sync with a mock timeline — bold white text, active word highlighted in yellow — 1920×1080.

Case Study Highlight (Remotion)

A cinematic 15-second Remotion composition presenting a four-act B2B case study for TechCorp Inc — company intro with logo spring, challenge statement, a staggered solution reveal for Launchpad's three key features, animated metric cards counting up to +340% ROI, 2x faster deploys, and -60% support tickets, then a closing CTA with a pulsing button.

Certificate Reveal (Remotion)

Elegant 5-second certificate animation at 1280×720 30fps — a parchment document spring-scales from center with animated SVG border tracing, a typewriter recipient name, a rotating gold seal stamp popping in from the bottom right, ribbon banners sliding from both sides, corner star ornaments, and a final shimmer sweep; gold, navy, and cream palette for a formal, prestigious feel.

Changelog Video (Remotion)

Animated SaaS changelog video built with Remotion. Reveals a product logo, version badge, and release date, then sequences three changelog entries — New Feature, Improvement, and Bug Fix — with spring-driven slide-in cards and color-coded category pills. Closes with a branded CTA link. Ready to drop into any release workflow or marketing loop.

Clinic Hours Card (Remotion)

A polished 5-second vertical story card for Greenfield Medical Center rendered at 1080×1920 30 fps — dark clinic palette, a rotating SVG clock header, staggered hours rows for Mon–Fri / Saturday / Sunday with teal and coral status dots, and a pulsing Today is Open banner that slides up from the bottom at frame 90 for an instant at-a-glance schedule post.

Clinic Promo Video (Remotion)

A 9-second vertical promo animation for Greenfield Medical Center built with Remotion — features a spring-scaled clinic logo with a pulsing cross icon and fading tagline, three teal service pills (Primary Care, Specialist, Lab Tests) sliding in with left-stagger entrance, a bold coral CTA headline with an animated underline sweep, a character-by-character phone number typewriter, and a soft teal gradient sweep outro with the clinic name fading back in over a deep radial glow background.

Congratulations Animation (Remotion)

A joyful 4-second congratulations animation built with Remotion — 60 deterministic confetti pieces (squares, circles, and rectangles) explode from center with realistic launch-angle physics, colorful burst lines radiate outward, the word CONGRATULATIONS bounces in letter-by-letter with rainbow spring overshoot, a floating SVG trophy scales in, a gradient name badge slides up, and 12 sparkle stars twinkle around the composition.

Countdown Teaser (Remotion)

An event countdown teaser with animated numbers, date reveal, and pulsing glow — counts down days, hours, minutes to a launch date — 1080×1920.

Remotion — Online Course Promo Video

An online course promo video built with Remotion — a bold hero title animates in, followed by a row of three feature highlights (video count, duration, student count) counting up from zero. A course thumbnail mockup slides in from the right, and an Enroll Now CTA button pulses to close. Great for course landing pages, social media promotion, and email campaigns.

Hero Code Space Background

Immersive 3D perspective background with floating code panels, scroll-driven depth animation, and responsive depth culling.

Add to Cart Effect

Animated add-to-cart feedback with badge bump and flying item — satisfying shopping interaction.

Skeleton Loading Effect

Animated skeleton placeholder with shimmer pulse — smooth loading state for cards and content blocks.

Drawer Slide Effect

Slide-in/out drawer panel from any edge — smooth gesture-friendly panel transition for menus and sheets.

Nav Underline Effect

Animated underline on active nav link — smooth indicator for tabs and breadcrumbs.

Modal Enter Effect

Fade and scale enter/exit for modals and overlays — smooth open/close transition.

Button Press Effect

Scale and shadow on press with optional success checkmark — satisfying click feedback for buttons and controls.

Shop — Mini-cart Flyout

A polished e-commerce mini-cart drawer that flies in from the right when you add a product. It packs slide-in line items with thumbnails, quantity steppers, and per-line totals, a live free-shipping progress bar, a running subtotal, and view-cart plus secure-checkout actions. Built with vanilla JS, it features a focus trap, Escape and overlay dismissal, an animated badge, recompute-on-change totals, and a friendly empty state.

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.

Navigation Header

Sticky header with logo, desktop nav links, GitHub icon, and a slide-in mobile drawer menu with backdrop blur.

Keyboard Navigable Menu

Menu component fully navigable by keyboard using arrow keys, Home, End and type-ahead search following WAI-ARIA menu pattern.

React Native Bottom Tabs

A bottom tab navigator for React Native with animated indicator, badge support, icon + label layout, and haptic-ready tab switching.

React Native Drawer Navigation

A slide-out drawer navigation sidebar for React Native with overlay backdrop, gesture support via PanResponder, menu items, and user profile header.

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.

Three Dots Menu

Mobile overflow menu triggered by a three-dots (kebab) button. Dropdown appears with action items and smooth fade-in animation.

Drawer Navigation

Mobile side-drawer navigation with slide-in panel, backdrop overlay, close button, and stacked nav links.

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.

Rectangular Navigation

Compact vertical icon sidebar for mobile apps. Always-visible narrow rail with icon buttons and active indicator.

FAB Navigation

Floating action button with expandable speed-dial actions. Tap the FAB to reveal stacked action buttons with staggered animation.

Drawer Slide Effect

Slide-in/out drawer panel from any edge — smooth gesture-friendly panel transition for menus and sheets.

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.

Hamburger Menu

An animated hamburger icon that morphs to an X and opens a fullscreen navigation overlay with staggered link reveals. No libraries.

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.

Swipe Tabs

Horizontally swipeable tab panels with a sliding indicator. Supports touch swipe gestures and tap navigation. No libraries.

Airline — Private Charter Landing

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

Creator — Photographer Landing

A gallery-quiet personal landing page for a fictional photographer, built in vanilla HTML, CSS and JavaScript. A full-bleed cinematic hero opens onto a filterable masonry portfolio with a keyboard-accessible lightbox, then services with pricing, a story-driven about block with stats, client logos, testimonials and a validating booking form. Minimal sans typography, an ink-on-white palette and tasteful scroll reveals keep the focus on the work.

Banking — Spending Breakdown

A trust-first spending breakdown widget for banking and fintech dashboards. An SVG donut chart splits the month's spend by category, with the running total centred inside the ring and a colour-matched legend listing every category by amount and share. Hovering or clicking a slice highlights its legend row and surfaces that category's amount in the centre, while a month switcher steps through four months of real-feeling data and recomputes totals, the budget pill, and a month-over-month delta. Tabular figures, keyboard support, and vanilla JS only.

Science — Interactive Figure (toggle series)

A journal-grade interactive figure drawn entirely with inline SVG and vanilla JS — no charting library. It plots three abyssal monitoring stations as smoothed line-plus-marker series over sea-surface temperature, with gridlines, axis titles, units and bootstrap 95% confidence whiskers. A clickable legend toggles each station with smooth fades, a segmented control switches the y-axis between linear and log scale, and per-point hover tooltips read out temperature, NPP and CI. Seeded data renders identically offline.

Portfolio — Editorial / Typographic Portfolio

A full one-page designer portfolio dressed as an independent magazine — cream paper, oxblood accent and oversized Fraunces serif. A newspaper masthead, a drop-capped multi-column lede, numbered project articles with footnote captions, a justified two-column about with a pull quote, a dotted-leader skills index, a ruled CV and a centered contact page. Vanilla JS drives a discipline filter, copy-to-clipboard email, scroll-spy nav and a live issue dateline.

Weather Forecast Graphic (Remotion)

A broadcast-quality 5-day weather forecast animation built with Remotion for NNX Weather. Features a spring-driven header that slides down from above, a current conditions card with animated emoji and stat pills, five staggered day cards that spring up from below with high/low temps and condition labels, and a final footer reveal with an extended forecast tagline. Dark navy background with cyan and gold accents throughout.

Travel — National-Geographic-style Landing

A documentary travel landing styled after a National-Geographic cover: black, signature yellow and white, bold Playfair serif headlines, and the iconic yellow-border framing motif. A full-bleed CSS-and-SVG horizon hero opens onto feature dispatches with strong captions and save-to-reading-list hearts, an interactive expedition map with keyboard-reachable waypoint pins, a count-up stat band, and an austere bordered call-to-action. High contrast, restrained, epic in mood and fully self-contained.

Remotion — Animated Area Chart

A cinematic animated area chart rendered with Remotion, tracing 12 weeks of fictional revenue data for Vaultex Commerce. The stroke line draws across the canvas first, then a gradient fill sweeps in behind it, followed by staggered dot markers, a glowing callout badge with a live count-up value at the latest data point, and a bottom summary row of four key metrics — all driven by spring physics and interpolated easing.

Remotion — Animated Bar Chart Race

A 10-second Remotion bar chart race following 8 fictional apps across three quarterly snapshots. Bars grow and re-rank in real time using spring physics for width transitions and interpolated Y positions for smooth vertical reordering, with value labels that update continuously and a crossfading period badge in the corner.

Remotion — Growth Chart Reveal

A cinematic year-over-year revenue bar chart built in Remotion: six year-pairs animate up from the baseline with staggered spring physics, each pair crowned by a green delta badge, value labels count up in real time, and an amber annotation arrow highlights the record-breaking peak bar — all over a dark background with subtle indigo and cyan radial glows.

Remotion — Animated Line Chart

A 6-second Remotion composition rendering two data series as animated SVG line charts. The polylines draw themselves left-to-right via stroke-dashoffset, data-point dots pop in with spring physics as the line reaches each node, and a semi-transparent area fill layers beneath each series for depth.

Remotion — Pie Chart Reveal

Animate a donut chart in Remotion where six revenue segments sweep into view one by one with spring physics, percentage labels pop in after each segment finishes, a counting total builds in the center hole, and a slide-in legend ties the whole composition together on a dark cinematic background.

Remotion — Poll Results Animation

A 4-second Remotion poll results animation featuring a clockwise-revealing donut chart alongside four staggered option rows, each with a colored dot, animated vote count, percentage read-out, and a spring-driven progress bar — winner option highlighted with a subtle glow and badge.

Web3 — Portfolio Value Chart (PnL)

A wallet portfolio value card built around a hand-rolled SVG chart: a large animated count-up total in JetBrains Mono, absolute and percentage PnL that recolors green or red per range, and a smooth Catmull-Rom line with a gradient glow stroke over a fading area fill. Range tabs (1H / 1D / 1W / 1M / 1Y / ALL) regenerate a seeded mock series and replay a draw-in animation, while a crosshair tooltip tracks the pointer with the exact value and timestamp. An allocation bar and legend round out the card. No chart libraries — pure vanilla JS.

JavaScript Graphics Libraries

JavaScript graphics libraries compared — 3D engines, model embeds, React layers, creative coding, minimal WebGL, and 2D GPU frameworks.

Chart & Data Viz Libraries

JavaScript charting libraries compared — declarative React charts, canvas rendering, and low-level D3 control.

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.

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.

Delivery — Food Delivery Landing

A crave-able, mobile-first marketing landing for a fictional food-delivery brand. It opens with a bold hero, an address bar that validates input and scrolls to results, and floating dish cards over an animated blob. A scrollable cuisine rail filters a live restaurant grid of rating, ETA and delivery-fee cards with savable favorites. Below sit a three-step how-it-works, a phone-mockup app section with SMS link capture and an animated rider on a route map, plus restaurant and rider partner CTAs, a full footer, mobile nav and scroll reveal.

Cookbook — Restaurant Chef / Fine Dining landing

A dramatic charcoal-and-gold fine-dining landing for a fictional chef, built with couture serif type and CSS-gradient food photography. It pairs a parallax-tinged hero and Michelin-style overline with a signature-dishes showcase, a chef philosophy strip, a nine-course tasting teaser, press quotes, and a reservation form. Scroll-reveal, a focus-trapped dish lightbox, and validated reserve flow make it feel like a real premium restaurant site.

Chef's Daily Special Card

Rotating daily-special card with availability counter, countdown timer to end-of-service, allergen chips, and an 'add to order' CTA — swaps to a sold-out state when count hits zero.

Cocktail Builder

Interactive cocktail builder: pick a spirit base, choose mixers from a visual grid, add garnish — get the cocktail name, recipe steps, flavor profile radar, and a price estimate.

Post-Meal Feedback Form

Post-meal NPS and experience form: star ratings per dimension (food, service, ambiance), an emoji mood scale, a free-text comment, and a thank-you confirmation screen.

Dish Nutrition Label

FDA-style nutrition facts panel for restaurant dishes: calories, macros bar chart, full nutrient table, allergen badges, and a serving-size adjuster that scales all values.

Takeout Pickup Status

Customer-facing takeout order status widget: order number lookup, animated step tracker (received → preparing → ready → picked up), and an estimated time countdown.

Takeout Pickup Board

Staff-facing takeout order board: three columns (In Prep / Ready / Picked Up), drag-style status advancement, auto-timer per order, and an audio-alert simulation when orders go ready.

Kitchen Prep Checklist

Pre-service mise en place checklist for kitchen staff: categorized tasks with checkboxes, assignee chips, time estimates, progress ring, and a service-ready sign-off.

Reservation Timeline

Gantt-style reservation timeline: tables as rows, time as columns, bookings as colored blocks with guest name and party size — hover for details, click to edit status.

POS — Void & Refund Manager

Manager screen for voiding items or full tickets, issuing refunds, and logging comp reasons — searchable ticket list, line-item selection, approval PIN, and audit trail.

Staff Clock-In Terminal

Touch-friendly staff clock-in/out terminal: employee grid, PIN entry, active shift display, break tracking, and an end-of-shift hours summary.

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.

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

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.

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.

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

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

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

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

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

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

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.

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

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

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

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

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

Dashboard — Analytics layout (filters + grid)

A full marketing-analytics shell for the fictional Northwind Labs, built with inline-SVG charts and no libraries. A sticky sidebar and topbar frame a filter bar with a date-range segmented control plus channel and region selectors, a four-up KPI stat row with deltas and sparklines, a large area chart of the primary metric, and a grid of secondary widgets — a channel bar chart, a device donut, and a ranked landing-pages table. Changing any filter recomputes every figure and redraws all charts from a synthetic dataset with a brief loading shimmer.

Dashboard — Bento-grid layout

A bento-style analytics dashboard built on a CSS grid of mixed-size tiles — a 2x2 hero area chart, four KPI cards with deltas and inline sparklines, a donut breakdown of traffic sources, a horizontal bar ranking, a live activity feed, and a goal gauge. A sticky topbar carries the brand, search and account. The refresh button re-rolls all fictional metrics with a smooth count-up animation, tiles lift on hover, headers drag to rearrange, and the grid reflows from four columns to one as the viewport narrows.

Widget — Drag-rearrange widget grid

A polished analytics dashboard whose widget cards reorder by dragging a handle, with a live insertion placeholder, smooth reflow, and order persisted to localStorage. A full keyboard alternative moves any focused card with the arrow keys and announces each change through an aria-live region, while a Reset layout button restores the defaults. Cards carry KPI sparklines, an inline SVG bar chart, a revenue line chart, a donut, a top-pages list, and a live-ticking traffic tile.

Dashboard — Ops command center (live tiles)

A dark, real-time operations command center built with vanilla HTML, CSS and JavaScript. A wall of service status tiles tracks every node with colored health dots, KPI cards stream requests-per-second, p95 latency, error rate and fleet CPU with deltas and sparklines, and a scrolling inline-SVG throughput chart updates each second. An aria-live incident feed captures alerts as services flip to degraded or down, a region heat grid shows global load, and a pause control freezes the whole stream.

Widget — Empty / loading widget states

A single dashboard widget shown through its full lifecycle for the fictional Meridian Ops workspace — a shimmering skeleton while data loads, a no-data-yet empty state with an inline-SVG illustration and connect-a-source CTA, an error state with a retry button and request details, and a loaded state with a real inline-SVG bar chart, KPI value, delta chip and sparkline. A segmented control cycles all four, while Simulate load runs a true loading-to-loaded sequence and the loaded chart ticks live. Pure vanilla, no chart libraries.

Widget — Global filter + date-range bar

A sticky global filter bar for analytics dashboards, built for the fictional Northwind Pulse commerce workspace. It pairs a Today/7d/30d/Custom date-range control with multi-select dropdowns for channel, region and status, plus a debounced search box. Every choice renders as a removable colour-coded chip with a live active-filters count and clear-all. Applying filters re-renders four KPI cards with deltas and inline-SVG sparklines, an animated orders-by-day bar chart and a results table — all vanilla JS, no libraries.

Dashboard — Finance (P&L · cashflow)

A finance dashboard for the fictional Northwind Beverage Co. built with plain HTML, CSS and JavaScript. A KPI row tracks revenue, expenses, net profit and cash balance with up or down deltas and tiny inline-SVG sparklines, while a profit-and-loss waterfall and a cashflow area chart are drawn entirely in SVG. A budget-versus-actual progress list flags overspend, a category-badged transactions table colors inflows and outflows, and a month, quarter or year selector recomputes every KPI, redraws both charts and refilters the table with formatted currency.

Dashboard — Marketing (funnels · channels)

A marketing growth dashboard for the fictional Lumenpath, built with inline-SVG charts and zero libraries. A sticky sidebar and topbar frame a date-range and channel filter bar, a four-up KPI row with deltas and sparklines, an interactive Visitors to Paid conversion funnel with per-step rates and hover tooltips, a channel-performance widget pairing animated bars with a spend, CAC and ROAS table, and a sortable campaign list with live, paused and in-review statuses. Filters recompute every figure from a deterministic dataset.

Dashboard — Real-time monitoring

A live infrastructure monitoring dashboard built with vanilla HTML, CSS and JavaScript. Streaming inline-SVG line charts for CPU, memory and requests scroll leftward as new points arrive every second, three live half-circle gauges sweep their needles, and KPI cards tick with up or down deltas and sparklines. A dashed threshold line flashes the chart and KPI tile red on breach, raising an aria-live alert and a timestamped error in the rolling event log. A pause control plus a speed selector and a live or reconnecting connection indicator round it out.

Dashboard — Mobile-first layout

A mobile-first finance dashboard framed inside a centered phone shell — sticky greeting bar, a gradient hero balance card with delta chip and inline-SVG sparkline, a horizontally swipeable row of snap-scrolling KPI chips, and stacked widget cards holding a mini line chart, a transactions list, and a budget donut. A fixed bottom tab bar swaps Home, Stats, Activity, and Profile views, while a refresh button and pull-down gesture re-roll the data with animated count-ups. Pure HTML, CSS, and vanilla JavaScript.

Dashboard — Tabbed / sectioned

A sectioned analytics dashboard that splits dense reporting into Overview, Traffic, Revenue, and Users tabs behind a persistent header and sidebar. Built on the WAI-ARIA tabs pattern with arrow-key roving focus, an animated underline that tracks the active tab, and a soft fade between panels. Each section lazy-renders its own widget set with a shimmer placeholder the first time, remembers the last tab, ticks live KPIs, filters by date range, and lets you drag KPI cards to rearrange.

Dashboard — List + detail (master-detail)

A polished master-detail dashboard for a fictional SaaS CRM: a scrollable left list of customers with avatars, status badges and mini metrics, beside a rich right pane showing the selected account header, four KPI tiles with deltas and inline-SVG sparklines, an animated bar chart, a spend donut, and an activity timeline. Clicking or arrow-keying a row selects it; live search and status filters narrow the list; on mobile the detail slides in full-screen with a back button. Vanilla JS, no libraries.

Widget — KPI / stat row (with trends)

A copy-paste KPI strip of five stat cards for a fictional SaaS — new sign-ups, revenue, active users, churn and NPS — each pairing a big tabular value with a coloured delta chip, an up or down arrow, a vs-last-period caption and a tiny inline-SVG sparkline that tracks the trend. A Today / Week / Month toggle swaps every value, delta and sparkline with an ease-out count-up, a live toggle nudges the figures every few seconds, and a channel-mix bar gives the row a data-dense companion. Pure HTML, CSS and vanilla JavaScript, no chart libraries.

Dashboard — Single-KPI focus

A focused single-metric dashboard built around one dominant headline number — monthly recurring revenue for a fictional SaaS — with a delta versus the prior period, a large inline-SVG trend chart, and a 7d/30d/90d period selector that swaps the value, recolors the delta, and redraws the line. A row of supporting stats with sparklines, an animated count-up on every change, and a clean whitespace-heavy layout round it out. Pure HTML, CSS, and vanilla JavaScript with no chart libraries.

Widget — Resizable widget card frame

A reusable dashboard widget card frame for a fictional ops workspace — each card carries a title, subtitle, an S/M/L size toggle that smoothly re-spans the grid, a body slot with an inline-SVG chart (area line, channel bars, or plan-mix donut), a KPI headline with an up/down delta chip, and a synced-status footer. A keyboard-friendly overflow menu opens a popover with Refresh, Expand, and Remove; refresh swaps in fresh data behind a spinner, expand lifts the chart into a modal, and cards drag to rearrange. Pure vanilla, no chart libraries.

Widget — Add-widget / customize panel

A self-contained Plotline Insights dashboard with an Add-widget flow — a button slides open a focus-trapped customize panel that lists every available widget as a card with an icon, description and an on/off toggle. Search and category chips filter the catalog, toggling a widget drops it straight into the live 12-column grid, and a remove control pulls it back out with a tidy empty state when nothing is left. Widgets carry KPI sparklines, an inline SVG line chart, bars, a donut, a ranked table and a live-ticking activity feed.

Form — Smart address input (autocomplete)

A typeahead address field built on the ARIA combobox pattern that filters a fictional address list as you type, highlights matched substrings, and is fully keyboard-driven with arrow, Enter, Home, End and Escape. Selecting a suggestion auto-fills structured street, city, postcode and country fields, while an Enter manually toggle reveals the full set with live validation, inline errors, an error summary, and a confirmation state.

Form — Top error summary + jump-to-field

An accessible GOV.UK-style form pattern that, on an invalid submit, renders a focused error-summary box at the top listing every invalid field as a clickable link. Each link scrolls to and focuses its field, while inline messages, aria-invalid, and aria-describedby keep the field-level state in sync. Fixing a field removes it from the summary live, and a clean submit swaps in a success confirmation panel — all in dependency-free vanilla JavaScript.

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 — DAO Governance (proposals · vote)

A dark, glassy DAO governance page for the fictional Lumen Collective: a gradient-bordered hero shows your voting power (held plus delegated vNOVA), treasury value, and active-proposal count, above a filterable proposals list with status pills, proposer chips, For/Against/Abstain vote bars, quorum progress, and live countdowns. Selecting a proposal opens a sticky detail panel with description, on-chain action, current results, and vote buttons that record your ballot, update the tallies, and fire a signed-receipt toast — plus a create-proposal modal with a bond warning.

Web3 — Gas / Network Fee Selector

A glassy, dark-mode gas and network-fee selector for an EIP-1559 style chain, built as a pure UI simulation. Three speed presets — Slow, Normal, Fast — render as selectable cards showing live gwei, estimated confirm time and fiat cost, while a Custom tab exposes max base fee and priority fee inputs with a computed total. A current base-fee ticker drifts every couple of seconds, recomputing every preset, the running summary and the signed-fee figure with smoothly animated monospace numbers.

Web3 — L1 / L2 Blockchain Landing

A futuristic marketing landing page for a fictional modular L1/L2 blockchain. Features a deep-space hero with an animated canvas starfield and grid, a visionary headline, count-up network metrics (throughput, finality, fees, validators), scroll-triggered performance comparison bars against rival chains, a glowing CSS architecture diagram, an ecosystem dApps grid, a developer band with a tabbed code-snippet card and copy-to-clipboard, a validators decentralization band, and a footer. UI-only simulation with mock data.

Web3 — DeFi Protocol Landing

A futuristic DeFi protocol landing page for the fictional Luminal liquidity layer. Features a glowing animated mesh-gradient hero, count-up protocol stats revealed on scroll, a live token-price ticker, and an interactive markets table with drifting supply and borrow APRs. Includes a how-it-works flow with glowing connectors, an audited security band, an ecosystem grid, a governance teaser, and a risk-gated launch confirmation modal. Glassy surfaces, neon accents, monospace numerics throughout.

Web3 — Crypto Exchange (CEX) Landing

A data-dense, trustworthy landing page for a fictional crypto exchange, Vaultex, built with HTML, CSS and vanilla JavaScript. It pairs a conversion-focused hero and email capture with a live markets widget — an animated ticker tape, a sortable top-pairs table with sparklines and live-ish price jitter, and count-up stats. Sections cover a Spot, Futures and Earn feature trio, a security and regulation trust band with an insurance fund, a fees comparison strip, a supported-assets logo wall, and an app download CTA with an animated phone mockup.

Web3 — Liquidity Pool / Provide LP

A DeFi provide-liquidity component for an ETH/USDC pair with ratio-linked deposit inputs that auto-fill from the mock pool price, wallet balances with MAX buttons, a fee-tier selector (0.05/0.3/1%) that re-animates TVL, volume, and fee-APR stats, plus live pool-share and LP-token estimates. Includes Add and Remove tabs with a percent slider, a position summary card, and a sign-pending-success confirmation modal with an impermanent-loss warning and toast feedback.

Web3 — NFT Project / Collection Landing

A hype, glow-heavy landing page for a fictional generative PFP drop called VOIDLINGS. Features a glitching hero, an animated marquee of CSS-drawn generative avatars, and a full mint panel with a live countdown, minted-versus-total progress bar, a quantity stepper, and a simulated mint flow with confirm and success states. Rounds out with lore, a hover-to-reveal rarity and traits grid, a roadmap timeline, a team grid, an accordion FAQ, and a community CTA. Vanilla JS, no libraries.

Web3 — Wallet App Landing

A warm, consumer-grade landing page for Lumen Wallet, a fictional self-custody crypto wallet. Features an animated phone mockup that cycles between home balance, swap, and buy-with-card screens, app-store download CTAs, a count-up downloads stat, a feature trio with soft-glow cards, a non-custodial trust band, a supported-chains chip row, a three-step onboarding flow, and an auto-advancing testimonial slider. Dark, rounded, friendly, and accessible — built with vanilla HTML, CSS, and JavaScript.

Web3 — Network / Chain Switcher

A glassy Web3 network switcher with a current-chain pill that opens a searchable menu of fictional chains — Ethereum, Arbitrum, Base, Optimism, Polygon and Lumen Chain — each with a colored icon, online or degraded status dot, and a collapsible testnet section. Selecting a chain triggers a simulated Switching network state, then updates the pill, the hero card with animated block count, monospace gas and RPC values, and retints the whole page accent to match the active network.

Web3 — NFT Detail (traits · history · buy)

A glassy, dark-mode NFT detail page for a fictional marketplace: a CSS-drawn generative artwork with fullscreen zoom, favorite and share actions, a verified collection link, owner chip, and a gradient-bordered price panel with Buy now, Make offer, and a live auction countdown. Includes a traits grid with rarity bars and hover tooltips, plus Properties, Offers, and Activity tabs with an animated price-history chart, sales table, and a confirm sheet with fee breakdown and signing risk warning.

Web3 — NFT Marketplace (grid · filters · bid)

A glassy, dark-mode NFT marketplace browse page for a fictional Lumen Chain collection. A gradient-bordered hero shows floor price, volume, items, and owners with animated counters, above a sticky toolbar of Buy Now / On Auction toggles, an ETH price range, trait chips, a sort dropdown, and a grid density switch. A responsive grid renders pure-CSS generative art, rarity badges, ETH plus fiat prices, last-sale, a favorite heart with live count, and a hover Buy or Bid button that opens a confirm modal with a fee breakdown and signing risk warning.

Web3 — Staking / Yield (APR · stake · claim)

A dark, glassy DeFi staking page for the fictional NOVA token on Lumen Chain: a gradient-bordered hero with big APR, TVL, and a pending-rewards counter that ticks up live in monospace; a stake/unstake card with MAX button, lock-period selector (Flexible to 1 year) driving an APR multiplier and projected-earnings calculator; a confirm-sign-success modal with risk warnings; a claim animation; and a selectable list of five other pools — all vanilla JS, UI-only simulation.

Web3 — Portfolio Value Chart (PnL)

A wallet portfolio value card built around a hand-rolled SVG chart: a large animated count-up total in JetBrains Mono, absolute and percentage PnL that recolors green or red per range, and a smooth Catmull-Rom line with a gradient glow stroke over a fading area fill. Range tabs (1H / 1D / 1W / 1M / 1Y / ALL) regenerate a seeded mock series and replay a draw-in animation, while a crosshair tooltip tracks the pointer with the exact value and timestamp. An allocation bar and legend round out the card. No chart libraries — pure vanilla JS.

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

Game — Character / Hero Roster (select grid)

A neon-dark hero roster page for a fictional shooter, Hollow Reign by Nullforge. Browse eleven heroes as rarity-ringed portrait cards, filter by Tank, DPS, or Support role chips, search by name, and toggle a rarity sort. Selecting a hero drives a featured panel with splash art, lore, difficulty pips, and animated stat bars, plus an ability strip with hover tooltips. Pure HTML, CSS, and vanilla JS with no build step or dependencies.

Game — Achievement / Trophy Unlock Toast

Console-style achievement unlock toast system: a slide-in notification with glowing trophy badge, rarity tier, achievement name, and gamerscore reward, finished with a shine sweep, sound-pulse ring, and auto-dismiss timer bar. Toasts queue and play one at a time across five rarities from common to platinum, while an achievements list flips locked rows to unlocked with animated progress bars and a count-up gamerscore counter. Vanilla JS with a WebAudio chime and reduced-motion support.

Game — Character Detail (stats · lore · abilities)

A dark, neon-lit single-character detail page for a fictional action game: hero banner with CSS-built splash art, faction and rarity badges, animated HP/ATK/DEF/SPD/CRIT stat bars with count-up values, an expandable abilities list with icons and cooldowns, a lore section with read-more, a skins selector that retints the whole page accent theme, synergy picks, and an add-to-team CTA with toast feedback — all in Orbitron-styled HUD chrome with clipped corners and glow states.

Game — Devlog / Update Post Layout

A dark neon devlog and update-post layout for a fictional action game: version badge, author meta and read time, CSS-art hero block, rich body sections with captioned in-game screenshots, an animated stat-bar panel, a glowing patch-highlights callout, an embedded changelog with copy button, sticky scroll-spy table of contents with read progress, prev and next post cards, emoji reactions with live counts, and a back-to-top button — all in Orbitron and Inter with vanilla JS.

Game — Features Showcase (mechanics scroll)

A scrolling game features showcase for a fictional co-op action RPG: alternating left/right mechanic blocks for combat, exploration, crafting, and co-op, each pairing CSS-drawn neon illustrations with headline copy and feature bullets. A sticky side rail tracks scroll progress and highlights the active section, while IntersectionObserver drives staggered reveals, animated stat bars, and count-up numbers in a stats band, all closing with glowing wishlist CTAs and toast feedback.

Game — Editions / Bundle Compare Table

A dark neon editions comparison table for a fictional AAA release with Standard, Deluxe, and Ultimate columns: edition art headers, strike-through pricing with savings badges, a feature matrix using check, cross, and partial marks, and a glowing best-value Ultimate column. Vanilla JS powers a one-time versus 4-payment plan toggle, USD/EUR/GBP currency switching, hover column highlighting, collapsible what-is-included row groups, and toast feedback on every Buy CTA.

Game — Character / Loadout Select Screen

A hero-shooter style character and loadout select screen with a neon sci-fi HUD aesthetic: a roster grid of selectable tiles with CSS gradient portraits, role icons, and locked states; a featured panel showing the hovered or selected Vanguard with epithet, difficulty pips, ability list, and animated skewed stat bars; a three-slot loadout strip with cycling weapons and perks; plus a Lock In button with cancellable countdown, party status dots, and a pulsing phase timer that auto-locks on expiry.

Game — Dialogue Box (typewriter · choices)

A visual-novel and RPG style game dialogue box with a CSS-drawn speaker portrait, angled neon nameplate, and a typewriter-animated line you can fast-forward by click or Space. A scripted conversation tree drives branching choice buttons that route to different nodes, swap the portrait and name per speaker, and resolve into two distinct endings. Includes a blinking continue indicator, Slow-Normal-Fast text-speed control, auto-advance toggle, scene restart, toast feedback, and a rain-soaked sci-fi backdrop — all vanilla HTML, CSS, and JS.

Game — Health / Mana / XP Bar Variants

A neon sci-fi HUD showcase of six game stat-bar variants: a segmented ten-cell health bar, a gradient health bar with a delayed damage-chip trail, a shield-over-health stack that absorbs hits first, a self-regenerating mana bar, an XP bar with level-up overflow flash, and a centered boss banner with phase ticks. Combat-sim buttons deal damage, heal, cast spells and grant XP, driving fill animations, color thresholds, bar shake, toasts and a pulsing low-health red vignette.

Game — Fantasy RPG Landing

An epic fantasy RPG landing page for the fictional Ashen Vanguard by studio Nullforge, built in HTML, CSS, and vanilla JavaScript with an illuminated-manuscript feel. A parchment-and-gold hero frames a CSS-drawn vista of mountains and a ruined castle under an ember sky, with a Cinzel title and lore tagline. Below it sit a classes-and-bloodlines showcase with crests and animated stat bars, an unfurling lore-scroll accordion, a factions band, and an ornate gold-filigree footer. Scroll-reveal gold shimmer and a wishlist toggle bring it to life.

Game — HUD Overlay (health · ammo · minimap)

A full in-game HUD overlay rendered over a CSS-drawn neon battlefield: segmented health and shield bars with low-HP pulse, ability icons with radial cooldown sweeps, a bottom-center ammo counter with reload bar and weapon name, a rotating radar minimap with hostile and ally blips, a crosshair with fire kick, an objective banner with live score, and an animated kill feed. A simulate-combat loop drives damage, burst fire, ability cooldowns, and kill-feed entries — all in vanilla HTML, CSS, and JS.

Game — AAA Cinematic Landing (Souls/God-of-War style)

A dark, premium AAA cinematic game landing in the Souls and God-of-War mold, built with pure HTML, CSS and vanilla JavaScript. A full-bleed moody hero renders a CSS-drawn brooding warrior against ember-lit ruins, layered over a parallax ember particle canvas, film grain and a heavy vignette. Below it sit a vertical chapter teaser timeline, a horizontal bosses showcase strip with animated threat bars, a three-tier editions band, and a heavy footer, plus a scripted reveal-trailer lightbox and hover ignite cards.

Game — Game Landing (trailer · wishlist CTA)

AAA game landing page for the fictional title Hollow Reign by Nullforge Studios: a full-bleed hero with a CSS-drawn key-art scene (moon, ridgelines, citadel, glowing warden, rising embers), Orbitron display title, trailer lightbox with focus trap, synced wishlist toggle with live count, platform badges, a four-pillar features grid, an auto-advancing screenshot carousel with dots and arrows, a three-tier editions band, and a newsletter signup — all neon-glow dark UI in HTML, CSS, and vanilla JS.

Game — Inventory Grid (drag · tooltips)

An RPG inventory screen with a 6x4 slot grid of CSS-drawn item icons, rarity-colored borders from common to legendary, stack counts, an equipment paper-doll (head, chest, weapon, ring), a carry-weight bar and a gold counter. Native HTML5 drag-and-drop moves, swaps and stack-merges items, drops gear into matching equipment slots with valid/invalid highlights, rich hover tooltips show name, rarity and stats, and right-click instantly uses or equips. Includes sort-by-rarity, loot and repair actions with neon-glow toasts.

Game — Retro Arcade / Neon Landing

A loud 80s retro-arcade neon landing page with a glowing Tron-style perspective grid floor, a flickering neon title, a CRT scanline and vignette overlay, an INSERT COIN call to action, an animated high-score ticker, a swipeable arcade-cabinet game lineup carousel with hype bars, and a synthwave soundtrack teaser with a live bar visualizer. Built in vanilla HTML, CSS, and JavaScript with no frameworks, accessible focus states, and a fully responsive layout down to 360px wide.

Game — Indie Pixel-Art Landing

A cozy indie pixel-art game landing page built entirely with HTML, CSS and vanilla JS. It features a CSS-drawn pixel campfire scene with an animated fox sprite, a Press Start 2P title under a CRT scanline overlay, a blinking press-start prompt, a wishlist toggle synced across three buttons, a pixel feature trio with hover bounce, a frame-swap animated screenshot strip you can pause, and a chiptune soundtrack teaser with a spinning disc and equalizer.

Game — Loading Screen (tips + progress)

A full-screen game loading screen with a layered CSS-drawn key-art backdrop — violet moon, silhouetted citadel spires with flickering windows, rising embers, and fog — over a dark neon HUD. Includes a zone lore panel with stat chips, a rotating gameplay TIP line, an animated spinner glyph, and a determinate progress bar with percentage and stage labels. Vanilla JS simulates a variable-speed load with random hitches, then reveals a pulsing press-any-key prompt; a replay button restarts the sequence.

Game — Mobile Casual / Puzzle Landing

A bright, bouncy landing page for a fictional mobile match-3 puzzle game. Features a glossy hero with a CSS-drawn phone mockup showing animated candy gameplay, chunky App Store and Google Play download buttons, a star-rating and animated download count-up, a playful feature trio with bouncing icons, an adventure-map progress teaser with a filling bar, a daily-bonus rewards streak, and a swappable phone-screen demo. Friendly candy palette with squishy button micro-interactions.

Storybook — Coloring / Paint Canvas

A friendly coloring activity for a children's storybook app, built entirely from inline SVG and vanilla JavaScript. A chunky crayon palette drives a flood-fill canvas where tapping or dragging across a hand-drawn fox scene paints each region with the active color, complete with a gentle pop animation. It ships with a ten-crayon box, a rainbow mode that cycles hues on every fill, undo and clear controls, an active-crayon readout, and a save-to-PNG export rendered through a canvas — all keyboard friendly and reduced-motion aware.

Storybook — Animated Mascot Guide

A friendly storybook mascot named Pip, a glowing inline-SVG fox-sprite that lives in a rounded scene and idles forever with blinking eyes and a gentle bob. Tapping Pip makes it wave, jump, and giggle with a speech bubble of helpful tips, while a mood selector swaps between happy, curious, and sleepy expressions, each with its own animation and palette. A Guide me button runs a tiny tooltip tour around the controls, every motion respects reduced-motion, and an easy-read toggle loosens the type.

Storybook — Alphabet Flashcard Set

A bright, tactile A-to-Z flashcard deck for early readers, built with rounded everything and a friendly storybook palette. Each card shows a giant letter, a bouncing emoji object, and the matching word; tap to flip it with a 3D card spin and read a fun fact on the back. Prev and next buttons hop through the deck, a shuffle remixes it, progress dots and an alphabet jump strip track where you are, and a Say it button speaks the letter aloud with an animated mouth. Includes an easy-read font toggle.

Storybook — Drag-to-match Activity

A cheerful drag-to-match activity for early readers in the Critter Cottages storybook style. A column of inline-SVG animal friends faces a column of cozy homes, and the player drags each friend onto the right place. Correct drops snap shut with a happy pop and a gold star, while wrong ones bounce back with a gentle shake. Pointer-based dragging is mirrored by a full tap and keyboard fallback, with a running score, an all-matched confetti finale, an easy-read font switch, and a one-tap reset.

Storybook — Tap-to-animate Scene

A cheerful tap-to-play picture-book scene built entirely from inline SVG, where children explore Sunny Meadow by waking five friendly characters. Tap the sun, a drifting cloud, a hopping bird, a tail-wagging puppy, or the cottage door and each one pops with its own keyframe animation, a sound-word speech bubble, sparkle particles, and a soft chime. A find-all-5 counter, progress pips, story log, easy-read font toggle, celebration overlay, full keyboard support, and reduced-motion respect round it out.

Storybook — Classic Fairytale Landing

A cream-and-gold fairytale storybook landing with an illustrated castle-and-forest SVG hero, a glowing once-upon-a-time headline, and featured tale covers you can queue for bedtime. A working read-aloud strip highlights each word as a cosy narrator plays, with adjustable speed and selectable voices, plus an Easy-Read accessibility toggle, parent testimonials, ornamental gold dividers, gentle float animations, and a validated trial-signup call to action.

Storybook — Educational / EdTech Landing

A bright, primary-color landing page for a fictional kids EdTech app, Sparkleton, guided by Sparky the fox mascot. It pairs a friendly SVG hero with three switchable subject tiles for Reading, Math and Science that swap a live daily-lesson list, a guided curriculum map with an interactive weekly progress strip where tapping stars flies a rocket to the finish, a parent-trust section on safe ad-free screens, family pricing with a monthly-yearly toggle, and an easy-read font switch.

Storybook — Modern Flat Landing

A bright, modern flat-illustration landing page for a fictional kids' reading app called Tinytales, built in plain HTML, CSS and JavaScript. A bold inline-SVG hero scene pairs with app-store style download buttons, crisp flat feature cards with custom icons, a three-step how-it-works, and a filterable stories shelf where mood chips swap a grid of rated cover cards. A pricing card, validated newsletter form and colorful gradient footer round out a snappy, geometric, solid-color design.

Storybook — Nursery / Baby Landing

A tender nursery and baby brand landing for the fictional Lulla and Moon, built in soft pastels and cream with ultra-rounded cards and gentle shadows. An airy hero pairs a slowly drifting SVG crib mobile of a moon, cloud and sleepy star with twinkling dots and floating zzz. Bedtime feature cards, a working lullaby player with soft Web Audio chimes, a calm parent testimonial, an easy-read toggle and a quiet email call to action complete the soothing, minimal-motion experience.

Storybook — Pop-Up Book Landing

A tactile pop-up-book landing for the fictional childrens title The Whirlwood Pop-Up Storybook, built in HTML, CSS and vanilla JS. A paper hero scene unfolds layer by layer with stand-up hills, a waving paper fox and pointer parallax. Feature spreads lift from the gutter on scroll with offset shadows and fold lines via IntersectionObserver, an interactive forest tilts to separate its layers, and a springy pre-order CTA card validates an email. Easy-read font toggle, sparkle bursts and reduced-motion support included.

Storybook — Bookshelf Browse

A cozy children's library where colorful storybooks line wooden shelves drawn entirely in CSS. Every cover is an inline-SVG illustration — foxes, whales, comets, and cloud-ships — and hovering pulls a book forward off its plank. Category tabs sort the shelves into Animals, Bedtime, and Adventure, a live search filters by title or author, and tapping a cover opens a friendly detail card with the blurb, recommended ages, read time, star rating, a Read button, and favorites. An easy-read font toggle makes the whole page more legible.

Storybook — Parent Dashboard

A calm, trustworthy parent dashboard for a kids' storybook app, built on the same soft rounded palette with grown-up accent tones. A per-child switcher swaps every figure live: an inline-SVG weekly reading-time bar chart that highlights the peak day, books-finished against a goal, and a current reading streak. A daily time-limit panel pairs a big pill slider with an enforce toggle and a plain-language status line, age-range content filters update a summary, and an easy-read font toggle keeps it accessible.

Storybook — Kid Profile + Avatar Picker

A cheerful kid profile setup where children build a reading buddy from chunky option swatches. A live inline-SVG avatar updates instantly as you change skin tone, hair color and style, eye expression, accessory, and background, all drawn in pure CSS and SVG with no external images. A friendly name input and a tappable age picker round out the profile, a Surprise me button rolls a random look, and Save pops a confetti confirmation showing the finished avatar. Everything persists to localStorage, with an easy-read font toggle for accessibility.

Storybook — Sticker Reward Board

A playful storybook sticker reward board where a grid of dashed empty slots fills with collectible inline-SVG stickers as a child checks off tasks from a Tasks Today list. Each completed chore flies an emoji into the next slot and pops a hand-drawn sticker on with a bouncy spring. A progress bar tracks the way to the next reward chest, and filling it triggers a confetti celebration that awards a special golden trophy sticker. Earned stickers, checked tasks, and unlocked chests persist to localStorage.

Storybook — Star-reward Quiz

A gentle children's quiz built in the storybook style, with one picture question at a time and four big tappable answer cards drawn entirely as inline SVG. Tapping the right card sends a star flying into a five-slot meter, pops a confetti burst, and cheers the reader on; a wrong tap simply wobbles and offers a kind try-again, never a harsh fail. A progress bar tracks all five questions and a final score screen shows the earned stars with a play-again button, plus easy-read and sound toggles for friendly motion and accessibility.

Storybook — Read-Along

A cozy karaoke-style read-along for the fictional bedtime tale The Moon's Lost Mitten, where each word of a CSS-illustrated picture book lights up in sequence as a friendly narrator speaks. A big Read-to-me button, restart, voice mute, and a 0.5x to 1.8x speed slider drive the pacing, while the highlight auto-scrolls and the scene caption updates per page. Tapping any word jumps the narration there, and an easy-read toggle swaps a dyslexia-friendly font with looser spacing. Web Speech API when available, timer fallback otherwise.

Storybook — Two-page Illustrated Spread

A polished two-page storybook spread for the fictional picture book Maple and the Moon-Boat, built entirely in HTML, CSS and vanilla JS. The left page is a full inline-SVG night-river scene with a paper boat, glowing moon, swaying lantern and drifting fireflies; the right page carries a large decorative drop-cap story column with a spot firefly-jar illustration. Ornamental vine page frames, page folios, gentle pointer and tilt parallax, a sparkle Read-it-again button, an easy-read font toggle, and a layout that stacks to one column on phones.

Storybook — Picture-Book Reader

A friendly picture-book reader that turns illustrated two-page spreads of a bedtime tale, each drawn entirely in inline SVG with a sentence of story text. Big rounded prev and next buttons flip the pages with a gentle curl-and-tilt animation, a spread indicator and progress bar track your place, and a thumbnail strip jumps anywhere. Arrow keys turn pages, the final spread bursts into a The End confetti celebration, scene characters wiggle on tap, and an easy-read font toggle helps young readers.

Travel — Travel Site Dashboard

An editorial analytics dashboard for a fictional travel publication, where a reporting-period switch recomputes everything in vanilla JS. Four KPI cards report visitors, top-destination views, guide views and average read time with coloured deltas and inline SVG sparklines, a seasonality area-and-line chart plots monthly interest against bookings with a hover readout, a sortable top-guides table tracks views, saves and trend, and a destinations-by-region bar shows each area share of guide views.

Travel — Trip Budget Indicator

A trip budget planner that turns numbers into a clear money picture for a fictional Kyoto and Inland Sea journey. Set a total budget, then split it across flights, stay, food, activities and transport with paired sliders and currency-formatted inputs. A single stacked bar shows each category as a coloured segment, a live summary reports allocated, remaining, per-day and per-person figures, and the bar plus remaining value flip to a striped red over-budget state with a toast whenever spending tips past the limit.

Travel — Destination Guide

A magazine-grade destination guide for the fictional island of Isla Verde, opening on a full-bleed gradient hero with the title and key facts — best time, currency, language, and flight time. A sticky section nav scrollspies across Overview, See, Eat, Stay, Map, and Tips while rich POI cards carry ratings, price tiers, and add-to-trip hearts. A CSS and SVG island map links interactive pins to a synced legend, a horizontal photo gallery band scrolls beneath, and a save-guide action toggles with a confirming toast.

Travel — City Guide

A warm, walkable city guide for the fictional coastal town of Porto Lumera, organised by neighbourhood. A full-bleed CSS-and-SVG hero opens onto a neighbourhood chip selector and a category filter that together narrow a list of point-of-interest cards — each with a gradient photo, star rating, price tier and best-time badge. A stylised SVG map repositions and highlights its pins to match the active neighbourhood, while a live top-five rail and a heart-driven trip planner keep the whole guide practical and editorial.

Travel — Explore Destinations

A discovery-first explore page for the fictional Wanderlist travel magazine, opening on a full-bleed CSS-and-SVG sunset horizon and a rounded hero search. Filter chips for region, vibe, budget and best month combine with live keyword search to narrow a responsive grid of gradient destination cards, each carrying a star rating, from-price, price tier and best-time badge. A live result count, four sort orders, an empty state and a heart-driven saved-trip drawer keep the whole page warm, editorial and genuinely interactive.

Travel — Day-by-day Itinerary

An editorial day-by-day trip itinerary for a fictional five-day Amalfi Coast loop. A horizontal day selector swaps a vertical timeline of stops — each a POI card with time, rating, price tier, best-time badge and travel leg between them. Switching days redraws an inline SVG route map with numbered pins. Check off completed stops, watch the day progress ring fill, collapse or expand notes, and save or print the whole plan.

Travel — Guide Editor

A CMS-lite travel guide editor with three working panes. A left outline lists every section with a draggable handle to reorder, plus add and delete controls. The center canvas holds an editable cover (title, mood scene, best-time badge) and a stream of insertable blocks — POI cards with save-to-trip, a CSS map block with routed pins, and tip callouts. The right inspector edits section settings, a publish toggle, and a live SEO preview, while a reader preview modal renders only the published sections.

Travel — Itinerary Timeline

A time-anchored itinerary primitive for a single travel day, rendered as a vertical timeline of stops along a coloured rail. Each stop pairs an emoji icon, an auto-computed clock time, a duration and a travel-time connector to the next, colour-keyed by type for sightseeing, food, transport and hotel. Drag a handle to reorder and every time recalculates instantly; add or remove stops, step durations up and down, collapse details, and watch a running total of stops, active hours, travel minutes and a wrap-up time stay in sync.

Travel — Classic Guidebook Landing

A warm, trustworthy landing page for Meridian, a fictional Lonely-Planet-style guidebook publisher, built entirely from CSS and inline SVG. A layered ridge-and-sky hero carries a stamped field-tested passport badge, a live destination search with keyboard-navigable suggestions, and count-up coverage stats. Below it sit filterable featured guidebook cards with save and add-to-trip controls, a resident-expert grid, a reader-community band, and a boarding-pass newsletter ticket with inline validation.

Travel — Backpacker / Budget Landing

A high-energy backpacker and budget-travel landing page for a fictional brand, built entirely with CSS gradients and inline SVG instead of photos. A sunset-and-denim hero pairs a layered horizon scene, a dotted route motif and a flying plane with a working trip search and count-up stats. Below it sit a scrolling deals marquee, filterable route cards with mini SVG maps, rated hostel cards, a tilted community photo wall, and a save-to-trip drawer with running totals. Sticker tape accents and playful tilt keep the mood fun and affordable.

Travel — Travel Agency Landing

A bright, conversion-focused landing for the fictional tour operator Voyala, dressed in sky blue, warm sand, and orange with a clean Work Sans body and Fraunces display face. A gradient horizon hero pairs layered SVG hills and a rising sun with a real booking widget — destination autocomplete, validated dates, and a traveler stepper — that runs a friendly searching-to-results teaser. Below sit six priced tour packages with save-to-trip hearts, trust badges, animated stats, testimonials, and a validated lead-capture call to action.

Travel — Luxury / Bespoke Travel Landing

A bespoke private-travel landing for the fictional house Méridien Atlas, dressed in ivory, bronze, and deep green with an elegant Cormorant Garamond display face. A cinematic gradient hero with layered SVG ridges and a rising sun gives way to slow, unhurried scroll reveals, animated house figures, four signature destinations with elegant hover and save-to-atlas hearts, an interactive concierge readout, a hand-composed atelier process, and a discreet validated enquiry form with toast confirmations.

Travel — National-Geographic-style Landing

A documentary travel landing styled after a National-Geographic cover: black, signature yellow and white, bold Playfair serif headlines, and the iconic yellow-border framing motif. A full-bleed CSS-and-SVG horizon hero opens onto feature dispatches with strong captions and save-to-reading-list hearts, an interactive expedition map with keyboard-reachable waypoint pins, a count-up stat band, and an austere bordered call-to-action. High contrast, restrained, epic in mood and fully self-contained.

Travel — "Top 10 Places" Listicle

A scannable, shareable travel listicle that ranks ten fictional beaches from one to ten. Each numbered entry leads with a full-bleed CSS gradient hero, an oversized rank badge, a vivid blurb, and a row of quick facts — best for, when to go, and a price tier — plus a mini CSS map chip with coordinates. A sticky ranked nav scroll-jumps between picks and scroll-spies the active one, an add-to-trip heart saves favourites, and a surprise-me button drops you on a random shore.

Travel — Destination Photo Gallery

An editorial destination photo gallery for the fictional Wanderfolio magazine, where every frame is a layered CSS-and-SVG landscape rather than a real image. A justified masonry grid reveals caption and location overlays on hover, mood chips filter and reflow the wall instantly, and clicking any frame opens a focus-trapped lightbox with previous and next controls, keyboard navigation, a running counter, a best-time badge, a price tier and a save-to-trip affordance that keeps a live tally.

Travel — Point-of-interest Card

A reusable point-of-interest card for travel guides, built with pure CSS and inline SVG scenes instead of photos. Each card shows a category chip, title, partial-fill star rating with review count, a one-line description, price or entry tier, distance and a view-on-map link. A heart toggle saves places to a trip and persists in localStorage, while a filter bar and a small stylised pin map tie four variants together. Warm editorial palette, hover lift and keyboard-friendly controls throughout.

Travel — Travel Story / Photo Essay

A cinematic long-form travel photo essay with a full-bleed gradient cover, byline, and read time, then alternating large CSS-and-SVG photo panels, serif prose, pull-quotes, an inline stylised route map, and a parallax coastal band. Vanilla JS drives a top reading-progress bar, scroll-reveal of every panel, layered parallax on the cover and mid-band, a sticky masthead that appears past the fold, a save-to-reading-list toggle, and interactive map pins. Immersive, editorial, lots of air.

Travel — Map + Content Split

A showcase-grade Airbnb-style split layout for the fictional coast of Cala Verdana — a scrollable column of point-of-interest cards on the left and a sticky, fly-to SVG map on the right. Hovering or selecting a card highlights its numbered pin and the map pans and zooms to centre it; selecting a pin scrolls the matching card into view and floats a preview popover. A category chip bar, price slider, search field and saved filter narrow both panes in sync, with a heart-driven trip planner and a mobile list-or-map toggle.

Portfolio — Contact / Hire-me CTA + Form

A conversion-minded contact block for the foot of any portfolio. A bold Let’s work together headline sits beside a live availability badge, a copy-email button and a social row, paired with a compact hire-me form — name, email, project-type select and message — that validates inline on blur and submit. Vanilla JS shows friendly field errors, a character counter, a clipboard copy with toast, and an animated success state confirming a reply within 24h. Neutral Inter base, accessible, responsive.

Portfolio — Project / Case-study Card

A portfolio-ready project card with a gradient SVG thumbnail, role, year, tag chips, and a one-line outcome. Ships three layouts in one grid — default, wide featured, and compact — that each lift on hover or keyboard focus and reveal a View case study link. Activating any card opens a lightweight, accessible detail modal with overview, role and impact metrics, plus a subtle pointer-tracked tilt.

Portfolio — Hero / Intro Header Variants

Three drop-in portfolio hero headers for the same fictional designer, stacked so you can compare and copy the one you like. A centered name with role, one-liner and copy-email CTA; a split layout pairing intro text with an animated CSS avatar shape; and a big kinetic name with a self-typing role rotator. Vanilla JS powers the rotating titles, a cursor-follow gradient glow and a clipboard copy-email button with toast feedback. Neutral Inter base, accessible, responsive.

Portfolio — About / Bio Block

A warm, personable about section for a single-person portfolio. Pairs a CSS-gradient avatar shape and a rotating currently line with a short narrative bio, a column of quick facts (location, focus, experience, availability badge), values and now lists, inline social links, and a download-CV button. Two columns on desktop, gracefully stacked on mobile, on a clean neutral base with working vanilla JS interactions.

Portfolio — Classic One-column CV

A restrained, print-ready single-column CV for a single-person portfolio. Stacks a name-and-title header with a contact row, a serif summary, a timeline-style experience list, selected projects, education, and pill skills with language levels — all on a clean neutral base with a typographic rhythm tuned for ATS-friendly resumes. A floating toolbar prints or saves to PDF via @media print, swaps the accent color, and toggles compact spacing, with the chrome hidden on paper.

Portfolio — Experience / Résumé Timeline

A scannable vertical résumé timeline for a single-person portfolio, with role entries showing company, title, dates, achievement bullets, and stack chips. A segmented control swaps between Work and Education datasets, each entry expands and collapses to reveal details, an expand-all toggle opens or closes everything at once, and the current role is clearly marked with a live badge and a green connector dot.

Portfolio — Creative / Visual CV

A bold one-page creative resume for a fictional product designer, built with serif display type and a swappable accent color. It pairs a circular portrait orb and intro with a four-figure stats band whose numbers count up on load, honest skill bars that fill into view, an icon-led experience timeline, a selected-work grid, an about block, and a contact card. A print-friendly toggle strips color and animation for a clean, hireable printout.

Portfolio — Brutalist Portfolio

A full one-page brutalist portfolio for a fictional product designer, built on raw paper white, harsh black borders, and one clashing electric accent. Ships a scrolling marquee, count-up stats, filterable project grid, animated skill bars, a validated contact form, and a loud INVERT theme toggle. Mono and sans type mix, hard 3px borders, zero rounded corners, and snappy offset hovers throughout. Self-contained HTML, CSS, and vanilla JS — no frameworks, no external images.

Portfolio — Two-column CV

A recruiter-friendly two-column resume with a dark sidebar holding avatar, contact details, animated skill bars, language proficiency dots and links, paired with a spacious right column for summary, a connected experience timeline, education cards and project tiles. A floating toolbar swaps five accent themes, toggles comfortable or compact density and prints to clean PDF, with print CSS preserving the two columns on paper.

Portfolio — 3D / Interactive Portfolio

A full one-page designer portfolio in an immersive 3D, interactive style built with pure CSS 3D transforms and vanilla JavaScript, no WebGL or libraries. A dark neon stage with a perspective grid floor, drifting glows, a perpetually rotating hero cube ringed by orbiting bands, and tilt-on-hover project cards that compute rotateX and rotateY from the pointer with a moving glare and parallaxed depth layers. The hero is gyroscope-friendly on phones, and animated counters, skill bars, scroll reveals, and a validated contact form complete the experience.

Portfolio — Skills / Tools Display

A drop-in portfolio skills panel for a fictional product designer that lists eighteen capabilities grouped into Design, Code and Tools, each with a proficiency bar, a years-of-practice tag and an honest level label instead of fake percentages. Vanilla JS powers a category filter that dims the off-topic groups, a bars-versus-cloud view toggle, and a live readout that surfaces years, level and a short note as you hover, focus or tap a skill. Neutral Inter base, keyboard-friendly, fully responsive.

Portfolio — Editorial / Typographic Portfolio

A full one-page designer portfolio dressed as an independent magazine — cream paper, oxblood accent and oversized Fraunces serif. A newspaper masthead, a drop-capped multi-column lede, numbered project articles with footnote captions, a justified two-column about with a pull quote, a dotted-leader skills index, a ruled CV and a centered contact page. Vanilla JS drives a discipline filter, copy-to-clipboard email, scroll-spy nav and a live issue dateline.

Portfolio — Minimal / Swiss Portfolio

A full one-page portfolio in a Minimal/Swiss style — white and ink with a single blue accent, a grotesque sans, and a strict baseline grid. It composes a hero, a filterable index-row work list with live counts and an accessible quick-look dialog, an about block with count-up stats, an experience timeline, and a validated contact form. Includes a light/dark toggle, copy-email, and toasts. Vanilla JS, no images, no dependencies.

Portfolio — Glassmorphism Portfolio

A full one-page personal portfolio rendered in a glassmorphism style: a colorful animated gradient backdrop with floating blurred orbs sits behind frosted, translucent glass cards that use backdrop-filter blur, luminous borders, and soft glow. It composes hero, selected work, about, experience, skills, and contact sections, with filterable projects, an accent-tint switcher, scroll-reveal animations, animated skill bars, copy-to-clipboard links, and an inline-validated contact form.

Portfolio — Playful / Illustrated Portfolio

A full one-page designer portfolio dressed in a bright, hand-drawn illustrated style — sunshine and bubblegum palette, rounded Baloo display type and a friendly Nunito body. A waving SVG avatar, wobbly underlines, floating doodles, sticker-like tilted project cards, blobby shapes and dashed doodle dividers give it real character. Vanilla JS drives a project filter, bouncy card pokes, animated stat counters, a scroll-spy nav, copy-to-clipboard email and a validated contact form.

Portfolio — Motion-Heavy Portfolio

A full one-page motion-heavy portfolio for a fictional product designer, built dark with gradient orbs and big display type. Everything reveals on scroll via IntersectionObserver, a custom cursor follows the pointer and goes magnetic over links, parallax orbs and a kinetic marquee drift as you scroll, counters and skill bars animate into view, and a validated contact form ships a toast. Reduced-motion is fully respected and the layout collapses gracefully to mobile.

Portfolio — Terminal / Dev Portfolio

A full single-page portfolio reskinned as a hacker CLI: black screen, phosphor-green and amber monospace, blinking caret, ASCII banner and CRT scanlines. A typed boot sequence loads the page, then every section renders as command output — whoami, ls projects, cat about, git log experience, a skills report and a contact form. A working mini command processor parses real input, with clickable command chips, history, project case files and an alias map.

Portfolio — Testimonial / Recommendation Block

A polished portfolio testimonial section for a fictional product designer: a featured quote card with a CSS-gradient avatar, name, role and company, a small inline-SVG company logo and a star rating, wrapped in a carousel of four recommendations. Vanilla JS drives a pausable auto-advancing slider with arrow, dot and keyboard navigation, swipe support, hover and focus pausing, and smooth slide transitions. Neutral Inter and Newsreader base, accessible with live regions and visible focus rings, fully responsive.

Shop — Account

A customer account hub for a fictional storefront, with a sticky sidebar that switches between Orders, Addresses, Payment, Returns, and Profile. The orders list carries colour-coded status badges plus reorder and track actions, a slide-out order-detail drawer shows a delivery timeline and line items, the address manager supports add, edit, remove, and set-default, and the profile form validates and saves with a confirmation toast.

Shop — Store Dashboard

A merchant store dashboard for the fictional Lumen Goods shop, built as a single self-contained page. Four KPI cards show net sales, orders, average order value and conversion with up or down deltas and inline SVG sparklines. An animated revenue area chart with a previous-period overlay sits beside an orders-by-status donut, a sortable top-products table, a low-stock reorder list and a live recent-orders feed. A period switcher recomputes every metric and redraws all charts.

Shop — Discounts / Promo Codes

A back-office discounts manager for a storefront. A table lists each promo code with its type chip (percent, fixed amount or free shipping), value, a live usage progress bar against its limit, schedule window and a derived status of Active, Scheduled, Paused or Expired. Status filter tabs and live search narrow the view. Every row offers an activate toggle, copy-to-clipboard, edit and delete, and a slide-out editor with a code generator, segmented type control, validation and a live preview creates or updates codes in place.

Shop — Orders Manager

An operational orders console for a storefront back office. A sortable orders table lists ID, customer, total, payment and fulfillment status chips and date, with filter tabs for All, Unfulfilled, Paid and Refunded plus live search. Selecting a row slides out a detail panel showing line items, the customer block and a timeline. Fulfill, refund and print actions update the status badges and confirm with a toast, and a checkbox column drives bulk-fulfill across the visible selection.

Shop — Product Manager

A polished e-commerce admin product manager built in vanilla JS. Browse a products data-table with thumbnails, SKUs, prices, stock, and status, then search, filter by status, and sort any column. Select rows for bulk publish, archive, or delete, edit inventory inline, and create or update items in a slide-in drawer with title, price, stock, variants, and status. Includes pagination, live summary stats, and toast feedback.

Shop — Category / PLP

A flagship e-commerce category and product-listing page with a faceted filter rail (category, price range, color swatches, fit, rating, in-stock), a sort dropdown, removable active-filter chips, and a responsive product grid. Every facet filters the grid live and instantly, updating the result count and chip row, while sort reorders and clear-all resets state. Includes working add-to-cart, wishlist, price slider, and a mobile filter drawer. Vanilla JS, no libraries.

Shop — Cart / Bag

A polished e-commerce cart and bag page with line items showing product silhouette thumbnails, variant, quantity steppers, and per-line pricing. A promo-code field with live validation, an order summary breaking down subtotal, discount, shipping, and estimated tax, plus a free-shipping progress bar and a sticky secure-checkout panel with trust signals. Quantity edits recompute every total, removing an item offers an undo toast, and an empty-bag state ships built in.

Shop — Faceted Filter Sidebar

A reusable product-listing filter rail with collapsible facet groups: category checkboxes with live counts, a true dual-handle price range slider, a color swatch grid, size chips that disable when empty, a star-rating filter, a searchable brand list with match highlighting, and an in-stock toggle. Every control updates a live result count and a removable active-filters chip row, with clear-all reset and a slide-in mobile drawer. Built with vanilla JS and no libraries.

Shop — Storefront Home

A conversion-focused e-commerce storefront home page with a sticky header, live cart count, hero banner, featured collection tiles, a horizontally scrolling trending product grid, and a flash-sale strip with a ticking countdown. Add-to-cart updates the header badge, fires a toast, and fills a slide-out cart drawer with working quantity steppers and a live subtotal. Includes search filtering, wishlist toggles, trust badges, a newsletter signup, and a tidy footer.

Shop — Fashion / Apparel Store Landing

A high-fashion apparel store landing for the fictional house Méridian, built in vanilla HTML, CSS and JS. White-and-black gravitas meets a single editorial vermilion, couture serif headlines and clean sans body. A full-bleed lookbook hero with a CSS-gradient figure, a scrolling house statement, an atelier editorial band, four shoppable product cards with star ratings and hover add-to-bag, three category tiles, an Instagram-style journal grid, and a slide-out bag with working quantity steppers, live subtotal, wishlist toggles and a validated signup.

Shop — Grocery / Essentials Landing

A bright, fresh landing page for FreshCart, a fictional grocery delivery service, built entirely from CSS gradients, inline SVG and emoji instead of images. A hero pairs a 30-minute delivery promise with a working ZIP-code checker, backed by a category grid, a today's-deals row with live add-to-basket, a three-step how-it-works strip and an app sign-up call-to-action. Vanilla JS drives the cart counter, postcode lookup, toasts and smooth scroll.

Shop — Checkout

A trustworthy multi-step storefront checkout that walks shoppers from contact to shipping, payment, and a final review with a progress indicator and per-step validation. It auto-formats card number, expiry, CVC, phone, and ZIP, offers priced shipping methods with delivery estimates, applies a promo code, and keeps a live order-summary sidebar in sync before a simulated place-order success state with order number and arrival date.

Shop — Electronics / Tech Store Landing

A dark, electric-blue electronics storefront landing built with vanilla HTML, CSS, and JS. It pairs a floating SVG flagship headset hero with key specs, a lightning-deals row with a live countdown, three comparison tiers you can select by click or keyboard, spec-highlight tiles with counters that animate into view, and a working slide-in cart with quantity controls plus an email-capture form. Techy glow accents, a crisp grid, and fully responsive layout.

Shop — Luxury Boutique Landing

A cinematic luxury boutique landing for a fictional Paris haute-joaillerie house, built in black, champagne and ivory with a refined serif. Features a restrained hero, a single signature piece with metal and size selectors and live pricing, an editorial collection grid, an atelier section with animated craft counters, a private-salon cart drawer, an appointment form, and slow elegant scroll reveals — all pure HTML, CSS and vanilla JavaScript.

Shop — Multi-vendor Marketplace Landing

A dense, deal-driven landing page for a fictional multi-vendor marketplace, built entirely with CSS gradients, inline SVG and emoji instead of images. A search-forward hero with quick-search chips leads into a twelve-tile category mega-grid, a flash-deals rail with a live countdown, a scrollable top-sellers carousel, vendor spotlight cards and a trust strip. A working slide-in cart drawer tracks quantities, totals and favorites, all in vanilla JS.

Shop — Brand Story / About

A warm, premium brand-story page for an e-commerce shop. A full-bleed hero carries the mission statement, then a four-step milestone timeline with an animated progress bar, three values cards, and a dark materials section where stat counters tick up on scroll. A founder note closes with a handwritten signature, followed by a press-logo strip and a shop call-to-action with a working newsletter sign-up and scroll-reveal animation throughout.

Shop — Mini-cart Flyout

A polished e-commerce mini-cart drawer that flies in from the right when you add a product. It packs slide-in line items with thumbnails, quantity steppers, and per-line totals, a live free-shipping progress bar, a running subtotal, and view-cart plus secure-checkout actions. Built with vanilla JS, it features a focus trap, Escape and overlay dismissal, an animated badge, recompute-on-change totals, and a friendly empty state.

Shop — Sale / Deals Landing

A high-energy sale and deals landing page for a fictional tech store, built with plain HTML, CSS, and vanilla JavaScript. It pairs a bold dark hero and a live sale countdown with deal-category tiles, a horizontal doorbusters rail, and a responsive grid of discount cards showing percent-off, original and sale prices, star ratings, and stock chips. Interactions include a sort-by-discount toggle, copy-coupon button, and add-to-cart toasts that update a cart badge.

Science — Structured Abstract Card

A polished, self-contained structured abstract card for a scientific article, with labelled Background, Methods, Results and Conclusions segments, a keyword chip row, article-type and open-access badges, a DOI line, and copy actions for the abstract and an APA citation. Includes an accent left rail, peer-review badge, a smooth reveal for the conclusions section, and a toast helper, built with vanilla HTML, CSS and JavaScript only.

Science — Scientific Data Table

A publication-grade scientific results table built in vanilla HTML, CSS, and JavaScript. Column headers carry units, numeric values align on the decimal point with consistent significant figures, and measurements display as mean plus-or-minus standard deviation in monospace. Footnote markers, a highlighted best-result row, zebra striping, and a sticky header keep dense data legible. Click any header to sort ascending or descending, then export the current ordering with a one-click Download CSV button that builds a Blob in the browser.

Science — Dataset Explorer

A client-side research dataset portal with a live search bar, faceted filter rail for domain, format, license, size and release year, plus a sortable, switchable grid and list of dataset cards. Each card carries a license badge, file count, size and citation count, and opens a detail drawer exposing the variable schema, a sample data preview, version history and ready-to-copy citation and DOI actions, all over a seeded in-script catalog of fictional records.

Science — References + Inline Citations

A self-contained scholarly article layout with live inline citations and a full reference list. Hover or focus any bracketed marker to preview the source in a tooltip, click to smooth-scroll to its numbered entry, and switch the visible format between numeric, author-year, and superscript with one toggle. Each reference carries authors, title, venue, year, a resolvable DOI link, and per-entry Cite (copy BibTeX) and Copy buttons, plus a copy-all action. Built with semantic HTML and vanilla JavaScript.

Science — Author + Affiliation + ORCID

A scholarly author byline block in the institutional house style — names carry superscript affiliation numbers, equal-contribution daggers, a corresponding-author asterisk, and a green ORCID iD that opens orcid.org. Hovering or focusing any author lights up their matching numbered affiliations, and hovering an affiliation row highlights every author who belongs to it. The corresponding-author asterisk reveals a copyable email popover, and a segmented control switches between an expanded byline and a compact single-line variant.

Science — Equation Block

A KaTeX-style display equation block rendered entirely in HTML and CSS with no math libraries. It typesets four numbered equations from a fictional two-box climate model — stacked fractions with a real rule, summation and integral glyphs with limits, Greek letters, subscripts and superscripts, and right-aligned equation numbers. Inline math sits inside the prose, hovering a reference button highlights its display block, and a per-equation copy action reveals and copies the LaTeX source. A calibrated-parameters table rounds out the article.

Science — Experiment / Methods Timeline

An ordered methods timeline that walks a fictional photothermal hydrogel drug-release assay from preparation through analysis. Steps are grouped into four colour-coded phases with status dots, wall-clock and hands-on durations, and per-step reagents and instruments. Each step expands to a recorded-parameters table with units and significant figures, a Play control sequentially highlights steps while a progress bar fills, phase chips filter the track, and a proportional phase-duration figure summarises the run.

Science — Figure + Numbered Caption

A reusable scientific figure-block primitive for journal-style web articles. Each block pairs an inline-SVG chart with a bold numbered label, a descriptive caption, and a source line; an on-hover toolbar lets readers expand the figure to a focus-trapped lightbox, copy a formatted citation, or download the underlying vector as standalone SVG. Ships three layout variants — full-width, half-width, and a labelled multi-panel grid — built with vanilla JS, no charting libraries, and tuned for AA contrast and 360px screens.

Science — Journal Issue Index

A polished academic journal issue table-of-contents page for a fictional computational biophysics journal. Features a double-rule masthead with ISSN and volume metadata, an issue selector, animated cover panel, and articles grouped into Editorial, Research, Reviews, and Letters sections. Each entry shows authors, affiliations, page ranges, open-access badges, expandable abstracts, PDF links, and copyable DOIs, with live access filtering and keyword search.

Science — Interactive Figure (toggle series)

A journal-grade interactive figure drawn entirely with inline SVG and vanilla JS — no charting library. It plots three abyssal monitoring stations as smoothed line-plus-marker series over sea-surface temperature, with gridlines, axis titles, units and bootstrap 95% confidence whiskers. A clickable legend toggles each station with smooth fades, a segmented control switches the y-axis between linear and log scale, and per-point hover tooltips read out temperature, NPP and CI. Seeded data renders identically offline.

Science — Research Lab / Group Landing

A polished, institutional landing page for a fictional university quantum-research group, featuring a hero with mission statement and principal investigator, animated lab statistics, a research-areas card grid, a year-filterable recent-publications list with copyable DOIs, a timeline news feed, a validated openings form, a funding-partner logo strip, and a contact footer. Built with semantic HTML, accessible controls, and vanilla JavaScript only.

Science — Scientific Conference Landing

A dark, energetic homepage for the fictional NeuroCompute 2027 neural-computation conference. Features a neon hero with live countdown timer, key-info chips, a stat strip, monogram keynote-speaker cards, a keyboard-accessible tabbed Day 1/2/3 program preview, three registration pricing tiers with a highlighted Academic plan, an important-dates timeline with completed and active milestones, tiered sponsor logos, and a gradient call-to-action band. Built with semantic HTML, vanilla JS, scroll-spy, reveal-on-scroll, and a toast helper.

Science — Academic Journal Landing

A flagship academic-journal homepage in the classic Nature/Science mold: a serif masthead with a thin signature-red rule and primary nav, a This Week featured-article hero with a generative dendrite cover figure, a filterable two-column Latest Research feed, a reviews list, an issue-cover sidebar with a Submit your research call to action, an animated metrics strip, newsletter signup with validation, and an authoritative footer. Built with semantic HTML, scholarly typography, and vanilla JavaScript.

Science — Open Data / Dataset Portal Landing

A government open-data portal homepage rendered as a single self-contained static page. It pairs a prominent search hero advertising 4,217 open datasets with clickable example-query chips, category tiles for Climate, Genomics, Economics, and Astronomy, and a filterable featured-datasets table showing format, size, license, and update columns with download buttons. A developer access panel offers tabbed, copyable cURL, Python, and JavaScript snippets, and animated usage counters round out the technical, no-nonsense layout.

Science — Molecule / Structure Viewer Card

An interactive ball-and-stick molecule viewer card built with inline SVG and vanilla JavaScript. Drag to rotate a pseudo-3D structure, scroll or click to zoom, and toggle auto-spin while depth is faked through radius scaling and opacity. A structure selector switches between water, methane, benzene, and caffeine, each with a CPK element legend, formula, molar mass, atom and bond counts, and a fictional Helix Structural Database citation.

Science — University Research Lab Landing

A polished, institutional landing page for a fictional university computational-biology research group. Built with semantic HTML, an Inter/Source Serif type system, and vanilla JavaScript, it features a full-bleed gridded hero with a CSS department crest, an alternating Focus Areas band with figure captions, count-up impact metrics, a featured project spotlight, an interactive team avatar strip with keyboard navigation, funding partner logos, and a contact footer with a validated form and a CSS map placeholder.

Science — Popular-Science Magazine Landing

A lively, trustworthy popular-science magazine homepage with a bold cover feature, a colorful topic chip row, a filterable grid of story cards with category color tags and read times, a horizontal Explainers scroller, a gradient newsletter band, and a ranked trending sidebar. Vanilla JS powers topic filtering, instant search, count-up stats, an animated starfield hero, and email validation with toast feedback. Fully responsive down to 360px and keyboard-accessible.

Science — Academic Paper Layout

A full academic paper page in the style of a peer-reviewed journal, with a running header showing volume, issue and DOI, a superscript-affiliated author list, a structured abstract with keywords, a responsive two-column body with numbered sections, inline citation links that smooth-scroll to a numbered reference list, a captioned figure, a data table, a numbered equation block, footnotes, and a sticky mini table of contents that highlights the active section while you read.

Cookbook — Food Blog Dashboard (traffic · top recipes)

A warm, editorial admin dashboard for a food blog, built with plain HTML, CSS and vanilla JavaScript. A sidebar nav frames a KPI row for page views, unique visitors, average time on a recipe and saves, each with deltas and live sparklines. An inline-SVG traffic chart redraws on a seven, thirty or ninety day toggle, while a sortable top-recipes table and an approve-or-reject comment feed round out a cream-and-tomato kitchen interface.

Cookbook — Browse / Search (cuisine · diet filters)

An editorial cookbook browse and search page where readers sift a fictional library of about twelve dishes by cuisine, diet, meal, and maximum cook time. A live search box, a faceted filter sidebar that folds into a mobile drawer, removable active-filter chips, a popular and quick and newest sort control, and a responsive grid of gradient recipe cards with ratings and a save heart all work together, complete with a graceful empty state.

Cookbook — Cook Mode (full-screen step-by-step + timers)

A distraction-free, full-screen cook mode that walks you through a recipe one large serif step at a time, with a progress bar, step count, and big touch-friendly Prev and Next controls. Each step carries its own independent countdown timer that beeps and toasts at zero, arrow keys move between steps, and a slide-out drawer lets you peek at the ingredient list and tick off your mise en place while you cook.

Cookbook — Recipe Page (ingredients · steps · notes)

A polished editorial recipe page for a cookbook library, pairing a serif headline with a warm cream layout. A gradient food-photo hero opens onto meta badges for prep, cook and total time, servings and diet tags, then a two-column body of check-off ingredients beside numbered method steps with inline tips and notes. A sticky action bar saves, prints and shares, and a live counter tracks how many ingredients you have gathered.

Cookbook — Printable Recipe Card

A compact, editorial recipe card built to print beautifully on real index stock. It pairs a serif title, a tiny meta row for time and servings, a warm gradient thumbnail, and a condensed two-column layout that splits ingredients from method. A size toggle switches between three-by-five, four-by-six, and full-page formats, while a dedicated print stylesheet strips the chrome to clean black-on-white that fits a single page. Recipe content is fictional and for layout demonstration only.

Cookbook — Recipe Collection / Cookbook index

An editorial cookbook index page that gathers fictional recipes into a book-like collection. A gradient cover with curator, recipe count and total time sits above chapter sections for Starters, Mains and Desserts, each holding appetizing CSS-gradient recipe cards with times, difficulty and servings. Sticky chapter jump-nav, a save-collection toggle, and a grid or list view switch make it feel like browsing a real seasonal cookbook, all in warm cream tones.

Cookbook — Recipe Editor (ingredients + steps builder)

A warm, editorial recipe-builder workspace where you compose a dish from scratch: title, description, and meta like prep, cook, servings, difficulty and diet, plus a reorderable ingredients table (quantity, unit, name) and numbered method steps you can drag, nudge or remove. A live preview pane renders a print-ready recipe card that scales quantities by servings as you type, with draft autosave to localStorage and a validated save flow.

Cookbook — Ingredient list + check-off

A warm, editorial ingredient checklist for recipe pages. Items are grouped under sub-headings like for the rye crust, each row pairing a checkbox with quantity, unit, name and an optional prep note. Ticking an item strikes it through, updates a live X of Y gathered progress bar and per-group counts, while check-all and clear controls plus localStorage keep your mise en place exactly where you left it between visits.

Cookbook — Restaurant Chef / Fine Dining landing

A dramatic charcoal-and-gold fine-dining landing for a fictional chef, built with couture serif type and CSS-gradient food photography. It pairs a parallax-tinged hero and Michelin-style overline with a signature-dishes showcase, a chef philosophy strip, a nine-course tasting teaser, press quotes, and a reservation form. Scroll-reveal, a focus-trapped dish lightbox, and validated reserve flow make it feel like a real premium restaurant site.

Cookbook — Food Magazine (Bon Appétit-style) landing

A glossy, high-contrast food-magazine landing page with a full-bleed cover-story hero, issue tag and byline, a varied-tile featured-stories grid with category tab filters, a horizontally scrolling trending-recipes strip, and a bold subscribe band. Built with editorial serif and sans typography, CSS-gradient food photography and emoji accents, a sticky condensing header, scroll-reveal animations, and a validating subscribe form — all vanilla HTML, CSS, and JavaScript with no images or libraries.

Cookbook — Rustic / Farmhouse Cookbook landing

A cozy farmhouse cookbook landing page built with warm cream, sage, and clay tones, a serif-and-sans editorial pairing, and CSS-gradient food photography. It pairs a handwritten overline hero and pre-order CTA with featured recipe cards, a from-our-kitchen story strip, seasonal categories, and a validated newsletter sign-up. Vanilla JavaScript powers reveal-on-scroll animations, a recipe-of-the-day rotator, and toast feedback, all responsive from phone to desktop.

Cookbook — Vintage / Retro Recipes landing

A nostalgic 70s vintage-recipes landing page with a mustard-and-avocado hero, groovy display headline and scalloped retro borders. Browse a recipe-box grid of kitschy index cards that flip from a gradient food photo to a hand-typed recipe, soak up a rotating tip of the day, and sign up for a recipe-by-mail strip. Scroll-reveal animations, a playful retro toast and an aged-paper footer round out the period mood. Pure HTML, CSS and vanilla JS — no libraries, no images.

Cookbook — Weekly Meal Planner (drag recipes)

An editorial weekly meal planner where you drag recipe cards from a pantry tray into a 7-day grid of Breakfast, Lunch, and Dinner slots. Drop highlights, a fully keyboard-accessible pick-and-place alternative, per-day time and serving tallies, localStorage persistence, a clear-week reset, and a one-click shopping list that counts ingredients across the week. Warm cream surfaces, gradient food photos, and serif headings give it a real cookbook feel.

Cookbook — Modern Wellness / Clean Eating landing

An airy modern-wellness cookbook landing in a calm bone, matcha and terracotta palette, pairing a Fraunces serif headline with light Inter body type. A minimal hero with floating CSS-gradient food bowls leads into a values row, a balanced-recipe grid with nutrition highlights, a seven-day meal-plan teaser and serene testimonials. Vanilla JS adds gentle scroll-reveal, a diet-preference toggle that relabels featured recipes, smooth-scroll nav and toast-backed signup forms.

Cookbook — Prep/cook time · difficulty · diet badges

A copy-ready recipe meta badge row for cookbook layouts, built in warm cream-and-tomato colors with inline SVG icons and accessible labels. Pill badges cover prep, cook, and total time with a clock glyph, servings, and a color-coded difficulty chip for easy, medium, and hard. Diet tags handle vegetarian, vegan, gluten-free, and keto, each with its own icon and tint. Three styled variants show full and compact rows, and a small demo toggles diet tags on and off while updating a polite aria-live summary.

Cookbook — Recipe rating + reviews block

A warm, editorial recipe rating and reviews block with an aggregate star score, a five-to-one star distribution chart, an accessible interactive star input that optimistically updates the aggregate, and a sortable list of reader reviews complete with avatar initials, made-it badges, dates, and toggleable helpful counts. Built with semantic HTML, a cookbook palette, and dependency-free vanilla JavaScript.

Cookbook — Serving scaler (½× · 2× quantities)

A live serving-size scaler for a printed-style recipe card. Pick ½×, 1×, 2×, or 3×, or nudge a servings stepper, and every ingredient quantity recomputes in place with a soft saffron flash. The math snaps to cook-friendly fractions like ½, ⅓, ¼, and ¾, handles ranges such as twelve to fourteen ounces of tomatoes, and leaves non-scalable items — basil to taste, a single pan — exactly where they are. The servings count is announced via aria-live, and the layout prints cleanly.

Cookbook — Nutrition facts panel

A clean, label-style nutrition panel for cookbook recipes with big per-serving calories, inline CSS macro bars showing the carb, protein and fat split, and a detailed nutrient table with percent Daily Values for saturated fat, fiber, sugar, sodium and more. A per-serving versus per-100g toggle recomputes every value, while a servings stepper scales totals up or down. Built with accessible table semantics, aria-live updates, warm editorial styling and a print-friendly layout.

Museum — Collection Catalog Manager

A registrar-facing admin tool for managing a fictional museum's permanent collection. A refined data table lists objects by accession number, title, artist, date, medium, location, and status, with live search, status and medium filters, sortable columns, and pagination. A slide-over form handles add and edit with validation, deletes go through a confirm dialog, and a bulk-select bar reassigns status across many objects at once. Summary stat cards track holdings, all driven client-side over seeded data.

Museum — Attendance & Ticketing Dashboard

A refined, gallery-toned operations dashboard for a fictional art museum that tracks visitor attendance and ticketing at a glance. Four KPI cards report today visitors, revenue, capacity used, and new members with up and down deltas; a CSS bar chart breaks admissions down by opening hour and flags the peak; a conic-gradient donut with a legend shows the ticket-type mix; and a table lists upcoming timed-entry slots with sold and capacity fill bars and status badges. A date-range selector rewrites every figure, with toasts confirming each change.

Museum — Artifact Card

A curatorial artifact card for collection grids, shown across six fictional works and three display sizes. Each card frames a CSS-drawn image inside a soft mat, then sets the title in italic serif above artist, date, medium, a gold catalog-number chip, and an On view or In storage status pill. Hovering or focusing a card lifts it and reveals quick actions to favorite the piece or add it to a self-guided tour, with a live tour counter and confirmation toasts throughout.

Museum — Artifact / Artwork Detail

A curatorial artwork detail page for a fictional museum, pairing a large matted-and-framed image with click-to-zoom and drag-to-pan, a tidy object metadata panel (artist, date, medium, dimensions, credit line, accession number), a vertical provenance timeline, a curatorial note, and a more-from-this-gallery strip. An add-to-tour toggle, share and copy-accession actions round out the calm, gallery-like reading experience.

Museum — Audio-Guide Player

A curatorial audio-guide player for a fictional gallery, anchored by an oversized serif stop number, a framed artwork swatch, and the work's title, artist, date and catalog line. A simulated transport drives play and pause, a gold scrubber with elapsed and total times, a fifteen-second skip, cycling playback speed and a read-transcript toggle. An up-next list lets visitors jump between stops, and a numeric keypad enters a stop number directly, all keyboard friendly and calm.

Museum — Collection Browse

A curatorial collection-browse page for a fictional art museum. A masonry-style grid of artifact cards shows title, artist, date, medium, gallery, and catalog number, each framed like a hung work. A left filter rail refines by era, medium, gallery, and department with live result counts, while sort controls reorder by acquisition date or title. Clicking any object opens an accessible quick-view overlay with full tombstone details, all driven client-side over a seeded array of two dozen works.

Museum — Exhibition Builder

A curatorial studio screen for planning a gallery show: browse a searchable pool of collection objects on the left, then build an ordered exhibition sequence on the right. Add works, reorder them up or down across rooms, group them into named sections with editable wall text, and watch a live object count and estimated wall-space meter respond as you go. Save a draft and a toast confirms the room and object totals.

Museum — Donation / Support Panel

A refined, gallery-toned donation panel for a fictional art museum. Visitors pick a preset amount chip or type a custom gift, switch between one-time and monthly support, optionally cover the processing fee, and direct their gift to general funds, acquisitions, education, or conservation. A live impact line rewrites itself as the amount and designation change, while a running ledger tallies the gift, fee, and total today and updates the donate button label in real time, with a toast confirming each step.

Museum — Exhibition Page

A refined, gallery-toned single-exhibition page with a full-bleed gradient hero, On view status badge, run dates and a live days-left countdown. Includes a curatorial statement, four thematic chapters, a filterable featured-works grid with framed artwork placeholders, a timed-entry ticket selector with running total, and related programs. Sticky mini-header reveals on scroll with scroll-spy anchor navigation, all in vanilla HTML, CSS, and JavaScript.

Museum — Events & Programs Calendar

A refined, gallery-toned events and programs calendar for a fictional art museum. A month grid marks each day with colored category dots, a chip filter narrows to talks, tours, workshops, family afternoons or members-only previews, and selecting a day reveals its programs in a sticky side panel. Each event card carries time, location, capacity, a live seat counter and an RSVP button, plus a calendar/list view toggle and month navigation — all self-contained vanilla JS.

Museum — Gallery Wall / Salon Hang

A curatorial salon-hang gallery wall where framed works on paper sit in a balanced, spanning CSS grid against quiet wall space. Hovering lifts a single frame and dims its neighbours; clicking opens a typeset museum label with catalogue number, medium, dimensions and credit line. A layout toggle swaps the dense salon massing for an eye-level single line hung to a common centre rail, with refined serif typography and soft gallery lighting.

Museum — History / Heritage Museum Landing

A scholarly, archival landing page for a fictional heritage museum, built around a narrative valley history. It pairs an engraved hero and a scrolling era marquee with a filterable grid of permanent galleries, a keyboard-accessible timeline that reveals short accounts for each turning point, and an oral-history feature with a live archive search across letters, ledgers and recorded voices. Parchment-and-sepia palette, engraved serif type, generous wall space.

Museum — Modern / Contemporary Art Landing

A stark, high-contrast marketing landing for a fictional modern and contemporary art museum. Built in black, white and a single acid-yellow accent with a grotesque display face, it pairs an oversized editorial hero and animated marquee with an asymmetric current-shows grid, filterable exhibition cards, a spotlight acquisition block, a hours-and-tickets visit panel with a live-total stepper, and a validated newsletter. An invert toggle flips to a dark gallery mode, with scroll-spy navigation and a toast helper, all in vanilla HTML, CSS and JavaScript.

Museum — Fine Art Museum Landing

A stately marketing landing page for a fictional fine art museum, built in refined gallery-white, deep charcoal, and gold. It pairs a featured masterwork hero with a filterable current-and-upcoming exhibitions strip, savable collection highlights, an interactive admission ticket builder with live totals, visit hours, and tiered membership plans. Vanilla HTML, CSS, and JavaScript with a Cormorant Garamond serif display, accessible dialogs, toasts, and a fully responsive layout down to 360px.

Museum — Object Label / Wall Plaque

A curatorial object-label gallery rendering the classic museum tombstone — artist, life dates, italicized title, date, medium, dimensions, credit line, and accession number — across three registers: standard, extended interpretive, and a warmer kids version. A pill style switcher swaps every label in place, a mat toggle frames or unframes each artwork, and copy-to-clipboard plus single-label print affordances make the plaques feel like real gallery production tools.

Museum — Natural History Museum Landing

An earthy, exploratory marketing landing page for a fictional natural history museum, built with vanilla HTML, CSS and JavaScript. It opens on a fossil-cast hero, then walks visitors through eleven filterable collection halls, hands-on discovery exhibits, a sticky visit planner that tallies your time inside, dated family programs, and a ticket reservation card. Slab-serif headings, bone and forest-green tones and amber accents give it a museum-of-nature feel, with toasts, keyboard support and full responsiveness.

Museum — Science / Discovery Center Landing

A bright, energetic marketing landing for a fictional science and discovery center. A playful hero pairs an animated orbiting solar system with bold calls to action and at-a-glance stats, followed by a filterable grid of hands-on exhibit zones, planetarium and IMAX showtimes with reservable seats and sold-out states, a school field-trip request form with a live cost estimator, and a visit panel with ticket pricing. Built in vanilla HTML, CSS, and JavaScript with a white, electric-blue, and lime palette.

Museum — Membership / Patron Tiers

A refined membership and patronage page for a fictional art museum, presenting four levels of support — Individual, Dual, Patron, and Benefactor — as gallery-cool cards over generous wall space. Each tier carries a price, a curated benefits list, and its own join button, with the Patron level marked as the most chosen. A monthly/annual toggle smoothly re-prices every card and updates the billing line, selecting a tier marks the card and raises a toast, and a quiet statistics band grounds the philanthropic tone.

Agency — Design Studio Landing

A polished, single-page landing for a fictional independent design studio, Foundry and Field. Editorial serif headlines on warm off-white with an electric coral accent carry an oversized hero, a selected-works case grid with hover reveals, a numbered services list, a dark studio and team section, an awards and clients strip, four process steps, an auto-rotating testimonial carousel, and a validating contact form. Built with semantic HTML, CSS variables and vanilla JavaScript only.

Agency — Software / Dev Shop Landing

A dark, engineering-grade landing page for Northbyte, a fictional software and product studio, built on a near-black canvas with a mono-lime accent, slate highlights, and a Space Grotesk and JetBrains Mono pairing. The hero pairs a strong headline with a live typewriter terminal that runs a deploy log on loop, plus count-up proof stats. Below sit a scrolling tech stack, a four-practice services grid, case studies with hard metrics, a four-step engagement model, a senior team row, a rotating testimonial carousel, and a validated start-a-project form.

Agency — Branding / Identity Landing

A full one-page landing for Marrow and Plumb, a fictional branding and identity studio rendered in a cream, plum and warm-sand duotone with refined serif and sans pairing. It opens on an animated brand-mark hero and runs through social proof, end-to-end case studies with type specimens and color blocks, four services, a studio philosophy, a clear four-step process, founder testimonials and an inquiry form, all wired with vanilla JavaScript scroll reveals, counters and a toast.

Agency — Marketing / Growth Landing

A full-page landing for a fictional growth marketing agency, Voltline. Bright purple-to-orange gradients on white drive an energetic, results-first mood across a sticky nav, a hero with an animated live revenue dashboard, four service cards, ROI-heavy case studies, an animated metrics band, a four-step funnel, client testimonials, and a validated book-a-call form. Vanilla JS handles the mobile menu, scroll reveals, count-up stats, and toast feedback.

Agency — Video / Production Landing

A full-page landing for Nocturne, a fictional film and motion studio, built on a black canvas with cinematic amber-to-red accents and an animated film-grain overlay. A transparent sticky nav sits over a full-bleed hero with an animated poster and play button, followed by a client marquee, a hover-play showreel grid, three service blocks, a behind-the-scenes band with count-up stats, a four-act process, a rotating testimonial carousel, and a bold make-something CTA. Vanilla JS drives the reel modal, scroll reveals, and validated forms.

D2C — Coffee / Beverage Landing

A warm, craft-forward direct-to-consumer landing page for a fictional specialty coffee brand. Built with semantic HTML, kraft-paper and espresso styling, and vanilla JavaScript, it pairs an origin-story hero and product-bag mockup with an interactive roast-level selector, flavor-note grid, a four-step pour-over guide, a subscribe-versus-one-time pricing toggle, verified reviews, a sustainability section, an accordion FAQ, a sticky cart, and a footer.

D2C — Hardware / Gadget Landing

A full one-page direct-to-consumer landing for Lumen Halo, a fictional 1,400-lumen pocket flashlight, rendered in spotlight-dark with an electric teal accent and a CNC-rendered product mockup. It runs a dramatic hero with floating device render and key specs, a maker social-proof row, interactive spec tabs, spotlight feature cards with a live color-finish picker, a four-step build process, a comparison table, owner reviews, a pre-order pricing card with quantity stepper, an accordion FAQ, a sticky buy bar and footer, all wired in vanilla JavaScript.

D2C — Fashion / Apparel Landing

A full editorial direct-to-consumer landing page for a fictional limited-run apparel label. White-and-black canvas lifted by a single terracotta accent, a couture serif paired with a clean sans, and an aspirational, minimal mood. Includes a full-bleed hero with a running marquee, a masonry lookbook with hover styling notes, an interactive product configurator with colour swatches and size picker, a fabric-quality story, dark customer reviews, bundle pricing, a drop waitlist, a sticky add-to-cart bar, scroll-reveal, and a responsive mobile nav.

D2C — Skincare / Beauty Landing

A polished direct-to-consumer skincare landing page for a fictional glow serum brand. Soft blush-and-gold palette, an elegant serif-and-sans pairing, and a dewy, premium mood. Includes a product-shot hero with add-to-cart, a benefit grid, ingredient callouts, a three-step routine with results stats, star-rated reviews, bundle pricing cards, an accordion FAQ, a sticky add-to-cart bar that appears on scroll, scroll-reveal animations, a mobile nav, and a fully responsive layout.

D2C — Supplements / Wellness Landing

A full direct-to-consumer landing page for a fictional clinically-dosed supplements brand, built in clean vanilla HTML, CSS and JS. It pairs a product hero and benefit claim with an ingredient-science breakdown carrying study callouts, a benefit icons grid, a how-it-works timeline, star-rated reviews, a subscribe-versus-one-time pricing toggle, an accordion FAQ and a sticky add-to-cart bar. Energetic teal-and-lime accents on clinical white give it a confident, science-backed wellness feel.

AI Product — Voice AI Landing

A calm, futuristic one-page marketing site for a fictional voice AI product, built in vanilla HTML, CSS and JS. It pairs a deep indigo palette with pastel waveform accents, an animated hero orb, and a press-to-talk demo. Sections cover assistants, dubbing and accessibility use cases, a play-to-hear voices showcase with a live reacting waveform, a three-step API walkthrough, monthly and annual pricing, testimonials, an email capture CTA, and a footer.

AI Product — Code Assistant Landing

A developer-native marketing landing page for Cortex, a fictional AI coding assistant. Built on a dark editor theme with mono headlines and syntax-highlight accents, it pairs a self-typing fake code editor hero with a supported-languages strip, a four-feature grid, a tabbed live demo that switches between completion, repo chat and fix modes, a copyable install snippet, developer testimonials, a monthly-yearly pricing table, a closing CTA and footer. Pure HTML, CSS and vanilla JS.

AI Product — AI Search Landing

A polished one-page marketing site for Sourcely, a fictional AI answer engine that reads the live web and replies with cited answers instead of blue links. Clean white layout with an electric-blue accent, sticky nav, and a hero search bar that animates a typed question into a sourced answer card. Includes a feature grid, three-step explainer, a traditional-search comparison, an interactive ask-a-question demo, testimonials, billing-toggle pricing, an accordion FAQ, and a footer.

AI Product — Chat Assistant Landing

A dark, premium one-page marketing site for Lumio, a fictional conversational AI assistant. It pairs a violet-to-cyan glow aesthetic with an animated hero chat mockup that types a prompt and streams a reply, plus trust logos, a memory and tools feature grid, a three-step how-it-works flow, a genuinely interactive try-a-prompt playground, testimonials, a monthly and yearly pricing toggle, an accordion FAQ, and a waitlist call to action. Built with semantic HTML, responsive CSS, and dependency-free vanilla JavaScript.

AI Product — Image Generation Landing

A full one-page marketing landing for a fictional AI image generator, Prismeo, built in vanilla HTML, CSS, and JavaScript. It pairs a black, gallery-like canvas with iridescent magenta-to-teal-to-gold accents, a floating masonry hero gallery, and a live prompt bar. Interactive pieces include a style-picker that swaps the gallery, a before-to-after comparison slider, a monthly-annual pricing toggle, scroll reveals, a typewriter prompt, and a mobile nav with toast feedback.

Banking — Ops Dashboard

An internal banking operations dashboard built with vanilla HTML, CSS and JavaScript. Surfaces live KPIs for transaction volume, active users, fraud flags and the KYC queue, alongside a layered credit-versus-debit volume chart, a triaged fraud-alert feed, a KYC approval queue and a recent disputes table. Operators can switch timeframes, approve or reject applicants inline, and dismiss alerts, each action confirmed with a toast and tabular-figure money formatting throughout.

Banking — Disputes Queue

A trust-first chargeback and disputes console for bank operators, with a navy header carrying a 2FA-verified session badge, summary stats for open cases, at-risk aging, escalations and total exposure, and a dense table of disputes showing case IDs, masked card numbers, customers, reason codes, tabular-figure amounts, age and status pills. Filter by status, search across cases, and open a sliding detail drawer with evidence, an activity timeline and accept, reject or escalate actions that transition status live.

Banking — Customer Detail

A trust-first admin customer detail screen for a fintech back office. It pairs a profile header carrying an animated risk score, verified-identity cues and an action toolbar with tabbed sections for overview, accounts, activity and internal notes. Operators can freeze accounts, flag the customer for review, re-run KYC and add notes, with toast feedback and a live-updating risk ring. Built with semantic HTML, layered shadows, status pills and tabular figures for every monetary value.

Banking — Balance Card

A trust-first fintech balance card you can drop into any banking dashboard. Shows account name and type, a masked card number, and a balance set in tabular figures with a mini sparkline trend. A per-card and global hide/show toggle blurs sensitive numbers, status pills flag activity and due dates, and quick actions sit one tap away. Ships as three real-feeling variants — checking, high-yield savings, and a credit card with a utilisation bar — in a responsive grid, vanilla JS only.

Banking — Amount Keypad

A trust-first currency amount entry screen for fintech send-money and top-up flows. A large tabular-figure display formats digits live with thousands separators, a tappable currency pill cycles EUR, USD and GBP, and a backspace key trims one character at a time. Quick-amount chips, a Send-max shortcut, and a live balance hint speed real input, while invalid taps shake the display and over-balance amounts disable the call to action. Built with on-screen and physical keyboard support, vanilla JS only.

Banking — Account Overview

A trust-first banking account overview dashboard with a total balance hero and sparkline, checking, savings and credit account cards with masked numbers, a conic-gradient spending donut with category legend, a filterable recent transactions feed showing credit and debit colors plus cleared, pending and failed status pills, quick actions for transfer, pay and deposit, and an upcoming bills panel. Hide and show balances, switch accounts and filter activity, all in self-contained vanilla JS.

Banking — ID Verification

A trust-first KYC identity-check flow for fintech onboarding, built in vanilla JS. Customers pick a document type, then upload front and back through drag-and-drop zones that show a live progress bar, a masked preview thumbnail, and a sharp-and-readable status before a mock selfie liveness step runs blink and head-turn checks. An animated scan line reads the document, compares biometrics, and screens for sanctions, ending in a verified result card with match score and reference, or a needs-review state. Fully keyboard-usable and responsive to 360px.

Banking — Virtual Card Visual

A polished, 3D flippable virtual bank card component built in the trust-first fintech style with Inter typography and tabular figures. The brand face shows a metallic chip, contactless glyph, masked PAN, holder and expiry, then flips in 3D to reveal the CVV on a magnetic-stripe back. Tap to flip, reveal or hide the number, and copy it to the clipboard, and switch live between three designs — metal black, aurora gradient and minimal white — all in vanilla JavaScript with a small toast helper.

Banking — Card Detail

A trust-first card management screen for a fintech app, featuring an animated 3D card that flips to reveal its security code, a one-tap freeze and unfreeze control, a live monthly spending-limit slider with usage tracking, copy-to-clipboard card number, virtual card creation, granular controls for online, contactless, ATM and international use, and a card transaction feed with credit and debit amounts plus cleared, pending and failed status pills.

Banking — Investing

A trust-first fintech investing screen rendered in pure HTML, CSS and vanilla JavaScript. It pairs a headline portfolio value with day gain or loss, an interactive SVG performance chart with timeframe tabs and hover scrubbing, a holdings table, an allocation donut with legend, and a buy or sell trade panel that opens a confirmation modal. Clicking any holding reveals a detail sheet with cost basis and total gain. Tabular figures, masked security cues and toast feedback complete the experience.

Banking — Business Banking Landing

A polished, trust-first marketing landing for a fictional SMB business bank, Ledgerline. It pairs a headline hero with an animated dashboard mockup — a counting-up balance, sparkline chart, live transaction rows and a tilted expense card — with feature cards for multi-user access, invoicing, expense cards and integrations, a team-sized pricing table with a monthly/yearly toggle, a customer logo strip, a case-study quote with count-up stats, an email capture CTA and a full footer. Built with semantic HTML, Inter typography and accessible, responsive vanilla JavaScript.

Banking — Wealth / Investing Landing

A refined marketing landing page for a fictional wealth and investing platform, built in vanilla HTML, CSS, and JavaScript. It pairs a calm charcoal-and-emerald palette with serif display type, an animated SVG portfolio chart, an allocation breakdown, a switchable performance band, transparent pricing tiers, verifiable trust credentials, testimonials, and an email capture call to action — all responsive down to small phones with reveal-on-scroll and toast micro-interactions.

Banking — Lending / BNPL Landing

A warm, optimistic marketing landing for a fictional buy-now-pay-later product called Splitly. It pairs a friendly coral-and-mint hero with a live split-in-4 calculator where a slider and editable amount field rebuild four equal instalments and a running total in real time. Below it sit how-it-works steps, an eligibility panel with no-score-impact cues, a filterable grid of partner merchants, three transparent rate plans, an accordion FAQ, an email capture, and a footer — all responsive vanilla HTML, CSS and JavaScript with toasts and a mobile nav.

Banking — Traditional Bank Landing

A trust-forward marketing landing page for a traditional retail bank, styled in navy, gold, and ivory with serif headlines over a clean sans body. It pairs a confidence-building hero and account snapshot with product cards, an honest daily rates table, a branch and ATM locator teaser, security assurances, member testimonials, and a quick open-account form — all responsive down to mobile with smooth scrolling and tasteful micro-interactions.

Banking — Account-Open Wizard

A trust-first fintech account-opening (KYC) wizard that walks new customers through four guided steps — personal details, home address, identity verification and a final review. It features a vertical progress stepper, an animated progress bar, inline field validation with friendly errors, an age and email check, a mock ID and selfie upload with scanning progress, an editable summary, terms acceptance and an encrypted success screen with a generated application reference and masked IBAN. Built with semantic HTML, Inter typography and responsive, accessible vanilla JavaScript.

Banking — Spending Breakdown

A trust-first spending breakdown widget for banking and fintech dashboards. An SVG donut chart splits the month's spend by category, with the running total centred inside the ring and a colour-matched legend listing every category by amount and share. Hovering or clicking a slice highlights its legend row and surfaces that category's amount in the centre, while a month switcher steps through four months of real-feeling data and recomputes totals, the budget pill, and a month-over-month delta. Tabular figures, keyboard support, and vanilla JS only.

Banking — Account Funded

A trust-first onboarding success screen for a fintech account opening. A celebratory navy hero with a check seal and canvas confetti confirms the opening deposit cleared, then reveals the new account number with one-tap copy and a tappable virtual debit card whose digits unmask on demand. A three-step next-action checklist drives direct deposit, card ordering, and referrals with a live progress bar, and ships as self-contained vanilla HTML, CSS, and JavaScript.

Banking — Neobank Landing

A complete marketing landing page for a fictional neobank built with vanilla HTML, CSS and JavaScript. Features a tilting phone mockup with a live account screen, animated stat counters, a flippable virtual card, a tabbed in-app showcase, social proof, switchable monthly and yearly pricing tiers, a validated signup form with toasts, mobile navigation and scroll reveal. Energetic white and electric violet aesthetic, fully responsive down to 360px.

LMS — Course Builder

A focused, three-pane course builder for an online learning platform. A reorderable module and lesson tree on the left drives a center lesson editor with title, type, a mock video uploader, content, and a free-preview toggle, while a right rail handles pricing, difficulty levels, category, and tags. Drag modules and lessons to reorder, check lessons off, watch live curriculum stats and a completion bar, then save or publish with friendly toasts and a draft-to-published status pill.

LMS — Instructor Dashboard

A polished instructor analytics dashboard for an online course platform. Four animated KPI cards track enrollments, net revenue, completion rate, and average rating, with trend pills and a progress bar. An interactive SVG revenue chart redraws as you switch the 7d, 30d, 90d, and 12-month timeframe, and a top-courses table drills into a slide-in panel with a completion ring and lesson check-offs. A live enrollment feed and a student-questions thread with inline replies round out a friendly, focused-reading learning workspace.

LMS — Gradebook

An instructor gradebook for an online course platform, built as a students-by-assignments matrix. Color-coded score cells show grades, pending submissions, and missing work at a glance, with a sticky student column and per-assignment class averages in the header. A cohort filter and search narrow the roster, and clicking any cell opens a grading drawer with the submission, a weighted rubric, a feedback box, and a grade input that writes straight back into the matrix and recomputes averages live.

LMS — Course Catalog

A friendly, focused e-learning course catalog with a sticky filter rail for level, category, duration and price, plus an instant search that narrows the grid as you type. Sortable course cards show thumbnails, instructors, ratings, level pills and live progress bars for enrolled classes. Active filters appear as removable chips, a sort dropdown reorders results, and enrolling fires a calm confirmation toast. Built with semantic, accessible, responsive vanilla HTML, CSS and JavaScript.

LMS — Course Card

A reusable e-learning course card rendered as a responsive grid of six real-feeling variants — free, paid, in-progress and completed. Each card pairs a gradient thumbnail with a level pill, course title, instructor avatar, half-step star rating, duration and lesson counts, and either a price block or an animated progress bar. Cards lift on hover, quick-enroll inline, filter by type, and a study mode swaps the calm light theme for a focused dark palette.

LMS — Classroom Player

A focused e-learning classroom built in vanilla JS: a video player area with poster, scrubber, speed and caption controls, plus a sticky curriculum sidebar that highlights the current lesson and tracks check-offs. Below sit tabbed panels for an interactive click-to-seek transcript, autosaving notes with timestamp insertion, downloadable resources, and a class Q&A thread. Switching lessons updates progress rings and bars, and mark-complete advances to the next item.

LMS — Completion Certificate

A polished e-learning completion certificate page with a framed parchment-style award showing the learner name, course title, completion date, instructor signature, official seal and a scannable verification QR. A side panel offers download-to-PDF, print, share-link and add-to-LinkedIn actions, a copyable credential code, earned-skill badges and credential metadata. Built with semantic HTML, CSS variables, print styles and small vanilla-JS interactions, optionally toggling a calm study mode.

LMS — Learner Dashboard

A friendly, focused learner dashboard for an online course platform. Continue-learning cards carry mini progress rings, difficulty pills, and resume buttons, while a streak and XP widget tracks daily momentum with a level bar and animated weekly dots. A weekly-goal progress ring, in-progress versus completed tabs, earned certificates with PDF actions, and color-coded upcoming deadlines round it out, plus an optional dark study mode for late-night sessions.

LMS — Course Detail

A polished e-learning course detail page with a gradient preview hero, instructor credit, star rating and enroll CTA. Tabbed overview, curriculum and reviews sections sit beside a sticky buy box with price, countdown and live progress ring. The curriculum is an accordion of modules with checkable lessons that update your completion percentage, plus a study (dark) reading mode, rating distribution bars, learner reviews and a sticky enroll bar on scroll.

LMS — Professional Certification Landing

A polished, B2B-credible landing page for a professional certification body, built in vanilla HTML, CSS, and JavaScript. It pairs an authoritative slate-and-gold hero and a blockchain-style credential card with filterable certification paths, an interactive exam-blueprint panel showing domain weightings, animated salary-uplift counters, employer-recognition logos, serif testimonials, and a validating enrollment form. Fully responsive from desktop down to mobile, with scroll-reveal motion, a mobile nav, and an accessible toast helper.

LMS — Coding Bootcamp Landing

A high-energy, career-focused coding bootcamp landing page built with semantic HTML, CSS variables, and vanilla JavaScript. Features a bold technical-mono hero with animated outcome counters, a four-phase curriculum timeline, a filterable tech-stack grid, mentor cards, hiring-partner logos, three financing options, and an interactive cohort-date picker with toast feedback. The dark neon-green theme, conic-gradient progress rings, scroll reveal, sticky nav, and responsive mobile menu make it feel like a real bootcamp site down to 360px screens.

LMS — Kids Learning Landing

A bright, playful marketing landing page for a make-believe kids learning platform. Features a bouncing fox mascot whose eyes follow the cursor, a sticky responsive nav with a mobile drawer, tappable subject cards, age-group paths, a parent-trust section with an animated weekly progress report, fun testimonials, and a free-trial form with email validation, a confetti burst, and toast feedback. Built with bright primary colors, chunky rounded sans type, and springy hover animations.

LMS — University Landing

A scholarly online-university landing page with a prestige serif hero, an intake progress card with an animated SVG ring, a filterable degree and certificate grid, faculty highlight profiles, an accreditation and statistics band with count-up numbers, student-outcome bars, alumni testimonials on a deep-blue panel, and a validated apply form. Deep blue, crimson and ivory with academic serif headlines, scroll-reveal motion, a sticky nav, mobile menu, and toast feedback.

LMS — Language App Landing

A gamified language-learning app landing page built with vanilla HTML, CSS and JavaScript. A warm green-to-teal palette and friendly rounded type frame a floating phone mockup that runs a live word-bank lesson: tap chips to build the translation, check your answer, lose a heart when wrong, then continue. Streak and XP counters animate up, language cards fill progress bars, and a monthly to yearly pricing toggle swaps plan prices, all with scroll reveals and toasts.

LMS — Progress Ring

A self-contained set of progress meters for e-learning interfaces. The centerpiece is an animated SVG circular ring with a gradient stroke and a count-up percentage at its core, paired with quick-set buttons that re-draw the fill and update the lesson tally. Alongside it sit a linear XP and level meter that handles level-ups, plus a responsive grid of per-module cards combining mini progress rings, linear bars, completion pills, and a friendly toast helper.

LMS — Quiz / Assessment

A self-contained quiz runner for e-learning platforms that shows one question at a time with a live progress bar and countdown timer. It supports multiple-choice, multi-select, and true/false questions, plus flag-for-review, previous and next navigation, and a question navigator. Submitting reveals an animated score ring, pass or fail verdict, point totals, and a full per-question review with correct answers and plain-language explanations for every item answered.

LMS — Curriculum Accordion

A self-contained e-learning curriculum accordion where course modules expand to reveal their lessons. Each lesson row shows a type icon for video, quiz, or reading, its duration, and a tappable completion check. Module progress bars and an overall completion ring update live as you check lessons off, free-preview links open a toast, and locked modules unlock automatically once the previous module is fully finished.

LMS — Streak / XP Badges

A friendly e-learning gamification panel bundling four widgets: a daily-streak card with an animated flame and a seven-dot weekly calendar, an XP and level-progress bar with a hexagon rank badge, a daily-goal progress ring, and an eight-tile achievement grid of locked and unlocked badges. Interactions are vanilla JS — check in to grow the streak, claim a badge with a confetti burst and pop animation, earn XP that can trigger a level-up, and toggle a calm dark study mode.

Delivery — Warehouse / Picking

A warehouse picking console for a fictional fulfillment floor, pairing a prioritized pick-list queue with an active list that shows item rows, bin locations, quantities and scan-to-pick check-off. A big picked counter and progress rail track completion, a low-stock inventory table flags SKUs below reorder point, and a schematic Zone B map teaser animates a driver marker along the route to the next bin as picks are confirmed and lists completed.

Delivery — Dispatch Board

A desktop dispatch board for a fictional food-delivery hub, built as a horizontal kanban with an unassigned-orders column beside one queue per driver. Each order card shows pickup and drop-off legs, a priority pill, a live ETA, and the customer; cards drag between columns or assign through a driver picker dialog. A live status sidebar tracks each courier with availability dots and active load, and a sticky toolbar drives priority filters, search, and real-time counts.

Delivery — Delivery Confirm

A mobile-first driver delivery-confirmation screen for a fictional courier app. It pairs a customer and address card with a live delivery window countdown, a three-step proof checklist, mock photo-proof capture, a working canvas signature pad, quick drop-off note chips, and a leave-at-door toggle that swaps signature for drop-and-photo. A guarded confirm button plays a success animation once proof is collected, logging the stop and cueing the next.

Delivery — Driver Route

A mobile-first delivery driver route screen with a live map placeholder, animated driver marker, and an ordered list of stops. A prominent next-stop card shows the customer, address, ETA, and delivery notes with call, navigate, and complete actions. A running earnings header tracks today's pay, and an incoming-order sheet with a countdown ring lets the driver accept or decline a fresh offer that joins the route.

Delivery — Driver Earnings

A mobile-first driver earnings and shift summary screen for a fictional food-delivery app. A bold orange hero shows net pay with a base, tips, and bonus breakdown plus trips, hours online, and per-hour stats, and toggles between today and the full week. A seven-day bar chart animates into place and reacts to taps, a recent-trips list flags delivered, in-progress, and failed runs with pay pills, and a sticky cash-out bar fires a confirmation toast — all in vanilla JS.

Delivery — Food Delivery Landing

A crave-able, mobile-first marketing landing for a fictional food-delivery brand. It opens with a bold hero, an address bar that validates input and scrolls to results, and floating dish cards over an animated blob. A scrollable cuisine rail filters a live restaurant grid of rating, ETA and delivery-fee cards with savable favorites. Below sit a three-step how-it-works, a phone-mockup app section with SMS link capture and an animated rider on a route map, plus restaurant and rider partner CTAs, a full footer, mobile nav and scroll reveal.

Delivery — ETA / Countdown Badge

A self-contained set of delivery ETA and countdown badges for tracking screens. It pairs a map-forward hero card with a live ticking countdown, an animated driver marker following an SVG route, and a full gallery of badge states — en-route countdown, arriving-now pulse, amber delayed alert, safety-green delivered confirmation, failed attempt, and a scheduled time-window pill. A live order feed shows independent mini countdowns flipping between states with toast notifications. Vanilla JS, no dependencies.

Delivery — Freight / B2B Logistics Landing

An enterprise freight and B2B logistics landing page built with vanilla HTML, CSS and JS. An industrial slate-and-amber hero leads into mode-flexible services (FTL, LTL, intermodal rail, warehousing), an animated fleet and network stat band, a real-time visibility console with a predictive ETA countdown and a live shipment status tracker, enterprise customer logos with a testimonial, and a validated request-a-quote form. A heavy-duty, map-forward layout that feels built for shippers who can't miss a dock window.

Delivery — Grocery Delivery Landing

A wholesome, fresh-green grocery delivery landing page for the fictional FreshCart brand. Includes a produce-basket hero with an animated ZIP coverage checker, a twelve-aisle category grid, a freshness guarantee section with cold-chain promise cards, a monthly or yearly membership pricing switcher, a four-step how-it-works flow, an app download CTA with a live ETA phone mockup, plus mobile navigation, scroll reveals and toast feedback.

Delivery — Last-mile / Instant Landing

A high-energy last-mile delivery landing page for a fictional instant-courier brand, built in pure HTML, CSS and vanilla JS. It pairs a bold black-and-lime hero with an address bar and a live ETA tracker card — an animated rider marker following an SVG route, a ticking countdown, status pills and a step tracker. Below sit use-case cards, an interactive coverage-cities grid, a slider-driven rider earnings calculator, an app-download section with a phone mock, plus a mobile nav, scroll reveals and toast feedback.

Delivery — Parcel / Courier Landing

A full parcel and courier landing page built around a trustworthy blue-and-slate palette. It leads with a hero track-your-package input that returns live status, ETA and courier detail, paired with a map-forward shipment card where an animated driver marker follows an SVG route and a countdown ticks down. Below sit same-day, next-day and international service cards, an instant pricing calculator with service, size and distance controls, an interactive coverage map with hub tooltips, a dark business-solutions band, CTA and footer. Vanilla JS, no dependencies.

Delivery — Map Route

A mobile-first live tracking component that draws a stylized CSS-grid map with roads, an SVG route polyline from pickup to drop-off, and an animated driver marker that glides along the path. A play, pause, and restart control plus 1x, 2x, and 4x speeds drive the trip, while a big countdown ETA, distance-remaining, arrival clock, and a progress bar update in real time. Pickup and drop pins, a recenter button, and a status step tracker round out the screen with delivered and pending pills.

Delivery — Package / Shipment Row

A reusable delivery shipment list row that packs a tracking number, origin-to-destination route, carrier badge, animated status pill, ETA, and a thin progress mini-bar into one tidy, scannable line. Each row expands to reveal a vertical tracking-history timeline with done, current, and failed states. The demo lists eight fictional packages across in-transit, out-for-delivery, delivered, and exception statuses, with status filters, a toast helper, and a mobile-first responsive layout.

Delivery — Schedule a Delivery

A polished schedule-a-delivery flow for a fictional same-day courier. Riders enter pickup and drop-off addresses, choose a package size, pick a date from a seven-day strip and a two-hour time slot, then select Standard or Express service. The estimate recalculates live from base fare, distance, size handling and service multiplier, with a route map preview, animated driver marker, and a confirmation modal issuing a tracking number.

Delivery — Live Order Tracking

A mobile-first live order tracking screen for a fictional food delivery app. A gridded map placeholder draws an animated SVG route with a pulsing driver puck that creeps toward home, a big ETA countdown ticks down minute by minute, and a four-stage status stepper advances from placed to delivered. A courier card offers call and message actions, while an itemised order summary lists food, totals, and the delivery address — all driven by a small vanilla-JS state machine.

Delivery — Order Detail

A mobile-first food delivery order detail and receipt screen with a delivered status banner, four-step progress tracker, itemized list with quantities and prices, and an expandable payment summary covering subtotal, delivery and service fees, estimated tax, courier tip, and total. Includes delivery address with drop-off instructions, courier and payment rows, a five-star order rating control, and reorder and get-help actions wired to lightweight toast feedback.

Delivery — Status Step Tracker

A reusable delivery status step tracker in horizontal and vertical variants, walking a parcel through placed, confirmed, out for delivery and delivered. Features an animated active step with a pulsing marker, green completed checks, live timestamps, a shrinking ETA and arrival clock, a courier card that appears only in transit, status pills, and buttons to advance, step back or reset the whole flow.

Streaming — Account / Plan

A cinematic dark-mode account and membership screen for the fictional Lumora streaming service. A glowing current-plan card shows pricing, features and the next charge, with a change-plan modal that lets you pick Basic, Standard or Premium and confirm the switch. Billing history sits in a scrollable table, registered devices can be removed with a smooth sign-out animation, playback toggles flip with accessible switches, and a no-fee cancel flow updates the live status pill.

Streaming — Content Dashboard

A cinematic dark admin dashboard for the fictional Nebula streaming studio, built in HTML, CSS, and vanilla JS. Four KPI cards track active viewers, watch hours, retention, and churn with inline sparklines and trend badges. A full SVG viewership chart redraws on timeframe toggle and metric tabs with hover tooltips, beside a regional heat list, a sortable-feel top titles table, and an episode retention curve. Tapping any title slides in a drill drawer with per-title stats and a mini chart. No libraries, fully responsive.

Streaming — Browse Home

A cinematic dark-first browse home for the fictional Nebula streaming service, built in HTML, CSS, and vanilla JS. A full-width hero billboard rotates featured titles with gradient-scrim poster art, match scores, quality badges, and Play and More Info actions. Below sit horizontally scrollable rows — Continue Watching with progress bars, a ranked Trending Top 10, New Releases, and genre rails — each with hover-scale posters that expand into a quick-action preview card. A top nav condenses on scroll and a toast confirms every illustrative click.

Streaming — Hero Billboard

A cinematic, dark-first hero billboard for streaming platforms with a full-bleed backdrop, gradient scrim, title logo, match score and quality badges, synopsis, and play plus more-info buttons. An auto-rotating featured carousel cycles through fictional titles with progress-filled indicator dots, mute and replay controls, keyboard arrows, hover-to-pause, and a synced thumbnail row below the billboard.

Streaming — Episode Picker

A cinematic, dark-first episode picker for a fictional original series. A compact billboard hero carries the show title, match score and quality badges, while a season dropdown and tabbed switcher swap a rich episode list rendered from data. Each row pairs a 16:9 thumbnail with a hover play affordance, duration chip and continue-watching progress bar against an episode number, title, air date, downloaded badge and an expandable synopsis. Now-playing rows are highlighted, and every interaction runs on dependency-free vanilla JS.

Streaming — Kids Streaming Landing

A bright, playful marketing landing page for a fictional kids streaming service. Floating characters and a glowing screen ring anchor the hero, while age-tab tiles swap age-appropriate show cards with quality and edu badges. A live parental-controls panel offers a screen-time slider and PIN toggles, plus educational-value cards, a monthly/yearly pricing switch with three family plans, parent testimonials, an email-capture CTA, and a full footer. Bouncy micro-interactions, scroll reveals, toasts, and a mobile menu throughout.

Streaming — Carousel Row

A reusable cinematic content carousel for streaming UIs. Landscape poster cards with quality badges, top-rank numbers, match scores and continue-watching progress bars scroll horizontally with snap, fading hover arrows, drag-to-scroll, lazy-loaded poster art, pagination dots that track position, and an explore-all end card. Built dark-first with pure vanilla JavaScript and CSS variables, fully keyboard navigable and responsive down to mobile widths.

Streaming — Music Streaming Landing

A vibrant, dark-first marketing landing for a fictional music-streaming service. A gradient hero pairs an animated album wall with a live equalizer and play/pause control, backed by feature cards for offline downloads, Hi-Fi lossless, smart playlists and podcasts. A horizontally scrolling artist spotlight, a monthly/yearly pricing switch across Individual, Family and Student plans, app-store CTAs with an animated phone mock, and scroll-reveal motion round out the page. Built with vanilla HTML, CSS and JavaScript.

Streaming — Live Sports Landing

A dark, electric live-sports streaming landing for the fictional Pitchside service, built in HTML, CSS, and vanilla JS. A cinematic hero pairs a condensed billboard headline with a featured live match card whose clock ticks and score updates in real time, above an endlessly scrolling fixtures ticker of live and upcoming games. Below sit a leagues grid with live pulses, game-day feature cards, a sport-filterable today schedule with set-a-reminder buttons, a monthly to annual passes grid, a closing CTA, and a multi-column footer with scroll-reveal motion and toasts throughout.

Streaming — Niche / Indie Landing

A moody, editorial landing page for a fictional indie cinema and anime streaming service. Charcoal canvas with amber and magenta accents, a Fraunces serif and Inter sans mix, and a cinephile tone. Features an editorial hero with stats, hand-curated collection cards with live tag filtering, a why-curated manifesto grid, a horizontally scrollable creator spotlight rail, a community signup with email validation, a monthly-yearly pricing toggle, scroll reveals and a toast helper.

Streaming — General SVOD Landing

A blockbuster-grade marketing landing page for a fictional general SVOD service, built in pure HTML, CSS and vanilla JavaScript. It pairs a cinematic title-wall hero and email-to-start capture with value-prop cards, horizontally scrollable content showcase rows, ranked and continue-watching badges, three pricing tiers with a featured plan, an accessible single-open FAQ accordion, a full footer, a fading sticky nav, mobile menu, toast feedback and scroll-reveal animations.

Streaming — Video Player

A full-screen cinematic video player UI for a fictional streaming service. Features a backdrop poster, center play, and a bottom control bar with a working scrubber showing buffered progress, time readout, hover volume, captions toggle, and a settings menu for quality, speed, and audio track. Controls auto-hide during playback, a skip-intro button appears over the intro, and a next-up card counts down near the end. Pure HTML, CSS, and vanilla JS.

Streaming — Player Control Bar

A cinematic dark-first player control bar for the fictional Nebula streaming service, built in HTML, CSS, and vanilla JS. A draggable scrubber shows buffered range and a hover thumbnail tooltip with timecode, beside play and pause, skip ten, previous and next episode, a slide-out volume slider, captions, a multi-level quality and speed settings menu, picture-in-picture, and fullscreen. The chrome auto-hides during playback, an up-next chip surfaces near the end, and full keyboard shortcuts drive every control.

Streaming — Profile Switcher

A cinematic who-is-watching profile-select screen for a fictional streaming service. A centered grid of gradient avatar tiles greets the viewer, each scaling up with a glowing ring on hover, kids profiles wearing a badge. A manage mode flips every tile into edit cards with rename prompts and remove buttons, while an add-profile dialog creates new viewers with a live avatar preview and a kids toggle. Selecting a profile plays a full-screen loading curtain before welcoming you in.

Streaming — Search / Category Grid

A cinematic dark-mode search and browse screen for the fictional Lumora streaming service. A pill search field surfaces live, keyboard-navigable suggestions for titles and genres with highlighted matches, while genre filter chips and a sort menu reshape a responsive poster grid in real time. Hovering a poster scales it and reveals a play button plus a match score, and graceful loading skeletons and an empty state keep the experience smooth on every query.

Streaming — Title Detail

A cinematic, dark-first streaming title-detail page for a fictional sci-fi series. A full-bleed backdrop hero carries the title, match score, rating and quality badges alongside play, my-list and like controls, plus an expandable synopsis. Below it, season tabs swap a rich episode list with hover previews and per-episode list toggles, an expandable cast grid reveals the full crew, and a scrollable more-like-this row surfaces poster recommendations. Built with semantic HTML, CSS variables and vanilla JS.

Streaming — Poster Card

A reusable cinematic poster and landscape card for streaming UIs. Each tile shows quality-badged artwork that expands on hover into a rich preview popover with title, match score, rating, runtime, genre chips, and quick play, add-to-list, like, and mute controls. Continue-watching variants surface an inline progress bar, while trending tiles add rank markers. Ships as a horizontal-scroll row plus a responsive catalogue grid, fully keyboard and touch friendly with toast feedback.

Job Board — Candidate Detail

A recruiter-facing candidate detail page for an applicant tracking system, built with vanilla HTML, CSS, and JavaScript. It pairs a profile header showing name, role, stage pill, and star rating with tabbed sections for resume, scorecard, activity, and notes. Interview criteria sliders feed a live average back into the overall rating, while a sticky action bar advances, rejects, or schedules the candidate with toast confirmations and a self-updating activity feed.

Job Board — Application Form

A multi-section job application form for an applicant tracking flow. Pick a saved resume or drag-and-drop a new file with live upload preview, edit autofilled contact details, answer screening questions with radio pills and selects, write an optional cover letter with a character counter, then review every answer and submit to a confirmation screen with a reference number. Includes inline validation, a stepper, toasts, save-draft and bookmark controls.

Job Board — Job Posting Editor

A polished applicant-tracking job posting editor with a split-pane layout: edit title, department, location, employment type, salary range and a mock rich-text description on the left, build add/remove screening questions with required toggles, and watch a candidate-facing job card update live on the right. Toggle remote-friendly, save as draft or publish, and see status pills, salary and location chips, a bookmark toggle, and friendly toasts confirming every action.

Job Board — Job Detail

A polished, scannable job detail page for a job board or ATS. Shows a sticky header with title, company, location, salary chips and remote badge, plus apply and save actions. Sections cover the role, responsibilities, requirements and benefits, alongside a company snapshot card, hiring-manager note and similar roles. Interactions include a sticky apply bar that appears on scroll, a synced save toggle, an expandable company panel and native share with clipboard fallback.

Job Board — Candidate Pipeline

A recruiter-side ATS pipeline that turns a hiring funnel into a scannable kanban board. Five color-coded stages — applied, screening, interview, offer, and hired — carry candidate cards with generated avatars, star ratings, location and salary chips, remote badges, and skill tags. Drag candidates between columns or nudge them with arrow buttons, watch live column counts update, open a quick-view drawer for full context, and filter the whole board by role, minimum rating, or free-text search. Built with semantic HTML, CSS variables, and vanilla JavaScript.

Job Board — Filter Rail

A faceted job-search filter rail with collapsible groups for role, job type, experience and remote mode, plus a minimum-salary slider, a location input that turns cities into removable chips, and segmented controls. Every interaction updates a live results count and a row of active-filter chips with one-tap removal and clear-all. On narrow screens the rail becomes an accessible slide-in drawer, and job cards carry salary, location and remote badges with a bookmark toggle.

Job Board — General Board Landing

A clean, trustworthy marketing landing for a general job board, built on white, trust-blue, and slate. It pairs a dual-field role and location search with trending categories, featured employer cards carrying remote and hiring pills, seeker and employer value props, a vivid stats band, hired-through testimonials, and a dual find-a-job or post-a-job call to action. Vanilla JS drives interactive search, popular-search chips, a mobile menu, toast feedback, and smooth scroll reveal, fully responsive down to 360px.

Job Board — Gig / Shift Work Landing

A mobile-first marketing landing page for a fictional gig and shift-work platform, built with a bold orange-and-teal palette and chunky sans typography. It pairs an energetic hero with a live shift feed, animated count-up stats, an instant-pay wallet widget, scannable shift categories, a three-step how-it-works flow, an app-download block, and a business hiring call to action. Every section reveals on scroll and interactions surface lightweight toasts.

Job Board — Executive Landing

A discreet executive-search landing page in charcoal, gold and ivory with a refined serif-and-sans pairing. Features an elegant hero with a confidential mandate card and animated figures, a confidential-search value prop, filterable leadership mandates with save toggles, a vetted-network panel, dark process steps, client logos, and a validating request-access form. Vanilla JS handles scroll reveal, counters, filtering, bookmarks and a toast — fully responsive down to 360px.

Job Board — Internal Mobility Landing

A warm, belonging-first internal careers landing page for a fictional company called Lumen. It pairs a navy-and-coral brand with a welcoming hero, animated stats, a spotlight role with skill-match meter, a filterable grid of open internal roles, employee growth stories, learning and development perks, culture values on a navy band, and an express-interest CTA. Includes bookmarks, count-up numbers, scroll reveals, a mobile menu, and a validated form.

Job Board — Tech / Startup Landing

A dark, developer-cool landing page for a tech and startup job board. A grid-lit hero pairs animated count-up stats with a live terminal motif that types out a match-and-apply session. Below it sit curated startup roles with salary bands and remote badges, category filters, an interactive salary-transparency card driven by a seniority slider, a tech-stack chip cloud that totals matching roles, a why-us grid for engineers, and an email capture CTA. Built with vanilla JS, scroll reveal, and a toast helper.

Job Board — Job Search

A polished job search page with a sticky filter rail for role, location, remote, salary range, type and experience, a live search bar, and a sortable list of scannable job cards. Each card shows a company logo, title, salary and location chips, tags, posted date, plus a save toggle. Results count, relevance and salary sorting, and pagination all update instantly with vanilla JavaScript and no dependencies.

Job Board — Resume Builder

A candidate profile and resume builder with editable sections for summary, experience, education, skills, and links beside a live preview pane that updates as you type. A completeness meter tracks profile health with status pills, while a visibility toggle controls recruiter discoverability. Add, remove, and drag-reorder entries, manage skill chips, and export a plain-text resume. Clean, scannable, professional job-board styling with soft shadows and accessible controls.

Job Board — Job Listing Card

A reusable, scannable job listing card for a careers board or ATS. Each row pairs a colored company logo with the role title, company, location and a green salary chip, plus status badges for new, urgent and remote roles. A bookmark toggle tracks saved jobs in a live header counter, quick-apply turns into an applied confirmation, and chip filters and search narrow the list. Clean, accessible, responsive vanilla HTML, CSS and JavaScript with no dependencies.

Job Board — Resume Upload

A candidate-portal resume upload step with a drag-and-drop zone, a file chip that shows an animated upload progress bar, and a simulated parse that streams section checks before populating an editable preview. The preview auto-fills name, title, email, phone and location, renders removable skill pills with an add-on-Enter input, and lists prior roles with colored company logos. Remove, re-upload and sample actions all work, powered by dependency-free vanilla JavaScript.

Job Board — Applications Tracker

A polished seeker dashboard for tracking the whole job hunt in one scannable view. Pipeline rows show each application with company logo, location and salary chips, remote badges, and color-coded status pills for applied, in review, interview, offer, and rejected. Filter by status, withdraw or re-apply, resume saved jobs into the pipeline, bookmark recommended roles, and watch a profile-completeness meter climb as you act on nudges. Built with semantic HTML, CSS variables, and vanilla JavaScript.

Job Board — Application Status Pills

A clean, scannable application-status system for a job board or ATS — semantic pills for applied, screening, interview, offer, hired, and rejected, paired with a live horizontal stepper that animates as you transition between stages. Includes a featured tracker with advance, back, reject, and reset controls, plus a filterable pipeline list of fictional applications with company logos, remote and salary chips, save toggles, and a toast helper. Built with vanilla HTML, CSS, and JavaScript.

Ticketing — Door Check-in Scanner

A bold door check-in console for festival gate staff. A mock camera viewport with an animated targeting frame and sweeping laser feeds a color-coded result card that turns green for valid passes, amber for already-used tickets, and red for invalid codes. A live counter tracks admitted guests against capacity with a scan-rate readout, while a manual lookup searches by name or ticket code and a recent-scans feed logs every decision. Vanilla HTML, CSS, and JavaScript only.

Ticketing — Event Setup

A bold event setup wizard for organizers. A four-step flow covers event details, a live ticket-tier builder with per-tier color, price and quantity, a seating-mode switch between general admission and reserved sections, and publish toggles. Every edit drives a live ticket-style preview with color-coded tiers, sold-out flags and running capacity and gross-potential totals. Inline validation blocks publishing until the name, venue and a future date are set. Vanilla JS only.

Ticketing — Checkout

A bold event-ticketing checkout page with a live order summary, seat-tier legend, quantity steppers, and a perforated ticket motif. Apply a promo code for instant discounts, watch the service-fee and facility-charge breakdown recalculate, and race a ten-minute seat-hold countdown. Inline-validated attendee and payment forms format card details as you type, and placing the order reveals an animated success ticket with a generated QR placeholder. Vanilla HTML, CSS, and JavaScript only.

Ticketing — Organizer Dashboard

A bold, high-contrast organizer dashboard for the fictional Neon Pulse Festival. Four KPI cards track tickets sold, revenue, capacity and gate scans with trend chips and a low-stock badge. A timeframe toggle redraws an SVG sales chart across 7, 30 and 90 days, an interactive donut breaks sales down by ticket tier, a check-in progress ring shows pre-event readiness, and a recent-orders table drills into a ticket-stub drawer. Vanilla JS only.

Ticketing — Event Discovery

A bold, high-contrast event discovery page for a fictional ticketing service. Search artists and venues, filter by city, category and date chips, and browse a responsive grid of event cards with photographic gradient heroes, date flags, price-from labels and low-stock or sold-out badges. A featured carousel, trending sidebar with interest scores, and a color-coded tier legend round it out, while sorting by soonest, popularity or price and one-tap save keep the whole thing genuinely interactive.

Ticketing — Event Card

A reusable event ticketing card pattern rendered as a responsive grid of six distinctive variants. Each card pairs a photographic gradient hero with a floating date badge, category tag, venue line, and a prominent price-from figure. Interactive states cover a save heart toggle with a satisfying pop, hover lift, low-stock and sold-out badges, plus disabled checkout for unavailable shows. Keyboard friendly with a lightweight toast helper and full WCAG-minded contrast.

Ticketing — Date Filter Chips

A polished event-ticketing date filter that pairs one-tap window chips (today, this weekend, this week, this month) with a custom range calendar. Selecting a chip jumps the calendar to the matching month and updates an applied-range banner with a live show count, while tapping two days draws a custom start-to-end range. The matching event list re-sorts and re-filters instantly, showing perforated ticket posters, prices, and low-stock or sold-out badges.

Ticketing — Event Detail

A high-energy event detail page for a fictional music festival. Photographic gradient hero with title, date, venue and a live countdown to doors. Three ticket tiers with color-coded seat legend, low-stock and sold-out badges, and quantity steppers that drive a running order summary and sticky checkout bar. Includes a tabbed lineup schedule, a stylized venue map with info, and an FAQ accordion. Vanilla JS only.

Ticketing — Festival Landing

An immersive multi-day festival landing page wrapped in a warm sunset gradient with a film-grain overlay and a funky display headline. A poster-style hero stacks the dates, a live countdown to gates, and a stacked-headliner lineup. Day-by-day tabs swap the schedule, three pass tiers carry sold-out and low-stock badges, and a stylized site map, experiences grid, and accordion FAQ round it out. Scroll reveals, a mobile menu, and toasts run on vanilla JavaScript only.

Ticketing — Concert Landing

A loud, electric concert ticketing landing page for a fictional stadium tour, built with vanilla HTML, CSS, and JavaScript. Features a full-bleed neon hero with a live countdown to opening night, a filterable tour-dates list with availability badges, a three-act lineup, perforated ticket-tier cards with a sticky cart, a stylized venue map, a hype gallery, an accordion FAQ, mobile navigation, toast feedback, and scroll-reveal animations on a black plus magenta palette.

Ticketing — Conference Landing

A clean, modern landing page for the fictional DevHorizon 2026 engineering conference. An indigo gridded hero pairs the event name, dates and San Francisco venue with a live early-bird countdown, headline stats and dual register calls to action. Below it sit a speakers grid with keynote badges, a four-track agenda built from accessible tabs, three pricing tiers with strikethrough early-bird rates, a stylized venue and travel block, a sponsor wall and a register form. Vanilla JS handles the tabs, countdown, scroll reveal and toast feedback.

Ticketing — Sports Landing

A bold stadium ticketing landing page for a fictional football derby, built with semantic HTML, CSS and vanilla JavaScript. Features a team-vs-team fixture hero in deep blue and red with a live kickoff countdown, buy-by-section ticket cards with tier colours and stock badges, a clickable seating-map teaser, an upcoming fixtures list, hospitality packages, an expandable fan-info FAQ, sticky cart bar, toast feedback, mobile nav and scroll reveals.