Showcase

Web Pages

Nova Portfolio

A dark-themed portfolio website with smooth scroll animations, Three.js particle background, expandable project cards, and GSAP-powered transitions.

Hard

Lab View Code

Pages

404 Not Found Page

An animated 404 error page with a glitch text effect, floating illustration, and navigation links back to safety. Zero dependencies.

Easy

Lab View Code

Web Pages

Red Portfolio

A high-velocity portfolio website featuring Three.js speed field background, scroll-reactive speed lines, and motion-first design with red and blue accents for fast-paced product teams.

Hard

Lab View Code

Pages

500 Server Error Page

A clean, professional 500 internal server error page with status badge, retry button, and support contact link. Pure CSS.

Easy

Lab View Code

Web Pages

Redline Portfolio

A minimal dark portfolio with high-contrast red and black design, smooth animations, and a focus on UI systems and capabilities.

Medium

Lab View Code

UI Components

Spring Accordion

An accordion component with a spring-like open/close animation. Uses CSS grid-template-rows trick for smooth height transitions — no max-height hacks.

Medium

Lab View Code

Pages

About Page

A team about page with company story, values grid, team member cards with hover flip effect, and a timeline of milestones. Pure CSS.

Easy

Lab View Code

Components

Action Dropdown Menu

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

Medium

Lab View Code

UI Components

Action Sheet

An iOS-style action sheet that slides up from the bottom with a list of actions and a separate cancel button. No libraries.

Easy

Lab View Code

UI Components

AI Response Card

AI-generated result card with model badge, response text area, copy/thumbs-up/thumbs-down actions, and regenerate button.

Easy

Lab View Code

UI Components

AI Thinking Loader

Collection of 'Thinking…' animated loaders for AI interfaces: pulse dots, shimmer bar, orbit ring, and wave variants.

Easy

Lab View Code

UI Components

Admin Layout

A complete admin dashboard shell layout with collapsible sidebar, top navbar, and main content area. Mobile-responsive with hamburger toggle.

Medium

Lab View Code

UI Components

Inline Alert

Inline alert component with info, success, warning, and error variants. Supports icon, title, description, and dismiss button.

Easy

Lab View Code

UI Components

Advanced Filters

An advanced filter panel for data tables with multiple filter types — text search, multi-select, date range, number range, and boolean toggles. Supports saving filter presets.

Medium

Lab View Code

UI Components

Alert Dialog

Confirmation modal with destructive/cancel actions, focus trap, backdrop click to close, and keyboard Escape support.

Medium

Lab View Code

UI Components

Alert Banner

Contextual alert banners in four semantic variants — info, success, warning, and error — with optional dismiss button and leading icon.

Easy

Lab View Code

Patterns

Animate Presence

Elements that animate in AND out of the DOM with smooth enter/exit transitions. Add and remove list items with fade+slide animations that play before DOM removal.

Medium

Lab View Code

UI Components

Animated Beam

SVG animated beam/line connecting two elements with a flowing dash animation, perfect for flow diagrams and connection visualizations.

Medium

Lab View Code

UI Components

Anchor Navigation

Sticky in-page navigation that highlights the active section as you scroll, with smooth scroll-to-section on click.

Medium

Lab View Code

UI Components

Animated Grid Pattern

An SVG grid pattern with randomly highlighted cells that pulse and glow, perfect for dark hero sections and backgrounds.

Easy

Lab View Code

Pages

Analytics Page

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

Hard

Lab View Code

UI Components

Animated Tab Bar

A tab bar with a smooth sliding active indicator. Clicking tabs animates the indicator to the new position using CSS transitions driven by JS measurements.

Easy

Lab View Code

UI Components

Animated Shiny Text

Text with a shining shimmer highlight that sweeps across periodically using an animated linear gradient.

Easy

Lab View Code

UI Components

Animated List

A list component where items animate in with staggered entrance effects — slide and fade from alternating directions for a dynamic reveal.

Easy

Lab View Code

Architectures

Astro Project Architecture

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

Easy

Lab View Code

UI Components

API Status Board

Service status dashboard with operational/degraded/outage indicators, incident timeline, and uptime percentage. Vanilla JS.

Medium

Lab View Code

UI Components

Animated Gradient Text

Text with animated gradient colors flowing through it using background-clip text and CSS keyframe animation.

Easy

Lab View Code

Architectures

CI/CD Pipeline Architecture (GitHub Actions)

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

Medium

Lab View Code

Architectures

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.

Hard

Lab View Code

Architectures

Micro-Frontend Architecture (Module Federation)

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

Hard

Lab View Code

Architectures

GraphQL Schema Architecture

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

Medium

Lab View Code

Architectures

Nx Monorepo Architecture

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

Hard

Lab View Code

Architectures

Turborepo Monorepo Architecture

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

Hard

Lab View Code

UI Components

Arc Timeline

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

Hard

Lab View Code

Architectures

Next.js App Router Architecture

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

Medium

Lab View Code

Architectures

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.

Hard

Lab View Code

Architectures

REST API — Clean Architecture (Node.js)

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

Medium

Lab View Code

UI Components

ARIA Carousel

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

Medium

Lab View Code

UI Components

ARIA Combobox

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

Hard

Lab View Code

Architectures

Prisma Schema Architecture

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

Easy

Lab View Code

UI Components

ARIA Modal Pattern

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

Medium

Lab View Code

UI Components

ARIA Tabs Pattern

Fully accessible tab interface implementing WAI-ARIA tabs pattern with keyboard navigation and proper role attributes.

Medium

Lab View Code

UI Components

ARIA Live Regions

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

Easy

Lab View Code

UI Components

ARIA Tree View

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

Hard

Lab View Code

UI Components

Aspect Ratio

A container component that maintains a specific aspect ratio regardless of content or viewport size. Uses the modern CSS aspect-ratio property with a padding-bottom fallback.

Easy

Lab View Code

UI Components

Attachment List

File attachment list with type icons, file size, download link, remove button, and upload drop zone. CSS-first.

Easy

Lab View Code

Architectures

React + Vite Architecture

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

Easy

Lab View Code

Architectures

PostgreSQL Schema Patterns

PostgreSQL schema design patterns including multi-schema organization, migration workflows, indexing strategies, and schema-as-code with Drizzle/Prisma.

Medium

Lab View Code

UI Components

Aurora Text

Text with aurora borealis colors (green, purple, blue) flowing through it with animated gradient layers and optional blur glow.

Easy

Lab View Code

UI Components

Availability Calendar

A Calendly-style availability picker for scheduling meetings. Shows available time slots across a monthly calendar with time zone support and booking confirmation flow.

Hard

Lab View Code

UI Components

Avatar Group

Stacked overlapping avatars with a "+N more" overflow indicator — supports image avatars, initials fallback, size variants, and name tooltip on hover.

Easy

Lab View Code

UI Components

Autocomplete

Text input with a filtered dropdown suggestion list. Keyboard navigation (↑↓ Enter Escape), highlight match, clear button.

Medium

Lab View Code

UI Components

Badge

Compact status badges and tags in multiple color variants, sizes, and styles — solid, outline, and with dot or remove button.

Easy

Lab View Code

UI Components

Announcement Banner

Full-width dismissable announcement banner with icon, message, optional CTA link, and localStorage persistence. No libraries.

Easy

Lab View Code

UI Components

Audio Player

A stylish audio player with playlist support, album art display, and smooth progress tracking.

Medium

Lab View Code

Pages

Blog Listing Page

A blog index page with featured post hero, category filter tabs, search bar, post grid cards, and pagination. No external libraries.

Medium

Lab View Code

UI Components

Back to Top

Floating back-to-top button that appears after scrolling down, with smooth scroll animation and fade in/out.

Easy

Lab View Code

UI Components

Bento Grid

Responsive bento-style grid layout with varied cell sizes, some spanning multiple columns or rows, for modern dashboard and showcase designs.

Medium

Lab View Code

Boilerplates

Next.js Admin Dashboard Starter

Next.js admin dashboard with App Router, shadcn/ui, server components, route groups for auth/dashboard layouts, and Vercel-ready deployment.

Medium

Lab View Code

Pages

Blog Post Page

A full article page with sticky table-of-contents sidebar, reading progress bar, estimated read time, author card, and related posts. No libraries.

Medium

Lab View Code

Patterns

Blur Fade

Elements that fade in from blurred to sharp as they enter the viewport on scroll, creating a smooth reveal effect.

Easy

Lab View Code

Boilerplates

Next.js + Prisma + PostgreSQL Starter

Full-stack Next.js starter with Prisma ORM, PostgreSQL database, typed API routes, and migration workflow. Deploy-ready with Vercel Postgres.

Medium

Lab View Code

Boilerplates

Bun + Hono API Starter

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

Easy

Lab View Code

Boilerplates

React Admin Dashboard Starter

Admin dashboard boilerplate with React, shadcn/ui, data tables, charts, sidebar navigation, and dark/light mode. Multiple framework options compared.

Medium

Lab View Code

Boilerplates

Astro + Tailwind Starter

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

Easy

Lab View Code

Boilerplates

PWA Starter (Vite + Workbox)

Progressive Web App starter with Vite PWA plugin, Workbox service worker, web manifest, offline support, and install prompts.

Medium

Lab View Code

Boilerplates

React + TypeScript + Vite Starter

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

Easy

Lab View Code

Boilerplates

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.

Easy

Lab View Code

Boilerplates

TWA — Trusted Web Activity (PWA to Play Store)

Wrap any PWA as a native Android app using Trusted Web Activities and Bubblewrap CLI. Publish to Google Play Store without writing Java/Kotlin.

Medium

Lab View Code

Boilerplates

Vue 3 + Vite Starter

Official Vue 3 starter with Vite, TypeScript, Vue Router, Pinia state management, and Composition API. Interactive CLI with optional features.

Easy

Lab View Code

UI Components

Border Beam

A card with an animated beam of light that travels continuously around its border using conic-gradient and CSS keyframes.

Easy

Lab View Code

UI Components

Bottom Navigation

Mobile-style bottom navigation bar with icon + label, active state, badge counter, and slide-up indicator.

Easy

Lab View Code

UI Components

Bottom Sheet

A slide-up bottom sheet modal with drag-to-dismiss, backdrop, and two variants — an info sheet and an actions sheet. No libraries.

Medium

Lab View Code

Patterns

Box Reveal

Content revealed by a colored box that slides across then exits, creating a dramatic wipe-reveal effect.

Medium

Lab View Code

UI Components

Breadcrumb

Navigation breadcrumb trail with separator variants — slash, chevron, and dot — plus a collapsible version that truncates middle items.

Easy

Lab View Code

Patterns

Bulk Actions

Multi-select grid pattern with a sticky bulk action bar for archive, tag, and delete flows.

Medium

Lab View Code

Boilerplates

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.

Hard

Lab View Code

UI Components

Button Group

Group of buttons joined together in a segmented control style with shared borders, active state toggling, and rounded end caps.

Easy

Lab View Code

UI Components

Breadcrumb Nav

Accessible breadcrumb navigation with structured data, truncation for deep paths, and home icon. Pure CSS + minimal JS.

Easy

Lab View Code

UI Components

Calendar View

A full-featured monthly calendar with event creation, editing, and deletion. Supports multiple event categories and drag-to-create on day cells.

Hard

Lab View Code

UI Components

Calculator

A clean, functional calculator with support for basic arithmetic operations and keyboard support.

Medium

Lab View Code

Web Animations

