Salin reka bentukhalamankomponenanimasicorakremotionmuzikdatabaseskemahiranseni bina3DpromptMCP reka bentuk ini - semuanya percuma untuk disalin.

Magnetic Buttons

CTA buttons that pull toward the cursor with GSAP and snap back with an elastic ease on leave.

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.

Clip-Path Image Reveal

Reveal photos with animated clip-path masks as each block enters the viewport using GSAP ScrollTrigger.

Footer Reveal

Fixed footer uncovered as the main content scrolls away, with Lenis-smoothed scroll and a subtle GSAP lift.

Hover Image List

Typographic project list with a floating preview image that follows the cursor using GSAP quickTo inertia.

Kinetic Headline

Split a headline into words and letters with manual spans, then stagger them in with GSAP on scroll.

Lenis Smooth Scroll

Wire Lenis inertia scrolling to GSAP ScrollTrigger with scrollerProxy so scrub and pin animations stay in sync.

Pinned Horizontal Gallery

Pin a section while vertical scroll drives a horizontal GSAP gallery strip with Lenis-smoothed scrolling.

Scrub Progress Story

Multi-step story with scroll-scrubbed progress bar and step numbers synced via GSAP ScrollTrigger and Lenis.

Stacking Cards on Scroll

Sticky cards that scale down and fade as the next card stacks on top, driven by ScrollTrigger and Lenis.

Velocity Marquee

Infinite marquee whose speed reacts to Lenis scroll velocity for a tactile editorial band.

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.

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.