Bibliothek

CRM & Sales Tools

CRM and sales platforms compared — pipelines, contact management, and lightweight sales workflows for startups and SMBs.

Customer Support

Customer support and messaging platforms compared — live chat, shared inbox, and AI-assisted support.

Forms & Surveys

Form builders and survey tools compared — embeddable forms, logic, and submission handling.

Legal Document Generators

Legal document generator platforms compared — Terms of Service, Privacy Policy, and cookie policies for startups and SaaS.

Scheduling & Booking

Scheduling and booking APIs compared — embeddable calendars, calendar sync, and booking workflows.

Pricing Table (Remotion)

Animated pricing comparison table with staggered card reveals, feature lists, and highlighted "popular" plan — rendered with Remotion at 1280×720 30fps.

Dark Blue

A deep navy and midnight-blue palette — professional, trustworthy, and atmospheric, perfect for SaaS products and dashboards.

Team Invite Email

Team invitation email with sender avatar, workspace name, role badge, and accept/decline CTA buttons. Table-based HTML.

Pricing Page

A full pricing page with monthly/annual toggle, three-tier plan cards, feature comparison table, and FAQ accordion. No libraries.

SaaS Multi Tenant Schema

Multi-tenant SaaS relational schema with organizations, members, roles, subscriptions, and billing.

Pricing Table

Pricing table with monthly/yearly toggle (20% discount), 3-tier cards, feature comparison list, popular badge, and CTA buttons. Pure CSS + JS.

Sidebar Admin

Collapsible admin sidebar with icon-only mode, grouped navigation sections, active state, and mobile overlay. No dependencies.

Admin Layout

A complete admin dashboard shell layout with collapsible sidebar, top navbar, and main content area. Mobile-responsive with hamburger toggle.

Advanced Filters

An advanced filter panel for data tables with multiple filter types — text search, multi-select, date range, number range, and boolean toggles. Supports saving filter presets.

Availability Calendar

A Calendly-style availability picker for scheduling meetings. Shows available time slots across a monthly calendar with time zone support and booking confirmation flow.

Calendar View

A full-featured monthly calendar with event creation, editing, and deletion. Supports multiple event categories and drag-to-create on day cells.

Data List

A feature-rich data list component with search, column sorting, bulk selection, and inline status management. Designed for SaaS user/content management views.

Dashboard Widget

A draggable, resizable dashboard widget system. Widgets can be minimized, refreshed, and rearranged to customize the dashboard 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.

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.

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.

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.

CSS-only Typewriter

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

Smooth Number Counter

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

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.

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.

Text Scramble / Matrix Decode

Text that scrambles through random characters before resolving to the final string — the classic hacker/matrix decode effect. Zero 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.

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.

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.

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.

React Native Shared Element Transition

A shared element transition effect for React Native that animates position and size of an element between two views using measure and Animated API.

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.

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.

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

Hotel Digital Key Card

A mobile-phone-framed digital room key for Aurelia Hotels — shows hotel branding, room number, guest name, and validity dates. Tap the large 'Hold to unlock' button to trigger a locked → unlocking → unlocked animation sequence with an NFC pulse ring, then auto-relocks after a brief confirmation. Includes share key and room info quick actions.

Hotel Loyalty Tier Card

A membership loyalty card widget for Aurelia Hotels — displays member name, current tier (Silver/Gold/Platinum), member number, and points balance on a premium gradient card. Below it a progress bar shows nights and points needed for the next tier, alongside a benefits list and recent points activity. A tier switcher reskins the card and a 'Simulate a stay' button adds points, animates the progress bar, and auto-promotes to the next tier when the threshold is crossed.

Real Estate — Lead Card

An editorial buyer-lead card for a real-estate CRM pipeline, with initials avatar, phone and email contacts, a source tag, budget and desired-area chips, a colour-coded status pill that cycles through New, Contacted, Touring and Offer, a star priority toggle, last-activity timestamp, and quick call, email and inline-note actions. Built with semantic HTML, a warm ivory-and-brass palette, faux listing photography rendered in pure CSS, and dependency-free vanilla JavaScript.

Real Estate — Listing Card

An editorial real-estate listing card built with vanilla HTML, CSS, and JavaScript. Each card pairs a gradient property photo with a carousel dot row, a persistent favorite-heart toggle, and a status ribbon for new, for-sale, or pending homes. A serif price headline sits above a beds, baths, and square-footage stat row, an address line, and an agent and brokerage footer. Shown as a responsive four-card grid with hover lift, smooth micro-interactions, and accessible keyboard controls.

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 — Gift Card Purchase / Redeem

