StealThis .dev

Бібліотека

Перегляд усіх ресурсів — 725 resources

Глобальні колекції

Усі

Переглядай теми й пов'язані ресурси

18
Сторінки Середня

Italian Trattoria Landing — Trattoria del Forno

Rustic trattoria landing — cream + tomato + olive, Playfair Display + Dancing Script handwritten accents, checkered tablecloth divider, Italian menu copy.

Сторінки Складна

Self-Ordering Kiosk

Customer self-ordering kiosk — vertical layout, 72px touch targets, language switcher, animated welcome → category → item-detail → cart → pay flow.

Сторінки Середня

Customer Checkout

Three-step restaurant checkout — pickup vs delivery, time slot picker, contact + payment with tip presets — and a confirmation success screen.

Сторінки Середня

Farm-to-Table Landing — Sage & Stone

Earthy farm-to-table landing — sage + bone + clay palette, Fraunces display + Inter Tight body, organic curves, weekly garden harvest tally, and a no-menu tasting reveal.

Сторінки Середня

Mexican Cantina Landing — La Catrina

Vibrant cantina landing — terracotta + cobalt + mustard, Fraunces display, CSS papel picado strip, taco menu, mezcal flight and Spanish-language copy.

UI-компоненти Середня

Restaurant Cart / Order Summary

Customer order summary widget — line items with modifiers, quantity steppers, subtotal/tax/tip/total, gratuity presets and a send-to-kitchen CTA.

Сторінки Середня

Restaurant Menu — Carta

Browseable restaurant menu (carta) with sticky category nav, search filter, allergen chips, and section anchors. Shared warm restaurant palette.

UI-компоненти Легка

Menu Item Detail

Restaurant dish detail card with image area, allergen chips, modifier picker (size, doneness, extras), quantity stepper and add-to-order CTA with live total.

Сторінки Складна

Steakhouse Landing — Vault & Ember

Premium steakhouse single-page landing — dark charcoal + leather + gold, Cormorant Garamond display, smoke textures, dry-age tally and cellar drawer.

Сторінки Середня

QR Mobile Menu

Mobile-first restaurant menu opened from a table QR code — sticky scroll-spy category bar, single-column dish list with chips, and a floating cart pill that opens a bottom-sheet order summary.

Сторінки Середня

Sushi / Omakase Landing — Kuro

Sushi & omakase landing — zen minimalism in bone + ink + vermillion, Noto Serif JP display, ink-wash divider, seat counter, and a 13-course omakase progression.

Сторінки Легка

Restaurant About / Our Story

Editorial About page — chef portrait, founding story, 4-step timeline, team grid, values and a press wall — in the shared warm restaurant palette.

Сторінки Середня

Restaurant Landing Page

Generic restaurant landing — sticky nav, editorial hero, signature dishes, chef story, hours strip, and a reserve CTA in the shared warm Casa Olivar palette.

Сторінки Легка

Private Events & Catering

Private dining and catering page — three package cards with capacity, sample menu, capacity table, FAQ accordion and an enquiry form with availability hint.

UI-компоненти Легка

Order Status Tracker

Customer-facing order tracker — Sent → Cooking → Ready → Out for delivery → Delivered stepper with live ETA, courier card, simulated tick-through, and item summary.

Сторінки Легка

Location & Hours

Restaurant Find Us page — SVG map placeholder with pin, hours table with current-day highlight, transit + parking cards, contact form, and a print-friendly directions card.

Сторінки Легка

Restaurant Gallery / Chef's Specials

Photo gallery with category filter chips, masonry-style grid of CSS-gradient placeholders, hover overlays, and a click-to-open lightbox with prev/next + keyboard navigation.

UI-компоненти Середня

POS — Payment Terminal

Restaurant payment terminal: cash / card / split tabs, tip presets, on-screen amount keypad, change calculator, and a confirmed-payment view.

За:

Visual & Code

Веб-анімації

48

Веб-анімації

CSS-only Typewriter

Легка

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

csskeyframessteps
HTML

Веб-анімації

Smooth Number Counter

Легка

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

gsapscrolltrigger
JS HTML

Веб-анімації

Stagger Fade-in on Scroll

Легка

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

gsapscrolltrigger
JS HTML

Веб-анімації

SVG Path Drawing

Середня

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

gsapscrolltriggersvg
JS HTML

Веб-анімації

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.

gsap
JS HTML

Веб-анімації

Text Scramble / Matrix Decode

Середня

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

vanilla-jstypography
JS HTML

Веб-анімації

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.

canvasvanilla-js
JS HTML

Веб-анімації

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.

gsapscrolltriggercss
JS HTML

Веб-анімації

Mouse Trail Particles

Середня

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

canvasvanilla-js
JS HTML

Веб-анімації

Liquid Cards (Gel Flow)

Середня

Auto-advancing image cards with a liquid/gel overlay effect — blur transition and animated blobs on the active card.

htmlcssgsapjavascript
HTML

Веб-анімації

Lenis + GSAP Scroll Cards

Середня

Scroll-driven card stack with Lenis smooth scroll and GSAP ScrollTrigger; cards pin and transition as you scroll.

htmlcssgsaplenis +1
HTML

Веб-анімації

Slice Reveal Cards

Середня

Auto-advancing cards that break into vertical slices and reassemble using GSAP timelines for a stylized transition.

htmlcssgsapjavascript
HTML

Веб-анімації

Split Slide Cards

Середня

Auto-advancing cards where each image is split into left/right halves that slide apart and back together for the transition.

htmlcssgsapjavascript
HTML

Веб-анімації

Card Carousel

Середня

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

htmlcssgsapjavascript
JS HTML

Веб-анімації

Diagonal Wipe Cards

Середня

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

htmlcssgsapjavascript
JS HTML

Веб-анімації

Bokeh Hero Base

Легка

Ambient glowing field inspired by cinematic landing pages.

canvasvanilla-jscss
JS HTML

Веб-анімації

Lenis + GSAP Scroll Story

Середня

Smooth-scrolling narrative sections with timeline triggers.

lenisgsap
JS HTML

Веб-анімації

Scroll Trigger Story

Середня

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

gsapscrolltrigger
JS HTML

Веб-анімації

GSAP Hero Intro

Середня

Headline and CTA entrance timeline with ambient motion layers.

gsapcssvanilla-js
JS HTML

Веб-анімації

Kinetic Typography

Легка

Word-level animated text entrance pattern for energetic headlines.

gsaptypography
JS HTML

Веб-анімації

Card Stack Choreography

Середня

Looping card stack transforms for staged reveal sequences.

gsapcard-motion
JS HTML

Веб-анімації

Split Screen Reveal

Середня

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

scrollcss-clip-path
JS HTML

Веб-анімації

Three.js Particle Tunnel

Складна

Depth-heavy cinematic scene with post-processing glow.

threejswebgl
JS HTML

Веб-анімації

Horizontal Pinned Gallery

Середня

Pinned section with horizontal gallery movement tied to scroll progress.

gsapscrolltriggerparallax
JS HTML

Веб-анімації

Three.js Orbit + Bloom

Складна

Orbiting object field rendered with bloom compositing.

threejspostprocessingwebgl
JS HTML

Веб-анімації

Three.js Product Spotlight

Складна

Product spotlight with scroll-driven camera rail movement.

threejscamera-railswebgl
JS HTML

Веб-анімації

Three.js Instanced Mesh Field

Складна

High-count object field using GPU instancing for performance.

threejsinstancedmeshwebgl
JS HTML

Веб-анімації

Three.js Morphing Geometry

Складна

Point cloud morph transition between cubic and spherical volumes.

threejsmorphpointswebgl
JS HTML

Веб-анімації

Smooth Scroll Story

Середня

Parallax sections with Lenis smooth scrolling and GSAP ScrollTrigger choreography.

gsaplenisscrolltrigger
JS HTML

Веб-анімації

Horizontal Scroll Gallery

Середня

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

gsaplenisscrolltrigger
JS HTML

Веб-анімації

Pinned Scroll Sections

Середня

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

gsapscrolltriggerpin
JS HTML

Веб-анімації

Text Reveal on Scroll

Середня

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

gsapsplittextscrolltrigger
JS HTML

Веб-анімації

Scroll Progress Indicators

Легка

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

gsaplenisscrolltriggersvg
JS HTML

Веб-анімації

Card Stack Cascade

Середня

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

gsapscrolltriggerperspective
JS HTML

Веб-анімації

Particle Tunnel

Складна

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

