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

Lotus Perfume

Lotus Perfume

Scroll-driven 3D perfume landing page: a lotus blooms on a stone in a pink sea, a ruby bottle rises and mists, then dives to an underwater showroom.

Bloom Widgets

Bloom Widgets

30 animated, interactive gradient widgets for health, weather, analytics, home and everyday. React, Motion and Tailwind CSS.

Sorvine

Sorvine

Dark AI landing page with particle hands that form, react to the pointer and morph across three scroll scenes.

Stillform

Stillform

A calm landing page for a creative residency, with a real-time 3D studio-table hero and smooth scroll-driven sections.

NOTARA Perfume Atelier

NOTARA Perfume Atelier

A landing page for a bespoke perfume atelier, with a page-opening reveal, scroll-driven sections and Lenis smooth scroll.

Vigil

Vigil

A five-chapter night passage through a fourteenth-century gatehouse, rendered live in WebGL.

KILN Studio Portfolio

KILN Studio Portfolio

Motion-led portfolio landing for a design and code studio, with curved sections and a 3D work stack.

OSKEN

OSKEN

A landing page for industrial design, CGI and motion studios, with a 3D project deck and a showreel driven by scroll.

Vallora Estate Landing Page

Vallora Estate Landing Page

Editorial landing for a family wine estate, where every vintage is a year you can pour.

NOLITH Freight Intelligence Hero

NOLITH Freight Intelligence Hero

A cinematic scroll-driven hero that turns freight movement into operational intelligence.

Apex Roadster

Apex Roadster

A cinematic automotive landing page engineered around motion, restraint, and electric performance.

Velto

Velto

SaaS landing page where every scroll animation is scrubbed and bidirectional: scroll back up and the reveal cleanly un-plays.

ASTRYN Crystal Hero

ASTRYN Crystal Hero

A cinematic crystal hero where editorial typography frames a living atmospheric centerpiece.

Velmont

Velmont

Cinematic editorial landing for a haute horlogerie atelier: watchmaking as couture-grade scroll experience.

Gallery Ring Interactive 3D Showcase

Gallery Ring Interactive 3D Showcase

A draggable 3D ring that orbits your work in space. Drag, scroll, or let it spin.

VOLTARA

VOLTARA

Electric mobility platform: vehicle, energy, and intelligence as one system.

PULSO

PULSO

High-energy fitness & recovery club landing with pinned card-fan choreography, scroll-scrubbed marquees and directional GSAP reveals.

TOLVA Roasters

TOLVA Roasters

Scroll-choreographed landing for a small-batch coffee roastery: warm-industrial editorial on matte black.

UI Motion Kit

UI Motion Kit

50 animated, accessible React components in one gallery app: overlays, navigation, forms, feedback, content, buttons and page transitions.

Animated Segmented Control

Animated Segmented Control

A row of options where the highlight slides to the one you pick, with the content below changing to match.

Animated Shared Element

Animated Shared Element

A thumbnail that grows into the header of its detail page and shrinks back when you return.

Animated Stepper

Animated Stepper

A step indicator where finished steps fill with a check and the connector line draws on to the next step.

Animated Context Menu

Animated Context Menu

A right-click menu that scales in right at the pointer, with a keyboard path for the same commands.

Animated Number Ticker

Animated Number Ticker

A number that counts up to its new value, while screen readers get only the final figure.

Animated Sortable Table

Animated Sortable Table

A table whose rows glide into their new order when you sort a column, with rows that expand for details.

Animated Command Palette

Animated Command Palette

A searchable command launcher that drops in with Cmd+K or Ctrl+K and filters as you type.

Animated Drawer

Animated Drawer

A bottom panel with a grab handle that rises into place and follows your finger when dragged down to dismiss.

Animated Collapsible Sidebar

Animated Collapsible Sidebar

A navigation sidebar that folds into a slim icon rail, with labels fading out and tooltips on the icons.

Animated Date Picker

Animated Date Picker

A date field with a calendar that pops open, slides between months and marks the chosen day.

Animated Dropdown Menu

Animated Dropdown Menu

A menu that opens from a button with a quick fade and slide, including a nested submenu.

Animated Image Lightbox

Animated Image Lightbox

A thumbnail that zooms from its own position into a full view, with arrows to move between images.

Animated Inline Banner

Animated Inline Banner

A message banner that slides in above the content and pushes it down, then collapses when dismissed.

Animated Sliding Tabs

Animated Sliding Tabs

Tabs whose active pill slides to the selected tab while the panel below crossfades.

Animated Card Expand

Animated Card Expand

A card that grows into a detail view from its own position and shrinks back when closed.

Animated Dropzone Upload

Animated Dropzone Upload

A file drop area that highlights when a file is dragged over it, then lists each file with its progress.

Animated Hamburger Menu

Animated Hamburger Menu

A mobile menu button that morphs into a close icon while the full menu slides down with staggered links.

Animated Loading Button

Animated Loading Button

A button whose label turns into a spinner while saving, then a check, then back to the label.

Animated One-Time Code Input

Animated One-Time Code Input

A verification code field split into slots, where focus moves as you type and a full code ends with a short pulse.

Animated Combobox

Animated Combobox

A text field with a suggestion list that drops in as you type, highlights matches and fills in the choice.

Animated Button Press

Animated Button Press

A button that dips slightly when pressed and shows a highlight from the point you clicked.

Animated Carousel

Animated Carousel

A slide carousel that moves with momentum on drag or arrows, with dots that follow along.

Animated Copy Confirm

Animated Copy Confirm

A copy button whose icon morphs into a check with a small Copied bubble, then returns.

Animated Filter Shuffle

Animated Filter Shuffle

A filterable card grid where the remaining cards glide into their new places as chips are toggled.

Animated Pull to Refresh

Animated Pull to Refresh

A list you pull down past a threshold to refresh, with a stretching indicator and a spinner.

Animated Scroll Reveal

Animated Scroll Reveal

Sections that fade up one after another as they scroll into view.

Animated Shrinking Header

Animated Shrinking Header

A page header that becomes compact and gains a shadow once you scroll past a threshold, without the page jumping.

Animated Like Burst

Animated Like Burst

A heart that fills with a small pop and a burst of particles while the count goes up by one.

Animated Sheet

Animated Sheet

A modal side panel that slides in from any edge while the page stays visible behind a soft backdrop.

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