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

DIY — Graph Paper Background

An engineering graph-paper surface drawn entirely in CSS, with a three-tier grid of 1mm fine, 5mm medium and 10mm bold lines layered from gradients and driven by custom properties. A notebook-style build-log card sits on the sheet while a control panel switches scale presets, paper tint, a red margin rule, corner registration marks, a punched-holes strip, fibre grain and a 60-degree isometric variant. A live ruler redraws with the scale and a code panel emits copyable CSS.

DIY — Difficulty Meter

An iFixit-style repairability meter set with a workshop blueprint aesthetic. The main card features a 1-10 SVG arc dial that animates on load, a color-coded verdict pill, and five criterion rows (opening ease, fasteners, modularity, parts, docs) rendered as staggered segmented bars. Three device presets — easy phone, average laptop, glued tablet — swap all data with smooth transitions, plus inline pill badges and a five-wrench mini rating for embedding in cards.

DIY — Blueprint Grid Background

A drafting-table blueprint background built entirely from layered CSS gradients — zero images, zero libraries. A full-bleed grid sits behind a sample hero sheet while a live tuner adjusts fine-grid size, major-line interval and line opacity, switches between navy, kraft, dark-shop and cyan-print themes, and toggles vignette, paper grain and a slow drift animation. Every control writes a custom property on :root, and a live code panel emits the exact CSS with a copy button.

DIY — Hardware Writeup Article

A brutalist hardware-blog article page for a fictional hacking zine called Solder and Smoke. Sticky reading-progress bar, slab uppercase headline, byline with share and save controls, duotone CSS figures, acid-green pull quotes, two syntax-coloured code blocks with line numbers and copy buttons, a mono bill-of-materials table, related-post cards, a tag row, a six-comment thread with nesting, votes and collapse controls, a character-counting composer, and a table of contents that tracks scroll position.

DIY — Project Contest Page

A themed maker-community contest page for the fictional MAKELOG Contests, built in plain HTML, CSS and vanilla JavaScript. It pairs a confetti-flecked hero with a live ticking deadline countdown, three SVG-medal prize tiers with an elevated grand prize, an eligibility checklist beside weighted judging bars that fill on scroll, a filterable entries gallery with like toggles and staggered reshuffling, hoverable judge bios, an accordion FAQ and a validated entry dialog.

DIY — Crafts & Handmade Landing

A warm, tactile landing page for a fictional crafts community and supply shop, built with plain HTML, CSS and vanilla JavaScript. It pairs a blush hero with floating hand-drawn SVG doodles, filterable craft category tiles, tutorial cards with torn-paper illustration edges and yarn-ball difficulty ratings, a live supplies kit builder with running total and free-shipping threshold, a seasonal makealong band with an animated SVG progress ring, a keyboard-accessible community gallery lightbox, and a newsletter form with inline validation.

DIY — Hacker Blog Landing

A brutalist landing page for SOLDER & SMOKE, a fictional hardware-hacking blog. Pure black canvas, bone-white slab headlines and a single acid-green accent drive a dense reverse-chronological article river, a duotone featured teardown, and a sticky sidebar holding a project of the day, a live contest countdown, a weighted tag cloud and a most-commented list. Hover inverts each card to acid on black, a top progress bar tracks reading depth, and a load-more button appends staggered batches until the archive runs out.

DIY — Parts & Tools Checklist

A workshop-styled parts and tools checklist for a Bluetooth speaker build, with custom orange checkboxes, mono part references, quantity steppers, prices, and where-to-buy actions. Checked rows strike through and feed a sticky summary bar plus a hero progress ring that recompute the remaining cost and readiness percentage live. Includes a check-all-owned-tools quick action, print/export stub, and localStorage persistence — all in vanilla HTML, CSS, and JS.

DIY — Maker Profile