A luxe, editorial gift-card experience for a boutique salon. The Buy tab renders a rose-gold card that updates live as you set an amount preset or custom value, recipient name, personal note and delivery date, then totals the purchase with add-to-cart and checkout toasts. The Redeem tab validates a code, shakes on errors, and reveals the balance with an animated count-up plus issue details. Vanilla HTML, CSS and JS — fully responsive and keyboard accessible.

Salon — Loyalty & Referral Card

A boutique salon loyalty and referral panel with a gold-accented points progress bar climbing toward the next reward tier, badge milestones from Petal to Lumiere, a punch-style visit stamp card, a list of redeemable perks whose Redeem buttons deduct points live, and a referral block with a copy-to-clipboard code plus running invites-sent and joined counts. Editorial serif display, clean sans body, soft toasts.

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.

Loyalty / Rewards Card

Customer loyalty card with 10-visit progress, animated stamps, 3-tier rewards ladder, faux barcode and member meta. Tap a stamp to flip — earn the reward at 10.

Resource Card

Grid card for code resources with tech badges, difficulty label, target framework pills, and a save-to-favorites toggle.

Showcase Preview Card

Live-preview card with an embedded iframe, difficulty badge, save-to-favorites, and Lab / View Code action buttons.

RTL Card Grid

Responsive card grid that automatically flips layout between LTR and RTL using CSS logical properties with no JavaScript required.

Border Beam

A card with an animated beam of light that travels continuously around its border using conic-gradient and CSS keyframes.

Magic Card

Card with a radial gradient spotlight that follows the mouse cursor, creating an interactive lighting effect.

Neon Gradient Card

Card with an animated neon glow border that shifts through vivid colors using keyframe animations and box-shadow.

Web3 — Wallet Dashboard (balances · tokens · NFTs)

A premium, dark-first Web3 wallet dashboard with a glassy address chip, network switcher, and a gradient-bordered hero card showing an animated total balance and 24h PnL. Send, Receive, Swap, and Buy actions sit beside a portfolio allocation donut, while Tokens, NFTs, and Activity tabs reveal token rows with live prices, CSS-drawn NFT thumbnails, and a transaction feed. Includes a hide-balances eye toggle, a guarded swap modal with risk confirmation, and toasts. All mock data, fictional tokens.

Chart & Data Viz Libraries

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

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 — 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 — 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 — 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 Portal Dashboard

Patient portal home: a warm greeting header, a next-appointment hero card with a live countdown and check-in / join-video actions, a quick-actions grid, recent lab-result tiles with status badges, an active-prescriptions list with one-tap refills, and a care-team strip.

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.

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 — 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 — Member Dashboard

A high-energy member home for a performance gym on a dark neon-lime theme. A greeting header with avatar and tier sits above a quick-action bar, then a live next-class countdown with an animating check-in, a fiery streak widget with a seven-day dots row, weekly activity stat cards, an interactive goals ring that fills as you toggle targets, an achievements badge row, and a cancellable upcoming-bookings list. Vanilla JS, responsive to 360px.

Gym — Trainer Dashboard

A high-energy daily console for personal trainers built in vanilla JS. KPI cards summarise sessions, active clients, attendance and weekly revenue; a back-to-back session timeline expands to reveal focus, location, goal and notes with mark-complete and message actions; a searchable client roster shows avatars, next session and colour-coded adherence bars; and a follow-up action list toggles programs and check-ins done with live due counts and toast feedback.

Hotel Revenue / RevPAR Dashboard

A full-screen manager revenue dashboard with KPI band (Occupancy, ADR, RevPAR, Total Revenue), a CSS-only animated bar chart of daily revenue across the week, a revenue-by-segment table, top room-types table, and a date-range / property selector that recalculates all figures.

Hotel Guest Portal

Logged-in guest dashboard with three tabs — My Stay, Folio, and Requests. Guests can view their room and check-out countdown, browse current charges, and submit live service requests that appear in a status-tracked list.

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

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.

Event Countdown (Remotion)

An animated event countdown with flip-style digits, blinking separators, and glowing background — rendered with Remotion at 1280×720 30fps.

Code Walkthrough (Remotion)

An animated code typing walkthrough with syntax coloring in a VS Code-style editor frame — rendered with Remotion at 1280×720 30fps.

Gradient Wave (Remotion)

Abstract animated gradient wave background with layered sine curves and gradient text title — rendered with Remotion at 1280×720 30fps.