three.jsshaderspostprocessing
JS HTML

Веб-анімації

3D Product Showcase

Середня

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

three.jspbr-materialorbit
JS HTML

Веб-анімації

Shader Background

Складна

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

three.jsglslsimplex-noise
JS HTML

Веб-анімації

Interactive 3D Mouse Scene

Складна

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

three.jsinstanced-meshraycaster
JS HTML

Веб-анімації

3D Product Spotlight

Складна

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

three.jsgsaplenisscrolltrigger
JS HTML

Веб-анімації

Scroll Camera Narrative

Складна

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

three.jsgsaplenisscrolltrigger
JS HTML

Веб-анімації

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.

gsapscrolltriggertextpluginlenis
JS HTML
Середня

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.

lenisgsapcanvas-2dvelocity
JS HTML

Веб-анімації

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.

gsapscrolltriggercss-variableslenis
JS HTML

Веб-анімації

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.

gsapscrolltriggersvgstroke-dasharray +1
JS HTML

Веб-анімації

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.

gsapscrolltriggercss-3dperspective +1
JS HTML

Веб-анімації

Scroll Fade In

Легка

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

cssjsintersection-observervue +1
TS JS HTML React +2

Веб-сторінки

20

Веб-сторінки

Event / Conference Landing

Середня

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

gsapscrolltriggerleniscss +1
JS HTML

Веб-сторінки

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.

gsapscrolltriggerleniscss
JS HTML

Веб-сторінки

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.

cssvanilla-jscanvas
JS HTML

Веб-сторінки

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.

gsapscrolltriggerleniscss +1
JS HTML

Веб-сторінки

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.

gsapscrolltriggerleniscss
JS HTML

Веб-сторінки

Architecture Firm

Складна

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

gsapscrolltriggerleniscss
JS HTML

Веб-сторінки

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.

gsapscrolltriggerleniscss +1
JS HTML

Веб-сторінки

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.

gsapscrolltriggerleniscss
JS HTML

Веб-сторінки

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.

cssvanilla-jslenis
JS HTML

Веб-сторінки

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.

gsapscrolltriggerleniscss +1
JS HTML

Веб-сторінки

Nova Portfolio

Складна

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

htmlcssjavascriptthreejs +2
JS HTML

Веб-сторінки

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.

htmlcssjavascriptthreejs +3
JS HTML

Веб-сторінки

Redline Portfolio

Середня

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

htmlcssjavascriptgsap +2
JS HTML

Веб-сторінки

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.

htmlcssjavascriptthreejs +3
JS HTML
Середня

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.

htmlcssjavascriptthreejs +3
JS HTML

Веб-сторінки

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.

htmlcssjavascriptthreejs +2
JS HTML

Веб-сторінки

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.

htmlcssjavascriptthreejs +2
JS HTML
Середня

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.

htmlcssjavascriptthreejs +3
JS HTML

Веб-сторінки

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.

csshtmlvuesvelte
TS HTML React Vue +1

Веб-сторінки

Hero Parallax

Середня

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

cssjstransformscroll-event +2
TS JS HTML React +2

Сторінки

86

Rustic trattoria landing — cream + tomato + olive, Playfair Display + Dancing Script handwritten accents, checkered tablecloth divider, Italian menu copy.

htmlcssvanilla-js
JS HTML

Сторінки

Self-Ordering Kiosk

Складна

Customer self-ordering kiosk — vertical layout, 72px touch targets, language switcher, animated welcome → category → item-detail → cart → pay flow.

htmlcssvanilla-js
JS HTML

Сторінки

Customer Checkout

Середня

Three-step restaurant checkout — pickup vs delivery, time slot picker, contact + payment with tip presets — and a confirmation success screen.

htmlcssvanilla-js
JS HTML
Середня

Earthy farm-to-table landing — sage + bone + clay palette, Fraunces display + Inter Tight body, organic curves, weekly garden harvest tally, and a no-menu tasting reveal.

htmlcssvanilla-js
JS HTML
Середня

Vibrant cantina landing — terracotta + cobalt + mustard, Fraunces display, CSS papel picado strip, taco menu, mezcal flight and Spanish-language copy.

htmlcssvanilla-js
JS HTML
Середня

Browseable restaurant menu (carta) with sticky category nav, search filter, allergen chips, and section anchors. Shared warm restaurant palette.

htmlcssvanilla-js
JS HTML
Складна

Premium steakhouse single-page landing — dark charcoal + leather + gold, Cormorant Garamond display, smoke textures, dry-age tally and cellar drawer.

htmlcssvanilla-js
JS HTML

Сторінки

QR Mobile Menu

Середня

Mobile-first restaurant menu opened from a table QR code — sticky scroll-spy category bar, single-column dish list with chips, and a floating cart pill that opens a bottom-sheet order summary.

htmlcssvanilla-js
JS HTML
Середня

Sushi & omakase landing — zen minimalism in bone + ink + vermillion, Noto Serif JP display, ink-wash divider, seat counter, and a 13-course omakase progression.

htmlcssvanilla-js
JS HTML
Легка

Editorial About page — chef portrait, founding story, 4-step timeline, team grid, values and a press wall — in the shared warm restaurant palette.

htmlcssvanilla-js
JS HTML

Сторінки

Restaurant Landing Page

Середня

Generic restaurant landing — sticky nav, editorial hero, signature dishes, chef story, hours strip, and a reserve CTA in the shared warm Casa Olivar palette.

htmlcssvanilla-js
JS HTML
Легка

Private dining and catering page — three package cards with capacity, sample menu, capacity table, FAQ accordion and an enquiry form with availability hint.

htmlcssvanilla-js
JS HTML

Сторінки

Location & Hours

Легка

Restaurant Find Us page — SVG map placeholder with pin, hours table with current-day highlight, transit + parking cards, contact form, and a print-friendly directions card.

htmlcssvanilla-js
JS HTML
Легка

Photo gallery with category filter chips, masonry-style grid of CSS-gradient placeholders, hover overlays, and a click-to-open lightbox with prev/next + keyboard navigation.

htmlcssvanilla-js
JS HTML
Складна

Restaurant Kitchen Display — four-column ticket flow (New · Cooking · Ready · Served) with age-coloured cards, line check-off, advance / recall actions, and a live timer.

htmlcssvanilla-js
JS HTML
Складна

Full restaurant POS terminal with category sidebar, menu grid, live ticket panel, modifier sheet, course splitter, and Send / Hold / Print / Pay actions.

htmlcssvanilla-js
JS HTML
Середня

Editorial, printable two-column menu page — dotted-leader prices, course separators, wine pairings sidebar, allergen legend, and @media print styles for an A4 PDF.

htmlcssvanilla-js
JS HTML

Сторінки

Restaurant Floor Plan

Складна

Responsive SVG restaurant floor plan — tables in real coordinates, status badges, side inspection, and an edit mode for adding, moving, resizing, reshaping, duplicating, or removing tables.

htmlcssvanilla-jssvg
JS HTML
Середня

