Collection

Motion Design for Interfaces

Motion treated as part of the design, not a finishing pass: entrances that establish hierarchy, transitions that keep a user oriented and micro-interactions that make a screen feel alive. Every concept here is prototyped, so you can judge the timing instead of imagining it.

78 designs
Made by the HorizonX team

Animated Success Check

Animated Success Check

A confirmation where a circle draws itself, a check stroke follows, and the mark pops slightly.

Animated Tooltip

Animated Tooltip

A short label that fades in above toolbar icons on hover or keyboard focus.

Animated Drag Reorder

Animated Drag Reorder

A list you can reorder by dragging, with the other rows sliding out of the way.

Animated Infinite Scroll

Animated Infinite Scroll

A list that loads the next items as you reach the end, with new entries fading in one after another.

Animated Modal

Animated Modal

A centered form dialog that fades and scales in over a dimmed page, with the field focused and ready to type.

Animated Pagination

Animated Pagination

Page controls where the active marker slides to the chosen page and the content slides in from the matching side.

Animated Popover

Animated Popover

A small panel anchored to its button that fades and slides in with account actions.

Animated Toast

Animated Toast

A notification that slides up from the corner, stacks with others and dismisses itself with a progress line.

Animated Empty State

Animated Empty State

An empty state that floats in with a staggered title, message and action after the last item is removed.

Animated Hover Card

Animated Hover Card

A profile preview card that opens when you rest on a link, with a short delay so it never flickers.

Animated Validation Shake

Animated Validation Shake

A field that gives a short horizontal shake on an invalid submit while the error message fades in.

Animated Swipe Delete

Animated Swipe Delete

An inbox row that reveals a delete action as you swipe it, then collapses, with a visible delete button and undo.

Animated Toggle Switch

Animated Toggle Switch

A switch whose thumb slides across with a slight squash while the track fills.

Animated Alert Dialog

Animated Alert Dialog

A blocking confirmation dialog for destructive actions, with the safe Cancel choice focused first.

MORVA Interior Design

MORVA Interior Design

An editorial room-design landing page with tactile imagery and considered motion.

Sorrel

Sorrel

A calm, editorial landing page for a financial planning brand, with Lenis smooth scrolling and scroll-driven motion.

Aurel Atelier

Aurel Atelier

An editorial furniture and interiors landing page with cinematic motion and natural materials.

SONORA Acoustic Studio

SONORA Acoustic Studio

An immersive acoustic architecture landing template with editorial layouts and interactive sound-inspired motion.

Veyra

Veyra

An editorial AI strategy landing page with a cinematic sky, adaptive capability orbit, and configurable motion.

NeoShell Hero

NeoShell Hero

Futuristic motorcycle-helmet hero with cinematic product framing, modular callouts and responsive motion.

STAVEN

STAVEN

Scroll-driven landing page for a prefabricated timber housing brand, built with Vite and GSAP.

NEUNWERK

NEUNWERK

An interactive 911 hero where sixty years of design unfold under the cursor.

Cinderline

Cinderline

An editorial studio portfolio with bold typography, atmospheric case studies, and refined motion.

CoverFlow Carousel

CoverFlow Carousel

A perspective rail turns a sequence into a foreground moment.

Noctuary

Noctuary

Editorial landing for a fine-fragrance house, where scent becomes portable memory.

Intelligence Evolve

Intelligence Evolve

A cinematic cyber defense landing page built to detect, contain, and stay ahead.

ELLISON

ELLISON

Editorial architecture-studio landing with directional GSAP motion, smooth Lenis scrolling and a cinematic photo-cycling hero.

Interactive Carousel

Interactive Carousel

Five square field notes bend around the selected image.

Time Machine Stack

Time Machine Stack

A timeline pulls each memory forward without erasing the stack.

KIVRA

KIVRA

Modular architectural floor light: hinged panels that shape light around human presence.

From the blog

Guides

Guide Animated Website Backgrounds: CSS, Textures or Shaders? Read the guide Guide Text Reveal Effects: Keep the Message Understandable Without Motion Read the guide Guide Text on Hover: Readable Tooltips and Hover Text Effects Read the guide

Find the next design for your project

Browse every design in the HorizonX catalog, from UI kits and templates to textures, shaders and mockups.

Explore all designs Browse collections