Kinetic Typography (Remotion)

Animated kinetic typography — staggered word reveals with spring physics and exit animations — rendered with Remotion at 1280×720 30fps.

Logo Grid (Remotion)

Animated "trusted by" logo grid with staggered scale-in reveals and subtle pulse — rendered with Remotion at 1280×720 30fps.

Map Pins (Remotion)

Animated global map with location pins dropping in with ripple effects and dashed connection lines — rendered with Remotion at 1280×720 30fps.

News Ticker (Remotion)

A broadcast-style news ticker with rotating headlines, scrolling bottom bar, LIVE indicator, and network branding — rendered with Remotion at 1280×720 30fps.

Notification Stack (Remotion)

Stacked toast notifications sliding in and out with progress bars and type-colored accents — rendered with Remotion at 1280×720 30fps.

Photo Collage (Remotion)

Animated masonry photo collage with staggered scale-in reveals and gradient placeholders — rendered with Remotion at 1280×720 30fps.

Pricing Table (Remotion)

Animated pricing comparison table with staggered card reveals, feature lists, and highlighted "popular" plan — rendered with Remotion at 1280×720 30fps.

Product Showcase (Remotion)

A product feature showcase with animated title, tagline, and staggered feature cards — rendered with Remotion at 1280×720 30fps.

Progress Ring (Remotion)

Animated circular progress rings showing Lighthouse-style performance scores with spring animations — rendered with Remotion at 1280×720 30fps.

Social Proof Stats (Remotion)

Animated social proof stats with counting numbers, icons, and staggered card reveals — rendered with Remotion at 1280×720 30fps.

Quote Card (Remotion)

Animated inspirational quote with word-by-word reveal, giant quote mark, accent line, and author attribution — rendered with Remotion at 1280×720 30fps.

Podcast Audiogram (Remotion)

A podcast audiogram with animated waveform bars, guest avatar, episode info, and progress bar — rendered with Remotion at 1280×720 30fps.

Split Screen Comparison (Remotion)

A before/after split-screen reveal with animated divider, mock UI cards, and labeled sides — rendered with Remotion at 1280×720 30fps.

Step Process (Remotion)

Animated step-by-step process flow with numbered circles, connector arrows, and staggered reveals — rendered with Remotion at 1280×720 30fps.

Text Reveal (Remotion)

Masked text reveal with animated wipe blocks and word-by-word exposure — rendered with Remotion at 1280×720 30fps.

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.

Drawer Slide Effect

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

Skeleton Loading Effect

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

Button Press Effect

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

Modal Enter Effect

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

Nav Underline Effect

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

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.

FAB Navigation

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

Rudder Navigation

Bottom navigation with a raised central FAB button. Combines standard tab items with a prominent primary action.

Drawer Navigation

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

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.

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.

Menubar App

Desktop-style application menubar (File, Edit, View…) with nested submenus, keyboard shortcuts display, and full keyboard navigation.

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.

Graphics & Rendering APIs

The GPU APIs and helper libraries you render with — from low-level Vulkan to beginner-friendly raylib.

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.

Hotel PMS — Room Rack / Tape Chart

Classic hotel tape chart — rooms on the Y axis, 14 days on the X axis. Coloured stays render as blocks across nights, with status (confirmed · in-house · checkout · maintenance) and click-to-inspect.

GraphQL Schema Architecture

GraphQL API structure comparing schema-first vs code-first approaches with domain-based module organization and resolver patterns.

Kinetic Typography (Remotion)

Animated kinetic typography — staggered word reveals with spring physics and exit animations — rendered with Remotion at 1280×720 30fps.

Progress Ring (Remotion)

Animated circular progress rings showing Lighthouse-style performance scores with spring animations — rendered with Remotion at 1280×720 30fps.

Analytics Page

A data-driven analytics dashboard with date range picker, area/funnel charts, heatmap, metric comparisons, and exportable data table. No libraries.

Donut Chart — Product Categories

A donut chart showing product category distribution with icon header, colored segments, animated arcs, and a clean legend. Ideal for shipping, inventory, or sales dashboards.

Geographic Distribution Chart

A geographic distribution chart with a country map and horizontal region bars. Features configurable regions, animated bars, color-coded map areas, and a responsive layout for dashboard analytics.

Stacked Bar Chart

A stacked bar chart comparing year-over-year data by month. Features animated bars, legend, responsive layout, and configurable datasets with a clean corporate dashboard aesthetic.

Area Chart

A smooth area chart with gradient fill under the curve, multi-series stacking, animated draw-in, and interactive crosshair tooltip. Built with vanilla JS and SVG.