A designer profile page for a fictional 3D-printing community, built on a deep slate palette with filament-orange and cyan accents. It pairs a gradient cover band and isometric SVG avatar plate with a mono stat strip, four switchable panes for models, makes, collections and about, sortable isometric render tiles with like counters, hexagonal achievement medallions with tooltips, printer spec cards, a slicer settings table and a sticky activity rail with tip support.

DIY — Safety Callout System

A manual-style safety callout system for DIY and maker guides with four severity levels — Danger, Warning, Tip, and Note — each with an icon plate, stencil label, and optional read-more expander. Includes compact inline strips, a dismissible variant remembered via localStorage, numbered-step embedded callouts, a required-PPE variant with icon chips, and a live builder panel that generates copy-ready HTML with a toast confirmation.

DIY — Workshop Classes

Makerspace classes landing page in a workshop-blueprint aesthetic: a kraft graph-paper hero with a stencil Learn by making headline, a weekly schedule of class cards with navy date blocks, level badges, seats-left meters that turn amber when nearly full, and working Enroll buttons that decrement seats with a toast. Includes level filter chips, an instructors row with mono specialty tags, a dashed membership banner with a perks list, and a four-item FAQ accordion.

DIY — Tool Encyclopedia

A workshop-styled tool wiki page with an A–Z alphabet index bar, live search with match highlighting, and category filters across hand, power, electronics and measuring tools. Eighteen entry cards pair SVG line-art icons with one-line definitions, used-for chips, amber safety strips and budget-alternative suggestions, while a sticky blueprint side panel rotates a Tool of the Day with mono quick facts for weight, price range and skill level.

DIY — Learn Guide

A dark electronics-shop learn guide for a fictional maker store, SOLDERBOX Learn, walking through a desk weather lamp build. A sticky sidebar lists seven guide sections and swaps the main pane without a reload while a progress bar and dot row track how far you have read. Panes cover an illustrated overview, a parts list with SVG component plates and add-to-cart rows, a hoverable wiring diagram, numbered assembly steps, hand-highlighted code with copy and download rows, and a troubleshooting accordion.

DIY — 3D Print Model Page

A Thingiverse/Printables-style 3D model detail page for a fictional parametric cable organizer clip, rendered in a blueprint-and-safety-orange maker aesthetic. It pairs a swappable SVG gallery (iso render, dimensioned side profile, exploded view, in-use scene) with a download rail featuring fake progress, like/collect/follow toggles, a CC license badge, remix lineage, a mono print-settings spec table, and Description/Print Settings/Files/Makes tabs plus related models.

DIY — Community Project Hub

A community hardware project gallery for the fictional CIRCUITO Project Hub, built as one static page in vanilla JS. A sticky sidebar filters live by board family, difficulty and a searchable component multi-select whose picks become removable chips, mirrored in an active-filter row with clear-all. Eighteen cards carry CSS-drawn circuit thumbnails, respect toggles, difficulty badges and mono part previews, alongside sorting, featured collections, an empty state and a staggered load-more.

DIY — Board Product Page

A complete open-hardware board product page for the fictional CIRCUITO Nano R3, built with vanilla HTML, CSS and JavaScript. It pairs an SVG render gallery with hover magnification and a thumbnail strip against a sticky buy box with variant pricing, a quantity stepper, live stock state and an amber add-to-cart flow. Below sit four tabbed panels — overview, a grouped technical spec table, a labelled pinout diagram and a downloads list — plus an accessories carousel and a copyable getting-started snippet.

DIY — PCB Traces Background

A full-bleed animated printed-circuit background drawn entirely in SVG and CSS. Copper traces are routed in the classic 45-degree style across a solder-mask surface with ringed vias, pads and two IC footprints, while current pulses walk the nets using stroke-dasharray offsets staggered at different speeds. Controls cover trace density, four colorways, pulse speed, glow, pause and a readability scrim, with reduced-motion respected by default and a live copyable snippet panel.

DIY — Blueprint Line-Draw Effect