Card Carousel

Auto-transitioning stacked image cards with GSAP-powered depth, tilt, and a timing meter.

Medium

Lab View Code

Pages

Changelog Page

A version-based changelog page with timeline, version badges, categorized changes (added, changed, fixed, removed), and filter by type. No libraries.

Medium

Lab View Code

UI Components

Carousel

Content carousel with auto-play, dot indicators, previous/next arrows, touch swipe support, and a multi-card visible variant.

Medium

Lab View Code

UI Components

Bar Chart

A vertical and horizontal bar chart built with SVG. Features animated bars, value labels on hover, grouped/stacked modes, and a responsive layout that redraws on resize.

Medium

Lab View Code

UI Components

Certificate of Completion

Award or completion certificate with decorative border, seal, signature line, and course/recipient details. Pure CSS.

Easy

Lab View Code

UI Components

Area Chart

A smooth area chart with gradient fill under the curve, multi-series stacking, animated draw-in, and interactive crosshair tooltip. Built with vanilla JS and SVG.

Medium

Lab View Code

UI Components

Geographic Distribution Chart

A geographic distribution chart with a country map and horizontal region bars. Features configurable regions, animated bars, color-coded map areas, and a responsive layout for dashboard analytics.

Hard

Lab View Code

UI Components

Line Chart

A fully responsive SVG line chart with animated paths, multi-series support, smooth bezier curves, grid lines, axis labels, and interactive tooltips. Built with vanilla JS and inline SVG — no dependencies.

Medium

Lab View Code

UI Components

Donut Chart — Product Categories

A donut chart showing product category distribution with icon header, colored segments, animated arcs, and a clean legend. Ideal for shipping, inventory, or sales dashboards.

Easy

Lab View Code

UI Components

Funnel Chart

A conversion funnel chart that visualizes step-by-step drop-off rates. Features animated trapezoid stages, percentage labels, drop-off callouts, and a horizontal comparison mode.

Medium

Lab View Code

UI Components

Calendar Heatmap

A GitHub-style contribution calendar heatmap. Renders a full year of daily data cells with color intensity levels, week/month labels, and an interactive tooltip showing date and value on hover.

Hard

Lab View Code

UI Components

Sankey Chart

A complex flow diagram (Sankey) built with D3.js. Features splitting and merging flows, automatic node positioning, and interactive link highlighting. Perfect for visualizing income statements or resource allocations.

Hard

Lab View Code

UI Components

Stacked Bar Chart

A stacked bar chart comparing year-over-year data by month. Features animated bars, legend, responsive layout, and configurable datasets with a clean corporate dashboard aesthetic.

Medium

Lab View Code

UI Components

Scatter Plot

An interactive scatter plot with hover labels, optional bubble sizing, color-coded groups, animated point entrance, zoom-to-region, and regression line overlay.

Medium

Lab View Code

UI Components

Radar Chart

A multi-axis spider/radar chart rendered in SVG. Supports multiple data series, a shaded polygon overlay, axis labels, concentric grid rings, and hover tooltips per axis.

Medium

Lab View Code

UI Components

Pie / Donut Chart

An animated SVG pie and donut chart with legend, interactive slice highlighting on hover, and smooth arc transitions. Toggle between pie and donut mode with a button click.

Easy

Lab View Code

UI Components

Treemap

A proportional treemap that visualizes hierarchical data as nested rectangles. Implements a squarified layout algorithm, color-coded groups, hover tooltips, and animated entrance.

Hard

Lab View Code

UI Components

Chat Bubble

Chat message bubbles with sender/receiver variants, avatar, timestamp, status indicators (sent/delivered/read), and grouping.

Easy

Lab View Code

UI Components

AI Chat Interface

AI chat UI with message bubbles, streaming text simulation, typing indicator, and auto-scroll. No libraries.

Medium

Lab View Code

UI Components

Checkbox Group

Styled checkbox inputs with label, indeterminate state, checkbox card variant, and a grouped fieldset with select-all functionality.

Easy

Lab View Code

UI Components

Chat Widget

Floating chat widget with bubble toggle, message thread, typing indicator, emoji picker, and auto-scroll. No dependencies.

Hard

Lab View Code

Pages

Checkout Page

A multi-step checkout flow: cart review → shipping → payment → confirmation. Client-side validation and step indicator. No libraries.

Hard

Lab View Code

UI Components

Clipboard Copy

Copy-to-clipboard button with success feedback animation — icon changes to checkmark, reverts after 2s. Works on any text.

Easy

Lab View Code

UI Components

Code Block

Syntax-highlighted code block with copy button, language badge, line numbers, and line-highlight support. No libraries.

Easy

Lab View Code

UI Components

Citation Tooltip

Inline citation markers with hover tooltip showing source title, URL, and snippet. Used in AI-generated content. No libraries.

Medium

Lab View Code

Web Pages

Ciber Portfolio

A cyberpunk-inspired portfolio website featuring neon city grid background with Three.js, scroll-velocity reactive effects, and immersive cyberpunk aesthetics with neon colors and motion systems.

Hard

Lab View Code

UI Components

Code Comparison

Side-by-side code diff viewer with syntax-highlighted added and removed lines. Green for additions, red for removals, with line numbers and a dark editor theme.

Medium

Lab View Code

Components

CodePen Embed

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

Easy

Lab View Code

Components

Code Tabs Viewer

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

Medium

Lab View Code

UI Components

Collapsible

A smooth expanding/collapsing content section with animated height transitions. Uses the CSS grid-template-rows trick for true 0-to-auto height animation.

Easy

Lab View Code

Web Pages

CoffeeService — Coffee & Bakery Studio

A warm, light-themed coffee and bakery studio website featuring Three.js bean field background, smooth scroll animations with Lenis, GSAP transitions, e-commerce cart functionality, and artisan-focused content.

Medium

Lab View Code

Components

Collection Carousel

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

Medium

Lab View Code

UI Components

Cognitive Load Reducer

Simplified mode that reduces animations, decorative elements, color complexity and information density for users with cognitive disabilities.

Medium

Lab View Code

UI Components

Color Contrast Checker

Real-time WCAG contrast ratio checker that evaluates color pairs against AA and AAA standards with live preview.

Medium

Lab View Code

UI Components

Interactive Comment Box

A clean, expandable comment input component with user avatar, character limits, and smooth focus states.

Easy

Lab View Code

UI Components

Command Palette (⌘K)

A keyboard-driven command palette modal triggered by ⌘K / Ctrl+K, with fuzzy search, keyboard navigation, and smooth open/close animation.

Medium

Lab View Code

UI Components

Color Picker

HSL color picker with canvas gradient, hue slider, hex/rgb output, and opacity slider.

Hard

Lab View Code

UI Components

Combobox

Searchable dropdown select with real-time filtering, keyboard navigation (arrow keys, enter, escape), and accessible ARIA attributes.

Medium

Lab View Code

UI Components

Accessible Color Token System

Design token system with semantic color variables that guarantee WCAG contrast compliance across all token combinations.

Medium

Lab View Code

UI Components

Comment Thread

Nested comment thread with replies, likes, collapse/expand, relative timestamps, and inline reply form. No dependencies.

Medium

Lab View Code

UI Components

Cool Mode

Fun particle burst of emojis and shapes that explode from every click point with physics-based motion and fadeout.

Easy

Lab View Code

Patterns

Copy to Clipboard

Multi-target copy pattern for code, URLs, and form fields with success and fallback feedback.

Easy

Lab View Code

UI Components

Context Menu

Right-click context menu with nested sub-menus, keyboard navigation, icons, dividers, and disabled items.

Medium

Lab View Code

UI Components

Confetti Explosion

Canvas-based confetti explosion triggered by button click with colorful particles, gravity, rotation, and fade-out effects.

Medium

Lab View Code

UI Components

Countdown Timer

A customizable countdown timer for events and deadlines. Features a sleek circular progress indicator and automatic cleanup.

Easy

Lab View Code

Pages

Contact Page

A contact page with a validated multi-field form, map placeholder, office address cards, and social links. No libraries.

Easy

Lab View Code

Patterns

CRUD Table

Full CRUD table pattern with create, inline edit, delete actions, sorting, pagination, and form validation.

Hard

Lab View Code

UI Components

Custom Select

Fully custom select dropdown with search/filter, option groups, multi-select with tags, and clearable single selection.

Medium

Lab View Code

Patterns

Cursor Trail

Trail of dots that follow the cursor with decreasing opacity and size. Each point follows the previous with lerp interpolation, creating a smooth trailing effect.

Medium

Lab View Code

UI Components

Dashboard Widget

A draggable, resizable dashboard widget system. Widgets can be minimized, refreshed, and rearranged to customize the dashboard layout.

Medium

Lab View Code

Pages

Dashboard Page

A complete admin dashboard with KPI cards, line/bar/donut charts, recent activity feed, and data table. Pure vanilla JS and CSS — no libraries.

Hard

Lab View Code

UI Components

Currency Converter

A practical currency conversion tool with support for major global currencies and live exchange rate fetching.

Medium

Lab View Code

UI Components

Accessible Dark/Light Toggle

Dark and light mode toggle that maintains WCAG AA contrast ratio in both themes with smooth transition.

Medium

Lab View Code

UI Components

Data List

A feature-rich data list component with search, column sorting, bulk selection, and inline status management. Designed for SaaS user/content management views.

Medium

Lab View Code

UI Components

Data Table

Feature-rich data table with column sorting, row selection via checkboxes, search filter, column visibility toggle, and pagination.

Hard

Lab View Code

UI Components

Date Picker

Calendar date picker with month navigation, range selection, disabled dates, and an input trigger — keyboard accessible.

Hard

Lab View Code

UI Components

Date Range Picker

A dual-calendar date range picker with hover preview, preset ranges, and keyboard navigation. Used for booking, analytics date filters, and reporting.

Hard

Lab View Code

Web Animations

Diagonal Wipe Cards

Auto-advancing cards where each image wipes across a diagonal mask using GSAP clip-path animation.

Medium

Lab View Code

Patterns

Debounced Search

Search input pattern with debounce timing, loading state, and stale-request result protection.

Easy

Lab View Code

UI Components

Diff Slider

Before/after image comparison slider — drag the handle to reveal the difference. Touch support included.

Medium

Lab View Code

UI Components

Code Diff Viewer

Side-by-side code diff viewer with added/removed line highlighting, line numbers, and unified/split toggle. No libraries.

Medium

Lab View Code

UI Components

Digital Clock

A sleek, modern digital clock with date and seconds display. Uses CSS glassmorphism and real-time updates.

Easy

Lab View Code

UI Components

Directions Card

Step-by-step directions card with numbered steps, turn icons, distance/time per step, and total journey summary. Pure CSS.

Easy

Lab View Code

UI Components

Distance Badge

Distance indicator badges for maps and listings — km/mi, walking/driving/transit icons, and ETA variants. Pure CSS.

Easy

Lab View Code

UI Components

Divider Label

Horizontal divider line with centered or left-aligned text label — used for section separators like "or continue with".

Easy

Lab View Code

UI Components

macOS Dock

A macOS-style dock with smooth icon magnification on hover. Icons scale up based on proximity to the cursor, creating a fluid fisheye effect.

Medium

Lab View Code

UI Components

Drag & Drop List

A drag-and-drop sortable list using the native HTML5 Drag and Drop API. Items animate to their new positions with smooth CSS transitions. Zero dependencies.

Medium

Lab View Code