Bar Chart

A vertical and horizontal bar chart built with SVG. Features animated bars, value labels on hover, grouped/stacked modes, and a responsive layout that redraws on resize.

Funnel Chart

A conversion funnel chart that visualizes step-by-step drop-off rates. Features animated trapezoid stages, percentage labels, drop-off callouts, and a horizontal comparison mode.

Line Chart

A fully responsive SVG line chart with animated paths, multi-series support, smooth bezier curves, grid lines, axis labels, and interactive tooltips. Built with vanilla JS and inline SVG — no dependencies.

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 — 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 — Reservations Manager

Reservation manager — list / calendar / waitlist tabs, today's bookings with seating status, party-size filter, walk-in & no-show buttons and an enquiry/waitlist sidebar.

Admin — Menu Editor

Menu CRUD: category sidebar with item counts, drag-orderable item list, right-side edit panel with price, description, allergens, modifier groups and visibility toggle.

Admin — 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 — Staff & Shift Roster

Weekly staff schedule grid — 12 staff across 7 days · 3 service blocks · color-coded by role · drag-to-add hint · per-staff weekly hours total · role filter.

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.

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.

Farm-to-Table Landing — Sage & Stone

Earthy farm-to-table landing — sage + bone + clay palette, Fraunces display + Inter Tight body, organic curves, weekly garden harvest tally, and a no-menu tasting reveal.

Self-Ordering Kiosk

Customer self-ordering kiosk — vertical layout, 72px touch targets, language switcher, animated welcome → category → item-detail → cart → pay flow.

Customer Checkout

Three-step restaurant checkout — pickup vs delivery, time slot picker, contact + payment with tip presets — and a confirmation success screen.

Italian Trattoria Landing — Trattoria del Forno

Rustic trattoria landing — cream + tomato + olive, Playfair Display + Dancing Script handwritten accents, checkered tablecloth divider, Italian menu copy.

Digital Menu Board (TV Signage)

