이 디자인페이지컴포넌트애니메이션패턴remotion음악databases스킬아키텍처3D프롬프트MCP 디자인 그대로 가져가세요. 전부 무료입니다.

Empty States — All-done / inbox-zero state

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

Empty States — 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 — 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 — 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 — Network / Chain Switcher

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

Web3 — Token Balance Row (price · 24h · value)

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

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.

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

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

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

Game — Skill / Tech Tree (nodes + links)

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

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

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

Clinic — Billing & Claims Dashboard

A revenue-cycle dashboard for clinic administrators, leading with KPI cards for billed, collected, outstanding and denial rate plus small trend deltas, a pure-CSS bar chart of the last six months of collections, and an A/R aging bar split across 0-30, 31-60, 61-90 and 90-plus buckets. A claims table carries status pills, status filter tabs with live counts, a search box and a one-tap resubmit action on denied rows.

Clinic — Doctor / Room Schedule Admin

A dashboard-grade scheduling grid for clinic front-desk staff. Rows are providers or treatment rooms via a toggle, columns are 30-minute time blocks from 8 to 5, and appointment blocks span their duration colored by visit type — new, follow-up, procedure or telehealth. Clicking a block slides out a detail panel with patient, time, room and reason, while a Day/Week toggle, doctor filter and live booked-versus-open utilization summary update on every change.

Clinic — 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 — Specialist / Surgery Center Landing

Premium specialist and surgery center landing in a deep-blue, silver and restrained-gold palette with modern serif headings. Sticky nav with mobile menu, a gradient hero with a live consultation desk, a six-card specialties grid, an animated outcomes band, text-based accreditation seals, a featured-surgeon spotlight, and a validated consultation request form. Reveal-on-scroll, scroll-spy nav, counting stats, and toast feedback throughout.

Clinic — Patient Chart

A clinician-side patient chart with a demographics header, a prominent allergy alert banner, and tabbed panels for summary, history, medications, allergies, and recent vitals with inline trend arrows.

Clinic — Video Consult Room

A telemedicine video consult room with a full-bleed main stage, a draggable-feel self-view PiP, circular call controls, side chat / notes / info tabs, a live call timer, and a graceful end-call flow.

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

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 — 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 — CrossFit Box Landing

A raw, industrial landing page for a fictional CrossFit box in a near-black, safety-yellow and concrete palette, with caution-stripe accents, a heavy condensed hero and a free intro-WOD call to action, a whiteboard WOD-of-the-day block with RX and scaling options plus a working stopwatch and AMRAP box timer, a four-program grid, a coaches row, a results section whose stats count up on view, a class schedule teaser, a sticky blurred nav with a mobile menu, scroll reveals, and an accessible booking dialog with a focus trap and toast feedback.

Gym — Workout Plan Builder

A drag-and-drop workout programming tool for coaches and lifters, built with vanilla JavaScript and native HTML5 drag events. A searchable exercise library grouped by muscle feeds into reorderable day blocks like Push, Pull and Legs. Each placed exercise exposes editable sets, reps and rest fields, while live per-day summaries estimate total sets and session duration. Add or remove days, reorder movements within a session, and watch the program stats update in real time.