TV-resolution restaurant menu board — three rotating panels (Today's specials · Tacos & bowls · Drinks & sweets) with timed crossfade, live clock, and a marquee bottom strip.

htmlcssvanilla-js
JS HTML
Середня

Landscape tableside tablet: table header with party + server, category strip, menu grid, live ticket, call-server pill and a 'how it's going' progress bar.

htmlcssvanilla-js
JS HTML
Складна

Restaurant manager dashboard — covers, average check, turn time, 7-day revenue SVG line chart, top items list, hourly heatmap, today's reservations preview.

htmlcssvanilla-jssvg
JS HTML
Середня

Restaurant inventory: searchable stock table with par-level bars, low-stock alerts, supplier column, last-delivery dates, inline reorder action and bulk export.

htmlcssvanilla-js
JS HTML

Сторінки

Admin — Menu Editor

Середня

Menu CRUD: category sidebar with item counts, drag-orderable item list, right-side edit panel with price, description, allergens, modifier groups and visibility toggle.

htmlcssvanilla-js
JS HTML
Середня

Reservation manager — list / calendar / waitlist tabs, today's bookings with seating status, party-size filter, walk-in & no-show buttons and an enquiry/waitlist sidebar.

htmlcssvanilla-js
JS HTML
Середня

Weekly staff schedule grid — 12 staff across 7 days · 3 service blocks · color-coded by role · drag-to-add hint · per-staff weekly hours total · role filter.

htmlcssvanilla-js
JS HTML

Сторінки

Bar Display System

Середня

Single-column KDS for the bar — drink tickets stack with live age timer, ice/garnish flags, and a Bump action. Compact for a narrow under-counter screen.

htmlcssvanilla-js
JS HTML

Сторінки

End-of-Shift Report

Середня

Printable X/Z shift report: net sales, tax, tips, voids, payment-method breakdown, cash drawer count, server-by-server tally. Print-ready with `@media print`.

htmlcssvanilla-js
JS HTML

Сторінки

Analytics Page

Складна

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

vanilla-jscss
JS HTML

Сторінки

Blog Listing Page

Середня

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

vanilla-jscss
JS HTML

Сторінки

Changelog Page

Середня

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

vanilla-jscss
JS HTML

Сторінки

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.

vanilla-jscss
JS HTML

Сторінки

FAQ Page

Легка

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

vanilla-jscss
JS HTML

Сторінки

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.

vanilla-jscss
JS HTML

Сторінки

Invoice Page

Середня

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

vanilla-jscss
JS HTML

Сторінки

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.

vanilla-jscss
JS HTML

Сторінки

Onboarding Page

Середня

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

vanilla-jscss
JS HTML

Сторінки

Search Results Page

Середня

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

vanilla-jscss
JS HTML

Сторінки

Settings Page

Середня

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

vanilla-jscss
JS HTML

Сторінки

Shop Category Page

Складна

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

vanilla-jscss
JS HTML

Сторінки

Status Page

Середня

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

vanilla-jscss
JS HTML

Сторінки

Team Page

Легка

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

vanilla-jscss
JS HTML

Сторінки

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.

vanilla-jscss
JS HTML

Сторінки

404 Not Found Page

Легка

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

cssvanilla-js
JS HTML

Сторінки

500 Server Error Page

Легка

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

cssvanilla-js
JS HTML

Сторінки

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.

css
JS HTML

Сторінки

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.

vanilla-jscss
JS HTML

Сторінки

Checkout Page

Складна

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

vanilla-jscss
JS HTML

Сторінки

Contact Page

Легка

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

vanilla-jscss
JS HTML

Сторінки

Maintenance Page

Легка

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

vanilla-jscss
JS HTML

Сторінки

Offline Page

Легка

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

vanilla-jscss
JS HTML

Сторінки

Order Confirmation Page

Легка

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

cssvanilla-js
JS HTML
Середня

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

css
JS HTML

Сторінки

Pricing Page

Середня

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

vanilla-jscss
JS HTML

Сторінки

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.

vanilla-jscss
JS HTML
Середня

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

conceptcss-animationlanding-page
JS HTML
Середня

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

conceptproduct-revealinteractive-3d-tilt
JS HTML

Сторінки

Product Landing Page

Складна

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

three.jsgsaplenissplittext +1
JS HTML

Сторінки

AI Engineer Portfolio

Складна

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

canvas-2dgsapscrambletextlenis +1
JS HTML

Сторінки

Travel Editorial

Складна

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

gsapfliplenisscrolltrigger +1
JS HTML

Сторінки

Travel Experience

Складна

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

three.jsgsaplenisscrolltrigger +1
JS HTML

Сторінки

Blog Magazine

Складна

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

gsaplenissplittextview-transitions-api
JS HTML

Сторінки

E-commerce Shop

Складна

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

gsapfliplenisview-transitions-api +1
JS HTML
Складна

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

gsaplenisscrolltriggersplittext
JS HTML

Сторінки

SaaS Landing Page

Складна

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

gsaplenisscrolltriggersplittext
JS HTML

Сторінки

Tech Lead Portfolio

Складна

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

three.jsgsaplenisscrolltrigger +1
JS HTML

Сторінки

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.

three.jsgsaplenisscrolltrigger +2
JS HTML
Складна

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

gsaplenisscrolltriggersplittext +1
JS HTML
Складна

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.

gsapflipcanvas-2dlenis +1
JS HTML
Складна

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.

canvas-2dgsaplenisview-transitions-api +1
JS HTML

Сторінки

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.

gsapcanvas-2dscrolltriggerlenis +1
JS HTML

Сторінки

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.

gsapscrolltriggerlenisbarlow-condensed
JS HTML
Середня

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.

gsapscrolltriggerlenisfraunces +1
JS HTML
Складна

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.

three.jslenisgsapcanvas-2d +1
JS HTML

Сторінки

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.

gsapscrolltriggerlenissplittext +1
JS HTML

Сторінки

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.

gsapscrolltriggersvgflip +1
JS HTML
Складна

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.

gsapscrolltriggerleniscanvas-2d +1
JS HTML
Складна

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.

gsapscrolltriggerleniseb-garamond +1
JS HTML
Складна

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.

gsapscrolltriggerlenisaccordion +2
JS HTML
Складна

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.

gsapscrolltriggerlenisclip-path +2
JS HTML
Складна

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.

gsapscrolltriggerleniscanvas-2d +2
JS HTML
Складна

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.

gsapscroll-snaplenisintersection-observer +1
JS HTML
Складна

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.

gsapscrolltriggerleniscanvas-2d +2
JS HTML

Сторінки

Launch Hero Page

Легка

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

csslayoutgrid
HTML

UI-компоненти

328

UI-компоненти

Restaurant Cart / Order Summary

Середня

Customer order summary widget — line items with modifiers, quantity steppers, subtotal/tax/tip/total, gratuity presets and a send-to-kitchen CTA.

htmlcssvanilla-js
JS HTML

UI-компоненти

Menu Item Detail

Легка

Restaurant dish detail card with image area, allergen chips, modifier picker (size, doneness, extras), quantity stepper and add-to-order CTA with live total.

htmlcssvanilla-js
JS HTML

UI-компоненти

Order Status Tracker

Легка

Customer-facing order tracker — Sent → Cooking → Ready → Out for delivery → Delivered stepper with live ETA, courier card, simulated tick-through, and item summary.

htmlcssvanilla-js
JS HTML

UI-компоненти

POS — Payment Terminal

Середня

Restaurant payment terminal: cash / card / split tabs, tip presets, on-screen amount keypad, change calculator, and a confirmed-payment view.

htmlcssvanilla-js
JS HTML

UI-компоненти

POS Quick Order Pad

Середня

Staff-facing POS quick pad: category tabs, tap-to-add menu grid, running ticket panel with line items, qty steppers, modifiers and total. Built for touch.

htmlcssvanilla-js
JS HTML

UI-компоненти

Reservation Booking Form

Середня

Restaurant reservation widget — date scroller, party-size stepper, time-slot pills with availability, occasion picker, contact form, and confirmation card.

htmlcssvanilla-js
JS HTML

UI-компоненти

Printable Receipt

Легка

Thermal-style restaurant receipt — header, line items with modifiers, subtotal/tax/tip/total, payment line, QR barcode placeholder and @media print styles for actual printing.

htmlcssvanilla-js
JS HTML

UI-компоненти

Allergy & Diet Filter

Середня

Multi-select allergen filter with avoid/prefer chips, live count of safe dishes, and an inline result list that explains why each dish was hidden.

htmlcssvanilla-js
JS HTML

UI-компоненти

Loyalty / Rewards Card

Легка

Customer loyalty card with 10-visit progress, animated stamps, 3-tier rewards ladder, faux barcode and member meta. Tap a stamp to flip — earn the reward at 10.

htmlcssvanilla-js
JS HTML

UI-компоненти

Modifier Sheet (Bottom Drawer)

Середня

Standalone modifier picker bottom sheet — required single-select, multi-select with caps, +/− with per-modifier deltas, special instructions and live total.

htmlcssvanilla-js
JS HTML

UI-компоненти

Tip & Split Calculator

Легка

Standalone tip calculator with N-way split, tip presets + custom %, pre-tax / post-tax tip basis toggle, and round-up to a friendly number.

htmlcssvanilla-js
JS HTML

UI-компоненти

Reviews Feed

Легка

Customer review feed: aggregated score with 5-star breakdown bars, filter chips (all · recent · 5★ · with photos), tag pills, helpful counter and owner replies.

htmlcssvanilla-js
JS HTML

UI-компоненти

Call Waiter · Service Request

Легка

Tableside service request panel — six common requests (water, bread, menu, allergy, bill, photo), live status pill, cancel before staff confirm, and a short note field.

htmlcssvanilla-js
JS HTML

UI-компоненти

Wine Pairing Recommender

Середня

Pair-by-dish widget — pick a dish from the carta, get three sommelier-curated wine matches with a confidence pip, tasting notes, glass/bottle price and an 'add to order' CTA.

htmlcssvanilla-js
JS HTML

UI-компоненти

ARIA Carousel

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

ARIA Combobox

Складна

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

vanilla-jscss
JS HTML

UI-компоненти

ARIA Modal Pattern

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

ARIA Tabs Pattern

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

ARIA Live Regions

Легка

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

vanilla-js
JS HTML

UI-компоненти

ARIA Tree View

Складна

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

vanilla-jscss
JS HTML

UI-компоненти

Color Contrast Checker

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

Cognitive Load Reducer

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

Accessible Color Token System

Середня

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

css
JS HTML

UI-компоненти

Accessible Dark/Light Toggle

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Dyslexia Friendly Mode

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Focus Management

Середня

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

vanilla-js
JS HTML

UI-компоненти

Keyboard Navigable Menu

Середня

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

vanilla-js
JS HTML

UI-компоненти

Keyboard Shortcuts Overlay

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

Roving Tabindex

Середня

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

vanilla-js
JS HTML

UI-компоненти

Accessible Media Captions

Середня

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

vanilla-jshtml5
JS HTML

UI-компоненти

Accessible Palette Generator

Середня

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

vanilla-js
JS HTML

UI-компоненти

Reading Guide

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

RTL Card Grid

Легка

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

css
JS HTML

UI-компоненти

RTL Data Table

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

RTL Mixed Text

Легка

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

css
JS HTML

UI-компоненти

RTL Form

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

RTL Layout

Середня

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

css
JS HTML

UI-компоненти

RTL Navigation

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Semantic Landmarks

Легка

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

htmlcss
JS HTML

UI-компоненти

Screen Reader Only Utilities

Легка

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

css
JS HTML

UI-компоненти

Text Spacing Control

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

Color Blind Modes

Складна

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

cssvanilla-js
JS HTML

UI-компоненти

High Contrast Theme

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Touch Target Demo

Легка

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

css
JS HTML

UI-компоненти

Animated Beam

Середня

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Animated Gradient Text

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Animated Grid Pattern

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Animated List

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Animated Shiny Text

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Arc Timeline

Складна

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Aurora Text

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Bento Grid

Середня

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Border Beam

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Button Group

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Combobox

Середня

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Confetti Explosion

Середня

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

cssjavascriptcanvasvue +1
TS JS HTML React +2

UI-компоненти

Cool Mode

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Dot Pattern

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Flickering Grid

Середня

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Flip Text

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Interactive 3D Globe

Складна

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

cssjavascriptcanvasvue +1
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Icon Cloud

Середня

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Input Group

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Interactive Grid Pattern

Середня

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Interactive Hover Button

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Lens Effect

Середня

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Level Layout

Легка

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

cssjavascriptsveltevue
TS JS HTML React +2

UI-компоненти

Light Rays

Легка

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

cssjavascriptsveltevue
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptsveltevue
TS JS HTML React +2

UI-компоненти

Magic Card

Легка

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

cssjavascriptsveltevue
TS JS HTML React +2

UI-компоненти

Media Object

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Meteors

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Message Block

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Morphing Text

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Neon Gradient Card

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Orbiting Circles

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Particles System

Середня

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

cssjavascriptcanvasvue +1
TS JS HTML React +2

UI-компоненти

Pixel Image

Середня

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

cssjavascriptcanvasvue +1
TS JS HTML React +2

UI-компоненти

Pulsating Button

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Rainbow Button

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Ripple Button

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Ripple Effect

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Shimmer Button

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Shiny Button

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Shine Border

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Smooth Cursor

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Sparkles Text

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Spinner

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Striped Pattern

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Tweet Card

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

Warp Background

Середня

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

cssjavascriptvuesvelte
TS JS HTML React +2

UI-компоненти

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.

vanilla-jssvg
JS HTML

UI-компоненти

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.

vanilla-jssvg
JS HTML

UI-компоненти

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.

vanilla-jssvg
JS HTML

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

Three Dots Menu

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Drawer Navigation

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Rudder Navigation

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

FAB Navigation

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Rectangular Navigation

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Sheet Navigation

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Add to Cart Effect

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Code Block (React)

Легка

Syntax-highlighted code block with copy button, line numbers, and highlighted lines. React + Tailwind.

reacttailwind
TS React

UI-компоненти

Diff Viewer (React)

Середня

Side-by-side and unified code diff viewer with split toggle. React + Tailwind. Dark theme.

reacttailwind
TS React

UI-компоненти

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.

vanilla-jscss
JS HTML

UI-компоненти

AI Response Card

Легка

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

cssvanilla-jsreactvue +2
TS JS HTML React +2

UI-компоненти

AI Thinking Loader

Легка

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

cssreacttailwindvue +1
TS JS HTML React +2

UI-компоненти

Inline Alert

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

API Status Board

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Attachment List

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Announcement Banner

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

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.

vanilla-jscss
JS HTML react-native

UI-компоненти

Certificate of Completion

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

AI Chat Interface

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +3

UI-компоненти

Citation Tooltip

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Code Block

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

Code Diff Viewer

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

Directions Card

Легка

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

cssreacttailwindvue +1
TS JS HTML React +2

UI-компоненти

Distance Badge

Легка

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

css
JS HTML

UI-компоненти

Document Preview Card

Легка

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

css
JS HTML

UI-компоненти

Invoice / Receipt Email

Середня

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

htmlcss
JS HTML

UI-компоненти

Newsletter Email Template

Середня

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

htmlcss
JS HTML

UI-компоненти

Team Invite Email

Легка

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

htmlcss
JS HTML

UI-компоненти

Order Confirmation Email

Середня

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

htmlcss
JS HTML

UI-компоненти

Password Reset Email

Легка

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

htmlcss
JS HTML

UI-компоненти

Email Verification / OTP Code

Легка

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

htmlcss
JS HTML

UI-компоненти

Welcome Email Template

Легка

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

htmlcss
JS HTML

UI-компоненти

File Tree

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

Custom Focus Ring

Легка

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

css
JS HTML

UI-компоненти

Font Size Control

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

Gesture Carousel

Складна

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

vanilla-jscss
JS HTML

UI-компоненти

Hamburger Menu

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

High Contrast Toggle

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

Image Gallery Grid

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

JSON Viewer

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Keyboard Shortcut Sheet

Легка

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Log Viewer

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Location Pin Card

Легка

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

cssreacttailwindsvelte +1
TS JS HTML React +2

UI-компоненти

Map Embed Card

Легка

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

htmlcss
JS HTML

UI-компоненти

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.

vanilla-jscss
JS HTML

UI-компоненти

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.

vanilla-jscss
JS HTML

UI-компоненти

Mobile Stepper

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Model Selector

Легка

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Notification Badge

Легка

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

css
JS HTML

UI-компоненти

Notification Center

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

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.

vanilla-jscss
JS HTML

UI-компоненти

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.

vanilla-jscss
JS HTML

UI-компоненти

Print-Ready Invoice

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

Prompt Input

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

vanilla-jscss
JS HTML react-native

UI-компоненти

Reduced Motion Demo

Легка

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

css
JS HTML

UI-компоненти

Report Cover Page

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

Screen Reader Announcer

Легка

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

vanilla-js
JS HTML

UI-компоненти

Schema Diagram

Складна

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

vanilla-jssvgreacttailwind +2
TS JS HTML React +2

UI-компоненти

Snackbar / Bottom Toast

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

Skip Navigation

Легка

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

css
JS HTML

UI-компоненти

Store Locator

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Streaming Text Effect

Легка

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

vanilla-jsreacttailwindvue +1
TS JS HTML React +2

UI-компоненти

Swipe Action

Середня

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

vanilla-jscss
JS HTML react-native

UI-компоненти

Swipe Tabs

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

Terminal UI

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

Token Counter

Легка

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

vanilla-js
JS HTML

UI-компоненти

Video Thumbnail Grid

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Upload Progress

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

Audio Player

Середня

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

vanilla-jshtml5cssreact +3
TS JS HTML React +2

UI-компоненти

Calculator

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Interactive Comment Box

Легка

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Countdown Timer

Легка

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

vanilla-jscssreacttailwind +2
TS JS HTML React +3

UI-компоненти

Currency Converter

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Digital Clock

Легка

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Follow/Subscribe Toggle

Легка

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

cssvanilla-jsreacttailwind +2
TS JS HTML React +2

UI-компоненти

Image Comparison Slider

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Animated Like Button

Легка

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

vanilla-jscssreacttailwind +2
TS JS HTML React +3

UI-компоненти

Live Search with Debounce

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Live Clock (Analog + Digital)

Легка

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Memory Card Game

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Podcast Player

Середня

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

vanilla-jshtml5cssreact +3
TS JS HTML React +2

UI-компоненти

Poll / Voting Widget

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Quiz Widget

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Smart Share Button

Легка

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

vanilla-jscanvascssreact +3
TS JS HTML React +2

UI-компоненти

Social Media Feed Card

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Stock Ticker

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Stopwatch

Легка

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Typing Indicator

Легка

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

cssvanilla-jsreacttailwind +2
TS JS HTML React +2

UI-компоненти

Unit Converter

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Custom Video Player

Середня

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

vanilla-jshtml5cssreact +3
TS JS HTML React +2

UI-компоненти

Word Counter

Легка

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Image Zoom / Magnifier

Середня

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

Breadcrumb Nav

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

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.

vanilla-jssvgreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

vanilla-jssvgreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

vanilla-jssvgreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

vanilla-jssvgreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

vanilla-jssvgreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

vanilla-jssvgreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

vanilla-jssvgreacttailwind +2
TS JS HTML React +2

UI-компоненти

Treemap

Складна

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

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

vanilla-jssvgreacttailwind +2
TS JS HTML React +2

UI-компоненти

Chat Widget

Складна

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

cssvanilla-js
JS HTML

UI-компоненти

Comment Thread

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

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.

svgreacttailwindvue +1
TS JS HTML React +2

UI-компоненти

Footer Links

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Forgot Password

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

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.

cssreacttailwindvue +1
TS JS HTML React +2

UI-компоненти

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.

vanilla-jscssreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

Menubar App

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

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.

cssreacttailwindvue +1
TS JS HTML React +2

UI-компоненти

Notification Bell

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Pricing Table

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

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.

svgcssreacttailwind +2
TS JS HTML React +2

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

Register Page

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Shopping Cart

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Sidebar Admin

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

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.

svgreacttailwindvue +1
TS JS HTML React +2

UI-компоненти

Tabs Vertical

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Verify Email

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

Admin Layout

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

Calendar View

Складна

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

cssvanilla-js
JS HTML

UI-компоненти

Dashboard Widget

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

Employee Schedule

Складна

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

cssvanilla-js
JS HTML

UI-компоненти

Kanban Board

Складна

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

cssvanilla-js
JS HTML

UI-компоненти

Multi-Step Form

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Scheduler Timeline

Складна

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

cssvanilla-js
JS HTML

UI-компоненти

Search Autocomplete

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Settings Panel

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

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.

css
HTML

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

User Profile Card

Легка

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

css
HTML

UI-компоненти

Alert Banner

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Alert Dialog

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Anchor Navigation

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

Autocomplete

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Avatar Group

Легка

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

css
HTML

UI-компоненти

Back to Top

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

Badge

Легка

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

css
HTML

UI-компоненти

Bottom Navigation

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Breadcrumb

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Carousel

Середня

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

cssvanilla-js
JS HTML react-native

UI-компоненти

Chat Bubble

Легка

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

css
HTML

UI-компоненти

Checkbox Group

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Clipboard Copy

Легка

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

vanilla-jscss
JS HTML

UI-компоненти

Color Picker

Складна

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

canvasvanilla-js
JS HTML

UI-компоненти

Context Menu

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Custom Select

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Date Picker

Складна

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

cssvanilla-js
JS HTML

UI-компоненти

Data Table

Складна

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

cssvanilla-js
JS HTML

UI-компоненти

Diff Slider

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

Divider Label

Легка

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

css
HTML

UI-компоненти

Dropdown Menu

Середня

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

cssvanilla-js
JS HTML react-native

UI-компоненти

Empty State

Легка

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

css
HTML

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

File Upload Dropzone

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

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.

cssvanilla-js
JS HTML

UI-компоненти

Image Lightbox

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

Indicator

Легка

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

css
HTML

UI-компоненти

Input Variants

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Keyboard Display

Легка

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

css
HTML

UI-компоненти

Loading Variants

Легка

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

css
HTML

UI-компоненти

Masonry Grid

Легка

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

css
HTML

UI-компоненти

Mega Menu

Середня

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

vanilla-jscss
JS HTML

UI-компоненти

Phone Mockup

Легка

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

css
HTML

UI-компоненти

Modal Dialog

Середня

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

cssvanilla-js
JS HTML react-native

UI-компоненти

Browser Mockup

Легка

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

css
HTML

UI-компоненти

Navigation Menu

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Number Input

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

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).