TV-resolution restaurant menu board — three rotating panels (Today's specials · Tacos & bowls · Drinks & sweets) with timed crossfade, live clock, and a marquee bottom strip.

Steakhouse Landing — Vault & Ember

Premium steakhouse single-page landing — dark charcoal + leather + gold, Cormorant Garamond display, smoke textures, dry-age tally and cellar drawer.

Mexican Cantina Landing — La Catrina

Vibrant cantina landing — terracotta + cobalt + mustard, Fraunces display, CSS papel picado strip, taco menu, mezcal flight and Spanish-language copy.

Restaurant Menu — Carta

Browseable restaurant menu (carta) with sticky category nav, search filter, allergen chips, and section anchors. Shared warm restaurant palette.

Sushi / Omakase Landing — Kuro

Sushi & omakase landing — zen minimalism in bone + ink + vermillion, Noto Serif JP display, ink-wash divider, seat counter, and a 13-course omakase progression.

Menu Item Detail

Restaurant dish detail card with image area, allergen chips, modifier picker (size, doneness, extras), quantity stepper and add-to-order CTA with live total.

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 — 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 — 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 — 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 — 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 — Lab Order Sheet

A clinician lab-order sheet pairing a searchable, category-grouped test catalog with a live order panel. Typing filters Hematology, Chemistry, Endocrine and Micro tests in real time; checking a test adds a removable chip to the selected list and updates the running count. A Routine/STAT priority toggle, an auto-deriving fasting flag, specimen notes and an ICD-10 reason feed an order summary, and Sign and send validates the selection before showing a signed confirmation state.

Clinic — Lab Results Viewer

A patient lab results viewer that groups analytes into collapsible CBC, lipid and metabolic panels. Every row pairs a value and unit with its reference interval, a colored Normal, High or Low status flag and a thin range bar whose marker shows exactly where the result sits within bounds. An out-of-range-only toggle filters live with a flagged count, per-panel badges stay truthful, and Download and Share fire calm confirmation toasts.

Clinic — 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 — 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 — Pediatric Clinic Landing

A playful, child-friendly landing page for a fictional pediatric clinic, built with CSS shapes and emoji mascots instead of images. A bouncy hero leads into a tappable services grid that builds a live visit checklist, a reassuring band for parents, count-up stats with trust badges, a friendly pediatricians strip, and a warm booking call-to-action. Pastel gradients, gentle float animations, reveal-on-scroll and a mobile nav round it out.

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

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

A high-energy gym class roster with live attendance check-in. A neon-accented header shows the class name, time, coach and a capacity bar, while a searchable member list pairs gradient avatars and tier badges with Check-in and No-show toggles. Toggling animates each row between present, no-show and waitlist-promoted states as present, expected, no-show and waitlist counters update in real time. Includes a pending-only filter, a check-in-all action and a walk-in add row.

Gym — Class 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 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 — 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 — 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 — 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 — 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 — Boutique Cycling / HIIT Landing

A club-energy landing page for a boutique cycling and HIIT studio, built in vanilla HTML, CSS and JS. Features a neon-glow hero with a free-ride CTA, a live class-time rotator with dynamic spot counts, vivid signature-class cards, an instructor and DJ-energy crew row, an experience grid, a packs pricing teaser, rider testimonials and a validated claim form. Deep-purple palette with neon-pink gradients, reactive lighting vibes, scroll reveals and toast feedback.

Gym — Class Leaderboard

A live spin/HIIT class leaderboard built on the dark performance-gym theme with zero libraries. Ranked rows pair member avatars with an animated metric bar, a color-coded HR zone pill from Z1 to Z5 and a live effort percentage, while the top three earn dedicated podium cards. A segmented toggle re-ranks the field by calories, total output or Z4-plus zone minutes, and a simulated live tick nudges every rider and re-sorts rows with a smooth FLIP reorder animation, club-screen style.

Gym — Member Dashboard

A high-energy member home for a performance gym on a dark neon-lime theme. A greeting header with avatar and tier sits above a quick-action bar, then a live next-class countdown with an animating check-in, a fiery streak widget with a seven-day dots row, weekly activity stat cards, an interactive goals ring that fills as you toggle targets, an achievements badge row, and a cancellable upcoming-bookings list. Vanilla JS, responsive to 360px.

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

Salon — Retail Inventory

A back-office retail inventory screen for a boutique salon. Four summary cards track active SKUs, low and out-of-stock counts and total retail value, while a sortable table lists every shampoo, color tube and styling tool with brand, SKU, par level, supplier and shelf price. Inline plus-minus steppers adjust on-hand counts and recompute each status pill and row highlight live, filter tabs and a search box narrow the shelf, and a Reorder action fires on anything running low.

Salon — Revenue per Stylist + Service Mix

An owner-grade salon analytics dashboard with KPI cards for revenue, bookings, average ticket and retail share, each carrying trend deltas against the prior period. A pure-CSS bar chart ranks revenue per stylist, a conic donut breaks down the Hair, Color, Nails and Spa service mix, and a top-performers list sits beside a recent-transactions table. A Today, Week and Month segmented control swaps precomputed datasets with animated counters, all wrapped in a luxe rose-gold and cream editorial aesthetic.

Salon — 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 — 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 — 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 — 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 — 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 — 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 — 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 — Med-Spa / Aesthetic Landing

A physician-led med-spa marketing landing for Maison Lumière Aesthetics, dressed in a pearl, champagne and soft-pink palette with clinical Cormorant Garamond display type over Inter. It pairs a translucent sticky nav and a luminous hero with a live consultation card, a filterable twelve-card treatment menu, a dark animated outcomes band, a medical safety charter, a featured provider spotlight, and a validating consultation request form with elegant toast confirmations — all reveal-on-scroll and responsive to 360px.

Salon — Modern Hair Salon Landing

A luxe, editorial landing page for a modern hair salon, built in vanilla HTML, CSS and JavaScript. It pairs a Cormorant serif display with clean Inter UI across a sticky nav, a striking serif hero with a Book CTA, a signature services menu, a stylists strip, an interactive before and after slider with a lookbook, a rotating testimonials carousel, live hours with an open or closed indicator, and a working appointment request form with a live plan total and toasts.

Salon — 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 — 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 — 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 — 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 — POS Checkout

A luxe, editorial point-of-sale checkout for a boutique salon. Tab between Services and Retail, tap to add items, and adjust quantities with inline steppers while an itemized ticket tallies live. Set an adjustable tip from percent presets or a custom amount, apply a promo code, and pick a payment method — Card, Cash, or Gift card. The Charge button confirms with an approval overlay, change due for cash, and a toast. Vanilla HTML, CSS and JS, fully responsive and keyboard accessible.

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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — Lead Card

An editorial buyer-lead card for a real-estate CRM pipeline, with initials avatar, phone and email contacts, a source tag, budget and desired-area chips, a colour-coded status pill that cycles through New, Contacted, Touring and Offer, a star priority toggle, last-activity timestamp, and quick call, email and inline-note actions. Built with semantic HTML, a warm ivory-and-brass palette, faux listing photography rendered in pure CSS, and dependency-free vanilla JavaScript.

Real Estate — Listing Card

An editorial real-estate listing card built with vanilla HTML, CSS, and JavaScript. Each card pairs a gradient property photo with a carousel dot row, a persistent favorite-heart toggle, and a status ribbon for new, for-sale, or pending homes. A serif price headline sits above a beds, baths, and square-footage stat row, an address line, and an agent and brokerage footer. Shown as a responsive four-card grid with hover lift, smooth micro-interactions, and accessible keyboard controls.

Real Estate — Listing 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 — Agent Profile

An editorial personal-brand page for fictional broker Marguerite Alcott of Halford and Vane. A portrait hero pairs name, title and brokerage with call, email and share actions, followed by count-up career stats, a bio with areas served, and a tabbed listings grid that switches between active and sold homes. A self-advancing reviews carousel and a validated contact form round it out, with toast feedback on tour requests and submissions.

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

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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — Q&A / Interview Layout

A magazine Q&A spread for the fictional Meridian Review, opening on a duotone subject portrait, an oversized Playfair headline, an italic standfirst and a drop-cap intro, then the conversation set as styled Q/A pairs — bold red interviewer prompts against serif answers — broken by a full-width pull quote and a duotone harbour figure. A sticky reader bar offers a text-size stepper and a jump-to-question mini-nav, while a sidebar fact box carries the subject's bio, a side pull quote and a key-facts list. Pure vanilla JS, no frameworks.

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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — Search (artists · albums · tracks)

A tactile, Spotify-style music search built in vanilla JS. A prominent rounded input with an animated search icon drives debounced live filtering over a fictional catalog of artists, albums, songs and playlists. Results group into a themed Top result card plus Songs, Artists, Albums and Playlists sections, with a category chip row to narrow scope. Matched substrings highlight in the accent color, recent searches persist with clear-all, and arrow-key navigation plus Enter triggers simulated playback with animated equalizers, play counts and durations.

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

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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — Internal Company Handbook Landing

A friendly internal company-handbook home in the Notion and GitLab-handbook spirit, built with plain HTML, CSS and vanilla JavaScript. It pairs a warm welcome hero, a live search preview with keyboard navigation, and a time-of-day greeting with collapsible quick-link cards for Onboarding, Policies, Benefits, Engineering and People Ops, plus new-this-week updates, most-viewed pages and a who-to-ask contacts strip using CSS-drawn avatars.

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

Wiki — Search Results (faceted)

A faceted knowledge-base search results page for the fictional Aurora KB. A sticky search bar echoes the active query and live result count, a left facet rail filters by result type (Article, Doc, API, Tutorial), section, and last-updated window with per-option counts, and a sorted list of result cards shows highlighted title and snippet matches, a breadcrumb path, a colour-coded type badge, and a relative last-updated stamp. Checkboxes filter the list live, an active-filters chip row supports one-click removal and clear-all, sort toggles Relevance or Newest, and an empty state appears when nothing matches.

Empty States — All-done / inbox-zero state

A task list that rewards finishing the job: tick the final item and the list animates away into a celebratory inbox-zero empty state with a drawn checkmark badge, a confetti micro-animation, and a friendly all-caught-up headline. A live segmented switcher toggles between a celebratory treatment with confetti and a next-action CTA, and a calm, minimal variant that simply settles. An Undo control (and the Escape key) restores the cleared items, an aria-live counter tracks how many tasks remain, and a toast confirms every action.

Onboarding — Getting-started checklist (progress)

A dismissible getting-started widget that walks new users through five setup tasks — complete a profile, invite teammates, connect a data source, create a project, and tune notifications. Each row carries helper text and an action button, and checking one animates an overall progress indicator and percentage. Completed items collapse with a strike-through, an expand toggle minimizes the card, and a dismiss control hides it entirely. Two live variant switchers swap a progress ring for a bar and the expanded card for a floating progress pill.

Empty States — No-search-results state

A live product-search panel that handles the moment a query returns nothing, turning a dead end into a recovery path. As you type, results filter in real time against a small in-memory catalog; when nothing matches, a calm empty state takes over with an animated magnifier illustration, a precise no-results headline echoing the query, spelling and keyword tips, a Clear-search action, and clickable suggested queries that refill the input. A segmented switcher demos three flavors: full suggestions, minimal, and active-filter chips you can clear.

Empty States — First-use empty state

A polished first-use empty state for a Projects list, built to turn a blank screen into an inviting first step. It centers an inline SVG illustration under the headline No projects yet, supportive subtext, a primary Create your first project button and a secondary Import link. The primary action reveals an inline create form with a name field and accent swatches, then drops a freshly built project card onto the page with a confirming toast. A segmented switcher previews the illustration, icon and minimal styles in both inline-card and full-page layouts.

Empty States — Something-went-wrong state

A polished, self-contained error state for failed data loads, built with vanilla HTML, CSS, and JavaScript. It shows a warning illustration, a clear headline, an explanatory line and a copyable faux error code, plus a primary Try-again action that spins and resolves into a success state with a mini recovery chart. A segmented control swaps between server, network, and not-found framings as well as inline-card and full-page layouts.

Onboarding — Spotlight product tour (coachmarks)

A guided spotlight product tour layered over a faux Northwind workspace, where a dimmed overlay punches a cut-out highlight around the current target while a coachmark bubble carries a title, body copy, a 2 of 5 step counter, progress dots, and Back, Next, and Skip controls. The bubble auto-places toward whichever viewport edge has room, the highlight recomputes on resize and scroll, the final step clears everything, and live switches toggle spotlight cut-out versus a bordered ring and auto versus bottom placement.

Empty States — Skeleton + spinner + progressive load set

A side-by-side gallery of loading-state primitives for product UIs — shimmering skeletons for list rows, profile cards and table data, an inline spinner button with a pending-to-resolved cycle, a determinate upload progress bar with live percentage, and a staggered progressive content reveal. A segmented switcher highlights and replays each variant, while a single Reload button replays the whole loading-to-loaded sequence with an accessible status line and toast feedback.

Onboarding — Profile/setup completion nudge bar

A slim profile-completion nudge that keeps new users moving through setup by pairing a live progress bar with the single next best action. It announces how complete the profile is, suggests the next step like adding a photo or inviting a teammate, and advances the percentage as each step is finished. When everything is done the bar flips to a celebratory success state that can be cleared away. The demo ships three live variants — top banner versus sidebar card, avatar preview versus text-only, and dismissible versus persistent — switchable from a segmented control.

Empty States — No-access / permission-required state

A polished permission-required empty state for pages a member can't open yet. It pairs a lock illustration with a clear headline, a plain-language explanation, and a requester-to-owner approval chain showing who must approve. A primary Request access button opens a confirm dialog and fires a Request sent toast, while a secondary Switch account action lets people retry under a different identity. A segmented switcher flips live between no-access, upgrade-required, and request-pending so you can preview every state.

Onboarding — Role / intent picker

A polished onboarding step that asks new users what brings them to the product and tailors the workspace around the answer. A grid of selectable cards — Founder, Developer, Designer, Marketer, Operations, Just exploring — each pairs an inline SVG icon with a label and a one-line outcome, with a popular badge on the lead choice. The Continue button stays disabled until a pick is made, then fires a role-specific next-step toast. A segmented switcher flips between single and multi-select and between a card grid and a compact list, all keyboard-navigable.

Onboarding — Multi-step setup wizard

A full-page, four-step setup wizard that walks a new user from Account to Workspace to Invite team to a Review-and-finish screen. A progress stepper tracks position, Back and Continue buttons gate forward motion behind per-step validation, and every field persists when you navigate back so nothing is lost. The review step summarises all entries with inline edit links, and launching the workspace fires a canvas confetti celebration. Live variant switchers toggle a horizontal stepper against a vertical sidebar and a percentage bar against a step counter.

Onboarding — Contextual hint tooltips / beacons

A self-contained onboarding layer that scatters pulsing beacon dots over a realistic product workspace — search, new-task, notifications, invite, and home. Tapping a beacon opens a positioned popover with a step counter, a short tip, and a Got it action that dismisses just that beacon, while a live aria-live counter tracks how many hints have been seen. A segmented switcher toggles beacon style between pulsing dots and static question-mark badges and flips open behaviour between click and hover, and a Reset hints button restores every beacon.

Onboarding — Sample-data / try with demo prompt

A first-run onboarding pattern that turns an empty workspace into something you can actually click. A Start with sample data prompt offers two choice cards — load a faux CRM pipeline of example deals, or start from scratch and stay empty. Picking the demo shows a brief shimmering skeleton before the populated table animates in, with a toast confirming the count and a Clear demo data button to revert. Toggle between a modal prompt and an inline banner, and between preview-thumbnail and text-only cards.

Onboarding — Welcome / first-run modal

A polished first-run welcome modal for product onboarding, built as an accessible dialog with role=dialog, aria-modal, a focus trap, and Escape or backdrop dismissal. It greets a returning user by name, pairs a gradient illustration header with two or three icon-led highlight bullets, and offers a primary Get started action alongside a low-key Skip for now link. A page button replays it, dismissal is remembered for the session, and live variant switches toggle single-screen versus a two-step carousel and an illustration versus compact header.

Web3 — Address Chip (truncate · copy · ENS)

A reusable wallet identity chip for Web3 interfaces, rendered across every variant you actually ship: a middle-truncated monospace address, an ENS-resolved name with a gradient blockie avatar derived from the address bytes, a copy-on-click chip with clipboard write and a checkmark flip, and a chip that links out to a block explorer. It ships in small, medium, and large densities with online, idle, and offline status dots, plus a hero account card that toggles between raw and resolved display.

Web3 — Gas / Network Fee Selector

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

Web3 — Network / Chain Switcher

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

Web3 — 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 — Token Balance Row (price · 24h · value)

A glassy Web3 wallet portfolio list where each token row pairs a gradient logo, monospace balance and unit price with a green or red 24h change, a sign-aware SVG sparkline and a right-aligned fiat value. A portfolio total header shows a weighted 24h delta, while controls let you sort by value or 24h change, toggle hide-small-balances, and watch every figure count up on load with hover-elevated rows. Mock data, fictional tokens, no on-chain calls.

Web3 — Token Swap (from/to · slippage · route)

A glassy DEX swap card for the fictional NovaSwap aggregator on Lumen Chain, built in HTML, CSS, and vanilla JS. From and To panels each carry a monospace amount input, live fiat estimate, balance with a MAX button, and a searchable token-select modal across eight made-up assets. A flip button reverses direction, while a live rate, animated price-impact, minimum-received, and a slippage popover update as you type. The big Swap action opens a confirm step with risk callouts, a mock signing and submitted flow, a fake tx hash, and toast feedback.

Web3 — Transaction Confirm / Signing Sheet

A glassy, wallet-style signing request sheet that slides up to confirm a swap, send, or token approval. Shows from/to addresses, a network badge, an animated swap visual, a fee and estimated-total breakdown, and an expandable panel revealing raw calldata, nonce and gas. Risk warnings flag dangerous approvals. Confirm spins through signing into a success state with a mock tx hash and explorer link; reject, Esc, and overlay clicks dismiss it with a full focus trap.

Web3 — Transaction History (status · explorer link)

A glassy, dark-first Web3 transaction history list grouped by date, with type icons for send, receive, swap, approve and mint, monospace truncated counterparty addresses, plus or minus colored amounts, and live status badges. Filter chips switch between all, sent, received and swaps, instant search matches hashes and addresses, rows expand for hash, block, fee and nonce, a pending swap flips to confirmed after a few seconds, and copy-hash fires a toast. Pure vanilla, no libraries.

Web3 — Wallet Dashboard (balances · tokens · NFTs)

A premium, dark-first Web3 wallet dashboard with a glassy address chip, network switcher, and a gradient-bordered hero card showing an animated total balance and 24h PnL. Send, Receive, Swap, and Buy actions sit beside a portfolio allocation donut, while Tokens, NFTs, and Activity tabs reveal token rows with live prices, CSS-drawn NFT thumbnails, and a transaction feed. Includes a hide-balances eye toggle, a guarded swap modal with risk confirmation, and toasts. All mock data, fictional tokens.

Game — Main Menu (Play · Options · Quit)

A cinematic in-game main menu for the fictional title Ashen Vanguard by studio Nullforge, built in plain HTML, CSS, and vanilla JS. An animated Orbitron logo and selector-chevron menu (Continue, New Game, Load, Options, Credits, Quit) sit over a parallax mountain scene with drifting embers, scanlines, and a vignette. Arrow keys and Enter mirror mouse hover, a sliding Options panel offers volume sliders and a difficulty selector, and a confirm-quit modal guards the exit, all with neon glow and toast feedback.

Game — Skill / Tech Tree (nodes + links)

An interactive in-game skill and tech tree for a fictional action title, Ashen Vanguard. CSS-drawn hex nodes spread across four tiers, wired together with animated SVG link lines that light up as prerequisites resolve. A live skill-points budget tracks every choice, while locked, available, and unlocked states gate progression. Spend points to unlock branches, hover for effect tooltips, confirm a build, or hit respec to refund everything and start the loadout over.