Action Dropdown Menu
A three-dot floating menu with grouped action items, copy-to-clipboard, keyboard support, and snackbar feedback.
Code Tabs Viewer
Multi-target tabbed code viewer with a scrollable tab row, syntax-highlighted pre block, and copy-to-clipboard button.
CodePen Embed
Lazy-loaded CodePen iframe that defers creation until the user clicks a placeholder, keeping page load fast.
Collection Carousel
Auto-scrolling horizontal carousel with snap points, arrow navigation, pause on hover, and a collection selector.
Filter Search Bar
Inline search input with scrollable category pill filters, active state, result counter, and keyboard shortcut hint.
Hero Code Space Background
Immersive 3D perspective background with floating code panels, scroll-driven depth animation, and responsive depth culling.
Navigation Header
Sticky header with logo, desktop nav links, GitHub icon, and a slide-in mobile drawer menu with backdrop blur.
Resource Card
Grid card for code resources with tech badges, difficulty label, target framework pills, and a save-to-favorites toggle.
Showcase Preview Card
Live-preview card with an embedded iframe, difficulty badge, save-to-favorites, and Lab / View Code action buttons.
Site Footer
Minimal dark-themed footer with navigation link groups, brand tagline, and MIT license attribution.
Tech Stack Icon
SVG icon pill for technology names — maps strings like "react", "tailwind", or "astro" to their brand SVG paths with consistent sizing.
Accessible Color Token System
Design token system with semantic color variables that guarantee WCAG contrast compliance across all token combinations.
Accessible Dark/Light Toggle
Dark and light mode toggle that maintains WCAG AA contrast ratio in both themes with smooth transition.
Accessible Media Captions
Video player with synchronized captions and subtitles, caption customization controls and keyboard-accessible media controls.
Accessible Palette Generator
Generates color palettes that automatically meet WCAG 2.1 contrast ratio requirements for text and UI elements.
ARIA Carousel
Accessible carousel with play/pause controls, slide announcements and full keyboard navigation following ARIA carousel pattern.
ARIA Combobox
Accessible combobox autocomplete implementing ARIA 1.2 combobox pattern with keyboard navigation and screen reader support.
ARIA Live Regions
Patterns for ARIA live regions demonstrating polite, assertive and status announcements for dynamic content updates.
ARIA Modal Pattern
Accessible modal dialog with focus trap, escape-to-close and screen reader announcements following WAI-ARIA dialog pattern.
ARIA Tabs Pattern
Fully accessible tab interface implementing WAI-ARIA tabs pattern with keyboard navigation and proper role attributes.
ARIA Tree View
Accessible tree view component with full keyboard navigation and ARIA tree roles for hierarchical data display.
Astro + Tailwind Starter
Astro starter with Tailwind CSS integration, content collections, island architecture, and zero-JS-by-default static site generation.
Astro Project Architecture
Astro project structure with content collections, island architecture, file-based routing, and integration patterns.
Bun + Hono API Starter
Lightweight API starter with Bun runtime and Hono framework — blazing fast HTTP, TypeScript-first, with middleware, routing, and zero config.
CI/CD Pipeline Architecture (GitHub Actions)
GitHub Actions pipeline structure with reusable workflows, matrix strategies, environment protection rules, and multi-stage deployment.
Cognitive Load Reducer
Simplified mode that reduces animations, decorative elements, color complexity and information density for users with cognitive disabilities.
Color Blind Modes
Color vision deficiency simulation with toggleable modes for protanopia, deuteranopia and tritanopia using SVG filters.
Color Contrast Checker
Real-time WCAG contrast ratio checker that evaluates color pairs against AA and AAA standards with live preview.
Dyslexia Friendly Mode
Dyslexia-friendly reading mode with OpenDyslexic font, increased spacing, adjusted line height and muted background colors.
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.
Focus Management
Focus management patterns for single-page applications handling route changes, dynamic content insertion and focus restoration.
GraphQL Schema Architecture
GraphQL API structure comparing schema-first vs code-first approaches with domain-based module organization and resolver patterns.
High Contrast Theme
Theme system with high contrast mode compatible with Windows High Contrast and CSS forced-colors media query.
Keyboard Navigable Menu
Menu component fully navigable by keyboard using arrow keys, Home, End and type-ahead search following WAI-ARIA menu pattern.
Keyboard Shortcuts Overlay
GitHub-style keyboard shortcuts cheat sheet overlay triggered by pressing the question mark key with categorized shortcut listings.
Micro-Frontend Architecture (Module Federation)
Micro-frontend pattern using Webpack Module Federation with independent host/remote applications sharing dependencies at runtime.
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.
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.
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.
Next.js App Router Architecture
Complete Next.js App Router project structure with nested layouts, server/client components, route handlers, and middleware patterns.
Nx Monorepo Architecture
Nx monorepo with project graph, affected commands, computation caching, and the 80/20 apps-to-libs split pattern.
PostgreSQL Schema Patterns
PostgreSQL schema design patterns including multi-schema organization, migration workflows, indexing strategies, and schema-as-code with Drizzle/Prisma.
Prisma Schema Architecture
Prisma schema structure with models, relations, multi-file schemas, migration workflow, and the Prisma Client generation pipeline.
PWA Starter (Vite + Workbox)
Progressive Web App starter with Vite PWA plugin, Workbox service worker, web manifest, offline support, and install prompts.
React + TypeScript + Vite Starter
Production-ready React starter with Vite, TypeScript, ESM dev server, and Rollup production builds. Includes path aliases and optimal defaults.
React + Vite Architecture
Modern React + Vite project structure with feature-based organization, path aliases, and optimal dev/build configuration.
React Admin Dashboard Starter
Admin dashboard boilerplate with React, shadcn/ui, data tables, charts, sidebar navigation, and dark/light mode. Multiple framework options compared.
Reading Guide
Reading guide line that follows the cursor or scroll position to help users track their reading position across lines of text.
REST API — Clean Architecture (Node.js)
Node.js REST API structure following Clean Architecture with separated domain, application, infrastructure, and interface layers.
Roving Tabindex
Roving tabindex pattern implementation for toolbar and list components enabling single Tab stop with arrow key navigation.
RTL Card Grid
Responsive card grid that automatically flips layout between LTR and RTL using CSS logical properties with no JavaScript required.
RTL Data Table
Data table with RTL-aware columns, sorting indicators and pagination that properly mirrors for right-to-left languages.
RTL Form
Bidirectional form with validation and labels that properly aligns for both LTR and RTL languages using CSS logical properties.
RTL Layout
Complete right-to-left layout with sidebar, navigation and content area using CSS logical properties for seamless LTR/RTL switching.
RTL Mixed Text
Demonstrates proper handling of bidirectional text mixing Arabic and English content using Unicode BiDi algorithm and CSS properties.
RTL Navigation
Navigation bar and breadcrumb with full bidirectional support, properly mirroring icons and layout for RTL languages.
Screen Reader Only Utilities
CSS utility classes and patterns for visually hidden content that remains accessible to screen readers and assistive technology.
Semantic Landmarks
Demonstration of HTML5 semantic landmarks (header, nav, main, aside, footer) with proper ARIA labeling for screen reader navigation.
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.
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.
Text Spacing Control
Adjustable controls for letter-spacing, word-spacing and line-height to meet WCAG 1.4.12 text spacing requirements.
Touch Target Demo
Interactive demonstration of WCAG 2.5.5 minimum touch target sizes (44x44px) with visual guides and common violation examples.
Turborepo Monorepo Architecture
Turborepo monorepo structure with shared packages, task pipelines, remote caching, and parallel execution for multi-app projects.
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.
Vue 3 + Vite Starter
Official Vue 3 starter with Vite, TypeScript, Vue Router, Pinia state management, and Composition API. Interactive CLI with optional features.
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.
Animated Beam
SVG animated beam/line connecting two elements with a flowing dash animation, perfect for flow diagrams and connection visualizations.
Animated Gradient Text
Text with animated gradient colors flowing through it using background-clip text and CSS keyframe animation.
Animated Grid Pattern
An SVG grid pattern with randomly highlighted cells that pulse and glow, perfect for dark hero sections and backgrounds.
Animated List
A list component where items animate in with staggered entrance effects — slide and fade from alternating directions for a dynamic reveal.
Animated Shiny Text
Text with a shining shimmer highlight that sweeps across periodically using an animated linear gradient.
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.
Arc Timeline
A timeline displayed along a curved semicircle arc. Events are positioned radially with connecting dots, creating a unique non-linear timeline visualization.
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.
Aurora Text
Text with aurora borealis colors (green, purple, blue) flowing through it with animated gradient layers and optional blur glow.
Bento Grid
Responsive bento-style grid layout with varied cell sizes, some spanning multiple columns or rows, for modern dashboard and showcase designs.
Blur Fade
Elements that fade in from blurred to sharp as they enter the viewport on scroll, creating a smooth reveal effect.
Border Beam
A card with an animated beam of light that travels continuously around its border using conic-gradient and CSS keyframes.
Box Reveal
Content revealed by a colored box that slides across then exits, creating a dramatic wipe-reveal effect.
Button Group
Group of buttons joined together in a segmented control style with shared borders, active state toggling, and rounded end caps.
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.
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.
Combobox
Searchable dropdown select with real-time filtering, keyboard navigation (arrow keys, enter, escape), and accessible ARIA attributes.
Confetti Explosion
Canvas-based confetti explosion triggered by button click with colorful particles, gravity, rotation, and fade-out effects.
Cool Mode
Fun particle burst of emojis and shapes that explode from every click point with physics-based motion and fadeout.
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.
Dot Pattern
A repeating dot pattern background using radial-gradient, fully customizable via CSS custom properties for spacing, radius, and color.
Flickering Grid
A canvas-based animated grid where cells randomly flicker and pulse their opacity, creating a living, breathing background texture.
Flip Text
Words that flip and rotate vertically to cycle through different words with smooth CSS perspective transitions.
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.
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.
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.
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.
Icon Cloud
A 3D tag cloud of technology icons orbiting in space using Fibonacci sphere positioning and smooth rotation animation.
Input Group
Input fields with addon elements — icon prefix, button suffix, or text prepend like "$" — all with seamless shared borders.
Interactive 3D Globe
Interactive 3D globe rendered on canvas with dot-matrix sphere, auto-rotation, and drag-to-rotate interaction — no Three.js required.
Interactive Grid Pattern
A canvas-based grid pattern that reacts to mouse movement, illuminating cells near the cursor with distance-based brightness falloff.
Interactive Hover Button
A button with creative multi-layered hover effects including background fill, text color inversion, and border animation.
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.
Lens Effect
Magnifying glass lens effect that follows the cursor, showing a zoomed circular area over content with smooth tracking and customizable zoom level.
Level Layout
Horizontal alignment layout that evenly spaces items or pushes them to edges with left, center, and right slots, stacking responsively on mobile.
Light Rays
Atmospheric light rays emanating from a point, like sunlight through clouds, using CSS gradients and animated opacity.
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.
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.
Magic Card
Card with a radial gradient spotlight that follows the mouse cursor, creating an interactive lighting effect.
Media Object
Social media style layout with avatar on the left and content (name, text, meta) on the right, supporting nested replies.
Message Block
Colored message blocks with optional header, body, and dismiss button in info, success, warning, and danger variants with fade-out animation.
Meteors
Animated shooting stars and meteors falling diagonally across the screen with glowing trails, random positions, and staggered animation delays.
Morphing Text
Text that smoothly morphs between different words using an SVG filter blur technique for seamless transitions.
Neon Gradient Card
Card with an animated neon glow border that shifts through vivid colors using keyframe animations and box-shadow.
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.
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.
Orbiting Circles
Multiple circles orbiting around a central element at different speeds and radiuses using pure CSS animation.
Particles System
Interactive canvas particle system with connected lines between nearby particles and mouse-driven attraction and repulsion.
Pixel Image
Image that assembles from scattered pixels or reveals pixel-by-pixel on click, using canvas for dynamic pixel manipulation.
Progressive Blur
A gradient blur effect where content gets progressively more blurry at the edges, like a fade-to-blur overlay.
Pulsating Button
A call-to-action button with a pulsing glow ring animation that draws attention and encourages clicks.
Rainbow Button
A vibrant button with an animated rainbow gradient border that continuously cycles through the color spectrum.
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.
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.
Ripple Button
A Material Design inspired button that shows a ripple wave effect expanding from the exact click point.
Ripple Effect
Expanding concentric ripple circles emanating from the click point on any surface, inspired by Material Design.
Scratch to Reveal
Interactive scratch card effect where users drag to erase an overlay and reveal hidden content underneath.
Scroll Velocity Text
Horizontal scrolling text marquee that speeds up or slows down based on the user's scroll velocity.
Shimmer Button
A button with a shimmering light sweep effect that glides across periodically, creating an elegant loading or attention animation.
Shine Border
Container with a glowing, shining animated border using a rotating gradient that creates a polished metallic edge effect.
Shiny Button
A button with a glossy reflection effect that glides across on hover, creating a polished premium feel.
Smooth Cursor
Custom cursor with a dot and ring that smoothly follow the actual cursor with a spring-like lag effect.
Sparkles Text
Text with floating sparkle particles that animate around it, creating a magical glittering effect using positioned elements.
Spinner
Multiple spinner and loading animations — circular, dots, bars, and pulse — in various sizes and colors with pure CSS keyframes.
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.
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.
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.
Striped Pattern
Beautiful diagonal or horizontal repeating stripes using CSS gradients with customizable colors, angle, and size via CSS custom properties.
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.
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.
Tweet Card
Styled card resembling an embedded tweet/X post with avatar, display name, handle, text, and engagement metrics.
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.
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.
Warp Background
A canvas-based warped grid mesh background with flowing sine-wave distortions that animate over time, creating an organic warped-space effect.
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).
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.
Clausic — Pokemon Collection
MIDI pieces across 6 Pokemon generations with piano-roll visualizer — Kanto, Johto, Hoenn, Sinnoh, Unova, Kalos with region-specific instruments and scales.
Clausic — 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.
Vaporwave Synth
Generative vaporwave synthesizer with 10 tracks — Web Audio API step sequencer with supersaw pads, bass, lead, and drums. Click play and browse.
Analytics Page
A data-driven analytics dashboard with date range picker, area/funnel charts, heatmap, metric comparisons, and exportable data table. No libraries.
Blog Listing Page
A blog index page with featured post hero, category filter tabs, search bar, post grid cards, and pagination. No external libraries.
Changelog Page
A version-based changelog page with timeline, version badges, categorized changes (added, changed, fixed, removed), and filter by type. No libraries.
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.
FAQ Page
A FAQ / help center page with categorized accordion sections, search with instant filtering, and a contact support CTA. No external libraries.
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.
Invoice Page
An invoice history page with list of invoices, status filters, detail modal, and downloadable invoice view. No external libraries.
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.
Onboarding Page
A multi-step onboarding / welcome flow with progress indicator, profile setup, preferences selection, team invite, and completion celebration. No libraries.
Search Results Page
A search results page with query input, filter sidebar, result cards with highlighted matches, sorting options, and pagination. No libraries.
Settings Page
A tabbed settings page with profile editing, notification preferences, security options, and appearance controls. Pure vanilla JS and CSS.
Shop Category Page
An e-commerce category page with product grid, sidebar filters (price range, brand, rating), sort dropdown, and pagination. No libraries.
Status Page
A system status page with service health indicators, uptime bars, incident timeline, and overall status banner. No external libraries.
Team Page
A team / people page with department filters, profile cards with avatar, role, bio, and social links. Hover effects and responsive grid.
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.
3D Design
Depth-rich interfaces with CSS 3D transforms, perspective effects, layered cards, and dynamic shadows for an immersive spatial feel.
AR / VR Interface
Futuristic augmented and virtual reality UI with holographic elements, translucent panels, and HUD-style overlays.
Aurora / Gradient Mesh
Smooth, flowing gradient meshes and aurora borealis color washes — organic, ethereal, and visually mesmerizing.
Bauhaus
The 1919 German art school's aesthetic — primary colors, geometric forms, asymmetric composition, and modernist typography.
Bento UI
Grid-based bento box layouts with asymmetric cards, rounded corners, and clean modular sections — inspired by Apple's product pages.
Brutalism
Raw, confrontational web design with exposed structure, heavy borders, clashing colors, and intentionally broken conventions.
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.
Claymorphism
Puffy, inflated 3D clay shapes with thick outlines, pastel colors, and a playful soft-plastic feel — like children's clay toys.
Dark Blue
A deep navy and midnight-blue palette — professional, trustworthy, and atmospheric, perfect for SaaS products and dashboards.
Dark Mode
A refined dark interface with dark surfaces, subtle borders, and muted accents — comfortable for extended use and developer-friendly.
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.
Drawer Navigation
Mobile side-drawer navigation with slide-in panel, backdrop overlay, close button, and stacked nav links.
FAB Navigation
Floating action button with expandable speed-dial actions. Tap the FAB to reveal stacked action buttons with staggered animation.
Flat Design
Bold, solid colors with zero shadows or depth — crisp geometry and strong iconography-driven interfaces.
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.
Glass Dark
Dark glassmorphism — frosted glass panels layered over deep dark backgrounds for a sleek, premium night-mode feel.
Glassmorphism
Frosted glass panels floating over colorful gradients — translucency, blur, and subtle borders define this aesthetic.
Illustration-First
Whimsical hand-drawn SVG illustrations take center stage — characters, doodles, and organic shapes define the UI.
Isometric 3D
Flat 3D perspective using isometric projection — geometric depth without real 3D rendering.
Material Design
Google's design language — elevation through shadows, bold color, responsive animations, and a structured 8px grid.
Minimalist UI
A stripped-back aesthetic built on generous whitespace, neutral palettes, and typographic hierarchy — nothing decorative, everything functional.
Miro / Whiteboard
Infinite canvas aesthetics — sticky notes, hand-drawn connectors, collaborative markers, and the feeling of a shared whiteboard.
Motion / Kinetic
Animation-first design where transitions, micro-interactions, and movement ARE the design — nothing sits still.
NES Retro / Pixel
Chunky pixel fonts, limited 4-color palettes, and scanline overlays — interface design inspired by 8-bit Nintendo consoles.
Netflix Cinematic
Dark cinematic design with bold red accents, dramatic hero typography, and large imagery — perfect for media and entertainment.
Neumorphism
Soft UI that extrudes from a monochromatic surface using dual shadows — giving elements a pillowy, physical feel.
Newspaper / Editorial
Classic print journalism layout with serif type, column grids, ink-paper contrast, and editorial authority.
Purple Space
Deep cosmic backgrounds with neon purple and violet accents — futuristic, electric, and otherworldly.
Rectangular Navigation
Compact vertical icon sidebar for mobile apps. Always-visible narrow rail with icon buttons and active indicator.
Rudder Navigation
Bottom navigation with a raised central FAB button. Combines standard tab items with a prominent primary action.
Sheet Navigation
Mobile bottom sheet with drag handle, slide-up animation, and action list. Swipe or tap to dismiss.
Skeuomorphism
Real-world textures, depth, and physical metaphors — interfaces that look like objects you can touch.
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.
Terminal / CLI
Monochrome command-line aesthetic with green phosphor text, blinking cursors, and raw functional beauty.
Three Dots Menu
Mobile overflow menu triggered by a three-dots (kebab) button. Dropdown appears with action items and smooth fade-in animation.
Vaporwave
80s nostalgia meets internet surrealism — pastel pink/cyan palettes, retrowave grids, glitch effects, and neon glow.
Add to Cart Effect
Animated add-to-cart feedback with badge bump and flying item — satisfying shopping interaction.
Drawer Slide Effect
Slide-in/out drawer panel from any edge — smooth gesture-friendly panel transition for menus and sheets.
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.
Skeleton Loading Effect
Animated skeleton placeholder with shimmer pulse — smooth loading state for cards and content blocks.
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.
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.
Button Press Effect
Scale and shadow on press with optional success checkmark — satisfying click feedback for buttons and controls.
Code Block (React)
Syntax-highlighted code block with copy button, line numbers, and highlighted lines. React + Tailwind.
Diff Viewer (React)
Side-by-side and unified code diff viewer with split toggle. React + Tailwind. Dark theme.
Modal Enter Effect
Fade and scale enter/exit for modals and overlays — smooth open/close transition.
Nav Underline Effect
Animated underline on active nav link — smooth indicator for tabs and breadcrumbs.
404 Not Found Page
An animated 404 error page with a glitch text effect, floating illustration, and navigation links back to safety. Zero dependencies.
500 Server Error Page
A clean, professional 500 internal server error page with status badge, retry button, and support contact link. Pure CSS.
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.
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.
AI Chat Interface
AI chat UI with message bubbles, streaming text simulation, typing indicator, and auto-scroll. No libraries.
AI Response Card
AI-generated result card with model badge, response text area, copy/thumbs-up/thumbs-down actions, and regenerate button.
AI Thinking Loader
Collection of 'Thinking…' animated loaders for AI interfaces: pulse dots, shimmer bar, orbit ring, and wave variants.
Announcement Banner
Full-width dismissable announcement banner with icon, message, optional CTA link, and localStorage persistence. No libraries.
API Status Board
Service status dashboard with operational/degraded/outage indicators, incident timeline, and uptime percentage. Vanilla JS.
Attachment List
File attachment list with type icons, file size, download link, remove button, and upload drop zone. CSS-first.
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.
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.
Certificate of Completion
Award or completion certificate with decorative border, seal, signature line, and course/recipient details. Pure CSS.
Checkout Page
A multi-step checkout flow: cart review → shipping → payment → confirmation. Client-side validation and step indicator. No libraries.
Citation Tooltip
Inline citation markers with hover tooltip showing source title, URL, and snippet. Used in AI-generated content. No libraries.
Code Block
Syntax-highlighted code block with copy button, language badge, line numbers, and line-highlight support. No libraries.
Code Diff Viewer
Side-by-side code diff viewer with added/removed line highlighting, line numbers, and unified/split toggle. No libraries.
Contact Page
A contact page with a validated multi-field form, map placeholder, office address cards, and social links. No libraries.
Custom Focus Ring
Custom visible focus ring system using CSS :focus-visible — high-contrast, brand-colored, and offset variants. WCAG compliant.
Directions Card
Step-by-step directions card with numbered steps, turn icons, distance/time per step, and total journey summary. Pure CSS.
Distance Badge
Distance indicator badges for maps and listings — km/mi, walking/driving/transit icons, and ETA variants. Pure CSS.
Document Preview Card
PDF/document preview card with page thumbnail placeholder, file metadata, download and open buttons. Pure CSS.
Email Verification / OTP Code
Email verification template with large OTP code display, expiry notice, and security footer. Minimal and focused design.
File Tree
Collapsible file explorer tree with folder/file icons, expand/collapse all, active file highlight, and right-click context menu.
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.
Font Size Control
Accessible font size adjuster with decrease/reset/increase buttons, live preview, and localStorage persistence. Vanilla JS.
Gesture Carousel
A touch-enabled carousel with momentum, snap-to-slide, and dot indicators. Swipe with velocity to advance multiple slides. No libraries.
Hamburger Menu
An animated hamburger icon that morphs to an X and opens a fullscreen navigation overlay with staggered link reveals. No libraries.
High Contrast Toggle
Accessibility toolbar with high contrast mode, dyslexia-friendly font, and large text toggle. Persists to localStorage.
Image Gallery Grid
Masonry photo gallery with CSS columns, hover zoom, and a lightbox with keyboard navigation and swipe support.
Inline Alert
Inline alert component with info, success, warning, and error variants. Supports icon, title, description, and dismiss button.
Invoice / Receipt Email
Invoice email with line-item table, subtotal/tax/total breakdown, and payment details. Email-safe table layout.
JSON Viewer
Collapsible JSON tree viewer with syntax coloring, expand/collapse nodes, copy path, and search highlighting. No libraries.
Keyboard Shortcut Sheet
Keyboard shortcut cheat sheet with grouped categories, KBD key styling, and searchable filter. Pure CSS and minimal JS.
Location Pin Card
Location card with map placeholder, animated pin drop, address details, distance badge, and directions button. Pure CSS.
Log Viewer
Scrollable log output panel with level filters (info/warn/error/debug), search, auto-scroll toggle, and color-coded lines.
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.
Maintenance Page
A scheduled maintenance page with a countdown timer, progress bar, and email notification signup. No libraries.
Map Embed Card
Map embed card with OpenStreetMap iframe, location pin overlay, address text, and directions CTA. No API key needed.
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.
Mobile Stepper
A dot/step indicator for onboarding flows with animated transitions between steps. Includes skip and next/get-started buttons. No libraries.
Model Selector
LLM model picker dropdown with provider logos, context window size, capability tags, and active model indicator.
Newsletter Email Template
Newsletter email with header, featured article card, secondary article list, and footer unsubscribe link. Table-based layout.
Notification Badge
Animated badge counter on icons with pulse ring, count overflow (99+), and CSS-only variants. Zero JavaScript.
Notification Center
Dropdown notification panel with unread badge, mark-all-read, grouped notifications, and infinite-scroll loading. No libraries.
Offline Page
A PWA offline fallback page with network detection, automatic reconnect polling, and a cached content list. Pure CSS + minimal JS.
Order Confirmation Email
E-commerce order confirmation email with order number, product summary, shipping address, and delivery estimate. Table-based.
Order Confirmation Page
An order success page with animated checkmark, order summary, delivery timeline, and continue shopping CTA. Pure CSS.
Password Reset Email
Clean password reset email with expiry notice, security warning, and action button. Table-based, email-safe HTML.
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.
Portfolio Case Study Page
A single project case study page with hero, overview stats, problem/solution sections, image gallery, and results metrics. Pure CSS.
Pricing Page
A full pricing page with monthly/annual toggle, three-tier plan cards, feature comparison table, and FAQ accordion. No libraries.
Print-Ready Invoice
Print-ready invoice layout with @print media query — hides UI chrome, formats tables correctly, and adds page break rules.
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.
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.
Prompt Input
Enhanced prompt textarea with live token counter, character limit bar, attach file button, and submit shortcut. No libraries.
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.
Reduced Motion Demo
Showcase of CSS prefers-reduced-motion patterns — before/after animations that respect the OS motion preference. Pure CSS.
Report Cover Page
Document or report cover page with title, subtitle, branding, date, and department details. Professional print-ready layout.
Schema Diagram
Visual ER / database schema diagram built with SVG — tables, columns, data types, and relationship arrows. No libraries.
Screen Reader Announcer
ARIA live region announcer that broadcasts status messages to screen readers without visual disruption. Vanilla JS utility.
Skip Navigation
Accessible skip-to-content link that appears on keyboard focus, letting screen reader and keyboard users bypass repeated navigation.
Snackbar / Bottom Toast
Material-style snackbar that slides up from the bottom with optional action button, auto-dismiss, and queue support. No libraries.
Store Locator
Store list with map placeholder, search/filter by city, distance sorting, and clickable store cards. No libraries.
Streaming Text Effect
LLM-style streaming text output that renders characters progressively with a blinking cursor. Configurable speed and delay.
Swipe Action
iOS-style swipe-to-reveal action buttons on list items. Swipe left to expose Archive and Delete actions. No libraries.
Swipe Tabs
Horizontally swipeable tab panels with a sliding indicator. Supports touch swipe gestures and tap navigation. No libraries.
Team Invite Email
Team invitation email with sender avatar, workspace name, role badge, and accept/decline CTA buttons. Table-based HTML.
Terminal UI
Terminal / CLI output display with typed command animation, colored output lines, and macOS window chrome. Pure CSS + JS.
Token Counter
Real-time token count indicator that estimates tokens as you type, with a visual limit bar and warning state. No libraries.
Upload Progress
Multi-file upload with individual progress bars, file type icons, cancel button, retry on error, and overall summary. No libraries.
Video Thumbnail Grid
Video thumbnail grid with play overlay, duration badge, hover preview shimmer, and category filter tabs. Pure CSS.
Welcome Email Template
Table-based welcome/onboarding email with hero, feature highlights, and CTA button. Email-safe HTML with inline styles.
Booking Reservations Schema
Relational schema for reservations with resources, availability slots, bookings, and payment records.
CMS Blog Schema
Relational schema for content management with authors, posts, tags, publishing workflow, and media.
CRM Sales Schema
Relational schema for CRM sales pipelines with leads, accounts, contacts, deals, and activities.
Ecommerce Core Schema
Core relational schema for ecommerce with users, catalog, inventory, orders, and payments.
LMS Education Schema
Relational schema for learning platforms with courses, lessons, enrollments, and progress tracking.
Marketplace Schema
Relational schema for a two-sided marketplace with buyers, sellers, listings, transactions, and payouts.
SaaS Multi Tenant Schema
Multi-tenant SaaS relational schema with organizations, members, roles, subscriptions, and billing.
Support Helpdesk Schema
Relational schema for support ticketing with SLA policies, comments, assignments, and status history.
Animated Like Button
A micro-interaction focused like button with smooth heart animations and popping effects.
Audio Player
A stylish audio player with playlist support, album art display, and smooth progress tracking.
Calculator
A clean, functional calculator with support for basic arithmetic operations and keyboard support.
Countdown Timer
A customizable countdown timer for events and deadlines. Features a sleek circular progress indicator and automatic cleanup.
Currency Converter
A practical currency conversion tool with support for major global currencies and live exchange rate fetching.
Custom Video Player
A fully customizable HTML5 video player with sleek bespoke controls, progress scrubbing, and volume management.
Digital Clock
A sleek, modern digital clock with date and seconds display. Uses CSS glassmorphism and real-time updates.
Follow/Subscribe Toggle
A sleek, state-aware button for follow or subscribe actions, featuring smooth label transitions and color shifting.
Image Comparison Slider
A smooth, interactive before-and-after image comparison slider. Perfect for showcasing edits, redesigns, or transformations.
Image Zoom / Magnifier
A high-performance image zooming component with a magnifier lens effect. Ideal for product galleries and photography showcases.
Interactive Comment Box
A clean, expandable comment input component with user avatar, character limits, and smooth focus states.
Live Clock (Analog + Digital)
A comprehensive real-time clock component featuring both a classic analog face and a modern digital readout.
Live Search with Debounce
A real-time search interface that filters results as you type, optimized with debouncing to minimize performance overhead.
Memory Card Game
A matching card game with smooth 3D flip animations, move counting, and a win-state celebration.
Podcast Player
A specialized player optimized for longer spoken-word content. Includes skip forward/back buttons and variable playback speed.
Poll / Voting Widget
A clean voting interface with real-time percentage visualizations and satisfying result animations.
Quiz Widget
An interactive quiz component with real-time scoring, progress tracking, and result summaries.
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.
Smart Share Button
A high-utility share button that uses the Web Share API when available, with a tailored fallback menu for desktop browsers.
Social Media Feed Card
A pixel-perfect social media feed card inspired by modern platforms. Includes support for images, metrics, and nested comments.
Stock Ticker
A scrolling stock and crypto ticker with real-time price simulations and trend indicators.
Stopwatch
A precision stopwatch with lap tracking, start/split/reset controls, and smooth animations.
Typing Indicator
A smooth, rhythmic "user is typing" animation for chat interfaces and real-time collaboration tools.
Unit Converter
A comprehensive unit conversion tool for length, weight, and temperature. Featuring a clean, tabbed interface.
Word Counter
A real-time word and character counter with added features like reading time estimation and sentence counting.
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.
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.
Breadcrumb Nav
Accessible breadcrumb navigation with structured data, truncation for deep paths, and home icon. Pure CSS + minimal JS.
Bulk Actions
Multi-select grid pattern with a sticky bulk action bar for archive, tag, and delete flows.
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.
Chat Widget
Floating chat widget with bubble toggle, message thread, typing indicator, emoji picker, and auto-scroll. No dependencies.
Comment Thread
Nested comment thread with replies, likes, collapse/expand, relative timestamps, and inline reply form. No dependencies.
Copy to Clipboard
Multi-target copy pattern for code, URLs, and form fields with success and fallback feedback.
CRUD Table
Full CRUD table pattern with create, inline edit, delete actions, sorting, pagination, and form validation.
Debounced Search
Search input pattern with debounce timing, loading state, and stale-request result protection.
Footer Links
Multi-column site footer with logo, link groups, newsletter subscribe input, social icons, and legal row. Pure CSS responsive layout.
Forgot Password
Forgot password flow with email input, animated success state, resend countdown timer, and back-to-login link. No dependencies.
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.
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.
Infinite Scroll
Infinite list loading pattern driven by an IntersectionObserver sentinel and batch rendering.
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.
Lazy Load
Image lazy-loading pattern with placeholders and progressive reveal using IntersectionObserver.
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.
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.
Loading Skeleton
Page-level skeleton state pattern with a controlled transition into real content.
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.
Menubar App
Desktop-style application menubar (File, Edit, View…) with nested submenus, keyboard shortcuts display, and full keyboard navigation.
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.
Notification Bell
Notification bell icon with unread badge, dropdown notification feed, mark-as-read, mark-all-read, and grouping by Today/Earlier. No dependencies.
Optimistic UI
Optimistic mutation pattern for list add and remove actions with rollback on simulated failures.
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.
Pricing Table
Pricing table with monthly/yearly toggle (20% discount), 3-tier cards, feature comparison list, popular badge, and CTA buttons. Pure CSS + JS.
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.
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.
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.
Register Page
Sign-up page with name, email, password, and confirm password fields, real-time strength meter, terms checkbox, and validation. No dependencies.
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.
Search Filter
Lightweight search plus sidebar filter pattern with URL query synchronization and live result updates.
Shopping Cart
Slide-out shopping cart drawer with item list, quantity controls, remove items, coupon code input, order summary, and checkout CTA. No dependencies.
Sidebar Admin
Collapsible admin sidebar with icon-only mode, grouped navigation sections, active state, and mobile overlay. No dependencies.
Sortable Table
Sort plus column-resize table pattern with no selection or pagination complexity.
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.
Tabs Vertical
Vertical and horizontal tab panels with animated sliding indicator, keyboard navigation, and lazy panel rendering. No dependencies.
Theme Toggle
Theme preference pattern for light, dark, and system mode with persistence and no-flash boot logic.
Treemap
A proportional treemap that visualizes hierarchical data as nested rectangles. Implements a squarified layout algorithm, color-coded groups, hover tooltips, and animated entrance.
Verify Email
Email verification page with 6-digit OTP input, auto-advance focus, paste support, resend countdown, and success animation. No dependencies.
Virtual List
Windowed list rendering pattern for very large datasets using fixed-row virtualization.
Admin Layout
A complete admin dashboard shell layout with collapsible sidebar, top navbar, and main content area. Mobile-responsive with hamburger toggle.
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.
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.
Calendar View
A full-featured monthly calendar with event creation, editing, and deletion. Supports multiple event categories and drag-to-create on day cells.
Dashboard Widget
A draggable, resizable dashboard widget system. Widgets can be minimized, refreshed, and rearranged to customize the dashboard layout.
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.
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.
Employee Schedule
A detailed employee scheduling view with week/day views, shift assignment, conflict detection, and total hours calculation per employee.
Kanban Board
A full Kanban board with drag-and-drop cards between columns, inline card creation, priority labels, and assignee avatars.
Multi-Step Form
A multi-step onboarding form with animated step transitions, progress indicator, validation, and a final review screen.
Scheduler Timeline
A Gantt-style project scheduler timeline with draggable tasks, milestones, and dependency arrows. Shows task progress and team assignments.
Search Autocomplete
A rich search autocomplete input with categorized results, keyboard navigation, recent searches, and command shortcuts. Similar to Notion or Linear's search.
Settings Panel
A slide-in settings panel (sheet/drawer) with tabbed sections for profile, notifications, appearance, and security settings.
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.
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.
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.
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.
User Profile Card
A SaaS-style user profile card with avatar, cover image, name, role, stats, and action buttons.
Alert Banner
Contextual alert banners in four semantic variants — info, success, warning, and error — with optional dismiss button and leading icon.
Alert Dialog
Confirmation modal with destructive/cancel actions, focus trap, backdrop click to close, and keyboard Escape support.
Anchor Navigation
Sticky in-page navigation that highlights the active section as you scroll, with smooth scroll-to-section on click.
Architecture Firm
A premium architecture firm website with full-bleed project photography, an editorial horizontal scroll gallery, awards section, and a minimal contact form.
Autocomplete
Text input with a filtered dropdown suggestion list. Keyboard navigation (↑↓ Enter Escape), highlight match, clear button.
Avatar Group
Stacked overlapping avatars with a "+N more" overflow indicator — supports image avatars, initials fallback, size variants, and name tooltip on hover.
Back to Top
Floating back-to-top button that appears after scrolling down, with smooth scroll animation and fade in/out.
Badge
Compact status badges and tags in multiple color variants, sizes, and styles — solid, outline, and with dot or remove button.
Bottom Navigation
Mobile-style bottom navigation bar with icon + label, active state, badge counter, and slide-up indicator.
Breadcrumb
Navigation breadcrumb trail with separator variants — slash, chevron, and dot — plus a collapsible version that truncates middle items.
Browser Mockup
Realistic browser window frame with address bar, tab, navigation buttons, and inner content area for screenshots or demos.
Carousel
Content carousel with auto-play, dot indicators, previous/next arrows, touch swipe support, and a multi-card visible variant.
Chat Bubble
Chat message bubbles with sender/receiver variants, avatar, timestamp, status indicators (sent/delivered/read), and grouping.
Checkbox Group
Styled checkbox inputs with label, indeterminate state, checkbox card variant, and a grouped fieldset with select-all functionality.
Clipboard Copy
Copy-to-clipboard button with success feedback animation — icon changes to checkmark, reverts after 2s. Works on any text.
Color Picker
HSL color picker with canvas gradient, hue slider, hex/rgb output, and opacity slider.
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.
Context Menu
Right-click context menu with nested sub-menus, keyboard navigation, icons, dividers, and disabled items.
Custom Select
Fully custom select dropdown with search/filter, option groups, multi-select with tags, and clearable single selection.
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.
Data Table
Feature-rich data table with column sorting, row selection via checkboxes, search filter, column visibility toggle, and pagination.
Date Picker
Calendar date picker with month navigation, range selection, disabled dates, and an input trigger — keyboard accessible.
Diff Slider
Before/after image comparison slider — drag the handle to reveal the difference. Touch support included.
Divider Label
Horizontal divider line with centered or left-aligned text label — used for section separators like "or continue with".
Dropdown Menu
Accessible dropdown menu with keyboard navigation, icons, dividers, destructive item variant, and a user account menu demo.
Empty State
Illustrated empty state placeholders for no data, no results, no notifications, and no files found — with optional action button.
Event / Conference Landing
A high-energy conference landing page with a live countdown timer, speaker grid, schedule timeline, sponsor logos marquee, and ticket CTA.
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.
File Upload Dropzone
Drag-and-drop file upload zone with file list, type/size validation, progress simulation, and remove button.
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.
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.
Image Lightbox
Click-to-open image lightbox with overlay, zoom, keyboard navigation (←→ Escape), and swipe support on mobile.
Indicator
DaisyUI-style badge indicator — overlays a colored dot/badge on any element (button, avatar, card) for unread counts or status.
Input Variants
A complete set of text input styles — default, with prefix/suffix icons, floating label, input group with helper text, and validation states.
Keyboard Display
Keyboard shortcut display component with individual key caps — single keys, combinations (⌘K), and a shortcut list table.
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.
Loading Variants
Six CSS-only loading animations — spinner, dots, bar, pulse, bounce, and ring — in multiple sizes.
Masonry Grid
Pinterest-style masonry layout using CSS columns — items fill vertically with no gaps, responsive breakpoints.
Mega Menu
Full-width multi-column dropdown navigation menu with categories, links, icons, and a featured section.
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.
Modal Dialog
Accessible modal dialog with backdrop blur, multiple sizes, confirmation variant, and smooth open/close animations. Closes on Escape and backdrop click.
Navigation Menu
Horizontal navigation bar with mega-menu dropdowns, animated indicator underline, mobile hamburger collapse, and keyboard accessibility.
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.
Number Input
Numeric input with increment/decrement stepper buttons, min/max/step support, and keyboard navigation.
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).
Pagination
Page navigation controls with first/prev/next/last, ellipsis for large page counts, page size selector, and a simple mini variant.
Password Field
Password input with show/hide toggle, strength indicator meter, and accessible label.
Phone Mockup
Mobile phone frame (iOS-style notch) to showcase app screenshots or UI demos.
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.
Popover
Floating popover panels that position themselves relative to a trigger — supports top, bottom, left, right placement with arrow pointer.
Progress Bar
Linear progress indicators — determinate with label, indeterminate animated, stepped segments, and multi-color stacked bars.
QR Code
In-browser QR code generator — type a URL or text and get an instant scannable QR code with a download button.
Radio Group
Custom-styled radio button groups with label, radio card variant, and a segmented button-group toggle.
Range Slider
Custom-styled range sliders — single value with floating tooltip, dual-handle range, stepped with tick marks, and color variants.
Rating Stars
Interactive star rating component — hover preview, click to set, half-star display support, readonly mode.
Resizable Panels
Draggable split panels — horizontal and vertical resize, with min/max constraints, collapse/expand, and a multi-panel layout.
Result Page
Full-page result feedback for success, error, warning, and info states — with icon, message, and CTA actions.
Scroll Area
Custom-styled scrollable container with thin styled scrollbar, auto-hide on idle, and horizontal + vertical variants.
Segmented Control
iOS-style segmented control (pill-style toggle group) — single selection, animated background slide, keyboard support.
Separator
Horizontal and vertical dividers with text label variants — plain line, centered text, gradient fade, dashed, dotted, and decorative diamond.
Sheet / Drawer
Slide-in sheet panels from all four edges — bottom sheet (mobile-first), right sidebar drawer, left nav drawer, and top notification drawer.
Stack Cards
Overlapping card stack UI — hover fans out the cards, click rotates through them. Used for layered content previews.
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.
Stat Card
Metric stat cards with KPI value, trend badge (up/down %), supporting label, and optional sparkline bar.
Status Indicator
Online/offline/idle/busy status dots with pulse animation, badge variants, and text labels.
Steps Progress
Multi-step progress indicator with completed, active, and upcoming states — horizontal and vertical orientations.
Swap
DaisyUI-style swap component — toggle between two states (icon/text) with flip, rotate, or fade animations. CSS-only, no JavaScript.
Tag Input
Multi-value tag input — type and press Enter or comma to add tags, click ✕ to remove. Keyboard navigation supported.
Text Rotate
Animated text that cycles through a list of words with smooth enter/exit transitions — fade, slide, or typewriter style.
Timeline
Vertical timeline with date markers, icons, content cards, and alternating left/right layout variant.
Toggle Group
Group of toggle buttons for single or multi-selection — like a toolbar or filter chip group. Keyboard navigation with arrow keys.
Tour Spotlight
Product tour component — highlights UI elements with a spotlight overlay, shows tooltip with prev/next navigation.
Watermark
Canvas-based watermark overlay generator — text or image watermark, configurable opacity, angle, repeat pattern.
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.
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.
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.
Command Palette (⌘K)
A keyboard-driven command palette modal triggered by ⌘K / Ctrl+K, with fuzzy search, keyboard navigation, and smooth open/close animation.
CSS-only Typewriter
A typewriter animation using only CSS steps() timing function — no JavaScript, no libraries.
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.
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.
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.
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.
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.
Mouse Trail Particles
Canvas particles that spawn at the cursor position and fade out, creating a glowing trail effect. Pure vanilla JS.
Skeleton Loader
CSS-only shimmer skeleton loading placeholders for cards and content blocks. Zero JavaScript — pure CSS keyframe animation with a traveling shimmer highlight.
Smooth Number Counter
Stats that count up when they scroll into view. Powered by GSAP ScrollTrigger with eased number interpolation.
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.
Stagger Fade-in on Scroll
Grid of cards that fade and slide in with a stagger when they enter the viewport. GSAP ScrollTrigger batch.
SVG Path Drawing
SVG paths that draw themselves on scroll using stroke-dashoffset animated by GSAP ScrollTrigger.
Text Scramble / Matrix Decode
Text that scrambles through random characters before resolving to the final string — the classic hacker/matrix decode effect. Zero dependencies.
Toast Notification Stack
A lightweight toast notification system with success, error, warning, and info variants. Toasts stack, auto-dismiss, and support manual close.
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.
Card Carousel
Auto-transitioning stacked image cards with GSAP-powered depth, tilt, and a timing meter.
Diagonal Wipe Cards
Auto-advancing cards where each image wipes across a diagonal mask using GSAP clip-path animation.
Lenis + GSAP Scroll Cards
Scroll-driven card stack with Lenis smooth scroll and GSAP ScrollTrigger; cards pin and transition as you scroll.
Liquid Cards (Gel Flow)
Auto-advancing image cards with a liquid/gel overlay effect — blur transition and animated blobs on the active card.
Metric Cards
Dashboard-style metric cards with hover lift, chip badges (positive/negative/neutral), and count-up animation for the main value.
Slice Reveal Cards
Auto-advancing cards that break into vertical slices and reassemble using GSAP timelines for a stylized transition.
Split Slide Cards
Auto-advancing cards where each image is split into left/right halves that slide apart and back together for the transition.
3D Product Showcase
Interactive 3D product viewer with PBR materials, three-point lighting, and orbit controls.
3D Product Spotlight
Scroll-driven camera orbits a 3D product on rails, revealing feature cards at each angle.
AI Engineer Portfolio
Terminal-aesthetic portfolio with typing animations, neural network canvas visualization, and scroll-driven project reveals.
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.
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.
Backlog - MIDI Audio Reactive Lab
MIDI plus microphone-reactive visual bars experiment.
Backlog - Multiplayer Shared Cursor
Shared cursor presence experiment across multiple tabs.
Backlog - Shader Playground UI
Interactive parameter editor for shader-like visual tuning.
Backlog - Webcam Reactive Experiment
Webcam brightness reactive overlay experiment with live camera input.
Backlog - WebGPU Branch Experiment
WebGPU capability probe with fallback branch visualization.
Blog Magazine
Modern blog layout with dark/light theme transitions, animated typography, and reading-view article cards.
Bokeh Hero Base
Ambient glowing field inspired by cinematic landing pages.
Bokeh Particle Hero
Ambient glowing bokeh particle field with mouse-reactive parallax and depth-of-field blur.
Card Automatic Transition
An animated card stack that automatically transitions between cards with smooth scroll-triggered animations, blur effects, and diagonal wipe reveals.
Card Grid Transition
Shared-element transition from a card grid to a detail page using the View Transitions API.
Card Stack Cascade
Stacked cards fan out and rearrange into a grid as you scroll, driven by GSAP ScrollTrigger scrub.
Card Stack Choreography
Looping card stack transforms for staged reveal sequences.
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.
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.
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.
Concept A - High-Energy Game Launch
Original high-energy launch concept with arena-style motion and feature blocks.
Concept B - Premium Tech Reveal
Original premium product reveal concept with restrained motion and spec staging.
Concept C - Creative Studio Portfolio
Original creative studio concept using collage cards and editorial hierarchy.
Concept D - Music Release Microsite
Original release-night microsite concept with disc motif and animated equalizer bars.
Concept E - Futuristic Dashboard Intro
Original futuristic dashboard intro with telemetry modules and animated counters.
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.
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.
E-commerce Shop
Mini e-commerce experience with filterable product grid, FLIP animations, cart interactions, and View Transition detail 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.
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.
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.
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.
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.
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.
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.
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.
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.
GSAP Hero Intro
Headline and CTA entrance timeline with ambient motion layers.
Horizontal Pinned Gallery
Pinned section with horizontal gallery movement tied to scroll progress.
Horizontal Scroll Gallery
Vertical scroll drives a horizontal gallery with pinned container and panel entrance animations.
Image Gallery Transitions
Thumbnail strip with hero image swap animated by View Transitions crossfade and scale.
Interaction Systems Lab
Phase 6 integration lab for reusable cursor, spotlight, orchestrator, debugger, and sound-reactive hooks.
Interactive 3D Mouse Scene
Grid of 400 spheres with mouse-reactive repulsion physics, spring return, and distance-based color.
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.
Kinetic Typography
Word-level animated text entrance pattern for energetic headlines.
Lenis + GSAP Scroll Story
Smooth-scrolling narrative sections with timeline triggers.
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.
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.
Magnetic Cursor
Custom cursor with spring-based following and magnetic attraction to interactive elements.
Morphing Blobs
Three approaches to organic shape animation: CSS border-radius, SVG path morphing, and Canvas bezier curves.
Mouse Light + Magnetic Button
Cursor spotlight and magnetic button hover interactions.
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.
Noise & Grain Overlay
Four composited overlay effects: SVG noise filter, canvas grain, CSS scanlines, and radial vignette.
Nova Portfolio
A dark-themed portfolio website with smooth scroll animations, Three.js particle background, expandable project cards, and GSAP-powered transitions.
Page Routing Transitions
SPA-style page routing with directional slide transitions using the View Transitions API.
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.
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.
Particle Tunnel
Cinematic depth-heavy particle tunnel with custom shaders and bloom post-processing.
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.
Pinned Scroll Sections
Sections pin in place while multi-step timelines play, driven entirely by scroll position.
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.
Product Landing Page
Apple-style wireless earbuds product page with 3D hero, scroll-pinned feature reveals, and cinematic text choreography.
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.
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.
Redline Portfolio
A minimal dark portfolio with high-contrast red and black design, smooth animations, and a focus on UI systems and capabilities.
SaaS Landing Page
Professional SaaS product page with CSS device mockups, pinned feature sections, pricing cards, and testimonial animations.
Scroll Camera Narrative
Scroll through story chapters as the camera flies between 3D scene waypoints with cinematic transitions.
Scroll Progress Indicators
Three simultaneous scroll indicators: top bar, circular SVG progress, and section dot navigator.
Scroll Trigger Story
Section-by-section storytelling using viewport-triggered reveals.
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.
Shader Background
Full-screen GLSL fragment shader with layered simplex noise creating flowing aurora bands.
Smooth Scroll Story
Parallax sections with Lenis smooth scrolling and GSAP ScrollTrigger choreography.
Software Engineer Portfolio
Dark brutalist software engineer portfolio with bold typography, scroll-driven section reveals, skill bars, and project showcases.
Split Screen Reveal
Two-panel layout where right scene reveals progressively on scroll.
Spotlight Reveal
Mouse-driven spotlight that reveals colorful hidden content through a dark overlay using CSS masks.
Staggered Grid Entrance
Grid items animate in with position-based stagger delays. Multiple animation styles: fade, scale, slide, flip.
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.
Tech Lead Portfolio
Corporate tech lead portfolio with Three.js wireframe hero, vertical career timeline, expertise grid, and open source repo showcase.
Text Reveal on Scroll
Per-character and per-line text animations triggered on scroll with GSAP SplitText.
Theme Transition
Dark/light theme toggle with circular clip-path wipe powered by the View Transitions API.
Three.js Distorted Plane Shader
Fullscreen shader background with procedural distortion and glow.
Three.js Instanced Mesh Field
High-count object field using GPU instancing for performance.
Three.js Morphing Geometry
Point cloud morph transition between cubic and spherical volumes.
Three.js Orbit + Bloom
Orbiting object field rendered with bloom compositing.
Three.js Particle Tunnel
Depth-heavy cinematic scene with post-processing glow.
Three.js Product Spotlight
Product spotlight with scroll-driven camera rail movement.
Three.js Scroll Camera Narrative
Narrative scene where scroll progress drives camera chapter rails.
Transition Card
Scroll-triggered card transitions with smooth fade, blur, and scale effects. Cards smoothly transition as you scroll through the sequence.
Travel Editorial
Immersive travel editorial with horizontal photo scrolling, FLIP layout transitions, and warm typographic design.
Travel Experience
Immersive travel booking experience with a scroll-driven 3D airplane flight path and animated destination reveals.
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.
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.
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.
View Transition App Shell
Primary and nested navigation transitions in a stable shell layout.
View Transition Card Detail
Shared-element transition from card grid to detail page.
View Transition Grid Filter Identity
Filterable grid that preserves card identity while items reorder.
View Transition Hybrid CSS + JS
Shared-element state swaps coordinated with JavaScript panel choreography.
View Transition Theme Mode
Theme/mode switch demo with shared title and CTA continuity.
CSS Dot Loader
A smooth three-dot loading animation built entirely with CSS — no JavaScript, no SVG.
Glassmorphism Card
A frosted-glass card effect using CSS backdrop-filter, subtle borders, and layered transparency.
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.
Hero Parallax
A multi-layer parallax hero section driven by scroll position, creating depth through independent layer speeds.
Launch Hero Page
A clean product landing hero with nav, CTA buttons, and a three-point feature grid.
Magnetic Button
A button that magnetically attracts toward the cursor when nearby, creating a satisfying interactive pull effect.
Scroll Fade In
Smooth fade-in animation triggered by Intersection Observer as elements enter the viewport on scroll.
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.