cssvanilla-js
JS HTML react-native

UI-компоненти

Pagination

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Password Field

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Popover

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Progress Bar

Легка

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

cssvanilla-js
JS HTML react-native

UI-компоненти

QR Code

Середня

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

canvasvanilla-js
JS HTML

UI-компоненти

Radio Group

Легка

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

css
HTML

UI-компоненти

Rating Stars

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Range Slider

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Resizable Panels

Складна

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

cssvanilla-js
JS HTML

UI-компоненти

Result Page

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Scroll Area

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Segmented Control

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Separator

Легка

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

css
HTML

UI-компоненти

Sheet / Drawer

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Stat Card

Легка

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

css
HTML

UI-компоненти

Stack Cards

Легка

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

css
HTML

UI-компоненти

Status Indicator

Легка

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

css
HTML

UI-компоненти

Steps Progress

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Swap

Легка

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

css
HTML

UI-компоненти

Tag Input

Середня

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

cssvanilla-js
JS HTML

UI-компоненти

Text Rotate

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Timeline

Легка

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

css
HTML

UI-компоненти

Toggle Group

Легка

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

cssvanilla-js
JS HTML

UI-компоненти

Tour Spotlight

Складна

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

vanilla-jscss
JS HTML

UI-компоненти

Watermark

Середня

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

