Steal this designpagescomponentsanimationspatternsremotionmusicdatabasesskillsarchitectures3DpromptsMCPs design — すべて無料でコピーできます。

Auto-fit Bento Tiles

Resize the tile minimum to see CSS Grid auto-fit adapt without a breakpoint list.

Masonry Bento Layout

A responsive masonry column layout that avoids JavaScript measurement work.

Drag Handle

A precise drag handle keeps the rest of a row selectable while Pointer Events move the item.

Sortable Drag List

Reorder a compact list with native HTML5 drag events and an accessible keyboard fallback.

Inline Validation

Validate fields as they blur and summarize the form state without waiting for submit.

Password Strength

Score password entropy locally and give actionable feedback without sending the secret anywhere.

Long-press Context Menu

Open an action menu after a hold, canceling cleanly when the pointer moves away.

Contenteditable Preview

A small contenteditable surface with sanitized plain-text preview and character count.

Editor Toolbar

A minimal semantic toolbar for bold, italic, code, and undo with an execCommand fallback.

Horizontal Scroll Gallery

A horizontal scroll-snap gallery that can be driven by wheel input or buttons.

Scroll Progress Indicator

Expose document progress with scroll() and a JS fallback for long-form content.

CSS Scroll-timeline Reveal

Reveal content with native animation-timeline and a scroll-position fallback for older browsers.

JSON Tree Viewer

Collapsible JSON tree with live search, match navigation, expand/collapse all, copy, and a Raw text tab. Zero dependencies, syntax-colored by value type.

Draggable Bento Rearrange

Rearrange dashboard tiles with native drag events while preserving a responsive CSS Grid.

Hover-expand Cell

A focused bento cell expands across the grid while neighboring cells yield gracefully.

Drag Kanban Board

Move cards between status columns with native HTML5 DnD and live counts.

File Reorder Grid

Use Pointer Events to reorder file cards in a responsive grid without a library.

Drop Zone Placeholder

A file drop zone exposes a clear placeholder while a native drag is over the target.

Form Draft Autosave

Persist a local draft with a saved timestamp and restore action for interruption-safe forms.

Input Masks

Phone, card, and date inputs format their values while keeping raw user input easy to edit.

Multi-step Wizard

A keyboard-friendly three-step wizard with validation and a progress indicator.

Pull-to-refresh

Pull a scroll surface down to reveal a refresh affordance, with a momentum-like release.

Swipe-to-dismiss Card

Dismiss a card with a touch or pointer swipe, including a small velocity-aware threshold.

Mention Autocomplete

Suggest local teammates after @ input, navigable with the keyboard and Enter.

Bottom-sheet Drag

Drag a bottom sheet with Pointer Events, snapping it open or closed with momentum.

Pinch-zoom Image

A dependency-free two-pointer pinch surface with bounded scale and pan feedback.

Inline Code Link Popover

Apply inline code or a link to a text selection using a small selection popover.

SVG Marker Clustering

Cluster nearby SVG markers when zoomed out, expanding them as the viewport scale grows.

SVG World Pan Zoom

Pan and zoom an inline SVG world-like map with Pointer Events and a bounded viewBox transform.

Cursor-reactive Mesh

A canvas mesh follows cursor velocity and interpolates toward the pointer for a soft reactive field.

Product 360 Viewer

A raw WebGL canvas rotates a simple shaded product with pointer drag and a reset button.

Shader-lit Hero

A raw fragment shader paints a moving gradient hero with no external renderer or dependency.

WebGL Scene Switcher

Switch between three tiny raw WebGL scenes while keeping one canvas and one render loop.

Windowed Card Grid

A virtual card grid computes the visible slice from scroll position and column count.

Sticky Group Headers

Use manual windowing plus sticky group labels to keep long grouped content scannable.

Virtualized Table

Keep a dense table responsive by windowing rows while headers stay outside the scroll region.

Chat Branching Tree

A branching chat transcript where every assistant turn can be regenerated into sibling versions, an inline pager flips between them, editing a user message forks a fresh branch, and a live SVG minimap renders the whole conversation as a navigable tree.

Coach — Booking 1on1

An energetic dark 1-on-1 coaching booking flow where athletes choose a session type, scan a live availability calendar with time-zone aware slots, fill in their training details, and lock in a glowing lime confirmation — every step gated, keyboard friendly, and packed with motivational micro-interactions.

Coach — Client Dashboard

An energetic dark client dashboard for a fitness coaching app: a hero card for todays workout with a start/complete toggle, a swipeable weekly plan strip, a live progress mini-chart, next-session countdown, threaded coach messages with quick replies, plus animated streak and goal-progress widgets. Electric-lime CTAs glow on hover, rings and bars fill on load, and every control is keyboard-reachable with AA contrast.

Coach — Workout Builder

An energetic dark workout builder where coaches drag exercises from a searchable library into a day plan, dial in sets, reps and rest per movement, reorder with live volume and estimated-duration math, and save the session. Electric-lime CTAs, muscle-group filters, empty-state coaching and a toast-confirmed save make programming a full training day feel fast, tactile and motivating.

Dating — Onboarding Flow

A five-step dating app signup wrapped in a 430px phone frame: verify a phone number, add name and age, upload up to six photos, pick interest tags, and choose what you are looking for. Progress dots track every step, inline validation blocks bad input, back and next keep state, and a confetti welcome screen celebrates the finish.

Dating — Swipe Deck

A tactile, phone-framed swipe deck where draggable profile cards tilt and reveal LIKE or NOPE stamps as you fling them left or right. Each card stacks a full-bleed gradient photo, name and age, a short bio and interest chips, with the next card peeking behind. Action buttons for rewind, nope, super-like and like mirror the gestures, and a friendly empty state lands when the deck runs dry. Built for pointer and touch with spring-back physics and a live match toast.

Dental — Appointment Booking

A trust-first, four-step dental booking flow: pick a treatment, choose a dentist, land on a clean calendar with live slot-availability states, enter patient details, and reach a reassuring confirmation screen — all wrapped in a soft clinical-light theme with a progress tracker, running summary, and smooth micro-interactions.

Dental — Patient Portal

A trust-first dental patient portal dashboard with a next-appointment card, animated treatment-history timeline, an outstanding-balance summary with a pay action, a downloadable documents list, and quick actions for rescheduling or messaging the clinic — all built as a clean clinical light interface with rounded cards, soft shadows, badges, live toasts, and a keyboard-accessible reschedule flow.