Motion-Driven

Stylegeneral

Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions. Best for Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative,…

Animation-heavy microinteractions smooth transitions scroll effects parallax entrance anim page transitions

#22C55E

#EF4444

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Motion-Driven

Keywords: Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions
Primary colours: Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors
Secondary colours: Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback
Effects & animation: Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions
Best for: Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS
Do not use for: Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive

## Prompt keywords
Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer for scroll effects, transform for performance, GPU acceleration.

## CSS / technical
animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms

## Implementation checklist
☐ Scroll animations active, ☐ Parallax 3-5 layers, ☐ Entrance animations smooth, ☐ Page transitions fluid, ☐ GPU accelerated, ☐ Prefers-reduced-motion respected

## Design system variables
--animation-duration: 300-400ms, --parallax-layers: 5, --scroll-behavior: smooth, --gpu-accelerated: true, --entrance-animation: true, --page-transition: smooth

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source