canvasvanilla-js
JS HTML

UI-компоненти

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.

cssvanilla-jscss-gridtransition
JS HTML react-native

UI-компоненти

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.

cssvanilla-jscss-transitions
JS HTML

UI-компоненти

Command Palette (⌘K)

Середня

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

vanilla-jscsskeyboard-events
JS HTML

UI-компоненти

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.

vanilla-jscssdrag-apihtml5
JS HTML

UI-компоненти

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.

cssperspectivetransform-stylebackface-visibility
HTML

UI-компоненти

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.

csskeyframesanimationvanilla-js
HTML

UI-компоненти

Skeleton Loader

Легка

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

csskeyframescss-variables
HTML react-native

UI-компоненти

Toast Notification Stack

Легка

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

vanilla-jscssanimation
JS HTML react-native

UI-компоненти

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.

csscheckboxcss-variables
HTML react-native

UI-компоненти

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.

csspseudo-elementscss-variables
HTML

UI-компоненти

Metric Cards

Легка

Dashboard-style metric cards with hover lift, chip badges (positive/negative/neutral), and count-up animation for the main value.

htmlcssjavascript
HTML

UI-компоненти

Card Automatic Transition

Середня

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

htmlcssjavascript
JS HTML

UI-компоненти

Transition Card

Середня

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

htmlcssjavascript
JS HTML

UI-компоненти

Glassmorphism Card

Легка

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

cssbackdrop-filtervuesvelte
TS JS HTML React +2

UI-компоненти

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.

vanilla-jsd3svgreact +3
TS JS HTML React +2

Патерни

55

Патерни

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.

cssjavascriptvuesvelte
TS JS HTML React +2

Патерни

Blur Fade

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

Патерни

Box Reveal

Середня

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

cssjavascriptvuesvelte
TS JS HTML React +2

Патерни

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.

cssjavascriptvuesvelte
TS JS HTML React +2

Патерни

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.

cssjavascriptvuesvelte
TS JS HTML React +2

Патерни

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.

cssjavascriptvuesvelte
TS JS HTML React +2

Патерни

Progressive Blur

Легка

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

cssjavascriptvuesvelte
TS JS HTML React +2

Патерни

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.

cssjavascriptvuesvelte
TS JS HTML React +2

Патерни

Scratch to Reveal

Середня

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

cssjavascriptvuesvelte
TS JS HTML React +2

Патерни

Scroll Velocity Text

Середня

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

cssjavascriptvuesvelte
TS JS HTML React +2

Патерни

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.

cssjavascriptvuesvelte
TS JS HTML React +2

Патерни

Drawer Slide Effect

Легка

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

cssvanilla-js
JS HTML
Легка

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

css
JS HTML

Патерни

