Steal this designpagescomponentsanimationspatternsremotionmusicdatabasesskillsarchitectures3DpromptsMCPs design — all free to copy.

CodePen Embed

Lazy-loaded CodePen iframe that defers creation until the user clicks a placeholder, keeping page load fast.

Resource Card

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

Site Footer

Minimal dark-themed footer with navigation link groups, brand tagline, and MIT license attribution.

Tech Stack Icon

SVG icon pill for technology names — maps strings like "react", "tailwind", or "astro" to their brand SVG paths with consistent sizing.

Astro Project Architecture

Astro project structure with content collections, island architecture, file-based routing, and integration patterns.

Prisma Schema Architecture

Prisma schema structure with models, relations, multi-file schemas, migration workflow, and the Prisma Client generation pipeline.

ARIA Live Regions

Patterns for ARIA live regions demonstrating polite, assertive and status announcements for dynamic content updates.

React + Vite Architecture

Modern React + Vite project structure with feature-based organization, path aliases, and optimal dev/build configuration.

Bun + Hono API Starter

Lightweight API starter with Bun runtime and Hono framework — blazing fast HTTP, TypeScript-first, with middleware, routing, and zero config.

Astro + Tailwind Starter

Astro starter with Tailwind CSS integration, content collections, island architecture, and zero-JS-by-default static site generation.

React + TypeScript + Vite Starter

Production-ready React starter with Vite, TypeScript, ESM dev server, and Rollup production builds. Includes path aliases and optimal defaults.

Next.js + TypeScript Starter

Official Next.js starter with App Router, TypeScript, Tailwind CSS, ESLint, and Turbopack. Production-ready with server components out of the box.

Action Dropdown Menu

A three-dot floating menu with grouped action items, copy-to-clipboard, keyboard support, and snackbar feedback.

Code Tabs Viewer

Multi-target tabbed code viewer with a scrollable tab row, syntax-highlighted pre block, and copy-to-clipboard button.

Collection Carousel

Auto-scrolling horizontal carousel with snap points, arrow navigation, pause on hover, and a collection selector.

Filter Search Bar

Inline search input with scrollable category pill filters, active state, result counter, and keyboard shortcut hint.

Navigation Header

Sticky header with logo, desktop nav links, GitHub icon, and a slide-in mobile drawer menu with backdrop blur.

Showcase Preview Card

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

CI/CD Pipeline Architecture (GitHub Actions)

GitHub Actions pipeline structure with reusable workflows, matrix strategies, environment protection rules, and multi-stage deployment.

GraphQL Schema Architecture

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

Next.js App Router Architecture

Complete Next.js App Router project structure with nested layouts, server/client components, route handlers, and middleware patterns.

REST API — Clean Architecture (Node.js)

Node.js REST API structure following Clean Architecture with separated domain, application, infrastructure, and interface layers.

ARIA Carousel

Accessible carousel with play/pause controls, slide announcements and full keyboard navigation following ARIA carousel pattern.

ARIA Modal Pattern

Accessible modal dialog with focus trap, escape-to-close and screen reader announcements following WAI-ARIA dialog pattern.

Hero Code Space Background

Immersive 3D perspective background with floating code panels, scroll-driven depth animation, and responsive depth culling.

Event Sourcing + CQRS Architecture

Event sourcing pattern with append-only event store, aggregate roots, projections, CQRS read/write separation, and event replay for state reconstruction.

Micro-Frontend Architecture (Module Federation)

Micro-frontend pattern using Webpack Module Federation with independent host/remote applications sharing dependencies at runtime.

Nx Monorepo Architecture

Nx monorepo with project graph, affected commands, computation caching, and the 80/20 apps-to-libs split pattern.

Turborepo Monorepo Architecture

Turborepo monorepo structure with shared packages, task pipelines, remote caching, and parallel execution for multi-app projects.

T3 Stack Architecture

Full-stack T3 architecture with end-to-end type safety — Next.js App Router, tRPC, Prisma/Drizzle, NextAuth, and type-safe environment variables.

ARIA Combobox

Accessible combobox autocomplete implementing ARIA 1.2 combobox pattern with keyboard navigation and screen reader support.

ARIA Tree View

Accessible tree view component with full keyboard navigation and ARIA tree roles for hierarchical data display.

T3 Stack Starter (Next.js + tRPC + Prisma)

The T3 Stack — fully type-safe full-stack starter with Next.js, tRPC, Prisma/Drizzle, NextAuth, Tailwind, and validated environment variables.

Color Blind Modes

Color vision deficiency simulation with toggleable modes for protanopia, deuteranopia and tritanopia using SVG filters.

Arc Timeline

A timeline displayed along a curved semicircle arc. Events are positioned radially with connecting dots, creating a unique non-linear timeline visualization.

Interactive 3D Globe

Interactive 3D globe rendered on canvas with dot-matrix sphere, auto-rotation, and drag-to-rotate interaction — no Three.js required.

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.

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.

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.

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.

Clausic — Pokemon Collection

MIDI pieces across 6 Pokemon generations with piano-roll visualizer — Kanto, Johto, Hoenn, Sinnoh, Unova, Kalos with region-specific instruments and scales.

Clausic — Free Compositions

10 original MIDI compositions across diverse moods and genres — Open Road, Emerald Canopy, Hollow Peak, Harbor Dawn, Starboard Waltz, Phantom Bells, Golden Savanna, Ember Coast, Iron Summit, Marble Hall.

Analytics Page

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