UI Components

Dot Pattern

A repeating dot pattern background using radial-gradient, fully customizable via CSS custom properties for spacing, radius, and color.

Easy

Lab View Code

Patterns

CSS Dot Loader

A smooth three-dot loading animation built entirely with CSS — no JavaScript, no SVG.

Easy

Lab View Code

UI Components

Document Preview Card

PDF/document preview card with page thumbnail placeholder, file metadata, download and open buttons. Pure CSS.

Easy

Lab View Code

UI Components

Dropdown Menu

Accessible dropdown menu with keyboard navigation, icons, dividers, destructive item variant, and a user account menu demo.

Medium

Lab View Code

UI Components

Dyslexia Friendly Mode

Dyslexia-friendly reading mode with OpenDyslexic font, increased spacing, adjusted line height and muted background colors.

Easy

Lab View Code

Patterns

Drawer Slide Effect

Slide-in/out drawer panel from any edge — smooth gesture-friendly panel transition for menus and sheets.

Easy

Lab View Code

Patterns

Modal Enter Effect

Fade and scale enter/exit for modals and overlays — smooth open/close transition.

Easy

Lab View Code

UI Components

Add to Cart Effect

Animated add-to-cart feedback with badge bump and flying item — satisfying shopping interaction.

Easy

Lab View Code

Patterns

Nav Underline Effect

Animated underline on active nav link — smooth indicator for tabs and breadcrumbs.

Easy

Lab View Code

Patterns

Button Press Effect

Scale and shadow on press with optional success checkmark — satisfying click feedback for buttons and controls.

Easy

Lab View Code

Patterns

Skeleton Loading Effect

Animated skeleton placeholder with shimmer pulse — smooth loading state for cards and content blocks.

Easy

Lab View Code

UI Components

Newsletter Email Template

Newsletter email with header, featured article card, secondary article list, and footer unsubscribe link. Table-based layout.

Medium

Lab View Code

UI Components

Invoice / Receipt Email

Invoice email with line-item table, subtotal/tax/total breakdown, and payment details. Email-safe table layout.

Medium

Lab View Code

UI Components

Team Invite Email

Team invitation email with sender avatar, workspace name, role badge, and accept/decline CTA buttons. Table-based HTML.

Easy

Lab View Code

UI Components

Password Reset Email

Clean password reset email with expiry notice, security warning, and action button. Table-based, email-safe HTML.

Easy

Lab View Code

UI Components

Email Verification / OTP Code

Email verification template with large OTP code display, expiry notice, and security footer. Minimal and focused design.

Easy

Lab View Code

UI Components

Order Confirmation Email

E-commerce order confirmation email with order number, product summary, shipping address, and delivery estimate. Table-based.

Medium

Lab View Code

UI Components

Welcome Email Template

Table-based welcome/onboarding email with hero, feature highlights, and CTA button. Email-safe HTML with inline styles.

Easy

Lab View Code

UI Components

Employee Schedule

A detailed employee scheduling view with week/day views, shift assignment, conflict detection, and total hours calculation per employee.

Hard

Lab View Code

UI Components

Empty State

Illustrated empty state placeholders for no data, no results, no notifications, and no files found — with optional action button.

Easy

Lab View Code

UI Components

File Tree

Collapsible file explorer tree with folder/file icons, expand/collapse all, active file highlight, and right-click context menu.

Medium

Lab View Code

Pages

File Manager Page

A file manager / document browser page with folder tree sidebar, file grid/list views, breadcrumb navigation, upload area, and context menu. No libraries.

Hard

Lab View Code

Pages

FAQ Page

A FAQ / help center page with categorized accordion sections, search with instant filtering, and a contact support CTA. No external libraries.

Easy

Lab View Code

Components

Filter Search Bar

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

Medium

Lab View Code

UI Components

Flickering Grid

A canvas-based animated grid where cells randomly flicker and pulse their opacity, creating a living, breathing background texture.

Medium

Lab View Code

UI Components

File Upload Dropzone

Drag-and-drop file upload zone with file list, type/size validation, progress simulation, and remove button.

Medium

Lab View Code

UI Components

FAB Speed Dial

Floating action button that expands into a speed dial with labeled sub-actions on click, with backdrop and close-on-outside-click.

Medium

Lab View Code

UI Components

Flip Card 3D

A CSS 3D flip card that reveals a back face on hover. Built with CSS perspective, transform-style preserve-3d, and backface-visibility. Zero JavaScript.

Easy

Lab View Code

UI Components

Floating Action Button

A FAB that expands into a speed-dial of sub-actions on click. Supports icon rotation, backdrop, and individual sub-action labels. No libraries.

Easy

Lab View Code

UI Components

Flip Text

Words that flip and rotate vertically to cycle through different words with smooth CSS perspective transitions.

Easy

Lab View Code

UI Components

Follow/Subscribe Toggle

A sleek, state-aware button for follow or subscribe actions, featuring smooth label transitions and color shifting.

Easy

Lab View Code

UI Components

Custom Focus Ring

Custom visible focus ring system using CSS :focus-visible — high-contrast, brand-colored, and offset variants. WCAG compliant.

Easy

Lab View Code

UI Components

Font Size Control

Accessible font size adjuster with decrease/reset/increase buttons, live preview, and localStorage persistence. Vanilla JS.

Easy

Lab View Code

UI Components

Forgot Password

Forgot password flow with email input, animated success state, resend countdown timer, and back-to-login link. No dependencies.

Easy

Lab View Code

UI Components

Footer Links

Multi-column site footer with logo, link groups, newsletter subscribe input, social icons, and legal row. Pure CSS responsive layout.

Easy

Lab View Code

Web Pages

Game Portfolio

A retro GameBoy-inspired portfolio website featuring a live 3D GameBoy model rendered in Three.js with animated pixel-accurate screen, game-themed UI elements, and nostalgic design.

Hard

Lab View Code

UI Components

Focus Management

Focus management patterns for single-page applications handling route changes, dynamic content insertion and focus restoration.

Medium

Lab View Code

Patterns

Gesture Animations

Collection of gesture-based animations including hover scale, tap shrink, drag with constraints, and focus glow. Each gesture type demonstrates a different interaction pattern.

Medium

Lab View Code

UI Components

Gauge Meter

A half-circle SVG gauge meter with animated needle, color zones (green/yellow/red), tick marks, a value label, and configurable min/max range. Ideal for dashboards showing a single KPI.

Medium

Lab View Code

UI Components

Gesture Carousel

A touch-enabled carousel with momentum, snap-to-slide, and dot indicators. Swipe with velocity to advance multiple slides. No libraries.

Hard

Lab View Code

UI Components

Grid Pattern

An SVG-based grid pattern background with customizable size, color, and stroke width via CSS custom properties. Perfect for dark-themed hero sections and landing pages.

Easy

Lab View Code

UI Components

Glassmorphism Card

A frosted-glass card effect using CSS backdrop-filter, subtle borders, and layered transparency.

Easy

Lab View Code

Components

Hero Code Space Background

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

Hard

Lab View Code

Web Pages

Hero CTA Section

A full-width hero section with gradient headline, eyebrow badge, two CTA buttons, and radial glow background. Pure CSS — no JS required.

Easy

Lab View Code

UI Components

Interactive 3D Globe

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

Hard

Lab View Code

UI Components

Hero Video Dialog

A click-to-play video modal for hero sections. Displays a thumbnail with a centered play button that opens a fullscreen video overlay with smooth transitions.

Easy

Lab View Code

Web Pages

Hero Parallax

A multi-layer parallax hero section driven by scroll position, creating depth through independent layer speeds.

Medium

Lab View Code

UI Components

Hamburger Menu

An animated hamburger icon that morphs to an X and opens a fullscreen navigation overlay with staggered link reveals. No libraries.

Easy

Lab View Code

UI Components

High Contrast Toggle

Accessibility toolbar with high contrast mode, dyslexia-friendly font, and large text toggle. Persists to localStorage.

Medium

Lab View Code

UI Components

Hyper Text

Text that scrambles through random characters before settling on the final text, creating a decode or matrix-style reveal effect. Triggers on hover.

Easy

Lab View Code

UI Components

Hover Card

A rich popover card that appears on hover over a trigger — shows user profile, link preview, or product info with a small entry delay to prevent flicker.

Easy

Lab View Code

UI Components

Icon Cloud

A 3D tag cloud of technology icons orbiting in space using Fibonacci sphere positioning and smooth rotation animation.

Medium

Lab View Code

UI Components

Image Lightbox

Click-to-open image lightbox with overlay, zoom, keyboard navigation (←→ Escape), and swipe support on mobile.

Medium

Lab View Code

UI Components

Image Comparison Slider

A smooth, interactive before-and-after image comparison slider. Perfect for showcasing edits, redesigns, or transformations.

Medium

Lab View Code

UI Components

Infinite Marquee / Ticker

A smooth infinite scrolling marquee/ticker built with CSS animation. Content is duplicated to create a seamless loop. Pauses on hover, respects reduced-motion.

Easy

Lab View Code

Patterns

Infinite Scroll

Infinite list loading pattern driven by an IntersectionObserver sentinel and batch rendering.

Medium

Lab View Code

UI Components

Input Group

Input fields with addon elements — icon prefix, button suffix, or text prepend like "$" — all with seamless shared borders.

Easy

Lab View Code

UI Components

Indicator

DaisyUI-style badge indicator — overlays a colored dot/badge on any element (button, avatar, card) for unread counts or status.

Easy

Lab View Code

UI Components

JSON Viewer

Collapsible JSON tree viewer with syntax coloring, expand/collapse nodes, copy path, and search highlighting. No libraries.

Medium

Lab View Code

UI Components

Input Variants

A complete set of text input styles — default, with prefix/suffix icons, floating label, input group with helper text, and validation states.

Easy

Lab View Code

UI Components

Interactive Hover Button

A button with creative multi-layered hover effects including background fill, text color inversion, and border animation.

Easy

Lab View Code

UI Components

Interactive Grid Pattern

A canvas-based grid pattern that reacts to mouse movement, illuminating cells near the cursor with distance-based brightness falloff.

Medium

Lab View Code

UI Components

Image Gallery Grid

Masonry photo gallery with CSS columns, hover zoom, and a lightbox with keyboard navigation and swipe support.

Medium

Lab View Code

UI Components

Kanban Board

A full Kanban board with drag-and-drop cards between columns, inline card creation, priority labels, and assignee avatars.

Hard

Lab View Code

UI Components

Keyboard Display

Keyboard shortcut display component with individual key caps — single keys, combinations (⌘K), and a shortcut list table.

Easy

Lab View Code

Pages

Invoice Page

An invoice history page with list of invoices, status filters, detail modal, and downloadable invoice view. No external libraries.

Medium

Lab View Code

UI Components

Keyboard Shortcut Sheet

Keyboard shortcut cheat sheet with grouped categories, KBD key styling, and searchable filter. Pure CSS and minimal JS.

Easy

Lab View Code

UI Components

Keyboard Navigable Menu

Menu component fully navigable by keyboard using arrow keys, Home, End and type-ahead search following WAI-ARIA menu pattern.

Medium

Lab View Code

UI Components

Keyboard Shortcuts Overlay

GitHub-style keyboard shortcuts cheat sheet overlay triggered by pressing the question mark key with categorized shortcut listings.

Easy

Lab View Code

Pages

Launch Hero Page

A clean product landing hero with nav, CTA buttons, and a three-point feature grid.