Button Press Effect

Легка

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

cssvanilla-js
JS HTML

Патерни

Modal Enter Effect

Легка

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

cssvanilla-js
JS HTML

Патерни

Nav Underline Effect

Легка

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

cssvanilla-js
JS HTML

Патерни

Bulk Actions

Середня

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

vanilla-jscss
JS HTML

Патерни

Copy to Clipboard

Легка

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

vanilla-jscss
JS HTML

Патерни

CRUD Table

Складна

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

vanilla-jscssreactvue +1
TS JS HTML React +2

Патерни

Debounced Search

Легка

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

vanilla-jscss
JS HTML

Патерни

Infinite Scroll

Середня

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

vanilla-jscss
JS HTML

Патерни

Lazy Load

Легка

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

vanilla-jscss
JS HTML

Патерни

Loading Skeleton

Легка

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

vanilla-jscss
JS HTML

Патерни

Optimistic UI

Середня

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

vanilla-jscssreactvue +1
TS JS HTML React +2

Патерни

Search Filter

Середня

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

vanilla-jscssreactvue +1
TS JS HTML React +2

Патерни

Sortable Table

Середня

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

vanilla-jscss
JS HTML

Патерни

Theme Toggle

Легка

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

vanilla-jscss
JS HTML

Патерни

Virtual List

Складна

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

vanilla-jscssreactvue +1
TS JS HTML React +2
Середня

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

view-transitionsthemecssjs
JS HTML
Складна

Shared-element state swaps coordinated with JavaScript panel choreography.

view-transitionswaapicssjs
JS HTML
Середня

Primary and nested navigation transitions in a stable shell layout.

view-transitionsapp-shellnested-layout
JS HTML
Складна

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

interactioncursorspotlightdebugger +1
JS HTML

Патерни

Card Grid Transition

Середня

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

view-transitions-apicss
JS HTML

Патерни

Theme Transition

Середня

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

view-transitions-apiclip-path
JS HTML
Середня

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

view-transitions-apispa-routing
JS HTML
Легка

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

view-transitions-apicrossfade
JS HTML

Патерни

Bokeh Particle Hero

Легка

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

canvas-2dvanilla-js
JS HTML

Патерни

Magnetic Cursor

Середня

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

vanilla-jsspring-physics
JS HTML

Патерни

Spotlight Reveal

Середня

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

css-maskmouse-tracking
JS HTML
Легка

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

intersection-observercss-keyframes
JS HTML

Патерни

Morphing Blobs

Легка

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

css-border-radiussvg-pathcanvas-bezier
JS HTML
Легка

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

svg-filtercanvascss
JS HTML

Патерни

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.

gsapscrolltriggerleniscanvas-2d +1
JS HTML

Патерни

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.

gsapaccordionheight-autoa11y
JS HTML
Середня

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.

gsapclip-pathlightboxkeyboard-nav +1
JS HTML

Патерни

CSS Dot Loader

Легка

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

csskeyframesanimation-delay
HTML

Патерни

Magnetic Button

Середня

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

cssjsmousemovetransform +2
TS JS HTML React +2

Компоненти

50

Компоненти

Action Dropdown Menu

Середня

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

cssjavascript
HTML

Компоненти

Code Tabs Viewer

Середня

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

cssjavascript
HTML

Компоненти

Collection Carousel

Середня

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

cssjavascript
HTML

Компоненти

CodePen Embed

Легка

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

cssjavascript
HTML

Компоненти

Filter Search Bar

Середня

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

cssjavascript
HTML

Компоненти

Hero Code Space Background

Складна

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

cssjavascript
HTML

Компоненти

Navigation Header

Середня

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

cssjavascript
HTML

Компоненти

Resource Card

Легка

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

cssjavascript
HTML

Компоненти

Site Footer

Легка

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

css
HTML

Компоненти

Showcase Preview Card

Середня

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

cssjavascript
HTML

Компоненти

Tech Stack Icon

Легка

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

cssjavascriptreact
HTML

Компоненти

Expo Biometric Authentication

Середня

Biometric authentication using expo-local-authentication with Face ID / Touch ID support, hardware check, fallback to passcode, and authentication flow UI.

react-nativetypescriptexpo-local-authentication
react-native

Компоненти

Expo Barcode Scanner

Середня

A barcode and QR code scanner using expo-camera with scan overlay, torch toggle, scan history, and result action sheet.

react-nativetypescriptexpo-camera
react-native

Компоненти

Expo Camera

Середня

A camera component using expo-camera with photo capture, front/back toggle, flash control, and captured photo preview with retake option.

react-nativetypescriptexpo-camera
react-native

Компоненти

Expo File System

Середня

File download and upload with progress tracking using expo-file-system — download resumable files, read/write local files, and display file info.

react-nativetypescriptexpo-file-system
react-native

Компоненти

Expo Image Picker

Легка

An image picker component using expo-image-picker with gallery selection, camera capture, multi-select support, and image preview grid.

react-nativetypescriptexpo-image-picker
react-native

Компоненти

Expo Haptic Feedback

Легка

Haptic feedback patterns using expo-haptics — impact styles (light, medium, heavy), notification types (success, warning, error), and selection feedback.

react-nativetypescriptexpo-haptics
react-native

Компоненти

Expo Map View

Складна

An interactive map component using react-native-maps with custom markers, callouts, user location, and region change tracking.

react-nativetypescriptreact-native-maps
react-native

Компоненти

Expo Push Notifications

Середня

Push notification setup with expo-notifications — permission request, local notification scheduling, notification listeners, and a notification inbox UI.

react-nativetypescriptexpo-notifications
react-native

Компоненти

React Native Avatar

Легка

An avatar component for React Native with image support, fallback initials, status indicator, size variants, and group stacking.

react-nativetypescript
react-native

Компоненти

React Native Accordion

Середня

An animated accordion component for React Native with smooth height transitions, rotate chevron indicator, and single or multi-expand modes.

react-nativetypescript
react-native

Компоненти

React Native Bottom Tabs

Легка

A bottom tab navigator for React Native with animated indicator, badge support, icon + label layout, and haptic-ready tab switching.

react-nativetypescript
react-native

Компоненти

React Native Button Variants

Легка

A set of reusable button components for React Native — solid, outline, ghost, and icon variants with size options, loading state, and haptic feedback support.

react-nativetypescriptexpo-haptics
react-native

Компоненти

React Native Action Sheet

Легка

An iOS-style action sheet component for React Native with title, message, action buttons, cancel button, and destructive action styling.

react-nativetypescript
react-native

Компоненти

React Native Card

Легка

A versatile card component for React Native with image header, content area, footer actions, and multiple variants — elevated, outlined, and filled.

react-nativetypescript
react-native

Компоненти

React Native Badge

Легка

A badge and chip component for React Native with color variants, dot mode, dismissible chips, and icon support.

react-nativetypescript
react-native

Компоненти

React Native Drag to Reorder

Складна

A drag-to-reorder list for React Native using PanResponder with long-press activation, animated item displacement, and drop-to-place.

react-nativetypescript
react-native
Легка

A FlatList with pull-to-refresh functionality, custom refresh indicator, loading states, and empty state placeholder for React Native.

react-nativetypescript
react-native

Компоненти

React Native Infinite Scroll

Середня

An infinite scroll list for React Native with automatic pagination, loading footer indicator, and end-of-list detection using FlatList onEndReached.

react-nativetypescript
react-native

Компоненти

React Native Swipe Cards

Складна

Tinder-style swipeable card stack for React Native with PanResponder gestures, rotation on drag, like/nope overlays, and spring-back animation.

react-nativetypescript
react-native
Середня

A slide-out drawer navigation sidebar for React Native with overlay backdrop, gesture support via PanResponder, menu items, and user profile header.

react-nativetypescript
react-native

Компоненти

React Native Animated Header

Складна

A collapsible animated header for React Native that shrinks on scroll with parallax image, fading title, and sticky compact header bar.

react-nativetypescript
react-native

Компоненти

React Native Lottie Player

Легка

A Lottie animation player component for React Native with play/pause controls, speed adjustment, loop toggle, and progress scrubber.

react-nativetypescriptlottie-react-native
react-native
Середня

A draggable bottom sheet modal for React Native with gesture dismiss, snap points, backdrop overlay, and spring animations using the Animated API.

react-nativetypescript
react-native

Компоненти

React Native Parallax Scroll

Середня

A parallax scroll effect for React Native with layered elements moving at different speeds, creating depth as the user scrolls through content.