A self-drawing technical blueprint plate for a fictional wall-mounted shelf bracket, rendered on a CSS-gradient grid in navy and orange. Outlines ink themselves in via stroke-dashoffset, then section hatching, centre lines, extension lines, arrow-headed dimension lines, mono labels and a corner title block arrive on staggered delays. Controls cover replay, a speed multiplier, layer-by-layer step-through and visibility toggles, with IntersectionObserver triggering, hover-linked edge highlighting and a reduced-motion instant render.

DIY — Build Log

Hackaday-style chronological build log for a fictional self-balancing robot project, set on a blueprint-grid hero with a maker-workshop palette. A dashed vertical timeline holds eight dated entry cards with prose, media placeholders, and mono tags; fail entries get danger badges plus lesson-learned callouts while milestones glow green. Includes filter chips, a follow button with live count, a mono status card for hours and cost, and a sticky IntersectionObserver mini-map.

DIY — Community Forum

A maker community Q&A forum page with a blueprint-grid hero, category rail with counts, and sortable thread cards featuring working up/down voting, mono tags, reputation badges, and green accepted-answer borders. Threads expand inline to reveal answers with an accepted badge and an optimistic reply box with character counter, while an Ask a Question modal validates title, body, and tags before prepending the new thread to the feed.

DIY — Gear Assembly Loader

A blueprint-bench loading component built from procedurally generated SVG gears. A geometry function derives tooth profiles from module and tooth count so any pair meshes correctly, then five gears seat onto their pins with a spring-settle intro and turn in sync at true ratios from one animation loop. Ships three demos — a hero gear train, a compact three-gear inline spinner, and a determinate arc variant — plus tooth-count, speed, direction, exploded-spacing and brass/steel/copper finish controls.

DIY — Repair Q&A Thread

A complete community repair troubleshooting thread built as one self-contained page: a question card with device chip, reputation badges, an SVG discharge chart and a working vote control, then four ranked answers where the top one carries a green chosen-solution banner. Sort tabs reorder the list with a FLIP animation, comment sub-threads collapse under each answer, and the composer wraps your selection with a real formatting toolbar before optimistically prepending the posted answer.

DIY — Device Hub Page

A dense, utilitarian device hub page for a fictional laptop in the FIXWELL repair-manual community — breadcrumb trail, an SVG device render with model-identification tips in a mono callout, a repairability score chip, an animated stat strip, guides grouped into component accordions with difficulty badges and a dimming filter, a symptom-to-guide troubleshooting list, a sticky parts-and-tools rail with price chips and add-to-cart toasts, plus a related-models row.

DIY — Step-by-Step Project Chapters

A long-form maker project page for the fictional MAKELOG community, built around a folding camp stool made from a single board. It pairs a cover band carrying author, stats and action buttons with eight numbered chapters, each holding a CSS-drawn figure, prose, tip callouts and a per-step thumbs control. A sticky chapter rail tracks reading position with IntersectionObserver, the supplies chapter is a live checklist with mono part refs, and an I Made It gallery closes the page.

AI Ads — Dark Sales Landing (Spanish)

Una sales page oscura y premium en español para ClipForge, un curso ficticio de anuncios con IA. Reproduce la anatomía clásica de las páginas de venta de info-products: barra de urgencia con cuenta atrás, hero display con sello de pago único, franja de suscripciones rivales tachadas, bloque de price math con contadores animados, seis fichas de formatos de anuncio, registro/changelog con fechas, proof social con carrusel de testimonios, tres packs de pricing con garantía de reembolso, FAQ acordeón de 15 preguntas y barra inferior sticky con el pack estrella. HTML semántico, CSS con custom properties y vanilla JS sin dependencias.

AI Ads — Neo-Brutalist Sales Landing (Spanish)