Easy

Lab View Code

UI Components

KPI Card

A compact Key Performance Indicator card with animated counter, trend arrow (up/down), sparkline background, period selector, and color-coded status. Perfect for dashboards and analytics pages.

Easy

Lab View Code

Patterns

Layout Animation

Elements smoothly animate their layout position when reordered or resized using the FLIP (First, Last, Invert, Play) technique. Shuffle and filter grid items with fluid transitions.

Medium

Lab View Code

Patterns

Lazy Load

Image lazy-loading pattern with placeholders and progressive reveal using IntersectionObserver.

Easy

Lab View Code

UI Components

Leaderboard

A ranked leaderboard component with score bars, animated rank changes, medal icons for top 3, avatar initials, and a live-update simulation mode. Ideal for gamification and analytics dashboards.

Easy

Lab View Code

UI Components

Lens Effect

Magnifying glass lens effect that follows the cursor, showing a zoomed circular area over content with smooth tracking and customizable zoom level.

Medium

Lab View Code

UI Components

Level Layout

Horizontal alignment layout that evenly spaces items or pushes them to edges with left, center, and right slots, stacking responsively on mobile.

Easy

Lab View Code

Web Animations

Bokeh Hero Base

Ambient glowing field inspired by cinematic landing pages.

Easy

Lab View Code

Web Animations

Lenis + GSAP Scroll Story

Smooth-scrolling narrative sections with timeline triggers.

Medium

Lab View Code

Web Animations

GSAP Hero Intro

Headline and CTA entrance timeline with ambient motion layers.

Medium

Lab View Code

Web Animations

Scroll Trigger Story

Section-by-section storytelling using viewport-triggered reveals.

Medium

Lab View Code

Web Animations

Horizontal Pinned Gallery

Pinned section with horizontal gallery movement tied to scroll progress.

Medium

Lab View Code

Patterns

Mouse Light + Magnetic Button

Cursor spotlight and magnetic button hover interactions.

Easy

Lab View Code

UI Components

Roving Tabindex

Roving tabindex pattern implementation for toolbar and list components enabling single Tab stop with arrow key navigation.

Medium

Lab View Code

Web Animations

Card Stack Choreography

Looping card stack transforms for staged reveal sequences.

Medium

Lab View Code

Web Animations

Split Screen Reveal

Two-panel layout where right scene reveals progressively on scroll.

Medium

Lab View Code

Web Animations

Three.js Particle Tunnel

Depth-heavy cinematic scene with post-processing glow.

Hard

Lab View Code

Web Animations

Three.js Distorted Plane Shader

Fullscreen shader background with procedural distortion and glow.

Hard

Lab View Code

Web Animations

Three.js Orbit + Bloom

Orbiting object field rendered with bloom compositing.

Hard

Lab View Code

Web Animations

Kinetic Typography

Word-level animated text entrance pattern for energetic headlines.

Easy

Lab View Code

Web Animations

Three.js Product Spotlight

Product spotlight with scroll-driven camera rail movement.

Hard

Lab View Code

Web Animations

Three.js Scroll Camera Narrative

Narrative scene where scroll progress drives camera chapter rails.

Hard

Lab View Code

Web Animations

Three.js Morphing Geometry

Point cloud morph transition between cubic and spherical volumes.

Hard

Lab View Code

Patterns

View Transition Card Detail

Shared-element transition from card grid to detail page.

Medium

Lab View Code

Patterns

View Transition Grid Filter Identity

Filterable grid that preserves card identity while items reorder.

Medium

Lab View Code

Patterns

View Transition Theme Mode

Theme/mode switch demo with shared title and CTA continuity.

Medium

Lab View Code

Patterns

View Transition Hybrid CSS + JS

Shared-element state swaps coordinated with JavaScript panel choreography.

Hard

Lab View Code

Pages

Concept A - High-Energy Game Launch

Original high-energy launch concept with arena-style motion and feature blocks.

Medium

Lab View Code

Patterns

View Transition App Shell

Primary and nested navigation transitions in a stable shell layout.

Medium

Lab View Code

Pages

Concept C - Creative Studio Portfolio

Original creative studio concept using collage cards and editorial hierarchy.

Medium

Lab View Code

Pages

Concept D - Music Release Microsite

Original release-night microsite concept with disc motif and animated equalizer bars.

Medium

Lab View Code

Pages

Concept B - Premium Tech Reveal

Original premium product reveal concept with restrained motion and spec staging.

Medium

Lab View Code

Web Animations

Three.js Instanced Mesh Field

High-count object field using GPU instancing for performance.

Hard

Lab View Code

Pages

Concept E - Futuristic Dashboard Intro

Original futuristic dashboard intro with telemetry modules and animated counters.

Medium

Lab View Code

Patterns

Backlog - Webcam Reactive Experiment

Webcam brightness reactive overlay experiment with live camera input.

Hard

Lab View Code

Patterns

Backlog - MIDI Audio Reactive Lab

MIDI plus microphone-reactive visual bars experiment.

Hard

Lab View Code

Patterns

Backlog - WebGPU Branch Experiment

WebGPU capability probe with fallback branch visualization.

Hard

Lab View Code

Patterns

Backlog - Multiplayer Shared Cursor

Shared cursor presence experiment across multiple tabs.

Hard

Lab View Code

Patterns

Backlog - Shader Playground UI

Interactive parameter editor for shader-like visual tuning.

Hard

Lab View Code

Web Animations

CSS-only Typewriter

A typewriter animation using only CSS steps() timing function — no JavaScript, no libraries.

Easy

Lab View Code

Web Animations

SVG Path Drawing

SVG paths that draw themselves on scroll using stroke-dashoffset animated by GSAP ScrollTrigger.

Medium

Lab View Code

Web Animations

Smooth Number Counter

Stats that count up when they scroll into view. Powered by GSAP ScrollTrigger with eased number interpolation.

Easy

Lab View Code

Patterns

Interaction Systems Lab

Phase 6 integration lab for reusable cursor, spotlight, orchestrator, debugger, and sound-reactive hooks.

Hard

Lab View Code

Web Animations

Mouse Trail Particles

Canvas particles that spawn at the cursor position and fade out, creating a glowing trail effect. Pure vanilla JS.

Medium

Lab View Code

Web Animations

Stagger Fade-in on Scroll

Grid of cards that fade and slide in with a stagger when they enter the viewport. GSAP ScrollTrigger batch.

Easy

Lab View Code

Web Animations

Infinite Marquee (GSAP)

A butter-smooth infinite marquee powered by GSAP ticker. Dynamically fills the viewport width with cloned items and reverses direction on hover.

Easy

Lab View Code

Web Animations

Animated Gradient Mesh BG

An organic animated gradient mesh background using Canvas 2D. Multiple color orbs drift and blend in real-time — no WebGL required.

Hard

Lab View Code

UI Components

Card Automatic Transition

An animated card stack that automatically transitions between cards with smooth scroll-triggered animations, blur effects, and diagonal wipe reveals.

Medium

Lab View Code

Web Animations

Smooth Scroll Story

Parallax sections with Lenis smooth scrolling and GSAP ScrollTrigger choreography.

Medium

Lab View Code

Web Animations

Clip-path Reveal on Scroll

Images and sections that wipe into view using animated clip-path on scroll. Scrubbed by GSAP ScrollTrigger for frame-perfect control.

Medium

Lab View Code

Web Animations

Pinned Scroll Sections

Sections pin in place while multi-step timelines play, driven entirely by scroll position.

Medium

Lab View Code

Web Animations

Horizontal Scroll Gallery

Vertical scroll drives a horizontal gallery with pinned container and panel entrance animations.

Medium

Lab View Code

Web Animations

Text Reveal on Scroll

Per-character and per-line text animations triggered on scroll with GSAP SplitText.

Medium

Lab View Code

Web Animations

Card Stack Cascade

Stacked cards fan out and rearrange into a grid as you scroll, driven by GSAP ScrollTrigger scrub.

Medium

Lab View Code

Web Animations

Particle Tunnel

Cinematic depth-heavy particle tunnel with custom shaders and bloom post-processing.

Hard

Lab View Code

Web Animations

Scroll Progress Indicators

Three simultaneous scroll indicators: top bar, circular SVG progress, and section dot navigator.

Easy

Lab View Code

Web Animations

3D Product Showcase

Interactive 3D product viewer with PBR materials, three-point lighting, and orbit controls.

Medium

Lab View Code

Web Animations

Shader Background

Full-screen GLSL fragment shader with layered simplex noise creating flowing aurora bands.

Hard

Lab View Code

Web Animations

Interactive 3D Mouse Scene

Grid of 400 spheres with mouse-reactive repulsion physics, spring return, and distance-based color.

Hard

Lab View Code

Patterns

Theme Transition

Dark/light theme toggle with circular clip-path wipe powered by the View Transitions API.

Medium

Lab View Code

Patterns

Card Grid Transition

Shared-element transition from a card grid to a detail page using the View Transitions API.

Medium

Lab View Code

Patterns

Image Gallery Transitions

Thumbnail strip with hero image swap animated by View Transitions crossfade and scale.

Easy

Lab View Code

Patterns

Magnetic Cursor

Custom cursor with spring-based following and magnetic attraction to interactive elements.

Medium

Lab View Code

Patterns

Bokeh Particle Hero

Ambient glowing bokeh particle field with mouse-reactive parallax and depth-of-field blur.

Easy

Lab View Code

Web Animations

Text Scramble / Matrix Decode

Text that scrambles through random characters before resolving to the final string — the classic hacker/matrix decode effect. Zero dependencies.

Medium

Lab View Code

Patterns

Page Routing Transitions

SPA-style page routing with directional slide transitions using the View Transitions API.

Medium

Lab View Code

Patterns

Spotlight Reveal

Mouse-driven spotlight that reveals colorful hidden content through a dark overlay using CSS masks.

Medium

Lab View Code

Patterns

Staggered Grid Entrance

Grid items animate in with position-based stagger delays. Multiple animation styles: fade, scale, slide, flip.

Easy

Lab View Code

Web Animations

Scroll Camera Narrative

Scroll through story chapters as the camera flies between 3D scene waypoints with cinematic transitions.

Hard

Lab View Code

Pages

AI Engineer Portfolio

Terminal-aesthetic portfolio with typing animations, neural network canvas visualization, and scroll-driven project reveals.

Hard

Lab View Code

Pages

Product Landing Page

Apple-style wireless earbuds product page with 3D hero, scroll-pinned feature reveals, and cinematic text choreography.

Hard

Lab View Code

Web Animations

3D Product Spotlight

Scroll-driven camera orbits a 3D product on rails, revealing feature cards at each angle.

Hard

Lab View Code

Pages

Travel Editorial

Immersive travel editorial with horizontal photo scrolling, FLIP layout transitions, and warm typographic design.

Hard

Lab View Code

Patterns

Morphing Blobs

Three approaches to organic shape animation: CSS border-radius, SVG path morphing, and Canvas bezier curves.

Easy

Lab View Code

Pages

Blog Magazine

Modern blog layout with dark/light theme transitions, animated typography, and reading-view article cards.

Hard

Lab View Code

Pages

Travel Experience

Immersive travel booking experience with a scroll-driven 3D airplane flight path and animated destination reveals.

Hard

Lab View Code

Pages

SaaS Landing Page

Professional SaaS product page with CSS device mockups, pinned feature sections, pricing cards, and testimonial animations.

Hard

Lab View Code

Pages

