716 live website animations in 49 sections
This library needs JavaScript to play the demos. Each animation has a copyable prompt and a copyable, self-contained HTML file.
Hero sections (36)
The first screen. Headlines, product shots and openers that set the tone.
Split headline reveal, Blur-in words, Product float, Tilted screen settles, Video hero with scrim, Gradient mesh drift, Typewriter headline, Rotating word slot, Hero with logo strip, Cursor spotlight, Shrink into card, Stacked screenshots, Layered parallax, Zoom through, Character stagger, Orbiting icons, Floating UI chips, Split screen reveal, Image sequence scrub, Blueprint grid draw, Search hero, Chat demo hero, Masked image reveal, Kinetic marquee, Card fan, App store phone, Waitlist signup, Photo collage settle, Map route hero, Inline booking picker, Story slideshow hero, Flip countdown, Inline media pills, Video expand, Audience switcher, Community wall.
Navigation (20)
Headers, menus, tab bars and the bars that follow you down the page.
Glass on scroll, Hide on scroll down, Shrink to floating pill, Sliding hover pill, Underline grow, Mega menu, Right-side drawer, Full-screen menu, Hamburger to X, Dynamic island nav, Bottom tab bar, Scrollspy side nav, Breadcrumb collapse, Command palette, Origin-aware dropdown, Reading progress bar, Announcement bar dismiss, Sidebar to icon rail, Segmented section switch, Magnifying dock.
Scroll patterns (22)
What happens between the top and the bottom of the page.
Sticky positioning, Scroll snap, Scroll triggered reveal, Infinite scroll, Scroll progress bar, Zoom on scroll, Parallax layers, Horizontal scroll section, Scrollytelling scene, Text highlight on scroll, Sticky card stack, Curtain reveal, Pinned image sequence, Reveal mask, Counter on enter, Staggered list entrance, Sticky media beside text, Back to top button, Velocity skew, Rotate on scroll, SVG line draw, Section color shift.
Text and typography (26)
Headlines that arrive, words that change, type that moves.
Split chars rise, Blur in, Scramble decode, Typewriter, Shine sweep, Marquee ticker, Word rotate, Marker highlight, Underline draw, Letter wave, Text mask fill, Stroke to fill, Odometer roll, Weight morph, Fade-up lines, Text on a circle, Shimmering label, 3D cube words, Spotlight reveal, Word emphasis, Strike and replace, Stacked echo, Tracking breathe, Hover weight, Quote reveal, Split hover.
Buttons and CTAs (22)
Press, hover and success states for the things people click.
Press and settle, Shine sweep, Magnetic button, Arrow slide, Fill from edge, Text roll, Loading to success, Soft ripple, Moving border, Icon swap, Expand on hover, iOS switch, Like burst, Download progress, Split button, Hold to confirm, Attention pulse, 3D press, Ghost to solid, Inner light, Segmented buttons, Fly to cart.
Cards and features (30)
Feature blocks, bento tiles and the surfaces that hold content.
3D tilt, Spotlight border, Flip card, Expand to detail, Lift on hover, Bento focus, Swipe deck, Image zoom, Hover overlay, Feature tabs, Expanding card, Snap carousel, Glossy glare, Holographic foil, Shuffle stack, Animated feature icons, Progress card, Notification stack, Before and after, Drag to reorder, Chart card, Timeline cards, Glass card, Shape morph, Integrations hub, Annotated screenshot, Device morph, Bento assemble, Product swatches, Code plus live preview.
Galleries and media (16)
Images, carousels, lightboxes and players.
Lightbox grow, Masonry fade-up, Photo marquee, Ken Burns slideshow, Before and after, Hover zoom-pan, Peek carousel, Coverflow, Photo stack cycle, Play button morph, Thumbnail strip sync, Polaroid scatter, List image reveal, Momentum gallery, Expanding panels, Audio waveform.
Logos and social proof (10)
Logo walls, ratings, counters and trust signals.
Logo marquee, Logo grid cycle, Avatar stack, Star rating, Live signup counter, Activity toast, Press quotes, Award badge, Trust bar, Review score ring.
Testimonials (12)
Quotes, reviews and customer stories.
Fading quotes, Marquee wall, Swipe card stack, Avatar switcher, Masonry wall, Post-style cards, Video testimonials, Rating breakdown, Quote typewriter, Spotlight on hover, Result card, Logo and quote slider.
Pricing (10)
Plans, toggles and calculators.
Billing toggle, Featured plan, Comparison table, Seat slider, Hover focus, Savings badge pop, Usage tier stepper, Feature checklist, Currency switch, Usage calculator.
Stats and numbers (10)
Counters, charts and progress that make numbers land.
Count up, Odometer metric, Progress bars, Ring progress, Bar chart, Line chart draw, Live sparkline, Comparison bars, Number and delta, Donut segments.
FAQ and accordions (8)
Questions, answers and things that open and close.
Smooth accordion, Plus to minus, Single open, Search the FAQ, Topic tabs, Chevron flip, Two-column FAQ, Chat-style FAQ.
Forms and inputs (14)
Fields, toggles, validation and submit states.
Floating label, Focus ring, Inline validation, Password strength, OTP input, Settings toggles, Checkbox draw, Radio pills, Range slider, Multi-step form, Tag input, Search suggestions, Submit to success, Character counter.
Modals, toasts and drawers (12)
Layers that appear above the page.
Modal from trigger, Bottom sheet, Side drawer, Toast stack, Tooltip, Popover menu, Cookie banner, Undo snackbar, Context menu, Alert dialog, Island notification, Onboarding tour.
Loaders and skeletons (12)
What people see while they wait.
Skeleton shimmer, Indeterminate bar, Dot bounce, Equalizer bars, Typing indicator, Logo draw, Percent preloader, Content pulse, Blur-up image, Step checklist, Morphing shape, Liquid fill.
Page transitions (10)
Moving from one view to the next.
Fade through, Slide push, Shared element, Curtain wipe, Circle reveal, Stagger out and in, Zoom into card, Blinds, Crossfade with blur, Stack push.
Backgrounds (20)
Ambient surfaces behind the content.
Aurora, Mesh gradient, Dot grid spotlight, Moving grid floor, Film grain, Floating blobs, Particle drift, Wave lines, Constellation, Conic sweep, Moving stripes, Bokeh, Topographic, Ripples, Light beams, Tile shimmer, Morphing blob, Clouds parallax, Isometric blocks, Radial glow.
Cursor and pointer (10)
Effects that follow the mouse.
Spring follower, Mask cursor, Dot trail, Magnetic menu items, Cursor label, Spotlight reveal, Image trail, Tilt toward cursor, Click ripple, Crosshair guides.
Footers (24)
The last thing on the page.
Big wordmark, Curtain reveal, Link arrow nudge, Newsletter signup, Back to top, Social icon lift, Marquee CTA band, Live status line, Sitemap accordion, Language and currency, Theme toggle sweep, Overlapping CTA card, Address and mini map, App download QR, Sitemap search, Was this helpful, Office clocks, Read next after the end, Copy email to clipboard, Gliding link pill, Giant link list, Falling tag pills, Sticky bar expands, Privacy choices drawer.
3D objects (20)
Hero objects, product shots and sculpted forms rendered live with Three.js.
Iridescent knot, Liquid glass blob, Phone mockup, Floating island, Extruded logo mark, Planet with rings, Card stack, Isometric desk, Floating capsules, Cube wave, Faceted crystal, 3D donut chart, 3D bar chart, Bent headline, Box reveal, Twisted ribbon, Coin stack, 3D app icon, Shape morph, Waving flag.
3D particles (12)
Points, swarms and morphing clouds that hold thousands of moving parts.
Spiral galaxy, Shape morph, Curl noise flow, Point terrain, Word from particles, Starfield warp, Ringed planet, Dust in a light beam, Blue fireworks, DNA helix, Pointer attractor, GPU particle field.
Shaders and gradients (15)
GPU-drawn surfaces: flowing gradients, liquid, noise and light.
Flowing gradient mesh, Liquid chrome, Aurora curtains, Noise blob, Pointer ripples, Wave lines, Grain gradient, Underwater caustics, Hover distortion, Ribbed glass pane, Iridescent film, Halftone gradient, Soft cells, Topographic lines, Rising smoke.
Interactive 3D (12)
Scenes that answer the pointer: turn, drag, hover and click.
Product viewer, Globe with arcs, Raycast hover grid, Drag with inertia, Click to explode, Pointer spotlight, Magnetic 3D buttons, 3D tilt card, Pushed balls, Colour configurator, X-ray circle reveal, Draggable card ring.
3D scroll scenes (15)
Award-site scroll: cameras that fly, products that come apart, worlds that change as you scroll.
Ring tunnel flythrough, Exploded product view, Shape per section, Turntable with callouts, Depth parallax planes, City builds itself, Page tilts into 3D, Zoom into a screen, Globe zooms to a pin, Morning to evening light, Particles assemble, Curved gallery slide, Numbered 3D steps, Ribbon draws a headline, Camera along a path.
ScrollTrigger (18)
Pinned stories, scrubbed timelines, horizontal tracks and reveals tied to the scrollbar.
Words fill on scroll, Stacking feature cards, Horizontal scroll track, Hero zoom-out, Sticky product steps, Layered parallax depth, Scroll-tied counters, Clip-path image reveal, Converging split headline, Snapping sections with nav, Before and after wipe, Velocity marquee, Batched grid reveal, Scrubbed object turn, Section colour shift, Centered scale gallery, Curtain footer reveal, Timeline with growing spine.
Text with GSAP (12)
Split, scrambled, typed and staggered headlines with frame-perfect timing.
Masked line reveal, Character rise in 3D, Scramble decode, Typewriter with caret, Rolling word rotator, Burst from the center, Pointer character wave, Split-flap board, Highlighter sweep, Headline with a counter, Variable weight wave, Text along a curve.
SVG motion (12)
Lines that draw themselves, shapes that morph and objects that ride a path.
Logo draws then fills, Icon morph sequence, Route rides a path, Signature handwriting, Chart line with live dot, Morphing blob backdrop, Success check, Orbiting icons, Progress ring with count, Digits morph into digits, Network connects, Liquid button.
Flip layouts (8)
Layout changes that glide: grids reorder, cards expand, items move between lists.
Filterable product grid, Card expands to detail, List to grid toggle, Kanban card moves columns, Thumbnail flies to hero, Leaderboard re-sort, Tab underline and panel, Add to cart fly.
Drag and throw (8)
Draggable sliders, knobs and decks with momentum, snapping and bounds.
Snapping card carousel, Bottom sheet detents, Rotary knob with ticks, Momentum range slider, Swipe to dismiss stack, Sortable task list, Throwable sticker board, Pull to refresh.
Smooth scroll (14)
Weighted, buttery scroll with Lenis: velocity effects, eased jumps, horizontal tracks and synced scenes.
Velocity skew gallery, Native vs Lenis lerp, Horizontal film strip, Infinite loop list, Velocity marquee, Eased anchor nav, Parallax depth scene, Lenis + ScrollTrigger pin, Reading progress ring, Scroll-scrubbed sequence, Stretch on speed, Nested scroll panel, Menu scroll lock, Soft section snap.
App shells (8)
The frame every app screen lives in: sidebars, rails, top bars and split panes.
Sidebar app shell, Collapsible icon rail, Top-nav app shell, Three-pane split, Command-bar shell, Workspace switcher, Nested settings nav, Resizable split view.
Login and signup (14)
Sign in, sign up, codes, passkeys and every screen before the app opens.
Split screen login, Centered card login, Magic link sent, Six-digit code screen, Signup in steps, Authenticator 2FA setup, Passkey sign in, Signup with password rules, SSO workspace finder, Forgot password flow, Waitlist join, Invite accept, Account picker, Session expired re-auth.
Onboarding (10)
First-run flows that set up a workspace and get people to their first win.
Welcome carousel, Workspace setup, Role and goals picker, Choose a plan, Invite your team, Connect integrations, Import data, Setup checklist home, Product tour spotlight, Personalize preferences.
Settings and account (10)
Profile, billing, team, security and the pages people manage their account on.
Profile with save bar, Billing and usage, Team and roles, API keys, Notification matrix, Security and sessions, Connected apps panel, Appearance and theme, Danger zone delete, Audit log with filters.
Empty and error states (12)
Empty, error, offline and paywall screens that keep people moving.
Empty first project, No search results, 404 inside the app, 500 with retry, Offline and back online, Scheduled maintenance, Access denied, request sent, Upgrade paywall, Success confirmation, Rate limited, Coming soon, Skeleton into content.
Dashboards (12)
Analytics, KPIs and charts for SaaS products and internal tools.
SaaS revenue MRR, Product analytics, Live web traffic, Campaign performance, Sales performance, Finance overview, Support desk metrics, Project portfolio, Team workload, Real-time ops monitor, Executive summary, Social media analytics.
Industry dashboards (14)
Dashboards shaped for a trade: retail, real estate, clinics, restaurants and more.
Real estate listings, Restaurant POS overview, Retail store dashboard, Clinic appointments, Fitness studio schedule, Banking overview, Logistics fleet map, School LMS admin, HR people overview, Property management, Agency client reporting, Hotel bookings calendar, Smart home control, Crypto portfolio.
CRM and sales (10)
Pipelines, contacts, deals and conversations for sales teams.
Deal pipeline board, Contact profile, Lead list and bulk actions, Deal detail, Unified inbox, Email sequence builder, Booking calendar, Sales forecast, Call log and dialer, Tasks and follow-ups.
Client portals (12)
Where clients log in: projects, files, invoices, bookings and approvals.
Client portal home, Project timeline and approvals, File and document hub, Invoices and pay now, Book a session, Client messages, Course member area, Approval queue, Support tickets, Knowledge base, Proposal and e-sign, Community feed.
Commerce (10)
Product, cart, checkout, orders and the admin behind a store.
Product page, Cart drawer, One-page checkout, Order confirmation, Order tracking, Subscription manager, Store admin products, POS register, Wishlist, Returns and refunds.
Tables and boards (12)
Tables, boards, calendars, timelines and file browsers for working data.
Sortable data table, Bulk select and action bar, Editable spreadsheet grid, Kanban board with limits, Month calendar, drag to move, Week calendar time grid, Gantt timeline, File manager with preview, Tree explorer, breadcrumb, Map with synced list, Activity timeline, Plan comparison table.
Inbox and chat (8)
Email, team chat, notifications and comment threads.
Three-pane email client, Team chat with threads, Live chat agent console, Notification center, Document comment threads, Video call with side chat, Direct messages, Email compose.
AI apps (10)
Chat with sources, agents at work, generators and AI writing tools.
Chat with sources, Agent run timeline, Prompt to image studio, Document Q&A, AI writing editor, Voice assistant, Workflow automation builder, Model usage dashboard, Meeting transcription, AI data analyst.
Builders and editors (8)
Docs, forms, pages, workflows and canvases people build things in.
Block doc editor, Form builder, Page builder canvas, Email builder, Whiteboard, Spreadsheet with chart, Slide editor, Image editor.
Mobile apps (24)
Phone app screens: full-bleed on a phone, framed on a desktop.
Phone login with Face ID, Home feed with pull to refresh, Wallet, cards and send money, Fitness activity rings, Booking flow with confirm sheet, Chat app conversation, Profile with stats and tabs, Settings list with pushed detail, Onboarding swipe pages, Ride tracking with driver card, Music player with queue sheet, Food delivery cart and status, Map search with draggable sheet, Agenda with add-event sheet, Product detail with variants, Lock screen notification stacks, QR and document scanner, Habit tracker with streaks, Boarding pass with flight status, Smart home controls, Language lesson quiz, Photo grid with shared zoom, Weather with drifting sky, Tasks with quick add.
Bottom navigation (20)
Tab bars for phone apps: sliding pills, notches, center buttons and bars that hide, shrink and morph.
Expanding label tab, Liquid blob indicator, Curved notch bar, Center button fan, Stretching top line, Springing dot, filled icons, Animated tab icons, Hide on scroll, Minimize to a pill, Search tab morph, Count badge, Material pill indicator, Mini player to sheet, Swipe pages, live indicator, Long press account switcher, Split pills with lens, Spotlight cone bar, Ink bar, white chip, Tap active tab: top, refresh, More sheet swaps a tab.
Mobile gestures (16)
Sheets, swipes, pull to refresh, pickers and the touch patterns phone apps run on.
Sheet detents, Swipe actions, Pull to refresh, Action sheet, Snackbar with undo, Large title collapse, Swipeable card stack, Wheel time picker, Long-press menu, Pinch to zoom, Segmented control, Long-press reorder, Slide to pay, Carousel page dots, Dynamic Island activity, Edge swipe back.
Sidebar designs (20)
Desktop app sidebars: active indicators, hover states, nested groups, badges and the motion that ties them together.
Gliding active pill, Notch tab, Nested groups, File tree, Live unread badges, Filter as you type, Drag to favorites, Hover flyout submenu, Icons that animate, Setup guide checklist, Drill-in sub-panel, Pointer spotlight, Keyboard navigation, Chat channels, Floating inset sidebar, Account menu, New button menu, Drop onto a folder, Label filters, Mini month calendar.
Sidebar collapse (16)
Sidebars that fold to rails, peek on hover, dock, resize and slide away, with every label and icon accounted for.
Hover peek over the page, Staggered label collapse, Drag to resize, snap to rail, Off-canvas with edge peek, Icon rail with side panel, Keyboard shortcut toggle, Mini rail with tooltip handoff, Rail with nested flyouts, Right inspector to tab strip, Paper fold sidebar, Sidebar to floating dock, Sidebar into the menu button, Pin or auto-hide, Responsive sidebar steps, Groups fold to chip rows, Elastic spring collapse.