Variante neo-brutalista de una sales page de curso de anuncios con IA, en español. Sobre la anatomía clásica (urgencia, hero, price math, formatos, FAQ y 3 packs) añade lo que la versión original no tiene: franja de partners/logos, banda de stats con contadores animados, grid de testimonios con ratings, badges de confianza y una tabla comparativa suscripción vs precio de fábrica con toggle interactivo de moneda. Estética brutal: bordes negros gruesos, sombras duras desplazadas, tipografía display enorme y colores planos sin gradientes. Vanilla JS sin dependencias.

AI Ads — Light Editorial Sales Landing (Spanish)

Tercera lectura de la misma sales page de curso de anuncios con IA, ahora en clave editorial clara: fondo papel, serif de titulares, columnas de texto y reglas horizontales tipo periódico. A la anatomía base (urgencia, hero, price math, formatos, FAQ, 3 packs) le suma los elementos de confianza que la tarea pedía explorar: contador de alumnos que incrementa en vivo desde una cifra base, changelog público con fechas y entradas desplegables, badges de confianza (pago seguro, garantía, soporte), barra de lectura con progreso y una sección de preguntas con anclas. Vanilla JS sin dependencias, accesible y responsive.

DIY — Arduino Tutorial

A blueprint-styled electronics lesson page teaching the classic Blink + Button circuit on a fictional UNO-compatible board. It pairs a components list with mono part refs and a resistor color-band graphic, an interactive SVG wiring diagram cross-highlighted with its connection table, a hand-highlighted sketch with line numbers, copy button and setup()/loop() callouts, a progress-tracked upload checklist, a troubleshooting accordion, and next-lesson cards.

DIY — Exploded View Animation

Scroll-driven exploded view of a fictional 68-key mechanical keyboard, drawn as five stacked SVG layers on a blueprint grid. A sticky viewport pulls keycaps, switches, plate, PCB and case apart as you scroll, fading in mono callouts with leader lines while a progress rail tracks explode percent. Clickable labels open spec cards with material, part count and a fun fact; Explode and Assemble buttons plus a scrub slider drive the sequence, with a reduced-motion fallback.

DIY — Project Detail

Instructables-style maker project page for a fictional Mason Jar Herb Garden with Auto-Watering: a blueprint-grid hero with author chip, views and favorites, difficulty and time badges, a materials and tools checklist with mono part numbers and live progress, five collapsible build steps with smooth JS expand, diagram figures and tip or caution callouts, a community I Made It gallery, a comment thread with likes and replies, and a sticky action bar with a localStorage-persisted favorite heart, share, and PDF toasts.

DIY — Repair Guide

An iFixit-style step-by-step repair guide page for a fictional Volta X2 headphone battery swap, drawn in a blueprint maker aesthetic. It packs a CSS-illustrated device hero with difficulty and time badges, a tools-and-parts strip, eight SVG-illustrated steps with color-matched screw callouts and danger/caution boxes, a sticky IntersectionObserver progress rail, localStorage-persisted completion checkboxes feeding a meter, and a stamped success state once every step is checked off.

DIY — Interactive Wiring Diagram

Interactive breadboard wiring diagram built as a hand-drawn SVG: a fictional NanoForge MK-01 microcontroller connects to a half breadboard holding an LED, a 220 ohm resistor, and a tactile button through six colored jumper wires. Hovering or focusing a row in the mono connections table highlights its wire with a glow while dimming the rest, a play button traces an animated signal pulse through the circuit in order, and a toggle shows or hides wire labels — all keyboard accessible.

DIY — Product Teardown

Blueprint-styled teardown report for a fictional smart speaker, the Soundbyte Puck Mini. An animated repairability dial (7/10) with per-criterion bars leads into an interactive exploded view: five layered SVG parts — grille, driver, PCB, battery, shell — separated by a range slider, with leader-line labels and click-to-open detail cards listing chips, connectors and adhesive warnings. Step-by-step chapters with tool badges and hazard callouts, a mono IC table, and a pros/cons verdict with a stamped final score complete the page.

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.

WebGL Scene Switcher

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

Shader-lit Hero

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

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.