E-commerce Shop

Mini e-commerce experience with filterable product grid, FLIP animations, cart interactions, and View Transition detail pages.

Hard

Lab View Code

Pages

Tech Lead Portfolio

Corporate tech lead portfolio with Three.js wireframe hero, vertical career timeline, expertise grid, and open source repo showcase.

Hard

Lab View Code

Pages

UX/UI Designer Portfolio

Warm editorial UX/UI designer portfolio with GSAP SplitText hero, rotating role words, View Transitions case study overlay, and scroll-driven section reveals.

Hard

Lab View Code

Pages

Software Engineer Portfolio

Dark brutalist software engineer portfolio with bold typography, scroll-driven section reveals, skill bars, and project showcases.

Hard

Lab View Code

Pages

Game Developer Portfolio

Retro pixel art game developer portfolio with CRT scanlines, canvas starfield + animated pixel character, HUD-style stat bars, game cartridge cards, and inventory skill items.

Hard

Lab View Code

Patterns

Noise & Grain Overlay

Four composited overlay effects: SVG noise filter, canvas grain, CSS scanlines, and radial vignette.

Easy

Lab View Code

Pages

AI Engineer Portfolio

Futuristic AI research engineer portfolio with Three.js neural network particle simulation, live training loss curve canvas animation, confusion matrix heatmap, and terminal-style tech stack reveal.

Hard

Lab View Code

Pages

Multimedia Engineer Portfolio

Bold creative technologist portfolio with Canvas 2D particle waveform reacting to mouse, GSAP FLIP grid/list gallery toggle, discipline pills ticker, audio waveform visualizer, and glitch-hover name effect.

Hard

Lab View Code

Web Animations

Parallax Depth Card Grid

Cards positioned at different Z-depth layers reveal with staggered 3D entrance animations. Hover lifts cards forward. Depth-based scroll parallax creates cinematic feel.

Medium

Lab View Code

Web Animations

SVG Workflow Animation

SVG connector paths draw themselves as you scroll using stroke-dasharray/dashoffset technique. Workflow nodes and labels appear in sequence with scroll-triggered reveals.

Medium

Lab View Code

Web Animations

Velocity-Aware Scroll + Speed Lines

Canvas speed lines radiate from center and intensify based on how fast you scroll. Lenis velocity data drives line count, length, and opacity in real-time.

Medium

Lab View Code

Pages

Data Dashboard

Startup metrics dashboard with scroll-linked number counters, gradient text hue-shift hero, animated Canvas 2D bar/donut/area charts, a milestone timeline, and team grid.

Hard

Lab View Code

Pages

Interactive Case Study

Digital agency case study page integrating parallax depth hero cards, scroll-driven SVG workflow diagram, animated result counters, and staggered testimonial reveals.

Hard

Lab View Code

Pages

Fine Dining Restaurant

Warm editorial restaurant page with cream/terracotta palette, Playfair Display serif typography, SplitText char-by-char hero entrance, menu section with parallax images, and a vintage story section.

Hard

Lab View Code

Web Animations

Gradient Text Hue Shift

Text with animated gradient background that shifts hue and saturation as you scroll. Uses CSS Custom Properties updated in real-time by GSAP ScrollTrigger.

Easy

Lab View Code

Pages

Premium Velocity Experience

Three-layer rendering showcase: Three.js wireframe hero reacting to scroll, Canvas 2D radial speed lines intensifying with scroll velocity, and gradient text hue-shift — all synchronized.

Hard

Lab View Code

Pages

Fitness Brand

High-impact brutalist fitness brand with pure black/yellow palette, 14vw condensed headings, scrolling ticker, stat counters with yellow border, and programs grid with zero-gap dividers.

Hard

Lab View Code

Pages

Real Estate — Light Minimal

Light-mode architectural property site with warm grey palette, Fraunces italic display and Inter body fonts, split hero with parallax image stack, listings grid with filter bar, and dark contact section.

Medium

Lab View Code

Pages

FREQ — Music & Podcast Platform

Neon cyberpunk music platform with magenta/cyan palette, Space Mono monospace typography, animated Canvas 2D waveform background, scrolling artist marquee, chart bars with glitch hover, and typing terminal CTA.

Hard

Lab View Code

Patterns

GSAP Accordion

Three accordion variants (exclusive, multi-open, minimal) using GSAP height:'auto' animation. Demonstrates smooth open/close without CSS max-height artifacts, arrow rotation spring ease, and aria attributes.

Easy

Lab View Code

Patterns

Clip-Path Lightbox Expand

Gallery lightbox that expands from the clicked card's exact position using GSAP clip-path animation. Computes inset() coordinates from getBoundingClientRect, animates to fullscreen and back. Full keyboard navigation.

Medium

Lab View Code

Pages

E-Learning Platform — Meridian

Full e-learning platform UI with indigo/violet palette, Outfit font, Canvas skill tree with bezier node connections, animated course progress bars, scroll-linked stat counters, floating skill badges, and GSAP FAQ accordion.

Hard

Lab View Code

Pages

Art Gallery — Atelier Blanc

White museum-aesthetic art gallery with Cormorant Garamond serif and DM Mono. Full clip-path lightbox expand for artwork detail view, masonry grid with hover reveals, timeline history section, and keyboard navigation.

Hard

Lab View Code

Pages

Esports Tournament — NEXUS

Dark cyberpunk esports platform with black/lime/orange palette, Rajdhani bold display font, Canvas particle field with grid lines, scroll-driven prize counter ($0→$2.1M), angled clip-path buttons, and tournament bracket grid.

Hard

Lab View Code

Patterns

Video Scroll Scrub

Scroll-driven video frame scrubbing using Canvas 2D procedural scenes. Demonstrates the currentTime scrub pattern with interpolated hue/gradient scenes, film grain, vignette, and lens flare.

Medium

Lab View Code

Pages

Luxury Hotel — Grand Résidence

Forest green/champagne luxury hotel site using CSS scroll-snap-type:y mandatory for 5 full-height panels. IntersectionObserver fires per-panel entrance animations, nav adapts color on light panels, Playfair Display SC typography.

Hard

Lab View Code

Pages

Photography Portfolio — Dark Film

Dark film-aesthetic photography portfolio with warm black/gold palette, grain overlay, EB Garamond serif italic typography, masonry photo grid with parallax hover, and series list with staggered reveals.

Hard

Lab View Code

Pages

Documentary Film — Terra Incognita

Cinematic documentary film site with deep charcoal/rust palette, Libre Baskerville serif, animated Canvas grain overlay, clip-path word reveal for hero title, chapter timeline, CSS film stills with scratch marks, credits reveal, and festival badges.

Hard

Lab View Code

Web Pages

Liquid Gradient + Three.js

An immersive portfolio website featuring liquid gradient backgrounds powered by Three.js shaders, interactive mouse tracking, custom cursor, and dynamic color scheme switching.

Hard

Lab View Code

Web Pages

Startup Pitch Deck

A slides-style scrolljack pitch deck for startups. Each section snaps into view like a presentation slide, with animated stats, investor CTAs, and a problem/solution narrative arc.

Hard

Lab View Code

Web Pages

Event / Conference Landing

A high-energy conference landing page with a live countdown timer, speaker grid, schedule timeline, sponsor logos marquee, and ticket CTA.

Medium

Lab View Code

Web Pages

Coming Soon + Waitlist

A minimal coming soon page with an animated countdown, email waitlist capture form, and a background particle field. Clean, focused, converts well.

Easy

Lab View Code

Web Pages

Podcast Platform

A podcast platform landing page featuring a sticky audio player UI, episode card grid, host bio section, and category filter — styled like Spotify meets editorial.

Medium

Lab View Code

Web Pages

Architecture Firm

A premium architecture firm website with full-bleed project photography, an editorial horizontal scroll gallery, awards section, and a minimal contact form.

Hard

Lab View Code

Web Pages

Minimal Typographic Portfolio

A text-only portfolio where typography IS the design. Kinetic type animations, a work list with hover image previews, and zero imagery in the hero — just letters.

Medium

Lab View Code

Web Pages

NFT / Digital Art Marketplace

A dark, high-contrast NFT marketplace landing page with a hero auction card, glowing grid of featured drops, artist profiles, and a live bid counter.

Hard

Lab View Code

Web Pages

Legal / Law Firm

A professional law firm website with serif typography, trust signals, practice area cards, attorney profiles, and a consultation booking CTA. Clean, authoritative, confident.

Easy

Lab View Code

Web Pages

Dark SaaS Dashboard Preview

A dark SaaS dashboard preview landing page — the app UI IS the hero. Includes a sidebar, metric cards, a revenue chart (CSS-drawn), a data table, and an activity feed.

Hard

Lab View Code

Ultra High Definition Pages

Apple Vision Pro UHD Product Page

An ultra-high-definition product showcase inspired by Apple's Vision Pro landing page. Features immersive scroll-based reveals, kinetic typography, depth-mapping shadows, and high-fidelity motion sequences using GSAP and Lenis.

Hard

Lab View Code

Ultra High Definition Pages

Vercel UHD Developer Platform Page

An ultra-high-definition developer platform showcase inspired by Vercel's landing page. Features bold typography, grid-based layout, terminal-style code reveals, and subtle gradient animations with GSAP.

Hard

Lab View Code

Ultra High Definition Pages

Nintendo UHD Console Showcase Page

An ultra-high-definition console showcase inspired by Nintendo's playful design language. Features vibrant colors, bouncy animations, parallax scroll, and joyful micro-interactions using GSAP.

Hard

Lab View Code

Ultra High Definition Pages

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.

Hard

Lab View Code

Ultra High Definition Pages

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.

Hard

Lab View Code

Web Pages

Health & Wellness App Landing

A soft, calming health and wellness app landing page with a feature scroll, app screenshots, testimonials carousel, and a gentle color palette far from the usual dark demos.

Medium

Lab View Code

Web Animations

Scroll-Linked Number Counters

Numeric metrics animate from 0 to target as you scroll. Counter speed is directly linked to scroll position using GSAP ScrollTrigger scrub.

Easy

Lab View Code

Ultra High Definition Pages

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.

Hard

Lab View Code

UI Components

Light Rays

Atmospheric light rays emanating from a point, like sunlight through clouds, using CSS gradients and animated opacity.

Easy

Lab View Code

UI Components

Animated Like Button

A micro-interaction focused like button with smooth heart animations and popping effects.

Easy

Lab View Code

Ultra High Definition Pages

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.

Hard

Lab View Code

UI Components

Line Shadow Text

Large heading with an animated shadow made of repeated lines offset below. Multiple text-shadows create a striking striped shadow effect with a smooth animated offset.

Easy

Lab View Code

Ultra High Definition Pages

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.

Hard

Lab View Code

UI Components

Live Clock (Analog + Digital)

A comprehensive real-time clock component featuring both a classic analog face and a modern digital readout.

Easy

Lab View Code

UI Components

Live Search with Debounce

A real-time search interface that filters results as you type, optimized with debouncing to minimize performance overhead.

Medium

Lab View Code

UI Components

Loading Variants

Six CSS-only loading animations — spinner, dots, bar, pulse, bounce, and ring — in multiple sizes.

Easy

Lab View Code

UI Components

Long Press Menu

A context menu triggered by a long press (500ms hold) on mobile, and right-click on desktop. Dismisses on outside tap or Escape. No libraries.

Medium

Lab View Code

UI Components

Location Pin Card