react-nativetypescript
react-native

Компоненти

React Native Pinch to Zoom

Складна

A pinch-to-zoom image viewer for React Native with pan gestures, double-tap to zoom, min/max scale limits, and smooth reset animation.

react-nativetypescript
react-native

Компоненти

React Native Search & Filter

Середня

A search bar with filtered results list for React Native, featuring debounced input, highlight matching text, recent searches, and empty state.

react-nativetypescript
react-native

Компоненти

React Native Section List

Середня

A grouped section list for React Native with sticky headers, alphabet index sidebar, section counts, and customizable separators.

react-nativetypescript
react-native

Компоненти

React Native Skeleton Loader

Легка

A skeleton loading placeholder for React Native with shimmer animation, configurable shapes (text lines, circles, rectangles), and a card preset.

react-nativetypescript
react-native
Складна

A shared element transition effect for React Native that animates position and size of an element between two views using measure and Animated API.

react-nativetypescript
react-native
Середня

A collection of spring physics animations for React Native — bounce, wobble, pulse, and elastic effects using Animated.spring with configurable tension and friction.

react-nativetypescript
react-native

Компоненти

React Native Stack Navigator

Середня

A stack navigation component for React Native with push/pop transitions, custom header, back button, and shared element support using Animated API.

react-nativetypescript
react-native

Компоненти

React Native Swipe Actions

Середня

A swipeable list item for React Native with reveal-on-swipe action buttons (delete, archive, pin) using PanResponder and Animated API.

react-nativetypescript
react-native
Середня

A toast notification system for React Native with success, error, warning, and info variants. Supports auto-dismiss, swipe-to-dismiss, and stacking.

react-nativetypescript
react-native
Середня

A swipeable top tab bar for React Native with animated underline indicator, horizontal scroll for many tabs, and gesture-driven panel switching.

react-nativetypescript
react-native

Компоненти

React Native Text Input

Легка

A styled text input component for React Native with floating label, validation states (error, success), helper text, and icon support.

react-nativetypescript
react-native

Компоненти

useMagnetic Hook

Середня

A React hook that adds a magnetic pull effect to any element — the element follows the cursor when it enters a configurable radius, then snaps back on leave.

reacttypescript
TS React

Компоненти

useParallax Hook

Легка

A React hook that returns a scroll-linked translateY offset for any element, creating a layered depth effect with configurable speed and direction.

reacttypescript
TS React

Компоненти

Cursor Follower

Середня

A React component that renders a smooth custom cursor that follows the mouse using lerp interpolation — includes a dot and a larger ring that trails behind.

reacttypescriptcanvasrequestanimationframe
TS React

Компоненти

useAnimatedCounter Hook

Легка

A React hook that animates a number from zero to a target value when the element enters the viewport, with configurable easing, duration, prefix, and suffix.

reacttypescript
TS React

Remotion

32
Середня

An animated code typing walkthrough with syntax coloring in a VS Code-style editor frame — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Середня

An animated event countdown with flip-style digits, blinking separators, and glowing background — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React

Animated kinetic typography — staggered word reveals with spring physics and exit animations — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Легка

Animated "trusted by" logo grid with staggered scale-in reveals and subtle pulse — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Середня

Abstract animated gradient wave background with layered sine curves and gradient text title — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Середня

Animated global map with location pins dropping in with ripple effects and dashed connection lines — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Легка

Animated masonry photo collage with staggered scale-in reveals and gradient placeholders — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Середня

A podcast audiogram with animated waveform bars, guest avatar, episode info, and progress bar — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Середня

A broadcast-style news ticker with rotating headlines, scrolling bottom bar, LIVE indicator, and network branding — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Середня

Stacked toast notifications sliding in and out with progress bars and type-colored accents — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Середня

Animated pricing comparison table with staggered card reveals, feature lists, and highlighted "popular" plan — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React

A before/after split-screen reveal with animated divider, mock UI cards, and labeled sides — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Легка

A product feature showcase with animated title, tagline, and staggered feature cards — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React

Animated social proof stats with counting numbers, icons, and staggered card reveals — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Легка

Animated inspirational quote with word-by-word reveal, giant quote mark, accent line, and author attribution — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Легка

Animated step-by-step process flow with numbered circles, connector arrows, and staggered reveals — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Легка

Animated circular progress rings showing Lighthouse-style performance scores with spring animations — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React
Середня

Masked text reveal with animated wipe blocks and word-by-word exposure — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React

A 5-second animated bar chart rendered with Remotion — bars grow up with spring physics, data labels count up, and the legend fades in.

remotionreacttypescriptsvg
TS React

A punchy 4-second CTA composition — headline slides in, button springs up with a shimmer sweep, and an animated arrow bounces to the right.

remotionreacttypescript
TS React

A 4-second Remotion composition showing a large number counting up from 0 to a target value, with an eased interpolation and optional prefix/suffix labels.

remotionreacttypescript
TS React
Середня

A polished YouTube channel intro — animated title slide, subtitle reveal, and branding accent — rendered with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React

A 6-second LinkedIn-format video — avatar slide-in, name + headline reveal, post text fade-in, and an animated engagement counter — 1200×628.

remotionreacttypescript
TS React
Середня

A 3-second logo reveal using spring physics — the logo scales up from zero with a radial background burst, then the tagline fades in below.

remotionreacttypescript
TS React

A broadcast-style lower-third graphic that slides in from the left, holds for display, then slides out — built with Remotion at 1280×720 30fps.

remotionreacttypescript
TS React

A 15-second vertical Instagram Story template — progress bar at the top, animated headline, subtitle, and a call-to-action — rendered at 1080×1920.

remotionreacttypescript
TS React
Середня

A 20-second YouTube outro with "thanks for watching", an animated subscribe button pulse, and placeholder end-card slots — rendered with Remotion.

remotionreacttypescript
TS React
Середня

A 6-second animated testimonial card — quote reveals word-by-word, avatar slides in, star rating fills, and the author name fades up.

remotionreacttypescript
TS React

A Remotion composition that generates YouTube-style thumbnails programmatically — big title text, tag badge, gradient background, and a face/image slot at 1280×720.

remotionreacttypescript
TS React
Середня

An 8-second Remotion composition where timeline nodes appear sequentially with a spring, connecting lines draw between them, and event labels fade in.

remotionreacttypescript
TS React
Середня

A 15-second vertical TikTok-style template with staggered caption words, username overlay, animated like/comment icons, and a progress bar — 1080×1920.

remotionreacttypescript
TS React

Ultra High Definition сторінки

8

Ultra High Definition сторінки

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.

gsapscrolltriggerleniscss +2
JS HTML

Ultra High Definition сторінки

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.

gsapscrolltriggerleniscss +2
JS HTML

Ultra High Definition сторінки

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.

gsapscrolltriggerleniscss +2
JS HTML

Ultra High Definition сторінки

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.

gsapscrolltriggerleniscss +2
JS HTML

Ultra High Definition сторінки

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.

gsapscrolltriggerleniscss +2
JS HTML

Ultra High Definition сторінки

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.

gsapscrolltriggercssvanilla-js
JS HTML

Ultra High Definition сторінки

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.

gsapscrolltriggercssvanilla-js
JS HTML

Ultra High Definition сторінки

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.

gsapscrolltriggerleniscss +1
JS HTML

Стилі Дизайну

26

Стилі Дизайну

Aurora / Gradient Mesh

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

AR / VR Interface

Складна

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

htmlcssjavascript
JS HTML

Стилі Дизайну

3D Design

Складна

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Bauhaus

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Dark Mode

Легка

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Dark Blue

Легка

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Brutalism

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Bento UI

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Claymorphism

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Flat Design

Легка

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

htmlcss
JS HTML

Стилі Дизайну

Glass Dark

Легка

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Glassmorphism

Легка

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Material Design

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Isometric 3D

Складна

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Miro / Whiteboard

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Minimalist UI

Легка

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

htmlcss
JS HTML

Стилі Дизайну

Illustration-First

Складна

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

htmlcssjavascript
JS HTML

Стилі Дизайну

NES Retro / Pixel

Складна

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Netflix Cinematic

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Motion / Kinetic

Складна

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Newspaper / Editorial

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Purple Space

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Neumorphism

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Terminal / CLI

Легка

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Skeuomorphism

Середня

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

htmlcssjavascript
JS HTML

Стилі Дизайну

Vaporwave

Середня

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

htmlcssjavascript
JS HTML

Музика

5
Середня

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).

