Seiten
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
Showcase
199 live previews
Categories
Difficulty
View
Size
Density
Sort
No components match this filter.
3D-Modelle
3D Floating Geometric Shapes
Ten distinct Three.js geometric shapes floating in space with sine-wave drift, self-rotation, and a mouse parallax camera effect.
Easy
Seiten
500 Server Error Page
A clean, professional 500 internal server error page with status badge, retry button, and support contact link. Pure CSS.
Easy
Web-Animationen
Lenis + GSAP Scroll Cards
Scroll-driven card stack with Lenis smooth scroll and GSAP ScrollTrigger; cards pin and transition as you scroll.
Medium
UI-Komponenten
Metric Cards
Dashboard-style metric cards with hover lift, chip badges (positive/negative/neutral), and count-up animation for the main value.
Easy
Webseiten
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
Webseiten
Nova Portfolio
A dark-themed portfolio website with smooth scroll animations, Three.js particle background, expandable project cards, and GSAP-powered transitions.
Hard
Web-Animationen
Liquid Cards (Gel Flow)
Auto-advancing image cards with a liquid/gel overlay effect — blur transition and animated blobs on the active card.
Medium
Webseiten
Redline Portfolio
A minimal dark portfolio with high-contrast red and black design, smooth animations, and a focus on UI systems and capabilities.
Medium
Web-Animationen
Split Slide Cards
Auto-advancing cards where each image is split into left/right halves that slide apart and back together for the transition.
Medium
Web-Animationen
Slice Reveal Cards
Auto-advancing cards that break into vertical slices and reassemble using GSAP timelines for a stylized transition.
Medium
Seiten
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
UI-Komponenten
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
Komponenten
Action Dropdown Menu
A three-dot floating menu with grouped action items, copy-to-clipboard, keyboard support, and snackbar feedback.
Medium
UI-Komponenten
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
UI-Komponenten
Admin Layout
A complete admin dashboard shell layout with collapsible sidebar, top navbar, and main content area. Mobile-responsive with hamburger toggle.
Medium
UI-Komponenten
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
Seiten
Agency — Branding / Identity Landing
A full one-page landing for Marrow and Plumb, a fictional branding and identity studio rendered in a cream, plum and warm-sand duotone with refined serif and sans pairing. It opens on an animated brand-mark hero and runs through social proof, end-to-end case studies with type specimens and color blocks, four services, a studio philosophy, a clear four-step process, founder testimonials and an inquiry form, all wired with vanilla JavaScript scroll reveals, counters and a toast.
Hard
Seiten
Agency — Marketing / Growth Landing
A full-page landing for a fictional growth marketing agency, Voltline. Bright purple-to-orange gradients on white drive an energetic, results-first mood across a sticky nav, a hero with an animated live revenue dashboard, four service cards, ROI-heavy case studies, an animated metrics band, a four-step funnel, client testimonials, and a validated book-a-call form. Vanilla JS handles the mobile menu, scroll reveals, count-up stats, and toast feedback.
Medium
UI-Komponenten
Agent Trace Viewer
A collapsible execution timeline for LLM agents that streams in each reasoning step, tool call, observation and final answer with status icons, wall-clock durations and token counts, expandable JSON payloads, nested sub-steps, and an all/tools/errors filter, so you can inspect exactly what an agent did and where it spent time or failed.
Medium
Seiten
Agency — Design Studio Landing
A polished, single-page landing for a fictional independent design studio, Foundry and Field. Editorial serif headlines on warm off-white with an electric coral accent carry an oversized hero, a selected-works case grid with hover reveals, a numbered services list, a dark studio and team section, an awards and clients strip, four process steps, an auto-rotating testimonial carousel, and a validating contact form. Built with semantic HTML, CSS variables and vanilla JavaScript only.
Medium
Seiten
Agency — Video / Production Landing
A full-page landing for Nocturne, a fictional film and motion studio, built on a black canvas with cinematic amber-to-red accents and an animated film-grain overlay. A transparent sticky nav sits over a full-bleed hero with an animated poster and play button, followed by a client marquee, a hover-play showreel grid, three service blocks, a behind-the-scenes band with count-up stats, a four-act process, a rotating testimonial carousel, and a bold make-something CTA. Vanilla JS drives the reel modal, scroll reveals, and validated forms.
Hard
Seiten
Agency — Software / Dev Shop Landing
A dark, engineering-grade landing page for Northbyte, a fictional software and product studio, built on a near-black canvas with a mono-lime accent, slate highlights, and a Space Grotesk and JetBrains Mono pairing. The hero pairs a strong headline with a live typewriter terminal that runs a deploy log on loop, plus count-up proof stats. Below sit a scrolling tech stack, a four-practice services grid, case studies with hard metrics, a four-step engagement model, a senior team row, a rotating testimonial carousel, and a validated start-a-project form.
Medium
Seiten
AI Product — Code Assistant Landing
A developer-native marketing landing page for Cortex, a fictional AI coding assistant. Built on a dark editor theme with mono headlines and syntax-highlight accents, it pairs a self-typing fake code editor hero with a supported-languages strip, a four-feature grid, a tabbed live demo that switches between completion, repo chat and fix modes, a copyable install snippet, developer testimonials, a monthly-yearly pricing table, a closing CTA and footer. Pure HTML, CSS and vanilla JS.
Medium
Seiten
AI Product — Image Generation Landing
A full one-page marketing landing for a fictional AI image generator, Prismeo, built in vanilla HTML, CSS, and JavaScript. It pairs a black, gallery-like canvas with iridescent magenta-to-teal-to-gold accents, a floating masonry hero gallery, and a live prompt bar. Interactive pieces include a style-picker that swaps the gallery, a before-to-after comparison slider, a monthly-annual pricing toggle, scroll reveals, a typewriter prompt, and a mobile nav with toast feedback.
Hard
Seiten
AI Product — Chat Assistant Landing
A dark, premium one-page marketing site for Lumio, a fictional conversational AI assistant. It pairs a violet-to-cyan glow aesthetic with an animated hero chat mockup that types a prompt and streams a reply, plus trust logos, a memory and tools feature grid, a three-step how-it-works flow, a genuinely interactive try-a-prompt playground, testimonials, a monthly and yearly pricing toggle, an accordion FAQ, and a waitlist call to action. Built with semantic HTML, responsive CSS, and dependency-free vanilla JavaScript.
Hard
Seiten
AI Product — AI Search Landing
A polished one-page marketing site for Sourcely, a fictional AI answer engine that reads the live web and replies with cited answers instead of blue links. Clean white layout with an electric-blue accent, sticky nav, and a hero search bar that animates a typed question into a sourced answer card. Includes a feature grid, three-step explainer, a traditional-search comparison, an interactive ask-a-question demo, testimonials, billing-toggle pricing, an accordion FAQ, and a footer.
Medium
Seiten
AI Product — Voice AI Landing
A calm, futuristic one-page marketing site for a fictional voice AI product, built in vanilla HTML, CSS and JS. It pairs a deep indigo palette with pastel waveform accents, an animated hero orb, and a press-to-talk demo. Sections cover assistants, dubbing and accessibility use cases, a play-to-hear voices showcase with a live reacting waveform, a three-step API walkthrough, monthly and annual pricing, testimonials, an email capture CTA, and a footer.
Medium
UI-Komponenten
Airline — Baggage Tracker
A polished aviation-themed baggage tracker UI showing each checked bag's tag ID, a five-stage status tracker from checked through loaded, in transit, arrived, and on carousel, plus flight info, carousel number, and last-update line. Features animated progress fills, colour-coded status and delayed pills, a bag-tag lookup, a simulate-progress control, and an accessible report-issue modal with toast confirmations. Mobile-first and responsive down to 360px.
Easy
UI-Komponenten
AI Thinking Loader
Collection of 'Thinking…' animated loaders for AI interfaces: pulse dots, shimmer bar, orbit ring, and wave variants.
Easy
UI-Komponenten
AI Response Card
AI-generated result card with model badge, response text area, copy/thumbs-up/thumbs-down actions, and regenerate button.
Easy
UI-Komponenten
Airline — Boarding Pass
A mobile-first boarding pass UI for a fictional carrier, rendering perforated-edge cards with passenger, route, gate, seat, zone and live status pills. Each pass carries a deterministic animated QR stub, an add-to-wallet action, a brightness boost for gate scanners, and a flip-to-reverse view with fare, baggage and frequent-flyer details. A simulated gate change pulses and toasts in real time. Built with vanilla HTML, CSS and JavaScript, fully responsive down to small handsets.
Easy
Seiten
Airline — Online Check-in
A six-step online check-in wizard for a fictional airline, styled with a clean status-forward aviation feel. Passengers find a booking by reference and last name, confirm details, pick a seat from an interactive cabin map with extra-legroom pricing, add checked bags, toggle travel and health declarations, and receive an issued boarding pass with a perforated stub and generated barcode. Built with vanilla JavaScript and a responsive, mobile-first layout.
Medium
Seiten
Airline — Booking Flow
A polished, four-step airline checkout that takes a fictional JFK to LHR fare from passenger details through extras, payment, and a final review to an animated confirmation. Validated name and card forms, a baggage stepper, seat and meal pickers, and an insurance toggle all feed a live fare-summary sidebar with a running total. Confirmation issues a perforated boarding pass with codes, gate, seat, and an on-time status pill. Built with vanilla JS and tabular aviation typography.
Hard
Seiten
Airline — Self-Check-in Kiosk
A touch-first airport self-check-in kiosk UI for a fictional carrier, Aurelia Air. Retrieve a booking by document scan, reference, or frequent flyer, then move through a five-step flow: select passengers, pick a seat from an interactive cabin map with extra-legroom rows, add checked bags with a live fee summary, and watch the boarding pass and bag tags print with a perforated stub, barcode, and success animation. Large targets, status pills, and tabular figures throughout.
Medium
Seiten
Airline — Results List
A polished flight-results screen for a fictional airline search. Browse fare cards showing carrier, depart-to-arrive times, route duration, stop count and per-person price, then narrow them with a sticky filter rail for stops, departure window, max price and airlines. Sort tabs flip the list between best value, cheapest and fastest, each card expands to compare Economy Light, Flex and Business fares, and selecting a fare fires a confirmation toast.
Hard
Seiten
Airline — Flight Information Display (FIDS)
A polished airport flight information display board with switchable departures and arrivals tabs, a status-forward table of times, flight numbers, destinations, gates and color-coded status pills, plus live search and status filters. Rows animate with a split-flap style flip as flights progress from on time to boarding to departed, a ticking local clock and a relative last-updated stamp keep the board feeling alive, and toasts announce boarding calls. Responsive down to mobile widths.
Medium
Seiten
Airline — Flight Search
A polished, status-forward flight search panel for the fictional Skyloft Air, built in vanilla HTML, CSS and JavaScript. It pairs Inter with tabular figures for airport codes, times and fares across round-trip, one-way and multi-city tabs, a from and to swap, date pickers, a passenger stepper with cabin selector, inline validation, search toasts, and live recent searches alongside a popular routes grid. Fully responsive down to 360px with an aviation blue and sunrise accent palette.
Medium
UI-Komponenten
Airline — Flight Status Board
A status-forward airline flight tracker built with vanilla JS. Search any flight number to reveal a large status card showing the route with airport codes, 24-hour departure and arrival times, gate, terminal, seat range and an animated plane that travels the route line as the flight progresses. Big colour-coded pills cover On time, Boarding, Delayed, Departed and Cancelled states, while a compact departures list and an auto-refresh pulse keep the board feeling alive and current.
Medium
Seiten
Airline — Gate Agent Boarding UI
A status-forward gate-agent boarding console for a fictional airline. The flight header tracks load, boarded count, gate and live status, while a scan-to-board panel returns realistic verdicts — accepted, standby for wrong group, or seat-duplicate flag. Agents open boarding groups in sequence, work an upgrade and standby queue, and filter or search a live passenger manifest. Built with semantic HTML, aviation-clean CSS, and dependency-free vanilla JavaScript.
Hard
Seiten
Airline — Crew Schedule
A crew operations roster board pairing pilots and cabin crew against a week of long-haul flights. Each row shows a duty-time bar with rest and weekly-limit indicators, while each cell is an assignable slot. Click an open slot to pick from eligible crew ranked by legality, swap or unassign rostered members from a detail drawer, and watch rest warnings, open-slot counts and duty loads recompute live as you build the schedule.
Hard
Seiten
Airline — Gate Departure Display
A big-screen airline gate departure display built with vanilla JS. A bold banner shows the flight number, LHR to SIN route with airport codes and a plane on the route line, plus a large colour-coded status pill for Boarding, On time, Delayed, Departed or Cancelled. Tiles surface boarding and departure times, gate, terminal and aircraft, while a live countdown ticks toward boarding close. Group rows track who is boarding now, next and waiting, and a progress bar fills as zones advance — all interactive.
Medium
Seiten
Airline — Private Charter Landing
A discreet, luxury private-charter and jet-card landing page for the fictional Méridian Air. Black, champagne, and slate with an elegant serif set the bespoke tone across a request-a-quote hero, a tabbed fleet showcase spanning light, midsize, and heavy jets, three membership tiers, a four-step on-demand process, a concierge section, and a full quote form. Vanilla JS drives tab switching, scroll reveals, form validation, and a toast confirmation.
Hard
Seiten
Airline — Regional Landing
A friendly regional short-hop airline landing page with a quick-search hero, live boarding-pass card with countdown, an interactive SVG route map you can switch between hubs, fast-turnaround perks, two simple fares, an app promo with a phone mockup, and a full footer. Sky-blue and green palette, rounded approachable styling, scroll reveals, mobile nav, and a toast helper. Vanilla HTML, CSS, and JavaScript with no frameworks or build step.
Medium
UI-Komponenten
Airline — Frequent Flyer Card
A polished frequent-flyer status card for a fictional airline loyalty program, showing tier, miles balance, animated progress toward the next tier, a curated benefits list, recent flight and redemption activity, and a digital membership QR. Switch between two tiers (Gold and Platinum) to see palette, miles, and perks update live. Tap the card to flip it and reveal the scannable QR, and redeem miles to watch the balance and progress bar respond with a confirmation toast.
Easy
UI-Komponenten
Airline — Seat Map Selector
An interactive aircraft seat-map selector for the fictional Skyhaven Air A350-900, spanning first, business, and economy cabins. Passengers tap open seats to select them, with a color-coded legend for available, occupied, extra-legroom, and exit-row seats. Hovering reveals a tooltip with the seat number and price, a running summary tallies the live total, a per-passenger maximum guards selection, and a deck-zoom control scales the cabin for precise tapping on small screens.
Hard
UI-Komponenten
Alert Banner
Contextual alert banners in four semantic variants — info, success, warning, and error — with optional dismiss button and leading icon.
Easy
UI-Komponenten
Airline — Trip Itinerary
A multi-leg airline trip itinerary built with vanilla HTML, CSS and JavaScript. It shows a vertical timeline of flight segments with layovers, expandable leg cards exposing terminal, gate, cabin, seat and aircraft details, connection times with tight-layover warnings, large status pills for on-time, boarding and delayed flights, outbound and return tabs, and a manage sheet for changing flights, picking seats, adding bags or cancelling — with toast feedback throughout.
Medium
UI-Komponenten
Alert Dialog
Confirmation modal with destructive/cancel actions, focus trap, backdrop click to close, and keyboard Escape support.
Medium
UI-Komponenten
Anchor Navigation
Sticky in-page navigation that highlights the active section as you scroll, with smooth scroll-to-section on click.
Medium
UI-Komponenten
Inline Alert
Inline alert component with info, success, warning, and error variants. Supports icon, title, description, and dismiss button.
Easy
UI-Komponenten
CSS Anchor Positioning
Tether tooltips and popovers to their trigger with pure CSS anchor-name and position-anchor, place them around the anchor via position-area, and let position-try-fallbacks flip them into view near a viewport edge. A live placement grid, an interactive playground, and a JS-driven fallback keep it working even in browsers without native support.
Medium
Muster
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
UI-Komponenten
Animated Beam
SVG animated beam/line connecting two elements with a flowing dash animation, perfect for flow diagrams and connection visualizations.
Medium
UI-Komponenten
Animated Gradient Text
Text with animated gradient colors flowing through it using background-clip text and CSS keyframe animation.
Easy
UI-Komponenten
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
UI-Komponenten
Animated List
A list component where items animate in with staggered entrance effects — slide and fade from alternating directions for a dynamic reveal.
Easy
UI-Komponenten
Animated Shiny Text
Text with a shining shimmer highlight that sweeps across periodically using an animated linear gradient.
Easy
Architekturen
CI/CD Pipeline Architecture (GitHub Actions)
GitHub Actions pipeline structure with reusable workflows, matrix strategies, environment protection rules, and multi-stage deployment.
Medium
Architekturen
Astro Project Architecture
Astro project structure with content collections, island architecture, file-based routing, and integration patterns.
Easy
Architekturen
GraphQL Schema Architecture
GraphQL API structure comparing schema-first vs code-first approaches with domain-based module organization and resolver patterns.
Medium
Architekturen
Nx Monorepo Architecture
Nx monorepo with project graph, affected commands, computation caching, and the 80/20 apps-to-libs split pattern.
Hard
Architekturen
Micro-Frontend Architecture (Module Federation)
Micro-frontend pattern using Webpack Module Federation with independent host/remote applications sharing dependencies at runtime.
Hard
Architekturen
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
Architekturen
Next.js App Router Architecture
Complete Next.js App Router project structure with nested layouts, server/client components, route handlers, and middleware patterns.
Medium
Architekturen
Turborepo Monorepo Architecture
Turborepo monorepo structure with shared packages, task pipelines, remote caching, and parallel execution for multi-app projects.
Hard
Architekturen
REST API — Clean Architecture (Node.js)
Node.js REST API structure following Clean Architecture with separated domain, application, infrastructure, and interface layers.
Medium
Architekturen
PostgreSQL Schema Patterns
PostgreSQL schema design patterns including multi-schema organization, migration workflows, indexing strategies, and schema-as-code with Drizzle/Prisma.
Medium
Architekturen
React + Vite Architecture
Modern React + Vite project structure with feature-based organization, path aliases, and optimal dev/build configuration.
Easy
Architekturen
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
Architekturen
Prisma Schema Architecture
Prisma schema structure with models, relations, multi-file schemas, migration workflow, and the Prisma Client generation pipeline.
Easy
Muster
Blur Fade
Elements that fade in from blurred to sharp as they enter the viewport on scroll, creating a smooth reveal effect.
Easy
Boilerplates
Astro + Tailwind Starter
Astro starter with Tailwind CSS integration, content collections, island architecture, and zero-JS-by-default static site generation.
Easy
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
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
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
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
Boilerplates
PWA Starter (Vite + Workbox)
Progressive Web App starter with Vite PWA plugin, Workbox service worker, web manifest, offline support, and install prompts.
Medium
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
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
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
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
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
Datenbankschemata
Booking Reservations Schema
Relational schema for reservations with resources, availability slots, bookings, and payment records.
Medium
Muster
Box Reveal
Content revealed by a colored box that slides across then exits, creating a dramatic wipe-reveal effect.
Medium
Muster
Bulk Actions
Multi-select grid pattern with a sticky bulk action bar for archive, tag, and delete flows.
Medium
Web-Animationen
Card Carousel
Auto-transitioning stacked image cards with GSAP-powered depth, tilt, and a timing meter.
Medium
Webseiten
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
Datenbankschemata
CMS Blog Schema
Relational schema for content management with authors, posts, tags, publishing workflow, and media.
Medium
Komponenten
Code Tabs Viewer
Multi-target tabbed code viewer with a scrollable tab row, syntax-highlighted pre block, and copy-to-clipboard button.
Medium
Webseiten
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
Komponenten
Collection Carousel
Auto-scrolling horizontal carousel with snap points, arrow navigation, pause on hover, and a collection selector.
Medium
Komponenten
CodePen Embed
Lazy-loaded CodePen iframe that defers creation until the user clicks a placeholder, keeping page load fast.
Easy
Muster
Copy to Clipboard
Multi-target copy pattern for code, URLs, and form fields with success and fallback feedback.
Easy
Datenbankschemata
CRM Sales Schema
Relational schema for CRM sales pipelines with leads, accounts, contacts, deals, and activities.
Medium
Muster
CRUD Table
Full CRUD table pattern with create, inline edit, delete actions, sorting, pagination, and form validation.
Hard
Muster
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
3D-Interaktionen
3D Face Cursor Tracker
A 3D cartoon face built from Three.js primitives — the pupils track the cursor position and the head rotates subtly to follow, with an automatic blinking animation.
Medium
Muster
Debounced Search
Search input pattern with debounce timing, loading state, and stale-request result protection.
Easy
Web-Animationen
Diagonal Wipe Cards
Auto-advancing cards where each image wipes across a diagonal mask using GSAP clip-path animation.
Medium
Muster
CSS Dot Loader
A smooth three-dot loading animation built entirely with CSS — no JavaScript, no SVG.
Easy
Datenbankschemata
Ecommerce Core Schema
Core relational schema for ecommerce with users, catalog, inventory, orders, and payments.
Medium
Muster
Button Press Effect
Scale and shadow on press with optional success checkmark — satisfying click feedback for buttons and controls.
Easy
Muster
Drawer Slide Effect
Slide-in/out drawer panel from any edge — smooth gesture-friendly panel transition for menus and sheets.
Easy
Muster
Skeleton Loading Effect
Animated skeleton placeholder with shimmer pulse — smooth loading state for cards and content blocks.
Easy
Muster
Modal Enter Effect
Fade and scale enter/exit for modals and overlays — smooth open/close transition.
Easy
Muster
Nav Underline Effect
Animated underline on active nav link — smooth indicator for tabs and breadcrumbs.
Easy
Komponenten
Filter Search Bar
Inline search input with scrollable category pill filters, active state, result counter, and keyboard shortcut hint.
Medium
Webseiten
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
Muster
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
Webseiten
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
Komponenten
Hero Code Space Background
Immersive 3D perspective background with floating code panels, scroll-driven depth animation, and responsive depth culling.
Hard
Webseiten
Hero Parallax
A multi-layer parallax hero section driven by scroll position, creating depth through independent layer speeds.
Medium
Muster
Infinite Scroll
Infinite list loading pattern driven by an IntersectionObserver sentinel and batch rendering.
Medium
Muster
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
Muster
Lazy Load
Image lazy-loading pattern with placeholders and progressive reveal using IntersectionObserver.
Easy
Web-Animationen
Bokeh Hero Base
Ambient glowing field inspired by cinematic landing pages.
Easy
Web-Animationen
GSAP Hero Intro
Headline and CTA entrance timeline with ambient motion layers.
Medium
Web-Animationen
Scroll Trigger Story
Section-by-section storytelling using viewport-triggered reveals.
Medium
Web-Animationen
Horizontal Pinned Gallery
Pinned section with horizontal gallery movement tied to scroll progress.
Medium
Web-Animationen
Lenis + GSAP Scroll Story
Smooth-scrolling narrative sections with timeline triggers.
Medium
Web-Animationen
Kinetic Typography
Word-level animated text entrance pattern for energetic headlines.
Easy
Muster
Mouse Light + Magnetic Button
Cursor spotlight and magnetic button hover interactions.
Easy
Web-Animationen
Card Stack Choreography
Looping card stack transforms for staged reveal sequences.
Medium
Web-Animationen
Three.js Particle Tunnel
Depth-heavy cinematic scene with post-processing glow.
Hard
Web-Animationen
Three.js Orbit + Bloom
Orbiting object field rendered with bloom compositing.
Hard
Web-Animationen
Three.js Distorted Plane Shader
Fullscreen shader background with procedural distortion and glow.
Hard
Web-Animationen
Three.js Product Spotlight
Product spotlight with scroll-driven camera rail movement.
Hard
Web-Animationen
Three.js Scroll Camera Narrative
Narrative scene where scroll progress drives camera chapter rails.
Hard
Web-Animationen
Three.js Instanced Mesh Field
High-count object field using GPU instancing for performance.
Hard
Web-Animationen
Split Screen Reveal
Two-panel layout where right scene reveals progressively on scroll.
Medium
Web-Animationen
Three.js Morphing Geometry
Point cloud morph transition between cubic and spherical volumes.
Hard
Muster
View Transition Card Detail
Shared-element transition from card grid to detail page.
Medium
Muster
View Transition Grid Filter Identity
Filterable grid that preserves card identity while items reorder.
Medium
Muster
View Transition Hybrid CSS + JS
Shared-element state swaps coordinated with JavaScript panel choreography.
Hard
Muster
View Transition App Shell
Primary and nested navigation transitions in a stable shell layout.
Medium
Muster
View Transition Theme Mode
Theme/mode switch demo with shared title and CTA continuity.
Medium
Web-Animationen
CSS-only Typewriter
A typewriter animation using only CSS steps() timing function — no JavaScript, no libraries.
Easy
Web-Animationen
Smooth Number Counter
Stats that count up when they scroll into view. Powered by GSAP ScrollTrigger with eased number interpolation.
Easy
Web-Animationen
Mouse Trail Particles
Canvas particles that spawn at the cursor position and fade out, creating a glowing trail effect. Pure vanilla JS.
Medium
Webseiten
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
Webseiten
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
Webseiten
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
Webseiten
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
Webseiten
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
Webseiten
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
Webseiten
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
Webseiten
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
Webseiten
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
Ultra-HD-Seiten
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
Webseiten
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
Webseiten
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
Ultra-HD-Seiten
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
Ultra-HD-Seiten
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
Ultra-HD-Seiten
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
Ultra-HD-Seiten
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
Ultra-HD-Seiten
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
Ultra-HD-Seiten
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
Ultra-HD-Seiten
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
Datenbankschemata
LMS Education Schema
Relational schema for learning platforms with courses, lessons, enrollments, and progress tracking.
Medium
3D-Interaktionen
Magnetic 3D Orbs
A field of 280 glowing orbs with spring physics — each orb is attracted to the cursor's 3D position and drifts back to its home when the cursor is still.
Medium
Datenbankschemata
Marketplace Schema
Relational schema for a two-sided marketplace with buyers, sellers, listings, transactions, and payouts.
Hard
Musik
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
Musik
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
Musik
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
Musik
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
Musik
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
Komponenten
Navigation Header
Sticky header with logo, desktop nav links, GitHub icon, and a slide-in mobile drawer menu with backdrop blur.
Medium
Webseiten
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
Komponenten
Resource Card
Grid card for code resources with tech badges, difficulty label, target framework pills, and a save-to-favorites toggle.
Easy
Datenbankschemata
SaaS Multi Tenant Schema
Multi-tenant SaaS relational schema with organizations, members, roles, subscriptions, and billing.
Hard
Komponenten
Showcase Preview Card
Live-preview card with an embedded iframe, difficulty badge, save-to-favorites, and Lab / View Code action buttons.
Medium
Komponenten
Site Footer
Minimal dark-themed footer with navigation link groups, brand tagline, and MIT license attribution.
Easy
Designstile
AR / VR Interface
Futuristic augmented and virtual reality UI with holographic elements, translucent panels, and HUD-style overlays.
Hard
Designstile
3D Design
Depth-rich interfaces with CSS 3D transforms, perspective effects, layered cards, and dynamic shadows for an immersive spatial feel.
Hard
Designstile
Aurora / Gradient Mesh
Smooth, flowing gradient meshes and aurora borealis color washes — organic, ethereal, and visually mesmerizing.
Medium
Designstile
Bauhaus
The 1919 German art school's aesthetic — primary colors, geometric forms, asymmetric composition, and modernist typography.
Medium
Designstile
Bento UI
Grid-based bento box layouts with asymmetric cards, rounded corners, and clean modular sections — inspired by Apple's product pages.
Medium
Designstile
Brutalism
Raw, confrontational web design with exposed structure, heavy borders, clashing colors, and intentionally broken conventions.
Medium
Designstile
Claymorphism
Puffy, inflated 3D clay shapes with thick outlines, pastel colors, and a playful soft-plastic feel — like children's clay toys.
Medium
Designstile
Dark Blue
A deep navy and midnight-blue palette — professional, trustworthy, and atmospheric, perfect for SaaS products and dashboards.
Easy
Designstile
Dark Mode
A refined dark interface with dark surfaces, subtle borders, and muted accents — comfortable for extended use and developer-friendly.
Easy
Designstile
Glass Dark
Dark glassmorphism — frosted glass panels layered over deep dark backgrounds for a sleek, premium night-mode feel.
Easy
Designstile
Flat Design
Bold, solid colors with zero shadows or depth — crisp geometry and strong iconography-driven interfaces.
Easy
Designstile
Glassmorphism
Frosted glass panels floating over colorful gradients — translucency, blur, and subtle borders define this aesthetic.
Easy
Designstile
Material Design
Google's design language — elevation through shadows, bold color, responsive animations, and a structured 8px grid.
Medium
Designstile
Minimalist UI
A stripped-back aesthetic built on generous whitespace, neutral palettes, and typographic hierarchy — nothing decorative, everything functional.
Easy
Designstile
Isometric 3D
Flat 3D perspective using isometric projection — geometric depth without real 3D rendering.
Hard
Designstile
Miro / Whiteboard
Infinite canvas aesthetics — sticky notes, hand-drawn connectors, collaborative markers, and the feeling of a shared whiteboard.
Medium
Designstile
Illustration-First
Whimsical hand-drawn SVG illustrations take center stage — characters, doodles, and organic shapes define the UI.
Hard
Designstile
Motion / Kinetic
Animation-first design where transitions, micro-interactions, and movement ARE the design — nothing sits still.
Hard
Designstile
NES Retro / Pixel
Chunky pixel fonts, limited 4-color palettes, and scanline overlays — interface design inspired by 8-bit Nintendo consoles.
Hard
Designstile
Newspaper / Editorial
Classic print journalism layout with serif type, column grids, ink-paper contrast, and editorial authority.
Medium
Designstile
Netflix Cinematic
Dark cinematic design with bold red accents, dramatic hero typography, and large imagery — perfect for media and entertainment.
Medium
Designstile
Neumorphism
Soft UI that extrudes from a monochromatic surface using dual shadows — giving elements a pillowy, physical feel.
Medium
Designstile
Purple Space
Deep cosmic backgrounds with neon purple and violet accents — futuristic, electric, and otherworldly.
Medium
Designstile
Skeuomorphism
Real-world textures, depth, and physical metaphors — interfaces that look like objects you can touch.
Medium
Datenbankschemata
Support Helpdesk Schema
Relational schema for support ticketing with SLA policies, comments, assignments, and status history.
Hard
Komponenten
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