Location card with map placeholder, animated pin drop, address details, distance badge, and directions button. Pure CSS.

Easy

Lab View Code

UI Components

Login Page

Clean, modern login page with email/password fields, remember me, forgot password link, OAuth social buttons, and form validation. Pure HTML/CSS/JS.

Easy

Lab View Code

UI Components

Log Viewer

Scrollable log output panel with level filters (info/warn/error/debug), search, auto-scroll toggle, and color-coded lines.

Medium

Lab View Code

UI Components

Magic Card

Card with a radial gradient spotlight that follows the mouse cursor, creating an interactive lighting effect.

Easy

Lab View Code

Patterns

Loading Skeleton

Page-level skeleton state pattern with a controlled transition into real content.

Easy

Lab View Code

Patterns

Magnetic Button

A button that magnetically attracts toward the cursor when nearby, creating a satisfying interactive pull effect.

Medium

Lab View Code

Pages

Maintenance Page

A scheduled maintenance page with a countdown timer, progress bar, and email notification signup. No libraries.

Easy

Lab View Code

UI Components

Map Embed Card

Map embed card with OpenStreetMap iframe, location pin overlay, address text, and directions CTA. No API key needed.

Easy

Lab View Code

UI Components

Media Object

Social media style layout with avatar on the left and content (name, text, meta) on the right, supporting nested replies.

Easy

Lab View Code

UI Components

Accessible Media Captions

Video player with synchronized captions and subtitles, caption customization controls and keyboard-accessible media controls.

Medium

Lab View Code

UI Components

Masonry Grid

Pinterest-style masonry layout using CSS columns — items fill vertically with no gaps, responsive breakpoints.

Easy

Lab View Code

UI Components

Menubar App

Desktop-style application menubar (File, Edit, View…) with nested submenus, keyboard shortcuts display, and full keyboard navigation.

Easy

Lab View Code

UI Components

Mega Menu

Full-width multi-column dropdown navigation menu with categories, links, icons, and a featured section.

Medium

Lab View Code

UI Components

Memory Card Game

A matching card game with smooth 3D flip animations, move counting, and a win-state celebration.

Medium

Lab View Code

UI Components

Message Block

Colored message blocks with optional header, body, and dismiss button in info, success, warning, and danger variants with fade-out animation.

Easy

Lab View Code

UI Components

Meteors

Animated shooting stars and meteors falling diagonally across the screen with glowing trails, random positions, and staggered animation delays.

Easy

Lab View Code

UI Components

Three Dots Menu

Mobile overflow menu triggered by a three-dots (kebab) button. Dropdown appears with action items and smooth fade-in animation.

Easy

Lab View Code

UI Components

Metric Comparison

A before/after metric comparison widget that highlights the difference between two values with an animated transition bar, percentage change label, and color-coded improvement/regression indicators.

Easy

Lab View Code

UI Components

Drawer Navigation

Mobile side-drawer navigation with slide-in panel, backdrop overlay, close button, and stacked nav links.

Easy

Lab View Code

UI Components

Card Navigation

Mobile card-grid navigation with icon tiles laid out in a 2×3 grid. Tap a card to open its content screen with animated transition.

Easy

Lab View Code

UI Components

Mobile Bottom Navigation

A fixed bottom navigation bar for mobile apps with icon + label tabs, active state, notification badges, and a center create button. Zero dependencies.

Easy

Lab View Code

UI Components

Rudder Navigation

Bottom navigation with a raised central FAB button. Combines standard tab items with a prominent primary action.

Easy

Lab View Code

UI Components

Sheet Navigation

Mobile bottom sheet with drag handle, slide-up animation, and action list. Swipe or tap to dismiss.

Medium

Lab View Code

UI Components

FAB Navigation

Floating action button with expandable speed-dial actions. Tap the FAB to reveal stacked action buttons with staggered animation.

Easy

Lab View Code

UI Components

Browser Mockup

Realistic browser window frame with address bar, tab, navigation buttons, and inner content area for screenshots or demos.

Easy

Lab View Code

UI Components

Mobile Stepper

A dot/step indicator for onboarding flows with animated transitions between steps. Includes skip and next/get-started buttons. No libraries.

Easy

Lab View Code

UI Components

Rectangular Navigation

Compact vertical icon sidebar for mobile apps. Always-visible narrow rail with icon buttons and active indicator.

Easy

Lab View Code

UI Components

Modal Dialog

Accessible modal dialog with backdrop blur, multiple sizes, confirmation variant, and smooth open/close animations. Closes on Escape and backdrop click.

Medium

Lab View Code

UI Components

Phone Mockup

Mobile phone frame (iOS-style notch) to showcase app screenshots or UI demos.

Easy

Lab View Code

UI Components

Model Selector

LLM model picker dropdown with provider logos, context window size, capability tags, and active model indicator.

Easy

Lab View Code

UI Components

Multi-Step Form

A multi-step onboarding form with animated step transitions, progress indicator, validation, and a final review screen.

Medium

Lab View Code

UI Components

Morphing Text

Text that smoothly morphs between different words using an SVG filter blur technique for seamless transitions.

Easy

Lab View Code

Music

Clausic — Chill Pieces

4 original chill MIDI compositions with piano-roll visualizer — Chillwave (A minor 76 BPM), Lo-fi (C minor 85 BPM), Ambient (E minor 50 BPM), Acoustic (G major 72 BPM).

Medium

Lab View Code

Music

Vaporwave Synth

Generative vaporwave synthesizer with 10 tracks — Web Audio API step sequencer with supersaw pads, bass, lead, and drums. Click play and browse.

Easy

Lab View Code

Music

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.

Hard

Lab View Code

Music

Clausic — Rock · Pop · Ambient

6 original MIDI compositions across 3 genres — Rock (Neon City Riff, Desert Storm), Pop (Summer Signal, Midnight Drive), Ambient (Glass Forest, Ocean Drift) with piano-roll visualizer.

Medium

Lab View Code

Music

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.

Hard

Lab View Code

Components

Navigation Header

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

Medium

Lab View Code

UI Components

Navigation Menu

Horizontal navigation bar with mega-menu dropdowns, animated indicator underline, mobile hamburger collapse, and keyboard accessibility.

Medium

Lab View Code

UI Components

Neon Gradient Card

Card with an animated neon glow border that shifts through vivid colors using keyframe animations and box-shadow.

Easy

Lab View Code

UI Components

Notification Badge

Animated badge counter on icons with pulse ring, count overflow (99+), and CSS-only variants. Zero JavaScript.

Easy

Lab View Code

UI Components

Notification Bell

Notification bell icon with unread badge, dropdown notification feed, mark-as-read, mark-all-read, and grouping by Today/Earlier. No dependencies.

Medium

Lab View Code

Pages

Notifications Page

A full notification center page with tabs for All/Unread/Mentions, grouped by date, mark-as-read actions, and notification type icons. No libraries.

Medium

Lab View Code

UI Components

Notification Center

Dropdown notification panel with unread badge, mark-all-read, grouped notifications, and infinite-scroll loading. No libraries.

Medium

Lab View Code

UI Components

Number Ticker

An animated number display that counts up to a target value using independently sliding digit columns, creating a smooth slot-machine effect with easing.

Medium

Lab View Code

Patterns

Optimistic UI

Optimistic mutation pattern for list add and remove actions with rollback on simulated failures.

Medium

Lab View Code

UI Components

Orbiting Circles

Multiple circles orbiting around a central element at different speeds and radiuses using pure CSS animation.

Easy

Lab View Code

UI Components

Number Input

Numeric input with increment/decrement stepper buttons, min/max/step support, and keyboard navigation.

Easy

Lab View Code

Pages

Order Confirmation Page

An order success page with animated checkmark, order summary, delivery timeline, and continue shopping CTA. Pure CSS.

Easy

Lab View Code

UI Components

OTP / PIN Input

One-time password input with individual digit boxes, auto-advance on type, paste support, backspace to go back, and length variants (4 and 6 digits).

Medium

Lab View Code

Pages

Offline Page

A PWA offline fallback page with network detection, automatic reconnect polling, and a cached content list. Pure CSS + minimal JS.

Easy

Lab View Code

Pages

Onboarding Page

A multi-step onboarding / welcome flow with progress indicator, profile setup, preferences selection, team invite, and completion celebration. No libraries.

Medium

Lab View Code

UI Components

Accessible Palette Generator

Generates color palettes that automatically meet WCAG 2.1 contrast ratio requirements for text and UI elements.

Medium

Lab View Code

Web Pages

PageService — Growth & Product Studio

A modern growth and product studio portfolio website featuring Three.js halo field background, smooth scroll animations with Lenis, GSAP-powered transitions, and a data-driven service showcase.

Medium

Lab View Code

UI Components

Pagination

Page navigation controls with first/prev/next/last, ellipsis for large page counts, page size selector, and a simple mini variant.

Medium

Lab View Code

UI Components

Particles System

Interactive canvas particle system with connected lines between nearby particles and mouse-driven attraction and repulsion.

Medium

Lab View Code

UI Components

Password Field

Password input with show/hide toggle, strength indicator meter, and accessible label.

Easy

Lab View Code

UI Components

Pixel Image

Image that assembles from scattered pixels or reveals pixel-by-pixel on click, using canvas for dynamic pixel manipulation.

Medium

Lab View Code

UI Components

Podcast Player

A specialized player optimized for longer spoken-word content. Includes skip forward/back buttons and variable playback speed.

Medium

Lab View Code

UI Components

Poll / Voting Widget

A clean voting interface with real-time percentage visualizations and satisfying result animations.

Medium

Lab View Code

UI Components

Pinch Zoom

Pinch-to-zoom and pan image viewer. Two-finger spread zooms in; single-finger drag pans when zoomed. Double-tap resets. No libraries.

Hard

Lab View Code

UI Components

Popover

Floating popover panels that position themselves relative to a trigger — supports top, bottom, left, right placement with arrow pointer.

Medium

Lab View Code

Pages

Portfolio Case Study Page

A single project case study page with hero, overview stats, problem/solution sections, image gallery, and results metrics. Pure CSS.

Medium

Lab View Code

Pages

Pricing Page

A full pricing page with monthly/annual toggle, three-tier plan cards, feature comparison table, and FAQ accordion. No libraries.

Medium

Lab View Code

UI Components

Print-Ready Invoice

Print-ready invoice layout with @print media query — hides UI chrome, formats tables correctly, and adds page break rules.

Medium

Lab View Code

UI Components

Print-Ready Resume / CV

One-page resume/CV layout that prints cleanly on A4/Letter with @print styles — no headers, correct margins, and break-avoid rules.

Medium

Lab View Code

UI Components

Progress Bar

Linear progress indicators — determinate with label, indeterminate animated, stepped segments, and multi-color stacked bars.

Easy

Lab View Code

UI Components

Pricing Table

Pricing table with monthly/yearly toggle (20% discount), 3-tier cards, feature comparison list, popular badge, and CTA buttons. Pure CSS + JS.

Easy

Lab View Code

Pages

Product Detail Page

A full e-commerce product page with image gallery, variant picker, quantity selector, add-to-cart, and a reviews section. No libraries.

Hard

Lab View Code

UI Components

Product Card

E-commerce product card with image, quick-add to cart, wishlist toggle, discount badge, color swatch picker, and rating stars. Pure CSS + JS.

Easy

Lab View Code

UI Components

Progress Ring

A circular SVG progress indicator with animated stroke-dashoffset, percentage label, configurable size/stroke, and support for multiple simultaneous rings with distinct colors and labels.