html-midi-playertone-jsmagenta
JS HTML
Складна

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.

html-midi-playertone-jsmagenta
JS HTML
Складна

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

html-midi-playertone-jsmagenta
JS HTML

Музика

Vaporwave Synth

Легка

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

web-audio-api
JS HTML
Середня

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.

html-midi-playertone-jsmagenta
JS HTML

3D & Immersive

3D-моделі

1
Легка

Ten distinct Three.js geometric shapes floating in space with sine-wave drift, self-rotation, and a mouse parallax camera effect.

threejswebgl
JS HTML

3D-взаємодії

2

3D-взаємодії

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.

threejswebgl
JS HTML

3D-взаємодії

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.

threejsinstancedmeshwebgl
JS HTML

AI & Dev

Промпти

28

Промпти

Prompt API Design

Легка

Prompt for designing REST APIs with validation, error contracts, and versioning strategy.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt Architecture

Легка

Prompt template for designing scalable system architectures with explicit tradeoffs.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt Bug Fix

Легка

Root-cause analysis and bug-fix prompt with validation and rollback guidance.

openaiclaudegeminiprompting
Markdown
Середня

Terminal-first engineering prompt focused on minimal diffs, strict non-destructive edits, and iterative verification.

markdownpromptingai-agents
Markdown

Промпти

Prompt Code Review

Легка

Structured code review prompt focused on correctness, risk detection, and actionable fixes.

openaiclaudegeminiprompting
Markdown
Середня

Browser automation prompt for research, extraction, and structured task completion with traceable steps.

markdownpromptingautomation
Markdown

Промпти

Prompt Changelog

Легка

Prompt template for generating changelog entries from commits and release notes.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt Database

Легка

Prompt for relational schema design, indexing, constraints, and migration planning.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt Comment

Легка

Prompt for adding concise, intention-revealing comments to non-obvious code paths.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt Debug Log

Легка

Prompt template for analyzing logs and correlating events into incident timelines.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt Deploy

Легка

Prompt for generating deployment checklists with rollback and monitoring readiness.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt Debug

Легка

Prompt for systematic debugging plans using hypotheses, instrumentation, and experiments.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt Docs Gen

Легка

Prompt template to generate technical documentation from code and product context.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt Qoder Agent

Середня

Agentic coding prompt tuned for autonomous repo exploration, planning, implementation, and validation loops.

markdownpromptingai-agents
Markdown

Промпти

Prompt Perplexity

Легка

Prompt template inspired by Perplexity-style assistant behavior for concise research and answer synthesis.

markdownprompting
Markdown

Промпти

Prompt Explain Code

Легка

Prompt for explaining code from architecture-level intent down to execution details.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt Optimize

Легка

Performance optimization prompt for identifying bottlenecks and measurable improvements.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt README

Легка

Prompt for drafting complete README files with setup, usage, and contribution guidance.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt Refactor

Легка

Code refactoring prompt to improve readability and maintainability without changing behavior.

openaiclaudegeminiprompting
Markdown
Легка

Reference prompt for exploring and adapting system prompts from AI tools with proper source attribution.

markdownopenaiclaudegemini
Markdown
Середня

Cloud IDE prompt for full-stack implementation with repository-aware execution and safety checks.

markdownpromptingcloud-ide
Markdown

Промпти

Prompt v0 Builder

Легка

UI generation prompt for producing structured, component-oriented frontend outputs with constraints.

markdownpromptingfrontend
Markdown

Промпти

Prompt Security

Середня

Security audit prompt covering threat modeling, vuln discovery, and prioritized remediation.

openaiclaudegeminiprompting
Markdown

Промпти

Prompt UI Component

Легка

Prompt template for reusable UI component design with accessibility-first behavior.

openaiclaudegeminiprompting
Markdown
Середня

Flow-oriented prompt for multi-step coding tasks with context memory and staged execution.

markdownpromptingide
Markdown

Промпти

Prompt VSCode Agent

Легка

Workspace assistant prompt for editor-integrated refactors, diagnostics, and code action workflows.

markdownpromptingide
Markdown

Промпти

Prompt Write Tests

Легка

Prompt template for generating high-value unit, integration, and edge-case tests.

openaiclaudegeminiprompting
Markdown
Легка

A thorough system prompt that turns Claude or ChatGPT into a senior engineer code reviewer focused on correctness, security, and maintainability.

claudechatgptprompting
Markdown

Plugins

2
Легка

A Claude Code skill that reads your staged changes and generates a conventional commit message following the project's commit style.

claude-codegitconventional-commits
YAML

Архітектури

14
Середня

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

github-actionsyaml
HTML

Архітектури

Astro Project Architecture

Легка

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

astrotypescript
HTML

Архітектури

GraphQL Schema Architecture

Середня

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

graphqlnodejstypescript
HTML
Складна

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

typescriptnodejs
HTML

Архітектури

Turborepo Monorepo Architecture

Складна

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

turborepotypescript
HTML

Архітектури

Nx Monorepo Architecture

Складна

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

nxtypescript
HTML

Архітектури

PostgreSQL Schema Patterns

Середня

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

postgresqldrizzlesql
HTML

Архітектури

Next.js App Router Architecture

Середня

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

nextjsreacttypescript
HTML
Середня

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

nodejsexpresstypescript
HTML

Архітектури

Prisma Schema Architecture

Легка

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

prismatypescript
HTML

Архітектури

React + Vite Architecture

Легка

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

reactvitetypescript
HTML

Архітектури

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.

nextjstrpcprismatypescript
HTML

Архітектури

Next.js SaaS Architecture

Середня

A production-ready architecture for a multi-tenant SaaS app using Next.js 15, Postgres, Auth.js, and Cloudflare. Includes a Mermaid diagram and file structure.

nextjstypescriptpostgresprisma +3
Markdown

Бойлерплейти

12

Бойлерплейти

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.

nextjsreacttypescripttailwindcss
HTML

Бойлерплейти

Bun + Hono API Starter

Легка

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

bunhonotypescript
HTML
Середня

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

nextjsprismapostgresqltypescript
HTML

Бойлерплейти

React Admin Dashboard Starter

Середня

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

reacttypescripttailwindcss
HTML

Бойлерплейти

Astro + Tailwind Starter

Легка

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

astrotailwindcsstypescript
HTML

Бойлерплейти

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.

nextjsreacttypescripttailwindcss
HTML

Бойлерплейти

React + TypeScript + Vite Starter

Легка

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

reactvitetypescript
HTML

Бойлерплейти

PWA Starter (Vite + Workbox)

Середня

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

vitetypescript
HTML

Бойлерплейти

Vue 3 + Vite Starter

Легка

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

vuevitetypescript
HTML
Складна

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

nextjstrpcprismatypescript +1
HTML

Бойлерплейти

Astro + Tailwind Starter

Легка

A minimal Astro starter with Tailwind, TypeScript, and a clean file structure for marketing sites.

astrotailwindtypescript
Markdown

Data & SQL

Схеми баз даних

8

Схеми баз даних

Booking Reservations Schema

Середня

Relational schema for reservations with resources, availability slots, bookings, and payment records.

postgresqlsqlmermaid
SQL Mermaid

Схеми баз даних

CMS Blog Schema

Середня

Relational schema for content management with authors, posts, tags, publishing workflow, and media.

postgresqlsqlmermaid
SQL Mermaid

Схеми баз даних

CRM Sales Schema

Середня

Relational schema for CRM sales pipelines with leads, accounts, contacts, deals, and activities.

postgresqlsqlmermaid
SQL Mermaid

Схеми баз даних

Ecommerce Core Schema

Середня

Core relational schema for ecommerce with users, catalog, inventory, orders, and payments.

postgresqlsqlmermaid
SQL Mermaid

Схеми баз даних

LMS Education Schema

Середня

Relational schema for learning platforms with courses, lessons, enrollments, and progress tracking.

postgresqlsqlmermaid
SQL Mermaid

Схеми баз даних

Marketplace Schema

Складна

Relational schema for a two-sided marketplace with buyers, sellers, listings, transactions, and payouts.

postgresqlsqlmermaid
SQL Mermaid

Схеми баз даних

SaaS Multi Tenant Schema

Складна

Multi-tenant SaaS relational schema with organizations, members, roles, subscriptions, and billing.

postgresqlsqlmermaid
SQL Mermaid

Схеми баз даних

Support Helpdesk Schema

Складна

Relational schema for support ticketing with SLA policies, comments, assignments, and status history.

postgresqlsqlmermaid
SQL Mermaid