Easy

Lab View Code

Patterns

Progressive Blur

A gradient blur effect where content gets progressively more blurry at the edges, like a fade-to-blur overlay.

Easy

Lab View Code

UI Components

Prompt Input

Enhanced prompt textarea with live token counter, character limit bar, attach file button, and submit shortcut. No libraries.

Medium

Lab View Code

UI Components

Pull to Refresh

Pull-down-to-refresh indicator for mobile lists. Shows a spinner when the user pulls past the threshold, then resets the list. No libraries.

Medium

Lab View Code

UI Components

Pulsating Button

A call-to-action button with a pulsing glow ring animation that draws attention and encourages clicks.

Easy

Lab View Code

UI Components

Rainbow Button

A vibrant button with an animated rainbow gradient border that continuously cycles through the color spectrum.

Easy

Lab View Code

UI Components

Radio Group

Custom-styled radio button groups with label, radio card variant, and a segmented button-group toggle.

Easy

Lab View Code

UI Components

QR Code

In-browser QR code generator — type a URL or text and get an instant scannable QR code with a download button.

Medium

Lab View Code

UI Components

Range Slider

Custom-styled range sliders — single value with floating tooltip, dual-handle range, stepped with tick marks, and color variants.

Medium

Lab View Code

UI Components

Quiz Widget

An interactive quiz component with real-time scoring, progress tracking, and result summaries.

Medium

Lab View Code

UI Components

Reading Guide

Reading guide line that follows the cursor or scroll position to help users track their reading position across lines of text.

Easy

Lab View Code

UI Components

Rating Stars

Interactive star rating component — hover preview, click to set, half-star display support, readonly mode.

Easy

Lab View Code

UI Components

Reduced Motion Demo

Showcase of CSS prefers-reduced-motion patterns — before/after animations that respect the OS motion preference. Pure CSS.

Easy

Lab View Code

UI Components

Register Page

Sign-up page with name, email, password, and confirm password fields, real-time strength meter, terms checkbox, and validation. No dependencies.

Easy

Lab View Code

Patterns

Reorder List

Draggable list where items can be reordered by dragging. Items animate to new positions smoothly using the FLIP technique for fluid layout transitions.

Medium

Lab View Code

UI Components

Report Cover Page

Document or report cover page with title, subtitle, branding, date, and department details. Professional print-ready layout.

Easy

Lab View Code

UI Components

Resizable Panels

Draggable split panels — horizontal and vertical resize, with min/max constraints, collapse/expand, and a multi-panel layout.

Hard

Lab View Code

Components

Resource Card

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

Easy

Lab View Code

UI Components

Retro Grid

A perspective grid background with vanishing-point effect, inspired by retro 80s aesthetics. CSS transforms create converging grid lines with a glowing horizon.

Easy

Lab View Code

UI Components

Ripple Button

A Material Design inspired button that shows a ripple wave effect expanding from the exact click point.

Easy

Lab View Code

UI Components

Ripple Effect

Expanding concentric ripple circles emanating from the click point on any surface, inspired by Material Design.

Easy

Lab View Code

UI Components

Result Page

Full-page result feedback for success, error, warning, and info states — with icon, message, and CTA actions.

Easy

Lab View Code

UI Components

RTL Card Grid

Responsive card grid that automatically flips layout between LTR and RTL using CSS logical properties with no JavaScript required.

Easy

Lab View Code

UI Components

RTL Form

Bidirectional form with validation and labels that properly aligns for both LTR and RTL languages using CSS logical properties.

Medium

Lab View Code

UI Components

RTL Data Table

Data table with RTL-aware columns, sorting indicators and pagination that properly mirrors for right-to-left languages.

Medium

Lab View Code

UI Components

RTL Layout

Complete right-to-left layout with sidebar, navigation and content area using CSS logical properties for seamless LTR/RTL switching.

Medium

Lab View Code

UI Components

RTL Mixed Text

Demonstrates proper handling of bidirectional text mixing Arabic and English content using Unicode BiDi algorithm and CSS properties.

Easy

Lab View Code

UI Components

RTL Navigation

Navigation bar and breadcrumb with full bidirectional support, properly mirroring icons and layout for RTL languages.

Medium

Lab View Code

UI Components

Scheduler Timeline

A Gantt-style project scheduler timeline with draggable tasks, milestones, and dependency arrows. Shows task progress and team assignments.

Hard

Lab View Code

UI Components

Schema Diagram

Visual ER / database schema diagram built with SVG — tables, columns, data types, and relationship arrows. No libraries.

Hard

Lab View Code

UI Components

Screen Reader Announcer

ARIA live region announcer that broadcasts status messages to screen readers without visual disruption. Vanilla JS utility.

Easy

Lab View Code

UI Components

Scroll Area

Custom-styled scrollable container with thin styled scrollbar, auto-hide on idle, and horizontal + vertical variants.

Medium

Lab View Code

Patterns

Scroll Velocity Text

Horizontal scrolling text marquee that speeds up or slows down based on the user's scroll velocity.

Medium

Lab View Code

Web Animations

Scroll Fade In

Smooth fade-in animation triggered by Intersection Observer as elements enter the viewport on scroll.

Easy

Lab View Code

UI Components

Search Autocomplete

A rich search autocomplete input with categorized results, keyboard navigation, recent searches, and command shortcuts. Similar to Notion or Linear's search.

Medium

Lab View Code

Patterns

Scratch to Reveal

Interactive scratch card effect where users drag to erase an overlay and reveal hidden content underneath.

Medium

Lab View Code

Pages

Search Results Page

A search results page with query input, filter sidebar, result cards with highlighted matches, sorting options, and pagination. No libraries.

Medium

Lab View Code

Patterns

Search Filter

Lightweight search plus sidebar filter pattern with URL query synchronization and live result updates.

Medium

Lab View Code

UI Components

Separator

Horizontal and vertical dividers with text label variants — plain line, centered text, gradient fade, dashed, dotted, and decorative diamond.

Easy

Lab View Code

Pages

Settings Page

A tabbed settings page with profile editing, notification preferences, security options, and appearance controls. Pure vanilla JS and CSS.

Medium

Lab View Code

UI Components

Semantic Landmarks

Demonstration of HTML5 semantic landmarks (header, nav, main, aside, footer) with proper ARIA labeling for screen reader navigation.

Easy

Lab View Code

UI Components

Settings Panel

A slide-in settings panel (sheet/drawer) with tabbed sections for profile, notifications, appearance, and security settings.

Medium

Lab View Code

UI Components

Segmented Control

iOS-style segmented control (pill-style toggle group) — single selection, animated background slide, keyboard support.

Easy

Lab View Code

UI Components

Sheet / Drawer

Slide-in sheet panels from all four edges — bottom sheet (mobile-first), right sidebar drawer, left nav drawer, and top notification drawer.

Medium

Lab View Code

UI Components

Shift Grid

A weekly shift schedule grid for employee management. Shows assigned shifts per employee per day with color-coded shift types and edit/delete controls.

Medium

Lab View Code

UI Components

Smart Share Button

A high-utility share button that uses the Web Share API when available, with a tailored fallback menu for desktop browsers.

Easy

Lab View Code

UI Components

Shimmer Button

A button with a shimmering light sweep effect that glides across periodically, creating an elegant loading or attention animation.

Easy

Lab View Code

UI Components

Shine Border

Container with a glowing, shining animated border using a rotating gradient that creates a polished metallic edge effect.

Easy

Lab View Code

UI Components

Shiny Button

A button with a glossy reflection effect that glides across on hover, creating a polished premium feel.

Easy

Lab View Code

Pages

Shop Category Page

An e-commerce category page with product grid, sidebar filters (price range, brand, rating), sort dropdown, and pagination. No libraries.

Hard

Lab View Code

UI Components

Shopping Cart

Slide-out shopping cart drawer with item list, quantity controls, remove items, coupon code input, order summary, and checkout CTA. No dependencies.

Medium

Lab View Code

UI Components

Sidebar Admin

Collapsible admin sidebar with icon-only mode, grouped navigation sections, active state, and mobile overlay. No dependencies.

Medium

Lab View Code

Components

Showcase Preview Card

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

Medium

Lab View Code

Components

Site Footer

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

Easy

Lab View Code

UI Components

Retro Snake Game

A classic browser-based Snake game built using the HTML5 Canvas API. Features score tracking, speed increments, and a sleek dark mode aesthetic.

Hard

Lab View Code

UI Components

Skeleton Loader

CSS-only shimmer skeleton loading placeholders for cards and content blocks. Zero JavaScript — pure CSS keyframe animation with a traveling shimmer highlight.

Easy

Lab View Code

UI Components

Smooth Cursor

Custom cursor with a dot and ring that smoothly follow the actual cursor with a spring-like lag effect.

Easy

Lab View Code

UI Components

Skip Navigation

Accessible skip-to-content link that appears on keyboard focus, letting screen reader and keyboard users bypass repeated navigation.

Easy

Lab View Code

Patterns

Sortable Table

Sort plus column-resize table pattern with no selection or pagination complexity.

Medium

Lab View Code

UI Components

Snackbar / Bottom Toast

Material-style snackbar that slides up from the bottom with optional action button, auto-dismiss, and queue support. No libraries.

Easy

Lab View Code

UI Components

Social Media Feed Card

A pixel-perfect social media feed card inspired by modern platforms. Includes support for images, metrics, and nested comments.

Medium

Lab View Code

UI Components

Sparkline

A compact inline SVG sparkline chart for embedding in tables, cards, or dashboards. Supports line and bar variants, trend coloring (up/green, down/red), and an optional last-value dot.

Easy

Lab View Code

UI Components

Sparkles Text

Text with floating sparkle particles that animate around it, creating a magical glittering effect using positioned elements.

Easy

Lab View Code

UI Components

Spinner

Multiple spinner and loading animations — circular, dots, bars, and pulse — in various sizes and colors with pure CSS keyframes.

Easy

Lab View Code

UI Components

Spinning Text

Text arranged in a circle that rotates continuously using CSS transforms. Characters are positioned radially and the whole assembly spins with a smooth animation.

Easy

Lab View Code

Patterns

Spring Physics

Interactive spring physics simulation where you drag an element and it springs back with configurable stiffness and damping. Uses Hooke's law (F = -kx - cv) with requestAnimationFrame.

Medium

Lab View Code

UI Components

Stats Card Grid

A grid of metric stat cards showing KPIs with trend indicators. Dark SaaS-style design with up/down trend badges and icon accents.

Easy

Lab View Code

UI Components

Screen Reader Only Utilities

CSS utility classes and patterns for visually hidden content that remains accessible to screen readers and assistive technology.

Easy

Lab View Code

UI Components

Stack Cards

Overlapping card stack UI — hover fans out the cards, click rotates through them. Used for layered content previews.

Easy

Lab View Code

UI Components

Status Indicator

Online/offline/idle/busy status dots with pulse animation, badge variants, and text labels.

Easy

Lab View Code

UI Components

Stat Card

Metric stat cards with KPI value, trend badge (up/down %), supporting label, and optional sparkline bar.

Easy

Lab View Code

Pages

Status Page

A system status page with service health indicators, uptime bars, incident timeline, and overall status banner. No external libraries.

Medium

Lab View Code

UI Components

Stopwatch

A precision stopwatch with lap tracking, start/split/reset controls, and smooth animations.

Easy

Lab View Code

UI Components

Stock Ticker

A scrolling stock and crypto ticker with real-time price simulations and trend indicators.

Medium

Lab View Code

UI Components

Steps Progress

Multi-step progress indicator with completed, active, and upcoming states — horizontal and vertical orientations.

Easy

Lab View Code

UI Components

Streaming Text Effect

LLM-style streaming text output that renders characters progressively with a blinking cursor. Configurable speed and delay.

Easy

Lab View Code

UI Components

Striped Pattern

Beautiful diagonal or horizontal repeating stripes using CSS gradients with customizable colors, angle, and size via CSS custom properties.

Easy

Lab View Code

UI Components

Store Locator

Store list with map placeholder, search/filter by city, distance sorting, and clickable store cards. No libraries.

Medium

Lab View Code

Design Styles

AR / VR Interface

Futuristic augmented and virtual reality UI with holographic elements, translucent panels, and HUD-style overlays.

Hard

Lab View Code

Design Styles

3D Design

Depth-rich interfaces with CSS 3D transforms, perspective effects, layered cards, and dynamic shadows for an immersive spatial feel.

Hard

Lab View Code

Design Styles

Aurora / Gradient Mesh

Smooth, flowing gradient meshes and aurora borealis color washes — organic, ethereal, and visually mesmerizing.

Medium

Lab View Code

Design Styles

Bento UI

Grid-based bento box layouts with asymmetric cards, rounded corners, and clean modular sections — inspired by Apple's product pages.

Medium

Lab View Code

Design Styles

Claymorphism

Puffy, inflated 3D clay shapes with thick outlines, pastel colors, and a playful soft-plastic feel — like children's clay toys.

Medium

Lab View Code

Design Styles

Dark Blue

A deep navy and midnight-blue palette — professional, trustworthy, and atmospheric, perfect for SaaS products and dashboards.

Easy

Lab View Code

Design Styles

Dark Mode

A refined dark interface with dark surfaces, subtle borders, and muted accents — comfortable for extended use and developer-friendly.

Easy

Lab View Code

Design Styles

Bauhaus

The 1919 German art school's aesthetic — primary colors, geometric forms, asymmetric composition, and modernist typography.

Medium

Lab View Code

Design Styles

Glass Dark

Dark glassmorphism — frosted glass panels layered over deep dark backgrounds for a sleek, premium night-mode feel.

Easy

Lab View Code

Design Styles

Brutalism

Raw, confrontational web design with exposed structure, heavy borders, clashing colors, and intentionally broken conventions.

Medium

Lab View Code

Design Styles

Flat Design

Bold, solid colors with zero shadows or depth — crisp geometry and strong iconography-driven interfaces.

Easy

Lab View Code

Design Styles

Illustration-First

Whimsical hand-drawn SVG illustrations take center stage — characters, doodles, and organic shapes define the UI.

Hard

Lab View Code

Design Styles

Material Design

Google's design language — elevation through shadows, bold color, responsive animations, and a structured 8px grid.

Medium

Lab View Code

Design Styles

Minimalist UI

A stripped-back aesthetic built on generous whitespace, neutral palettes, and typographic hierarchy — nothing decorative, everything functional.

Easy

Lab View Code

Design Styles

Isometric 3D

Flat 3D perspective using isometric projection — geometric depth without real 3D rendering.

Hard

Lab View Code

Design Styles

Motion / Kinetic

Animation-first design where transitions, micro-interactions, and movement ARE the design — nothing sits still.

Hard

Lab View Code

Design Styles

Glassmorphism

Frosted glass panels floating over colorful gradients — translucency, blur, and subtle borders define this aesthetic.

Easy

Lab View Code

Design Styles

Miro / Whiteboard

Infinite canvas aesthetics — sticky notes, hand-drawn connectors, collaborative markers, and the feeling of a shared whiteboard.

Medium

Lab View Code

Design Styles

NES Retro / Pixel

Chunky pixel fonts, limited 4-color palettes, and scanline overlays — interface design inspired by 8-bit Nintendo consoles.

Hard

Lab View Code

Design Styles

Newspaper / Editorial

Classic print journalism layout with serif type, column grids, ink-paper contrast, and editorial authority.

Medium

Lab View Code

Design Styles

Terminal / CLI

Monochrome command-line aesthetic with green phosphor text, blinking cursors, and raw functional beauty.

Easy

Lab View Code

Design Styles

Neumorphism

Soft UI that extrudes from a monochromatic surface using dual shadows — giving elements a pillowy, physical feel.

Medium

Lab View Code

Design Styles

Netflix Cinematic

Dark cinematic design with bold red accents, dramatic hero typography, and large imagery — perfect for media and entertainment.

Medium

Lab View Code

Design Styles

Skeuomorphism

Real-world textures, depth, and physical metaphors — interfaces that look like objects you can touch.

Medium

Lab View Code

Design Styles

Purple Space

Deep cosmic backgrounds with neon purple and violet accents — futuristic, electric, and otherworldly.

Medium

Lab View Code

UI Components

Swipe Action

iOS-style swipe-to-reveal action buttons on list items. Swipe left to expose Archive and Delete actions. No libraries.

Medium

Lab View Code

UI Components

Swipe Tabs

Horizontally swipeable tab panels with a sliding indicator. Supports touch swipe gestures and tap navigation. No libraries.

Medium

Lab View Code

UI Components

Swap

DaisyUI-style swap component — toggle between two states (icon/text) with flip, rotate, or fade animations. CSS-only, no JavaScript.

Easy

Lab View Code

Design Styles

Vaporwave

80s nostalgia meets internet surrealism — pastel pink/cyan palettes, retrowave grids, glitch effects, and neon glow.

Medium

Lab View Code

UI Components

Tabs Vertical

Vertical and horizontal tab panels with animated sliding indicator, keyboard navigation, and lazy panel rendering. No dependencies.

Easy

Lab View Code

Components

Tech Stack Icon

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

Easy

Lab View Code

Pages

Team Page

A team / people page with department filters, profile cards with avatar, role, bio, and social links. Hover effects and responsive grid.

Easy

Lab View Code

UI Components

Tag Input

Multi-value tag input — type and press Enter or comma to add tags, click ✕ to remove. Keyboard navigation supported.

Medium

Lab View Code

UI Components

Terminal UI

Terminal / CLI output display with typed command animation, colored output lines, and macOS window chrome. Pure CSS + JS.

Easy

Lab View Code

UI Components

Color Blind Modes

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

Hard

Lab View Code

UI Components

High Contrast Theme

Theme system with high contrast mode compatible with Windows High Contrast and CSS forced-colors media query.

Medium

Lab View Code

UI Components

Text Spacing Control

Adjustable controls for letter-spacing, word-spacing and line-height to meet WCAG 1.4.12 text spacing requirements.

Easy

Lab View Code

UI Components

Text Highlighter

Text where words get highlighted one-by-one with a colored background sweep animation. Each word receives a sequential highlight effect from left to right.

Easy

Lab View Code

UI Components

Text Rotate

Animated text that cycles through a list of words with smooth enter/exit transitions — fade, slide, or typewriter style.

Easy

Lab View Code

Patterns

Theme Toggle

Theme preference pattern for light, dark, and system mode with persistence and no-flash boot logic.

Easy

Lab View Code

UI Components

Time-Off Request Widget

A time-off request form widget for HR/employee management. Includes leave type selector, date range, reason field, and a running list of pending/approved requests.

Easy

Lab View Code

UI Components

Timeline

Vertical timeline with date markers, icons, content cards, and alternating left/right layout variant.

Easy

Lab View Code

UI Components

Time Range Picker

A time range picker with draggable start/end handles on a 24-hour timeline. Ideal for scheduling availability, meeting room booking, or shift planning.

Medium

Lab View Code

UI Components

Toggle Group

Group of toggle buttons for single or multi-selection — like a toolbar or filter chip group. Keyboard navigation with arrow keys.

Easy

Lab View Code

UI Components

Toast Notification Stack

A lightweight toast notification system with success, error, warning, and info variants. Toasts stack, auto-dismiss, and support manual close.

Easy

Lab View Code

UI Components

Touch Target Demo

Interactive demonstration of WCAG 2.5.5 minimum touch target sizes (44x44px) with visual guides and common violation examples.

Easy

Lab View Code

UI Components

iOS-style Toggle Switch

A smooth iOS-inspired toggle switch built with CSS. Supports checked state, disabled state, label association, and a custom color accent. Zero JavaScript.

Easy

Lab View Code

UI Components

Tooltip with Arrow Variants

CSS-only tooltips with four directional arrow variants (top, right, bottom, left). Triggered on hover and focus, with smooth fade-in and accessible markup.

Easy

Lab View Code

UI Components

Tour Spotlight

Product tour component — highlights UI elements with a spotlight overlay, shows tooltip with prev/next navigation.

Hard

Lab View Code

UI Components

Token Counter

Real-time token count indicator that estimates tokens as you type, with a visual limit bar and warning state. No libraries.

Easy

Lab View Code

UI Components

Typing Indicator

A smooth, rhythmic "user is typing" animation for chat interfaces and real-time collaboration tools.

Easy

Lab View Code

UI Components

Transition Card

Scroll-triggered card transitions with smooth fade, blur, and scale effects. Cards smoothly transition as you scroll through the sequence.

Medium

Lab View Code

UI Components

Unit Converter

A comprehensive unit conversion tool for length, weight, and temperature. Featuring a clean, tabbed interface.

Medium

Lab View Code

UI Components

Tweet Card

Styled card resembling an embedded tweet/X post with avatar, display name, handle, text, and engagement metrics.

Easy

Lab View Code

UI Components

Upload Progress

Multi-file upload with individual progress bars, file type icons, cancel button, retry on error, and overall summary. No libraries.

Medium

Lab View Code

UI Components

Custom Video Player

A fully customizable HTML5 video player with sleek bespoke controls, progress scrubbing, and volume management.

Medium

Lab View Code

UI Components

Video Text

Text that acts as a mask showing video or animated gradients through the letter shapes using mix-blend-mode and background-clip techniques.

Medium

Lab View Code

UI Components

User Profile Card

A SaaS-style user profile card with avatar, cover image, name, role, stats, and action buttons.

Easy

Lab View Code

UI Components

Verify Email

Email verification page with 6-digit OTP input, auto-advance focus, paste support, resend countdown, and success animation. No dependencies.

Easy

Lab View Code

UI Components

Warp Background

A canvas-based warped grid mesh background with flowing sine-wave distortions that animate over time, creating an organic warped-space effect.

Medium

Lab View Code

UI Components

Video Thumbnail Grid

Video thumbnail grid with play overlay, duration badge, hover preview shimmer, and category filter tabs. Pure CSS.

Easy

Lab View Code

Pages

Wishlist Page

An e-commerce wishlist / saved items page with product cards, move-to-cart action, remove button, share wishlist, and empty state. No libraries.

Easy

Lab View Code

UI Components

Watermark

Canvas-based watermark overlay generator — text or image watermark, configurable opacity, angle, repeat pattern.

Medium

Lab View Code

Patterns

Virtual List

Windowed list rendering pattern for very large datasets using fixed-row virtualization.

Hard

Lab View Code

UI Components

Image Zoom / Magnifier

A high-performance image zooming component with a magnifier lens effect. Ideal for product galleries and photography showcases.

Medium

Lab View Code

UI Components

Word Counter

A real-time word and character counter with added features like reading time estimation and sentence counting.

Easy

Lab View Code